/* ===== MEMORIAS DE UN PEREGRINO— CSS depurado =====
   Mantengo sólo lo necesario para esta página.
   Colores con buen contraste y layout responsive.
================================================= */

/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
:root{
  --page-bg:#ac1f23;
  --text-color:#ffffff;
  --accent-soft:#ffd4d4;
  --accent-warn:#ffdf6e;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}

body{
  margin:0;
  background: var(--page-bg);
  color: var(--text-color);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering: optimizeLegibility;
  font-size: clamp(16px, 0.9rem + 0.2vw, 18px);
}

.page{
  width:min(1100px,100%);
  margin-inline:auto;
  padding:24px clamp(16px, 3.2vw, 32px);
}

/* Enlaces accesibles */
a{ color: var(--text-color); text-underline-offset: 3px; text-decoration-thickness: from-font; }
a:hover{ text-decoration-thickness: 3px; }
a:focus-visible{
  outline: 3px solid var(--accent-warn);
  outline-offset: 3px;
  text-decoration: none;
}

/* Header & Footer */
header, footer{
  text-align: center;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.logo{
  max-width: 480px;
  width: min(60vw, 480px);
  margin: 0 auto;
}

/* Reset figura */
figure{ margin:0; }

/* ===== Layout principal (antes en <style>) ===== */
.main-row{
  display:grid;
  grid-template-columns: 20% 60% 20%; /* columnas centradas 20-60-20 */
  gap: clamp(14px, 2.4vw, 26px);
  align-items: center; /* centrado vertical */
}

/* Columna 1: grilla de imágenes */
.col-1{ display:grid; grid-template-rows: repeat(6, auto); gap:6px; }
.col-1 img{ width:100%; height:auto; /* mantiene proporción */ object-fit:cover; border-radius:6px; }

/* Columna 2: texto y créditos */
.col-2{ display:grid; grid-template-rows: repeat(4, auto); gap:6px; }
.fila{ min-height:80px; padding:8px; }

/* Fila 1 más compacta */
.col-2 .fila-1{ text-align:center; line-height:1.35; padding-block:10px; }
.credit{ margin:4px 0; }
.credit .role{ opacity:.9; }
.credit .name{ font-weight:800; }
.credit .sep{ margin:6px auto; line-height:1; }

/* Más aire en filas 2 y 3 */
.col-2 .fila-2,
.col-2 .fila-3{ padding-block:18px; }

/* Créditos fila 5 */
.col-2 .fila-5{
  text-align:center;
  margin-top: 2em; /* separación clara */
}

/* Créditos fila 6 (centrado añadido) */
.col-2 .fila-6{
  text-align:center;
}

/* Columna 3: imagen lateral */
.col-3{ display:grid; align-content:center; }
.col-3 figure{ margin:0; }
.col-3 img{
  width:100%;
  height:auto;
  border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  display:block;
}

/* Footer text */
.footer-text{ margin: .5rem 0 0; }

/* ===== Responsive ===== */
@media (max-width: 900px){
  .main-row{ grid-template-columns: 1fr; }
  .col-1, .col-2{ grid-template-rows: none; }
  .col-3{ align-content:start; }
}
/* === Ajustes solicitados === */
.view-link {
  font-size: 0.7em;       /* Reduce tamaño del texto a la mitad */
  text-align: center;     
  margin-top: 0;
}

.view-link a {
  font-size: 0.9em;       /* Ligeramente mayor que el texto base */
  word-break: break-all;  /* Evita desbordamiento en móviles */
}

@media (max-width: 600px){
  h1.title{
    letter-spacing: 0.08em;
  }
}