/* ══════════════════════════════════════════════════════════════
   EXPEDICIÓN VERNE — Páginas de escala (una sección cada una)
   ──────────────────────────────────────────────────────────────
   Hoja propia de las cuatro páginas que despliegan, en papel y sin
   relato, lo que en la bitácora es un acto del scroll:

     /expedicion  → el manifiesto      (era #manifiesto)
     /fases       → las cinco etapas   (era #ruta)
     /recursos    → el Kit             (era #kit)
     /preguntas   → el FAQ             (era #faq)

   NO carga `styles.css` — igual que el formulario, y por el mismo
   motivo: aquello son 6.000 líneas de scroll-telling (pins,
   timelines, capas paper-cut) de las que aquí no se usa ni una.
   Lo común —fuente, tokens, reset, grano, skip-link— vive en
   `css/base.css`, que esta hoja DA POR CARGADO.

   Estas páginas son de LECTURA, no de relato: cero GSAP, cero
   Lenis, cero canvas, cero JS. Se abren y se leen. Lo único que se
   mueve es un hover y un <details> nativo.

   ⚠️ La bitácora (`index.html`) NO usa esta hoja: su barra, su
   tipografía de sección y su pie siguen siendo los suyos, intactos.
   Aquí se reconstruye el mismo lenguaje visual con clases propias
   (`e-`) para no tocar una sola regla de las que ya existen.
   ══════════════════════════════════════════════════════════════ */

/* Sobre papel el ámbar no marca (1.9:1 contra `--papel`): el anillo
   de foco pasa a tinta en toda la página, como en el formulario. */
:focus-visible { outline-color: var(--marino); }

body { --barra-alto: 3.75rem; }

/* ══════════ BARRA ══════════
   Estática y tonta a propósito: la píldora que sigue al puntero en
   la bitácora la mueve GSAP, y aquí no hay GSAP. En qué escala
   estás lo dice `aria-current="page"`, que además lo dice también
   al lector de pantalla — cosa que la píldora no hace. */
/* En móvil la barra va en DOS FILAS: la co-marca arriba y el índice
   entero debajo, a todo el ancho. En una sola fila los cuatro rótulos
   no caben junto al logo —«Preguntas» quedaba cortado por el canto—
   y un índice que hay que descubrir arrastrando no es un índice. */
.e-nav {
  position: sticky;
  top: 0;
  z-index: 110;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--sp-4);
  min-height: var(--barra-alto);
  padding: 0.5rem var(--sp-4);
  background: rgba(250, 249, 244, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--fino);
}
.e-marca { display: flex; align-items: center; gap: 0.7rem; flex: none; }
/* Solo la versión marino de cada logo: estas páginas son papel de
   principio a fin, la versión clara no llegaría a mostrarse. */
.e-logo-verne { height: 2rem; width: auto; }
.e-logo-aludium { height: 0.8rem; width: auto; display: none; }
.e-marca-filete {
  display: none;
  width: 1px; height: 1.5rem;
  background: rgba(15, 35, 64, 0.18);
}

/* El índice de escalas. En móvil NO se pliega tras un botón: son
   cuatro destinos, caben en una fila que se desliza, y una
   hamburguesa aquí sería un toque de más para esconder cuatro
   palabras. Se oculta la barra de scroll, no el contenido. */
.e-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* por debajo de 390px pasa a dos filas; nunca se corta */
  gap: 0.1rem 0.15rem;
  width: 100%;
  margin: 0 -0.4rem;   /* compensa el acolchado del primer rótulo */
}
/* El cuerpo y el acolchado están calculados para que los CINCO
   rótulos quepan en 390px, el ancho de pantalla más estrecho que se
   usa en la tripulación. Al tocarlos, comprobar ahí: con 0.62rem de
   acolchado «Preguntas» se salía por el canto derecho. */
.e-nav-links a {
  flex: none;
  padding: 0.5rem 0.4rem;
  border-radius: var(--radio-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--tinta-suave);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-estandar),
              background-color var(--dur-2) var(--ease-estandar);
}
.e-nav-links a:hover { color: var(--marino); background: rgba(15, 35, 64, 0.05); }
.e-nav-links a[aria-current="page"] {
  color: var(--marino);
  font-weight: 700;
  background: rgba(15, 35, 64, 0.07);
}
.e-nav-cta {
  flex: none;
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radio-pill);
  background: var(--marino);
  color: var(--blanco);
  font-size: 0.74rem;
  font-weight: 700;
  transition: background-color var(--dur-2) var(--ease-estandar);
}
.e-nav-cta:hover { background: var(--marino-claro); }
.e-nav-cta svg {
  width: 0.9em; height: 0.9em;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ══════════ ENVOLTORIO Y CABECERA ══════════ */
.e-envoltorio {
  max-width: 52rem;
  margin: 0 auto;
  padding: 0 var(--sp-4) var(--sp-8);
}
.e-cab { padding: var(--sp-7) 0 var(--sp-6); }
.e-kicker {
  margin-bottom: 0.9rem;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-2);
  text-transform: uppercase;
  color: var(--oro-tinta);
}
.e-titulo {
  font-size: clamp(1.9rem, 7.5vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--marino);
}
.e-titulo em { font-style: italic; color: var(--oro-grande); }
.e-lead {
  margin-top: var(--sp-4);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--tinta-suave);
}
.e-lead strong { color: var(--marino); font-weight: 600; }

/* Remate del lead: la frase que antes cerraba el párrafo, ahora en
   línea propia y a cuerpo de titular para que resalte. */
.e-lead-destacado {
  margin-top: var(--sp-5);
  font-size: clamp(1.2rem, 4.2vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--marino);
}
/* Botón fantasma: la misma cápsula que `.e-btn`, sin relleno. Vive
   sobre dos fondos distintos (papel en la cabecera, marino en el
   cierre), así que el color se resuelve por contexto, no aquí.
   Selector encadenado `.e-btn.e-btn-secundario` a propósito: sube la
   especificidad para ganar SIEMPRE a `.e-btn` sin depender del orden
   de las reglas en la hoja. */
.e-btn.e-btn-secundario {
  background: transparent;
  box-shadow: none;
}
.e-btn.e-btn-secundario svg {
  width: 1.1em; height: 1.1em;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.e-btn.e-btn-secundario svg path { fill: currentColor; stroke: none; }
.e-cab .e-btn.e-btn-secundario {
  margin-top: var(--sp-5);
  color: var(--marino);
  border: 1px solid rgba(15, 35, 64, 0.25);
}
.e-cierre-acciones .e-btn.e-btn-secundario {
  color: var(--blanco);
  border: 1px solid rgba(245, 244, 239, 0.35);
}

.e-lead-destacado::after {
  content: '';
  display: block;
  width: 3.2rem;
  height: 3px;
  margin-top: 0.6rem;
  border-radius: 2px;
  background: var(--ambar);
}

/* Ficha de datos de la escala: las cifras que sitúan, de un vistazo. */
.e-ficha {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-5);
  list-style: none;
}
.e-ficha li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.42rem 0.8rem;
  border: var(--fino);
  border-radius: var(--radio-pill);
  font-size: 0.72rem;
  color: var(--tinta-suave);
}
.e-ficha b { color: var(--marino); font-weight: 800; }

/* Filete de cierre de cabecera: el corte que separa actos en la
   bitácora, aquí reducido a una línea con su punto ámbar. */
.e-regla {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: var(--sp-6) 0 var(--sp-7);
}
.e-regla::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(15, 35, 64, 0.16);
}
.e-regla i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ambar);
}

/* ══════════ PIEZAS · la lista de la sección ══════════
   Una sola familia para las tres páginas de contenido (tesis del
   manifiesto, etapas de la ruta, piezas del kit): las tres son lo
   mismo —un ordinal, un rótulo y un párrafo— y darles tres CSS
   distintos era exactamente el vicio que `base.css` vino a cortar. */
.e-lista { list-style: none; }
.e-item {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: var(--sp-4);
  row-gap: 0;
  padding: var(--sp-5) 0;
  border-top: var(--fino);
}
/* El filete de cabecera (`.e-regla`) ya cierra por arriba: sin esto
   quedaban dos líneas paralelas a un palmo, que es ruido, no ritmo. */
.e-item:first-child { border-top: none; padding-top: 0; }
/* Sin filete de cierre: el bloque siguiente (`.e-siguiente` o
   `.e-epilogo`) ya abre con su propio border-top, y con los dos
   quedaban dos líneas divisorias paralelas a un palmo. */

/* ⚠️ La colocación es EXPLÍCITA, y tiene que serlo. Con auto-placement
   —un `.e-num` que abarcaba dos filas y el resto fluyendo— el grid
   hacía exactamente lo que manda la especificación: rellenar el hueco
   que quedaba libre. La descripción caía en la columna del número, a
   2,6rem de ancho, y se leía en vertical, una palabra por línea.
   El número manda en la columna 1; TODO lo demás va a la 2. */
.e-num { grid-column: 1; grid-row: 1; }
.e-item > :not(.e-num) { grid-column: 2; }
.e-num {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.7;   /* casa la base del ordinal con la del antetítulo */
  letter-spacing: var(--track-1);
  color: var(--oro-grande);
  font-variant-numeric: tabular-nums;
}
.e-rol {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-2);
  text-transform: uppercase;
  color: var(--sepia);
}
.e-item h2, .e-item h3 {
  margin-top: 0.35rem;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--marino);
}
.e-item h2 em, .e-item h3 em { font-style: italic; color: var(--oro-grande); }
.e-desc {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--tinta-suave);
}
.e-desc em { color: var(--marino); }
.e-desc strong { color: var(--marino); font-weight: 600; }

/* Pie de pieza: el objetivo de la etapa, la letra pequeña de la
   ficha del kit. Es una nota al margen, no una segunda descripción:
   media tinta y cuerpo menor para que no compita. */
.e-nota {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--sepia);
}
.e-nota span {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-2);
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ══════════ MANIFIESTO · las tesis ══════════
   La tachadura de SUSTITUIRTE y el trazo de MULTIPLICARTE son la
   única licencia gráfica de estas páginas: sin ellas el manifiesto
   pierde su gesto. Se dibujan con CSS, no con la timeline de GSAP
   que las traza en la bitácora — aquí llegan ya hechas. */
.e-tesis {
  margin-top: 0.35rem;
  font-size: clamp(1.5rem, 6vw, 2.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--marino);
  text-transform: uppercase;
}
.e-tachado {
  position: relative;
  color: var(--tinta-suave);
  white-space: nowrap;
}
.e-tachado::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%; top: 52%;
  height: 3px;
  border-radius: 2px;
  background: var(--ambar);
  transform: rotate(-1.4deg);
}
.e-subrayado {
  position: relative;
  color: var(--oro-grande);
  white-space: nowrap;
}
.e-subrayado::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.12em;
  height: 3px;
  border-radius: 2px;
  background: var(--ambar);
  opacity: 0.85;
}

/* ══════════ PREGUNTAS · acordeón nativo ══════════
   <details> puro: accesible por teclado y funcional sin una línea
   de JS. En la bitácora el JS solo evita que haya dos abiertos a la
   vez; aquí se dejan abrir varios a propósito — se viene a comparar
   respuestas, no a recorrer un relato. */
.e-faq { list-style: none; }
.e-faq-item { border-top: var(--fino); }
.e-faq-item:first-child { border-top: none; }
.e-faq-item:last-child { border-bottom: var(--fino); }
.e-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
}
.e-faq-item summary::-webkit-details-marker { display: none; }
.e-faq-item summary h2 {
  font-size: clamp(1rem, 3.2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--marino);
}
/* La cruz que se vuelve raya. Es el único indicador de estado, así
   que no puede depender del color: cambia de FORMA. */
.e-mas {
  position: relative;
  flex: none;
  width: 1.1rem; height: 1.1rem;
}
.e-mas::before, .e-mas::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--marino);
  transition: transform var(--dur-2) var(--ease-premium);
}
.e-mas::after { transform: rotate(90deg); }
.e-faq-item[open] .e-mas::after { transform: rotate(0deg); }
.e-faq-cuerpo {
  max-width: 44rem;
  padding-bottom: var(--sp-5);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--tinta-suave);
}
.e-faq-cuerpo strong { color: var(--marino); font-weight: 600; }
.e-faq-cuerpo a {
  color: var(--marino);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(15, 35, 64, 0.35);
}
.e-faq-cuerpo a:hover { text-decoration-color: var(--ambar); }

/* Cierre simple: solo un botón, sin bloque marino ni copy propio.
   Usado en las páginas que ya resolvieron su CTA en la cabecera y
   solo necesitan un camino de vuelta. */
.e-cierre-punto {
  margin-top: var(--sp-8);
  display: flex;
  justify-content: center;
}

/* ══════════ CIERRE ══════════
   Toda escala termina en la misma puerta: la inscripción. Es la
   única acción de estas páginas, y por eso es el único bloque en
   marino — el contraste hace de señal, no la repetición. */
.e-cierre {
  margin-top: var(--sp-8);
  padding: var(--sp-7) var(--sp-5);
  border-radius: var(--radio-card);
  background: var(--marino);
  color: var(--texto-noche-1);
  text-align: center;
}
/* Sobre marino el ámbar SÍ marca: el foco recupera aquí su color. */
.e-cierre :focus-visible { outline-color: var(--ambar); }
.e-cierre-kicker {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--track-2);
  text-transform: uppercase;
  color: var(--ambar);
}
.e-cierre-titulo {
  margin-top: 0.8rem;
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.e-cierre-txt {
  margin: var(--sp-4) auto 0;
  max-width: 34rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--texto-noche-2);
}
.e-cierre-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.e-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radio-pill);
  background: var(--ambar);
  color: var(--marino);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.e-btn svg {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.e-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 3rem;
  padding: 0.5rem 0.2rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-noche-2);
  transition: color var(--dur-2) var(--ease-estandar);
}
.e-volver:hover { color: var(--blanco); }
.e-volver svg {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Escalas contiguas: de una página a la siguiente sin pasar por la
   barra. Una travesía se lee en orden, y obligar a volver arriba
   entre acto y acto es fricción sin motivo. */
.e-siguiente {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: var(--fino);
  font-size: 0.85rem;
  color: var(--tinta-suave);
}
.e-siguiente a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--marino);
}
.e-siguiente a:hover { color: var(--azul); }
.e-siguiente svg {
  width: 1em; height: 1em;
  fill: none; stroke: currentColor;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* ══════════ PIE ══════════
   Solo los logos: la co-marca cierra la página igual que la abre. */
.e-pie {
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
  border-top: var(--fino);
  text-align: center;
}
.e-pie-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.e-pie-logos img { width: auto; }
.e-pie-logos img:first-child { height: 2.6rem; }
.e-pie-logos img:last-child { height: 0.95rem; }
.e-pie-filete {
  width: 1px;
  height: 1.9rem;
  background: rgba(15, 35, 64, 0.18);
}

/* ══════════════════════════════════════════════════════════════
   ESCALONES · el móvil es la base y no lleva media query
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 720px) {
  body { --barra-alto: 4.25rem; }
  .e-nav { padding: 0.5rem var(--sp-6); gap: 0 var(--sp-5); }
  .e-logo-aludium, .e-marca-filete { display: block; }
  .e-envoltorio { padding: 0 var(--sp-6) var(--sp-9); }
  .e-cab { padding: var(--sp-8) 0 var(--sp-6); }
  .e-item { grid-template-columns: 4rem 1fr; column-gap: var(--sp-6); }
  .e-item:has(> .e-arte) { grid-template-columns: 4rem 1fr auto; }
  .e-item > .e-arte { margin-left: var(--sp-5); }
  .e-cierre { padding: var(--sp-8) var(--sp-7); }
}

/* El salto a FILA ÚNICA no va en el escalón de 720px sino aquí: con
   cinco rótulos, la co-marca y el botón de acción compitiendo por el
   mismo renglón, por debajo de 860px no caben —medido: a 720 el
   último rótulo se salía 91px por el canto—. Hasta ese ancho la barra
   sigue en dos filas, que es una postura, no un apaño. */
@media (min-width: 860px) {
  .e-nav { flex-wrap: nowrap; padding: 0 var(--sp-6); gap: var(--sp-5); }
  .e-nav-links { flex-wrap: nowrap; width: auto; margin: 0 0 0 auto; gap: 0.35rem; }
  .e-nav-links a { padding: 0.55rem 0.8rem; font-size: 0.78rem; }
  .e-nav-cta { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  .e-mas::before, .e-mas::after { transition: none; }
}

/* ══════════ LÁMINAS DEL KIT (recursos.html) ══════════
   Cada recurso lleva su esquema a trazo —el mismo dibujo de la vitrina
   de la bitácora— en una tercera columna del ítem. El grid solo crece
   cuando la lámina existe: las demás páginas no cambian. */
.e-item:has(> .e-arte) { grid-template-columns: 2.6rem 1fr auto; }
.e-item > .e-arte {
  grid-column: 3;
  grid-row: 1 / span 9;
  align-self: start;
  width: clamp(4rem, 15vw, 7rem);
  height: auto;
  margin-left: var(--sp-3);
  color: var(--marino);
  opacity: 0.9;
}
.e-arte .oro { stroke: var(--ambar); }
.e-arte .punto { stroke: none; }
.e-arte .punto.oro { fill: var(--ambar); }

/* ══════════ EPÍLOGO DEL KIT ══════════
   El remate de la sección de recursos: el verdadero recurso eres tú. */
.e-epilogo {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: var(--fino);
}
.e-epilogo-titulo {
  font-size: clamp(1.3rem, 4.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--marino);
}
.e-epilogo-titulo::after {
  content: '';
  display: block;
  width: 3.2rem;
  height: 3px;
  margin-top: 0.6rem;
  border-radius: 2px;
  background: var(--ambar);
}
.e-epilogo-txt {
  margin-top: 0.9rem;
  max-width: 62ch;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--tinta-suave);
}
.e-epilogo-txt strong { color: var(--marino); font-weight: 700; }

/* ══════════ CIERRE DE LAS ETAPAS (fases.html) ══════════
   El propósito de cada etapa, en una línea por etapa. */
.e-proposito {
  margin-top: var(--sp-4);
  list-style: none;
}
.e-proposito li {
  padding: 0.45rem 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.e-proposito li + li { border-top: 1px solid rgba(15, 35, 64, 0.08); }
.e-proposito b { color: var(--marino); font-weight: 800; }