/* ---------- Base ---------- */
:root {
  --bg: #0b0b0c;
  --bg-alt: #141416;
  --bg-raise: #1b1b1e;
  --text: #ede9e3;
  --text-dim: #a8a29a;
  --accent: #b3261e;
  --accent-bright: #d94a3f;
  /* rojo de sala para la banda del cierre. Único campo de color de la página,
     y por eso puede permitirse fuerza: dentro de la banda no hay ni un solo
     acento rojo más. Sube desde el granate apagado del primer intento, que se
     quedaba en marrón; el tono se mantiene por debajo del --accent para que
     lea como fondo y no como botón gigante. */
  --bg-cierre: #6e2118;
  --line: rgba(237, 233, 227, 0.12);
  --line-strong: rgba(237, 233, 227, 0.24);
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Oswald", "Arial Narrow", sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  /* medida única del texto corrido: subirla aquí arrastra también la bio del
     autor, el libro, colaboraciones y memoria, que heredan de body */
  font-size: 20px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo, .btn, nav a, .kicker, .eyebrow, label, .stat-num, .stat-label {
  font-family: var(--sans);
  letter-spacing: 0.02em;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* film grain overlay */
.grain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); }

.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-outline:hover { border-color: var(--text); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
  padding: 12px 22px;
}
.btn-ghost:hover { border-color: var(--text); }

.btn-block { width: 100%; text-align: center; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  background: linear-gradient(to bottom, rgba(11,11,12,0.92), rgba(11,11,12,0));
  backdrop-filter: blur(4px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}
.logo {
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo span {
  font-family: var(--serif);
  font-size: 11px;
  font-style: italic;
  font-weight: 400;
  color: var(--text-dim);
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav a {
  text-decoration: none;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  transition: color 0.2s ease;
}
.site-nav a:hover { color: var(--text); }
/* en qué página estás: el menú es ahora navegación real entre páginas,
   no un índice de anclas, y sin esto todas las entradas pesan igual */
.site-nav a[aria-current="page"] { color: var(--text); }
.nav-cta {
  border: 1px solid var(--line-strong);
  padding: 8px 16px;
  color: var(--text) !important;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  /* separado del resto del menú: es un control de la página, no una sección */
  padding-left: 6px;
}
.lang-switch a {
  font-size: 12px;
  color: var(--text-dim);
  opacity: 0.7;
}
.lang-switch a:hover { opacity: 1; }
.lang-switch a.is-active {
  color: var(--text);
  opacity: 1;
  font-weight: 600;
}
.lang-sep { color: var(--text-dim); opacity: 0.4; }

/* ---------- El logo entra al dejar atrás el hero (solo en la home) ----------
   Arriba del todo OKRAYINA salía dos veces: enorme en el hero y pequeño en
   la cabecera. El pequeño sobra ahí, así que arranca invisible y aparece
   cuando el hero se va.
   Se queda a la izquierda a propósito: centrarlo lo metía 69px por dentro
   del menú, porque con seis entradas más el selector de idioma el eje de
   la página cae ya dentro de la navegación. */
/* ---------- Home en escritorio: la cabecera cambia en la línea de prensa ----------
   Arriba del todo no cambia nada: logo a la izquierda con su subtítulo y la
   barra a la derecha, como en el resto del sitio. Al llegar a "cobertura
   periodística publicada en", el nombre se va al centro —solo OKRAYINA— y la
   barra se recoge en una pestaña pegada al canto derecho.
   Todo esto vive dentro del media query: en móvil no pasa nada, se queda la
   hamburguesa de siempre arriba. */
.tab-menu { display: none; }

@media (min-width: 881px) {
  .home .site-header.tras-hero .header-inner {
    display: grid;
    /* la columna explícita es necesaria: sin ella hereda el
       justify-content: space-between del flex y la pista se encoge al
       ancho del contenido, centrando sobre el eje equivocado */
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .home .site-header.tras-hero .logo {
    align-items: center;
    text-align: center;
    animation: entrar-logo 0.35s ease both;
  }
  /* en el centro va el nombre y nada más */
  .home .site-header.tras-hero .logo span { display: none; }

  /* la barra se retira a un cajón lateral que abre la pestaña */
  .home .site-header.tras-hero .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 320px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 40px 32px;
    background: var(--bg-alt);
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 510;
  }
  .home .site-header.tras-hero .site-nav.is-open { transform: translateX(0); }

  /* La transición de arriba existe para abrir y cerrar el cajón. Al entrar en
     tras-hero también se interpolaba el translateX(100%) inicial, así que el
     panel se pintaba en pantalla y se deslizaba fuera: una mancha oscura por
     la derecha que parecía un fallo. main.js pone esta clase durante el
     cambio y la quita al fotograma siguiente. */
  .home .site-header.tras-hero .site-nav.sin-transicion { transition: none; }

  .home .site-header.tras-hero .tab-menu {
    display: flex;
    animation: entrar-pestanya 0.35s ease both;
  }
}

/* La pestaña: pegada al canto derecho, con la hamburguesa dentro.
   Antes ponía "Menú" girado 90º: hay que ladear la cabeza para leerlo y no
   se reconoce de un vistazo. Tres rayas blancas se entienden sin leer nada
   y son el mismo gesto que ya hay en móvil. */
.tab-menu {
  position: fixed;
  /* en vh, no en %: el backdrop-filter de la cabecera la convierte en
     bloque contenedor de sus hijos fijos, así que un 50% se mediría contra
     los 76px del header y la pestaña se pegaría arriba */
  top: 50vh;
  right: 0;
  z-index: 515;
  transform: translateY(-50%);
  /* el display lo pone la regla de tras-hero: aquí sigue oculta */
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 16px 13px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-right: none;
  border-radius: 3px 0 0 3px;
  background: rgba(20, 20, 22, 0.92);
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.tab-menu span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.tab-menu:hover { background: var(--accent); border-color: var(--accent); }
/* abierta, las rayas se cruzan: la misma pestaña cierra el cajón */
.tab-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tab-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tab-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@keyframes entrar-logo {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@keyframes entrar-pestanya {
  from { opacity: 0; transform: translate(14px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}
@media (prefers-reduced-motion: reduce) {
  .home .site-header.tras-hero .logo,
  .home .site-header.tras-hero .tab-menu { animation: none; }
  .home .site-header.tras-hero .site-nav { transition: none; }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  position: relative;
  z-index: 520;
}
.nav-toggle span {
  width: 22px;
  height: 2px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(179,38,30,0.16), transparent 55%),
    linear-gradient(180deg, #0b0b0c 0%, #121213 70%, #0b0b0c 100%);
}
.hero-lines {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image:
    repeating-linear-gradient(115deg, rgba(237,233,227,0.05) 0px, rgba(237,233,227,0.05) 1px, transparent 1px, transparent 90px),
    repeating-linear-gradient(25deg, rgba(237,233,227,0.04) 0px, rgba(237,233,227,0.04) 1px, transparent 1px, transparent 140px);
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 90px;
}
.eyebrow {
  color: var(--accent-bright);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 20px;
}
.hero-title {
  font-size: clamp(56px, 12vw, 148px);
  font-weight: 700;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 0.95;
}
.hero-subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 3vw, 28px);
  color: var(--text-dim);
  margin: 14px 0 34px;
}
.hero-tagline {
  max-width: 700px;
  margin: 0 auto 42px;
  color: var(--text-dim);
  font-size: 20px;
}
.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-press {
  margin-top: 48px;
}
.hero-press-label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  opacity: 0.7;
  margin-bottom: 18px;
}
.hero-press-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}
.hero-press-logos img {
  height: 22px;
  width: auto;
  opacity: 0.65;
  transition: opacity 0.25s ease;
}
.hero-press:hover img { opacity: 1; }

/* Cada logo tiene proporciones muy distintas (wordmark largo vs. isotipo
   compacto) - se ajusta la altura de cada uno a mano para que el peso
   visual sea parecido entre todos, en vez de una altura uniforme. */
.hero-press-logos img.logo-telegraph { height: 27px; }
.hero-press-logos img.logo-confidencial { height: 19px; }
.hero-press-logos img.logo-guardian { height: 30px; }
.hero-press-logos img.logo-cnn { height: 23px; }
.hero-press-logos img.logo-diezeit { height: 22px; }
.hero-press-logos img.logo-kyivindependent { height: 30px; }
.logo-aljazeera {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-press-logos img.logo-aljazeera-icon { height: 41px; }
.hero-press-logos img.logo-aljazeera-text { height: 14px; }

.scroll-cue {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  z-index: 2;
}
.scroll-cue span {
  position: absolute;
  top: 6px; left: 50%;
  width: 3px; height: 8px;
  background: var(--text-dim);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollcue 1.8s infinite ease;
}
@keyframes scrollcue {
  0% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 0; transform: translate(-50%, 14px); }
  100% { opacity: 0; }
}

/* ---------- Section shared ---------- */
section { padding: 120px 0; position: relative; }
.kicker {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent-bright);
  margin: 0 0 14px;
}
.section-title {
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 600;
  margin: 0 0 20px;
  line-height: 1.1;
}
.section-lead {
  color: var(--text-dim);
  max-width: 680px;
  font-size: 20px;
  margin-bottom: 20px;
}
.section-lead em { color: var(--text-dim); opacity: 0.75; }

/* ---------- Foto de apertura ---------- */
.hero-photo {
  padding: 0;
  height: auto;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* ---------- Statement ---------- */
.statement { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.statement-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 3.6vw, 36px);
  font-weight: 400;
  line-height: 1.4;
  max-width: 900px;
  margin: 0 0 56px;
  padding-left: 24px;
  border-left: 3px solid var(--accent);
  color: var(--text);
}
/* Columnas periodísticas, no rejilla: el texto FLUYE de una a otra, así que
   un párrafo puede empezar en la izquierda y terminar en la derecha. El
   navegador equilibra ambas columnas a la misma altura, que es lo que da el
   bloque rectangular; con rejilla cada párrafo quedaba encerrado en su
   columna y el más corto dejaba el hueco muerto. */
/* Un bloque, el texto; el siguiente, el mapa. Antes iban lado a lado en
   columnas periodísticas estrechas; ahora el texto lee de un tirón, a todo
   el ancho, y el mapa respira después como su propio bloque. */
.fronteras-intro {
  margin-bottom: 64px;
}
.statement-grid {
  columns: 1;
  margin-bottom: 48px;
}

/* ---------- Mapa de Ucrania ---------- */
.mapa { margin: 0; }
.mapa-svg { width: 100%; height: auto; overflow: visible; }
.mapa-linea {
  fill: rgba(237, 233, 227, 0.03);
  stroke: var(--line-strong);
  stroke-width: 2;
  stroke-linejoin: round;
}
.mapa figcaption {
  margin-top: 16px;
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  opacity: 0.7;
}

/* Los puntos respiran en ciclos largos y desfasados: brasas, no radar.
   Nunca se apagan del todo, para que no se lea como un parpadeo de alerta. */
.mapa-ciudad { cursor: help; }
.mapa-halo {
  fill: var(--accent-bright);
  opacity: 0;
  animation: mapa-respirar-halo 6s ease-in-out infinite;
  animation-delay: var(--retraso, 0s);
}
.mapa-punto {
  fill: var(--accent-bright);
  opacity: 0.5;
  animation: mapa-respirar-punto 6s ease-in-out infinite;
  animation-delay: var(--retraso, 0s);
  transition: opacity 0.2s ease;
}
/* Pico bajo a propósito: en el Donbás hay una decena de halos superpuestos y
   sus opacidades se suman, así que lo que en un punto suelto es un resplandor
   discreto allí se convertía en una mancha continua. */
@keyframes mapa-respirar-halo {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.15; }
}
@keyframes mapa-respirar-punto {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
.mapa-ciudad:hover .mapa-punto { opacity: 1; }

/* Quien haya pedido menos movimiento ve los puntos fijos y encendidos */
@media (prefers-reduced-motion: reduce) {
  .mapa-halo, .mapa-punto { animation: none; }
  .mapa-punto { opacity: 1; }
  .mapa-halo { opacity: 0.16; }
}
/* sin font-size propio: hereda el del body, que es la medida única
   del texto corrido en toda la página */
/* orphans/widows a 1: por defecto el navegador no deja una línea suelta al
   pie de una columna, y por esa regla se negaba a partir el segundo párrafo,
   dejándolo entero en la derecha y desnivelando el bloque. Permitiéndolo,
   el párrafo arranca en la izquierda y termina en la derecha. */
.statement-grid p {
  color: var(--text-dim);
  margin: 0 0 24px;
  orphans: 1;
  widows: 1;
}
.statement-grid p:last-child { margin-bottom: 0; }
.statement-edu {
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1.65;
  max-width: none;
  margin: 0 0 64px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.stat {
  display: flex;
  flex-direction: column;
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.stat:first-child {
  padding-left: 0;
  border-left: none;
}
.stat-num {
  font-size: clamp(48px, 5.4vw, 77px);
  font-weight: 700;
  color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-top: 8px;
}

/* ---------- Fronteras ---------- */
.fronteras-block {
  margin-top: 80px;
  padding-top: 80px;
  border-top: 1px solid var(--line);
}
.fronteras-teaser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.teaser-photo {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
}
.teaser-photo img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.teaser-photo:hover img { transform: scale(1.04); }

/* ---------- Cierre del proyecto: exposición · libro · educación ----------
   Deliberadamente sin fotografía: después de las imágenes toca la
   arquitectura del proyecto. El guion de cada apartado es una regla real
   sobre la columna, no un carácter de texto. */
.fronteras-outro {
  margin-top: 88px;
  padding-top: 72px;
  border-top: 1px solid var(--line);
}
.fronteras-outro-lead {
  font-style: italic;
  font-size: clamp(24px, 3.2vw, 32px);
  line-height: 1.35;
  color: var(--text);
  max-width: 620px;
  margin: 0 0 56px;
}
.outro-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}
.outro-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
  transition: border-color 0.25s ease;
}
.outro-link:hover { border-top-color: var(--accent-bright); }
.outro-link-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
}
.outro-link p {
  color: var(--text-dim);
  font-size: 17px;
  margin: 12px 0 22px;
  /* empuja el enlace al fondo para que los tres "Descubrir" queden
     alineados aunque los textos tengan distinto largo */
  flex: 1;
}
.outro-link-cta {
  font-family: var(--sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  transition: transform 0.25s ease;
}
.outro-link:hover .outro-link-cta { transform: translateX(4px); }

/* En las subpáginas el cierre muestra solo los otros caminos, así que la
   rejilla se ajusta al número real de apartados en vez de dejar un hueco. */
.outro-links[data-items="2"] { grid-template-columns: repeat(2, 1fr); }

/* ---------- Los tres caminos: la versión de la home ----------
   Exposición, libro y educación son lo que el proyecto ofrece, pero venían
   colgando del bloque de las 7 fronteras con los nombres a 13px: pesaban
   menos que las dos puertas de "Colabora", que son secundarias. Aquí pasan a
   sección propia con banda de fondo, y el tamaño se lo da la tipografía.

   Deliberadamente SIN las cajas ni el filete rojo de .colabora-puerta, que
   viene justo después: dos secciones seguidas con el mismo tratamiento se
   leen como una sola y la página deja de avanzar. Aquí todo es abierto y
   desaturado —numerales y reglas neutras— y el rojo queda reservado para el
   cierre, que es donde se pide la acción. La página va de menos a más.
   Sigue sin fotografía a propósito: después de las imágenes toca la
   arquitectura del proyecto. */
/* Sobre el fondo base, no sobre banda: .statement (las 7 fronteras) ya es una
   banda --bg-alt, así que repetirla aquí las fundía en un solo bloque. El
   orden de la página queda: negro · banda gris · negro · granate. */
.caminos {
  padding: 104px 0 112px;
}
/* dentro de la banda ya no hace falta el filete que la separaba antes */
.caminos .fronteras-outro {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.caminos .fronteras-outro-lead {
  font-size: clamp(30px, 4vw, 44px);
  max-width: 760px;
  margin-bottom: 60px;
}
.caminos .outro-links {
  gap: 52px;
  counter-reset: camino;
}
/* sin caja: solo el filete rojo cruzando la columna. El acento vive aquí,
   sobre negro, que es donde separa; en la banda del cierre sería redundante
   porque allí el rojo ya es el fondo. */
.caminos .outro-link {
  counter-increment: camino;
  padding-top: 22px;
  border-top: 2px solid var(--accent);
}
.caminos .outro-link:hover { border-top-color: var(--accent-bright); }
/* 01 · 02 · 03: el ritmo y el orden de lectura los da el número, no el color */
.caminos .outro-link::before {
  content: counter(camino, decimal-leading-zero);
  font-family: var(--sans);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text-dim);
  opacity: 0.45;
  margin-bottom: 18px;
  transition: opacity 0.25s ease;
}
.caminos .outro-link:hover::before { opacity: 0.8; }
.caminos .outro-link-label {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.15;
}
.caminos .outro-link p { margin: 14px 0 26px; }

/* ---------- Subpáginas ----------
   La home arranca con el hero a pantalla completa; aquí no hay nada que
   absorba la cabecera fija, así que la primera sección se separa a mano. */
.subpagina main > section:first-child { padding-top: 180px; }
.subpagina-cierre .fronteras-outro {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.frontera-num {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent-bright);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.frontera-memoria {
  margin-top: 48px;
  padding: 40px 36px;
  background: linear-gradient(160deg, rgba(179,38,30,0.16), rgba(179,38,30,0.03) 70%);
  border: 1px solid var(--line);
  transition: background 0.25s ease;
}
.frontera-memoria:hover {
  background: linear-gradient(160deg, rgba(179,38,30,0.22), rgba(179,38,30,0.05) 70%);
}
.frontera-memoria .frontera-num {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.frontera-memoria h3 {
  font-size: 26px;
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 600;
}
.frontera-memoria p { color: var(--text-dim); margin: 0; max-width: 640px; }

/* ---------- Autor ---------- */
/* Comparte fondo con la sección del libro, que ahora va justo encima:
   sin esta línea las dos se leerían como un único bloque continuo. */
.autor { background: var(--bg-alt); border-top: 1px solid var(--line); }
.autor-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: center;
}
.autor-media {
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, #1b1b1e, #0b0b0c 70%);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.autor-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media-label {
  color: var(--text-dim);
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.autor-role {
  color: var(--accent-bright);
  font-family: var(--sans);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.1em;
  margin: -8px 0 20px;
}
.autor-copy p { color: var(--text-dim); }
.credentials {
  list-style: none;
  padding: 0;
  margin: 24px 0 30px;
  display: grid;
  gap: 10px;
}
.credentials li {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.02em;
  padding-left: 18px;
  position: relative;
  color: var(--text);
}
.credentials li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 1px;
  background: var(--accent-bright);
}

/* ---------- Expo ---------- */
.expo-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 48px 0 40px;
}
.spec-card {
  background: var(--bg);
  padding: 28px;
}
.spec-card h3 {
  font-family: var(--sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  margin: 0 0 10px;
}
.spec-card p { color: var(--text-dim); font-size: 15px; margin: 0; }
.expo-note {
  font-size: 20px;
  color: var(--text-dim);
}
.expo-note a { color: var(--accent-bright); text-decoration: underline; }

/* ---------- Libro ---------- */
.libro { background: var(--bg-alt); }
.libro-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 64px;
  align-items: center;
}
.libro-cover { display: flex; justify-content: center; }
.cover-image {
  width: 260px;
  aspect-ratio: 2/3;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
}
.cover-mock {
  width: 260px;
  aspect-ratio: 2/3;
  background: linear-gradient(155deg, #17171a 0%, #0a0a0b 100%);
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 60px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 22px;
}
.cover-kicker {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--accent-bright);
}
.cover-title {
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}
.cover-author {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-dim);
}
.libro-copy p { color: var(--text-dim); }
.libro-details {
  list-style: none;
  padding: 0;
  margin: 26px 0 34px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.libro-details li {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 10px;
}
.libro-details li span {
  font-family: var(--sans);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.libro-details li em { color: var(--text-dim); font-style: italic; }

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.form-row input {
  flex: 1;
  min-width: 220px;
}
.form-note {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 12px;
}

/* form fields shared */
input, textarea, select {
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  color: var(--text);
  padding: 13px 16px;
  font-family: var(--serif);
  font-size: 15px;
  border-radius: 2px;
  outline: none;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent-bright);
}
select { appearance: none; }

/* ---------- Partners ---------- */
.partners-head { margin-bottom: 56px; }

.partner-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 72px;
}
.path-card {
  background: var(--bg);
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  transition: background 0.25s ease;
}
.path-card:hover { background: var(--bg-raise); }
/* el header es fijo (79px): quien llega desde la home a #acoger o
   #patrocinar tiene que ver el título de la ficha, no quedar debajo */
.path-card[id] { scroll-margin-top: 110px; }
.path-num {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent-bright);
  margin-bottom: 12px;
}
.path-card h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 12px;
}
.path-card > p {
  color: var(--text-dim);
  font-size: 20px;
  margin: 0 0 24px;
}
.path-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 10px;
  /* empuja el CTA al fondo para que ambas tarjetas lo alineen aunque
     tengan distinto número de puntos */
  flex: 1;
  align-content: start;
}
.path-list li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  color: var(--text-dim);
}
.path-list li::before {
  content: "";
  position: absolute;
  /* en em, no en px: la raya se recoloca sola cuando cambia el cuerpo de
     letra, que no es el mismo en el desvío que en la página de cada vía */
  left: 0; top: 0.8em;
  width: 8px; height: 1px;
  background: var(--accent-bright);
}
.path-cta {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 13px 24px;
  width: auto;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.path-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- Vía única: acoger o patrocinar ----------
   Cada vía tiene página propia. Aquí no hay que elegir nada, así que la
   ficha va sin numeral, sin recuadro y a una sola columna de lectura. */
.via-detalle {
  max-width: 640px;
  margin-bottom: 48px;
}
.via-detalle .path-list { margin-bottom: 0; gap: 16px; }
/* En el desvío la lista es un resumen dentro de una tarjeta; aquí es el
   contenido de la página, así que sube casi al cuerpo del texto corrido. */
.via-detalle .path-list li {
  font-size: 19px;
  padding-left: 22px;
}

/* El acceso a la otra vía existe, pero deliberadamente en segundo plano:
   quien ya ha elegido no debe volver a dudar. */
.via-alterna {
  margin-top: 40px;
  color: var(--text-dim);
  font-size: 15px;
}
.via-alterna a {
  color: var(--accent-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 74, 63, 0.35);
  transition: border-color 0.2s ease;
}
.via-alterna a:hover { border-bottom-color: var(--accent-bright); }

/* En el desvío los caminos son enlaces, no botones */
a.path-cta {
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.partners-contact {
  max-width: 620px;
  margin: 0 auto;
}
.partners-direct {
  margin-top: 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 15px;
}
.partners-direct a {
  color: var(--accent-bright);
  text-decoration: underline;
}
.partners-form {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  padding: 32px;
  display: grid;
  gap: 18px;
}
.field { display: grid; gap: 8px; }
.field label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

/* ---------- Colabora: cierre de la home ----------
   La home no pide datos: enuncia y abre dos puertas. El detalle de cada
   vía y el formulario viven en /colabora/, donde llega quien ya ha
   decidido. Centrado porque es un cierre, y porque enlaza con el pie. */
/* La banda granate: único campo de color de la página, y va aquí porque es
   donde se pide algo. El resto del sitio es negro y fotografía; que el color
   aparezca una sola vez, al final, hace que el cierre se lea como un cambio
   de sala y no como un banner más. */
/* El degradado no es decoración: un granate plano se lee como una muestra de
   color pegada al final. Oscureciendo hacia abajo la banda gana cuerpo y el
   texto de arriba queda sobre la zona más viva. */
.colabora-cta {
  background: linear-gradient(180deg, #81291c 0%, var(--bg-cierre) 45%, #4c1710 100%);
  border-top: 1px solid rgba(237, 233, 227, 0.14);
  padding: 112px 0 132px;
}
.colabora-cta-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
/* Dentro de la banda no queda ni un acento rojo: el filete de las puertas, el
   kicker y el correo pasan a crema. Sobre un campo de color, más rojo no
   destaca, ensucia. Todo el contraste lo hace ahora la luz. */
/* rellenas, no perfiladas: dos contornos vacíos sobre un campo de color se
   quedan en dibujo. Con el fondo hundido pasan a ser objetos apoyados en la
   banda, y la sección deja de ser plana. */
.colabora-cta .colabora-puerta {
  background: rgba(0, 0, 0, 0.26);
  border-color: rgba(237, 233, 227, 0.22);
  border-top-width: 1px;
  padding: 34px 26px;
}
.colabora-cta .colabora-puerta:hover {
  background: rgba(0, 0, 0, 0.42);
  border-color: rgba(237, 233, 227, 0.55);
}
.colabora-cta .colabora-puerta-titulo::after { color: var(--text); }
/* Sin kicker: "Colaboraciones" no decía nada que no dijeran ya el título y las
   dos puertas, y metía un tercer nivel de texto en el bloque que más directo
   tiene que ser. El título ocupa ahora la franja más viva del degradado. */
/* el gris neutro del resto del sitio se enturbia sobre un fondo cálido: aquí
   la entradilla pasa a crema, que es la temperatura de la banda, y sube un
   punto de cuerpo. Es la única línea que dice qué se pide y a quién. */
.colabora-cta .section-lead {
  color: rgba(237, 233, 227, 0.9);
  font-size: 21px;
}
/* es el clímax de la página: aquí el título puede pesar más que en el resto
   de secciones, que es lo que le faltaba a la banda para tener jerarquía */
.colabora-cta .section-title {
  font-size: clamp(38px, 5.6vw, 60px);
  margin-bottom: 24px;
}
.colabora-cta .colabora-cta-inner { max-width: 760px; }
.colabora-cta .colabora-cta-directo { color: rgba(237, 233, 227, 0.72); }
.colabora-cta .colabora-cta-directo a {
  color: var(--text);
  text-decoration-color: rgba(237, 233, 227, 0.45);
}
.colabora-cta-inner .section-lead {
  max-width: none;
  margin: 0 0 40px;
  text-wrap: balance;
}
/* dos puertas, no dos botones: cada una nombra a quién va dirigida en una
   línea. Es la versión comprimida de las fichas de /colabora/, dentro del
   mismo ancho del bloque para que el cierre no vuelva a crecer */
.colabora-cta-puertas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  text-align: center;
}
.colabora-puerta {
  display: grid;
  gap: 9px;
  align-content: center;
  padding: 30px 26px;
  /* el rojo va concentrado en el filete superior y el resto del contorno se
     queda neutro: color de la casa sin que la caja parezca un aviso */
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  text-decoration: none;
  color: var(--text);
  transition: background 0.25s ease, border-color 0.25s ease;
}
/* longhands uno a uno: mezclar el atajo border-color con var() y luego
   pisar border-top-color deja el bloque inservible en algunos motores */
.colabora-puerta:hover {
  background: var(--bg-raise);
  border-top-color: var(--accent-bright);
  border-right-color: var(--line-strong);
  border-bottom-color: var(--line-strong);
  border-left-color: var(--line-strong);
}

/* Alternativa guardada (variante C): contorno completo en rojo al 42%, sin
   filete. Para volver a ella, cambiar las dos declaraciones de borde de
   .colabora-puerta por  border: 1px solid rgba(217, 74, 63, 0.42);  y el
   hover por  border-color: var(--accent-bright); */
.colabora-puerta-titulo {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 600;
}
.colabora-puerta-nota {
  color: var(--text-dim);
  /* subía desde 14px: quedaba muy por debajo de los 20px del texto corrido
     y el cierre de la página se leía como letra pequeña */
  font-size: 17px;
  line-height: 1.45;
  text-wrap: balance;
}
/* la flecha aparece al acercarse: la caja entera ya es el enlace */
.colabora-puerta-titulo::after {
  content: " →";
  color: var(--accent-bright);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.colabora-puerta:hover .colabora-puerta-titulo::after { opacity: 1; }
.colabora-cta-directo {
  margin: 36px 0 0;
  color: var(--text-dim);
  font-size: 18px;
}
.colabora-cta-directo a {
  color: var(--accent-bright);
  text-decoration: underline;
}

/* ---------- Footer ---------- */
/* ---------- Pie ----------
   Colofón, no cajón de sastre: al final de una página larga es el único
   punto donde se puede seguir navegando, así que lleva el mapa del sitio
   entero. El correo va suelto y en color porque es la acción, no un
   enlace más de una lista. */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 76px 0 32px;
  background: var(--bg);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
}

/* mapa del sitio en una sola línea: al pie de ocho páginas hace falta
   una salida, pero sin volver a montar columnas */
.footer-mapa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.footer-mapa a {
  font-family: var(--sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-mapa a:hover { color: var(--text); }

/* el lema es la firma del sitio, no un bloque de contenido: sin caja ni
   fondo, cierra en voz baja después del formulario en lugar de competir
   con él */
.footer-lema {
  margin: 0;
  max-width: 560px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.85;
  /* sin caja, la frase se parte sola: balance reparte las dos líneas y
     evita que "libertad" caiga huérfana */
  text-wrap: balance;
}

.footer-redes {
  display: flex;
  /* el hueco visible entre iconos lo dan el gap y el relleno de cada
     enlace: 6 + 11 + 11 = 28px, con una zona táctil de 43px por icono */
  gap: 6px;
  align-items: center;
}
.footer-redes a {
  display: flex;
  padding: 11px;
  color: var(--text-dim);
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-redes a:hover { color: var(--text); transform: translateY(-2px); }
.footer-redes svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  display: block;
}

/* Solo en las subpáginas: la home ya tiene el correo al pie del
   formulario, y repetirlo dos veces seguidas lo devaluaba. Aquí no hay
   formulario, así que es la única dirección de la página. */
.footer-mail {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--accent-bright);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(217, 74, 63, 0.35);
  transition: border-color 0.2s ease;
}
.footer-mail:hover { border-bottom-color: var(--accent-bright); }

.footer-copy {
  width: 100%;
  margin: 6px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-dim);
  opacity: 0.75;
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .autor-grid,
  .libro-grid,
  .partner-paths {
    grid-template-columns: 1fr;
  }
  .autor-media { max-width: 320px; }
  section { padding: 80px 0; }

  /* en móvil las dos puertas se apilan y se aprietan un poco */
  .colabora-cta-puertas { grid-template-columns: 1fr; gap: 12px; }
  .colabora-puerta { padding: 22px 20px; }

  .site-footer { padding-top: 60px; }
  .footer-inner { gap: 26px; }
  .footer-lema { font-size: 14px; }
  .footer-mapa { gap: 10px 18px; }
  .footer-mapa a { font-size: 13px; }

  .hero-photo {
    padding: 0;
    height: auto;
    aspect-ratio: 5 / 4;
    min-height: 0;
    max-height: none;
  }
  .hero-photo img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  .fronteras-teaser { grid-template-columns: 1fr; gap: 12px; }
  .frontera-memoria { padding: 32px 24px; }
  /* en columna los tres apartados se leen como una lista, que es justo
     la forma que tenían en el esquema original */
  .outro-links { grid-template-columns: 1fr; gap: 32px; }
  .fronteras-outro { margin-top: 64px; padding-top: 56px; }
  .fronteras-outro-lead { margin-bottom: 40px; }
  .caminos { margin-top: 64px; padding: 56px 0 64px; }
  .caminos .outro-links { gap: 36px; }
  .caminos .fronteras-outro-lead { margin-bottom: 40px; }
  .caminos .outro-link { padding-top: 20px; }
  .caminos .outro-link::before { font-size: 28px; margin-bottom: 14px; }
  .caminos .outro-link-label { font-size: 27px; }

  .stat-row { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .stat:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .stat:nth-child(n+3) {
    padding-left: 0;
    padding-top: 24px;
    border-left: none;
    border-top: 1px solid var(--line);
  }

  /* La hamburguesa al canto izquierdo, que es donde llega el pulgar, y el
     nombre centrado en el eje de la página. Aquí sí cabe centrado —el
     problema de escritorio era la barra de seis entradas, y en móvil esa
     barra vive en un cajón fuera del flujo—, así que se queda en el medio
     todo el rato, sin saltos al bajar.
     Rejilla de tres pistas en vez de flex: la del medio se centra sola y la
     tercera, vacía, compensa el ancho del botón. */
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .nav-toggle {
    display: flex;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  .logo {
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    text-align: center;
  }

  .site-nav {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 78vw;
    max-width: 320px;
    background: var(--bg-alt);
    /* el cajón entra por el mismo lado desde el que se abre */
    border-right: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    padding: 40px 32px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 510;
  }
  .site-nav.is-open { transform: translateX(0); }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}