/* ==========================================================================
   Cloudy Meco — base.css
   Estructura, tipografía y accesibilidad. SOLO var(--…): ningún color ni
   fuente literal (Regla 4). Tokens y recetas: theme.css y docs/02-design-system.md
   ========================================================================== */

/* ---------- Reset mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body, h1, h2, h3, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- Tipografía ---------- */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  min-height: 100vh;
  overflow-x: clip;
}
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-display);
  text-transform: var(--display-transform);
}
h3 { font-size: var(--text-h3); }
p { max-width: var(--measure); }
strong { font-weight: var(--weight-strong); }
.lead { font-size: var(--text-lead); }
.small { font-size: var(--text-small); }
.muted { color: var(--color-text-muted); }
.slab {
  font-family: var(--font-slab);
  font-weight: var(--weight-slab);
}
.antetitulo {
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
}

a {
  color: var(--color-link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}
a:hover { color: var(--color-link-hover); }

/* ---------- Layout ---------- */
.contenedor {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.seccion {
  position: relative;
  padding-block: var(--space-8);
  scroll-margin-top: var(--space-4);
}
.seccion--alt { background: var(--color-bg-alt); }
.seccion--cielo { background: var(--gradient-sky); }
.seccion--lavanda { background: var(--gradient-lavender); }
.seccion--lavanda .antetitulo { color: var(--color-on-band-accent); }
.pila > * + * { margin-top: var(--space-4); }
.pila-lg > * + * { margin-top: var(--space-6); }
.fila { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* ---------- Noche estrellada del Explorer ---------- */
.noche {
  background: var(--bg-night);
  color: var(--color-on-night);
}
.noche h1, .noche h2, .noche h3 { color: var(--color-on-night); }
.noche .antetitulo { color: var(--color-on-night-accent); }
.noche p { color: var(--color-on-night); }
.noche .muted, .noche .small { color: var(--color-on-night-muted); }
.noche .chip-edad { color: var(--color-text); }
.noche a:not(.boton) { color: var(--color-on-night-link); }
.noche a:not(.boton):hover { color: var(--color-on-night); }
.noche :focus-visible { box-shadow: var(--focus-ring-night); }

/* Ondas: la sección "noche" sube sobre la anterior con un borde fluido */
.onda-arriba, .onda-abajo { position: relative; }
.onda-arriba::before,
.onda-abajo::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  height: var(--wave-height);
  -webkit-mask: var(--wave-mask) center / 100% 100% no-repeat;
          mask: var(--wave-mask) center / 100% 100% no-repeat;
  pointer-events: none;
}
.onda-arriba::before {
  bottom: calc(100% - 1px);
  background: var(--color-bg-night);
}
.onda-abajo::after {
  top: calc(100% - 1px);
  background: var(--color-primary-hover);
  transform: scale(-1, -1);
}
/* Ilustraciones del Explorer recortadas con borde recto: se desvanecen */
.desvanece {
  -webkit-mask-image: var(--fade-top), var(--fade-right);
  -webkit-mask-composite: source-in;
          mask-image: var(--fade-top), var(--fade-right);
          mask-composite: intersect;
}
.desvanece--arriba {
  -webkit-mask-image: var(--fade-top);
          mask-image: var(--fade-top);
}

/* ---------- Cabecera y navegación ---------- */
.barra {
  position: relative;
  z-index: 20;
  background: var(--color-bg-night);
  color: var(--color-on-night);
}
.barra__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-2);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lead);
  letter-spacing: var(--tracking-display);
  text-transform: var(--display-transform);
  text-decoration: none;
  color: var(--color-on-night);
}
.marca:hover { color: var(--color-on-night); }
.marca img { width: 3.25rem; }
.nav {
  flex: 1 1 100%;
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav::-webkit-scrollbar { display: none; }
.nav ul {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  padding-inline: var(--gutter);
  width: max-content;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--color-on-night);
  font-weight: var(--weight-strong);
  font-size: var(--text-small);
  text-decoration: none;
  white-space: nowrap;
}
.nav a:hover { background: var(--color-primary-hover); color: var(--color-on-night); }
.nav a:focus-visible { box-shadow: var(--focus-ring-night); border-radius: var(--radius-pill); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: var(--space-6) var(--space-7);
}
.hero__rejilla { display: grid; gap: var(--space-6); align-items: center; }
.hero-nombre {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  text-transform: var(--display-transform);
}
.hero-lemas {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-weight: var(--weight-strong);
}
.hero-lemas li { display: inline-flex; align-items: center; gap: var(--space-3); }
.hero-lemas li + li::before {
  content: "";
  width: 0.7em; height: 0.7em;
  background: var(--color-sun);
  clip-path: var(--sparkle-shape);
}
.hero-arte {
  position: relative;
  max-width: 34rem;
  margin-inline: auto;
  width: 100%;
}
.hero-arte__marco {
  overflow: hidden;
  border-radius: var(--radius-blob);
  background: var(--gradient-explorer);
  box-shadow: var(--shadow-lg);
}
.hero-arte__lectora { width: 100%; transform: scale(1.06) translateY(3%); }
.hero-arte__cloudy {
  position: absolute;
  right: -2%;
  top: -6%;
  width: 42%;
  filter: drop-shadow(var(--shadow-lg));
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: var(--space-2) var(--space-5);
  border: var(--border-width) solid var(--color-primary);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-press);
  transition: transform var(--duration-fast) var(--ease-soft),
              box-shadow var(--duration-fast) var(--ease-soft),
              background-color var(--duration-fast);
}
.boton:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text-on-primary);
}
.boton:active { transform: translateY(3px); box-shadow: none; }
.boton--secundario {
  background: var(--color-surface);
  color: var(--color-primary-hover);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}
.boton--secundario:hover {
  background: var(--color-bg-alt);
  border-color: var(--color-border-strong);
  color: var(--color-primary-hover);
}
/* Sobre noche: botón "sol" y botón contorno */
.boton--sol {
  background: var(--color-cta-bg);
  border-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  box-shadow: var(--shadow-press-sun);
}
.boton--sol:hover {
  background: var(--color-cta-hover);
  border-color: var(--color-cta-hover);
  color: var(--color-cta-text);
}
.boton--contorno {
  background: none;
  border-color: var(--color-on-night);
  color: var(--color-on-night);
  box-shadow: none;
}
.boton--contorno:hover {
  background: var(--color-on-night);
  border-color: var(--color-on-night);
  color: var(--color-cta-text);
}

/* ---------- Foco visible ---------- */
:focus-visible {
  outline: 3px solid transparent;
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}
.boton:focus-visible { border-radius: var(--radius-pill); }
.noche .boton:focus-visible { box-shadow: var(--focus-ring-night); }
.saltar {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--tap-min) * -2);
  z-index: 30;
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  font-weight: var(--weight-strong);
}
.saltar:focus { top: var(--space-4); }
.solo-lector {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Cabecera de sección ---------- */
.cabecera-seccion { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.cabecera-seccion--centro { justify-items: center; text-align: center; }
.cabecera-seccion--centro p { margin-inline: auto; }

/* ---------- Icono en círculo (insignia del Explorer) ---------- */
.insignia {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--color-badge-bg);
  box-shadow: 0 0 0 var(--border-width) var(--color-badge-ring);
  color: var(--color-badge-icon);
}
.insignia svg { width: 2.25rem; height: 2.25rem; }
.icono {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Tarjetas ---------- */
.tarjetas {
  display: grid;
  gap: var(--space-5);
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.tarjeta {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.tarjeta .insignia {
  background: var(--color-bg-alt);
  box-shadow: 0 0 0 var(--border-width) var(--color-border);
}
.tarjeta--lavanda { background: var(--color-bg-band); }
.tarjeta--lavanda .insignia { background: var(--color-surface); }
.noche .tarjeta {
  background: var(--color-primary-hover);
  box-shadow: 0 0 0 var(--border-width) var(--color-primary);
}
.noche .tarjeta .insignia {
  background: var(--color-surface);
  box-shadow: 0 0 0 var(--border-width) var(--color-badge-ring);
}

/* ---------- Rejilla de tarjetas de libro ---------- */
.rejilla-libros {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  list-style: none;
}
.tarjeta-libro {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-soft),
              transform var(--duration-base) var(--ease-soft);
}
.tarjeta-libro:hover,
.tarjeta-libro:focus-within {
  box-shadow: var(--shadow-md);
  transform: translateY(calc(var(--float-distance) * -0.5));
}
.tarjeta-libro__portada {
  background: var(--color-bg-band);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
}
.tarjeta-libro__portada img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta-libro__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  flex: 1;
}
.tarjeta-libro__cuerpo .boton { margin-top: auto; align-self: flex-start; }

.chip-edad {
  display: inline-block;
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg-alt);
  border: var(--border-width) solid var(--color-border-strong);
  color: var(--color-text);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
}

/* ---------- Libros: estado vacío y anatomía de un libro ---------- */
.libros-vacio {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.libros-vacio__arte {
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 22rem;
  margin-inline: auto;
}
.estado-vacio__titulo {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
}
.anatomia {
  counter-reset: paso;
  display: grid;
  gap: var(--space-4);
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.anatomia li {
  counter-increment: paso;
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
}
.anatomia li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lead);
}
.anatomia h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lead);
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
}
.anatomia p { font-size: var(--text-small); }

/* "¿Sabías que…?" con fuente visible */
.sabias {
  position: relative;
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-bg-sky);
  border: var(--border-cloud);
  box-shadow: var(--shadow-cloud);
}
.sabias .fuente {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

/* ---------- Bloques con ilustración ---------- */
.dos-columnas { display: grid; gap: var(--space-6); align-items: center; }
.ilustracion { max-width: 30rem; margin-inline: auto; width: 100%; }
.ilustracion--pequena { max-width: 15rem; }
.voluntarios {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.voluntarios picture { flex: none; width: 4.5rem; }
.voluntarios img { width: 100%; }

/* ---------- Principios ---------- */
.principio__frase {
  font-family: var(--font-slab);
  font-size: var(--text-lead);
  line-height: 1.4;
}
.valores { list-style: none; display: grid; gap: var(--space-2); }
.valores li { display: flex; gap: var(--space-3); align-items: baseline; }
.valores li::before {
  content: "";
  flex: none;
  width: 0.8em; height: 0.8em;
  background: var(--color-sun);
  clip-path: var(--sparkle-shape);
}

/* ---------- Proverbio ---------- */
.proverbio { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.proverbio blockquote p {
  font-family: var(--font-slab);
  font-weight: var(--weight-slab);
  font-size: var(--text-quote);
  line-height: 1.3;
  color: var(--color-heading);
  max-width: 30ch;
  margin-inline: auto;
}
.proverbio figcaption {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lead);
  letter-spacing: var(--tracking-display);
}
.proverbio .nota { margin-inline: auto; }

/* ---------- Tono: cuatro círculos que se solapan (como el Explorer) ---------- */
.tonos {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tonos li {
  display: grid;
  gap: var(--space-1);
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 0 0 var(--border-width) var(--color-border);
}
.tonos li:nth-child(even) { background: var(--color-bg-band); }
.tonos strong {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lead);
  letter-spacing: var(--tracking-display);
  text-transform: var(--display-transform);
  color: var(--color-heading);
}
.tonos span { font-size: var(--text-small); max-width: 14rem; }

/* ---------- Chips (áreas, métodos) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  box-shadow: 0 0 0 var(--border-width) var(--color-border);
  font-weight: var(--weight-strong);
}
.chips li::before {
  content: "";
  width: 0.7em; height: 0.7em;
  background: var(--color-decor-pink);
  clip-path: var(--sparkle-shape);
}
.noche .chips li {
  background: var(--color-primary-hover);
  box-shadow: 0 0 0 var(--border-width) var(--color-primary);
}
.noche .chips li::before { background: var(--color-sun); }

/* ---------- ODS ---------- */
.ods { display: grid; gap: var(--space-3); list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.ods li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-strong);
  line-height: 1.25;
}
.ods__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h3);
}
.cita-planeta {
  font-family: var(--font-slab);
  font-size: var(--text-lead);
  line-height: 1.45;
  padding-left: var(--space-5);
  border-left: 4px solid var(--color-sun);
}

/* ---------- Motivo de nube (recetas de docs/02-design-system.md §9) ---------- */
.nube {
  display: block;
  background: var(--cloud-art) center / contain no-repeat;
  aspect-ratio: var(--cloud-ratio);
}
.nube-mascara {
  --nube-color: var(--color-cloud-body);
  display: block;
  aspect-ratio: var(--cloud-ratio);
  background: var(--nube-color);
  -webkit-mask: var(--cloud-mask) center / contain no-repeat;
          mask: var(--cloud-mask) center / contain no-repeat;
}
.nube-css {
  background: var(--gradient-cloud);
  border: var(--border-cloud);
  border-radius: var(--radius-cloud);
  box-shadow: var(--shadow-cloud);
}
.borde-nube { position: relative; }
.borde-nube::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--space-1) * -1);
  height: 20px;
  background: var(--color-bg);
  -webkit-mask: var(--cloud-edge-mask) repeat-x bottom / var(--cloud-edge-size);
          mask: var(--cloud-edge-mask) repeat-x bottom / var(--cloud-edge-size);
  transform: scaleY(-1);
  pointer-events: none;
}
.flota { animation: flota 5s ease-in-out infinite; }
@keyframes flota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--float-distance) * -1)); }
}

/* ---------- Ficha de libro ---------- */
.ficha-cabecera {
  display: grid;
  gap: var(--space-6);
  align-items: center;
}
.ficha-portada {
  background: var(--color-bg-band);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.ficha-portada img { width: 100%; }
.bloque {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5);
}
.bloque--idea { background: var(--color-bg-sky); }
.bloque--reto { background: var(--color-bg-alt); }
.etiqueta {
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.etiqueta--ciencia { color: var(--color-science-text); }
.etiqueta--reto { color: var(--color-health-text); }
.etiqueta--curiosidad { color: var(--color-accent-text); }
.curiosidades { list-style: none; display: grid; gap: var(--space-4); }
.curiosidades li {
  position: relative;
  padding-left: var(--space-6);
}
.curiosidades li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.35em;
  width: 1.1rem; height: 1.1rem;
  background: var(--color-sparkle);
  clip-path: var(--sparkle-shape);
}
.fuentes {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  border-top: var(--border-width) solid var(--color-border);
  padding-block: var(--space-5);
}
.fuentes ol { padding-left: var(--space-5); }
.pie {
  padding-block: var(--space-6);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}
/* Cabecera compacta de las fichas */
.barra-ficha { padding-block: var(--space-3); }
.contenido-ficha { padding-block: var(--space-7); }

/* ---------- Pie de la portada ---------- */
.pie-portada {
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
  padding-block: var(--space-7) var(--space-6);
}
.pie-portada img { width: 6rem; }
.lema-pie {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: var(--display-transform);
}
.pie-portada p { margin-inline: auto; }
.pie-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-2);
  list-style: none;
}
.pie-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-3);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
}


/* ==========================================================================
   AVENTURA: recorrido cronológico (bloque principal de la portada)
   Fondo: noche cósmica → cielo azul → Tierra viva (--gradient-viaje).
   Todo el texto del viaje va en tarjetas blancas: AA en cualquier tramo.
   ========================================================================== */
.hero.noche { background: var(--stars), var(--color-bg-night); }
.aventura {
  position: relative;
  isolation: isolate;
  background: var(--gradient-viaje);
  padding-block: var(--space-7) var(--space-8);
  scroll-margin-top: var(--space-4);
}
.aventura::before {            /* estrellas solo en el tramo cósmico */
  content: "";
  position: absolute;
  inset: 0 0 55% 0;
  z-index: -1;
  background: var(--stars);
  -webkit-mask-image: var(--fade-bottom);
          mask-image: var(--fade-bottom);
  pointer-events: none;
}
.aventura__intro {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  text-align: center;
  color: var(--color-on-night);
  margin-bottom: var(--space-7);
}
.aventura__intro h2 { color: var(--color-on-night); }
.aventura__intro .antetitulo { color: var(--color-on-night-accent); }
.aventura__intro p { margin-inline: auto; }

/* Camino */
.viaje { position: relative; }
.viaje__pista {
  --pista-x: calc(var(--gutter) + 1.75rem);
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pista-x);
  width: 0;
}
.viaje__pista::before {        /* la estela: línea de puntos-nube */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -3px;
  width: 6px;
  background: var(--gradient-estela);
  -webkit-mask: var(--estela-mask);
          mask: var(--estela-mask);
}
.viaje__cloudy {               /* Cloudy acompaña el scroll (sticky, sin JS) */
  position: sticky;
  top: 45vh;
  display: block;
  width: 3.75rem;
  max-width: none;               /* la pista mide 0 de ancho */
  margin-left: -1.875rem;
  z-index: 3;
  filter: drop-shadow(var(--shadow-md));
}
.viaje__cloudy img { width: 100%; }

.etapas {
  position: relative;
  list-style: none;
  display: grid;
  gap: var(--space-6);
}
.etapa {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-3);
  align-items: start;
  scroll-margin-top: var(--space-6);
}
.etapa__marca {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-badge-icon);
  box-shadow: 0 0 0 4px var(--color-badge-bg), var(--shadow-md);
  position: relative;
  z-index: 1;
}
.etapa__marca svg { width: 1.9rem; height: 1.9rem; }
.etapa__tarjeta {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
}
.etapa__num {
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent-text);
}
.etapa__tarjeta h3 { font-size: var(--text-h3); }
.etapa__hace {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-era-noche);
  color: var(--color-on-era);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
}
.etapa[data-cielo="aurora"] .etapa__hace { background: var(--color-era-aurora); }
.etapa[data-cielo="dia"] .etapa__hace { background: var(--color-era-dia); }
.etapa[data-cielo="tierra"] .etapa__hace { background: var(--color-era-tierra); }
.etapa__frase { font-family: var(--font-body); }
.etapa__estado {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: var(--border-width) dashed var(--color-primary);
  color: var(--color-primary-hover);
  font-size: var(--text-small);
  font-weight: var(--weight-strong);
}
.etapa__estado::before {
  content: "";
  width: 0.75em; height: 0.75em;
  background: var(--color-decor-pink);
  clip-path: var(--sparkle-shape);
}
.etapa__fuente {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.etapas--estaticas .etapa { grid-template-columns: 1fr; padding-left: 4rem; }

/* Aparición suave (la clase la pone el JS solo si no hay movimiento reducido) */
.etapa.aparece .etapa__tarjeta {
  opacity: 0;
  transform: translateY(var(--space-6)) scale(0.98);
  transition: opacity 600ms ease, transform 600ms var(--ease-soft);
}
.etapa.aparece.es-visible .etapa__tarjeta { opacity: 1; transform: none; }

.aventura__final {
  display: grid;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-7);
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.aventura__final picture { max-width: 12rem; margin-inline: auto; }

/* ---------- Sobre el proyecto (compacto) ---------- */
.proyecto-rejilla { display: grid; gap: var(--space-5); }
.bloque h4, .principios h4, .ods-bloque h4 {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-lead);
  letter-spacing: var(--tracking-display);
  color: var(--color-heading);
}
.proyecto-rejilla .bloque { display: grid; gap: var(--space-3); align-content: start; }
.voluntarios__cabecera { display: flex; align-items: center; gap: var(--space-3); }
.voluntarios__cabecera picture { width: 4rem; flex: none; }
.mini-lista { list-style: none; display: grid; gap: var(--space-3); }
.mini-lista li { display: flex; gap: var(--space-3); align-items: center; }
.insignia--mini { width: 3rem; height: 3rem; }
.insignia--mini svg { width: 1.6rem; height: 1.6rem; }
.bloque .insignia { background: var(--color-bg-alt); box-shadow: 0 0 0 var(--border-width) var(--color-border); }

.principios, .ods-bloque {
  display: grid;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.principios__lista { display: grid; gap: var(--space-4); margin: 0; }
.principios__lista > div {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--color-primary-hover);
}
.principios__lista dt {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-display);
  color: var(--color-on-night-accent);
}
.principios__lista dd { margin: 0; }
.noche .principio__frase { color: var(--color-on-night); }
.proverbio--compacto blockquote p { color: var(--color-on-night); font-size: var(--text-lead); }
.noche .proverbio figcaption { color: var(--color-on-night-accent); }
.noche h4, .ods-bloque h4 { color: var(--color-on-night); }
.chips--compactos li { min-height: 2.25rem; font-size: var(--text-small); padding-block: var(--space-1); }

@media (min-width: 48rem) {
  .aventura { padding-block: var(--space-8) var(--space-9); }
  .viaje__pista { --pista-x: 50%; }
  .etapas { gap: var(--space-4); }
  .etapa {
    grid-template-columns: 1fr 4.5rem 1fr;
    gap: var(--space-5);
  }
  .etapa__marca { grid-column: 2; grid-row: 1; justify-self: center; width: 4.5rem; height: 4.5rem; margin-top: var(--space-5); }
  .etapa__marca svg { width: 2.4rem; height: 2.4rem; }
  .etapa--izq .etapa__tarjeta { grid-column: 1; grid-row: 1; }
  .etapa--der .etapa__tarjeta { grid-column: 3; grid-row: 1; }
  .etapa--der { margin-top: calc(var(--space-9) * -1); }  /* zigzag compacto */
  .etapas--estaticas .etapa { padding-left: 0; grid-template-columns: 1fr; max-width: 34rem; margin: 0 auto; }
  .aventura__final { grid-template-columns: auto 1fr; padding: var(--space-6); max-width: 52rem; }
  .proyecto-rejilla { grid-template-columns: 1fr 1fr; }
  .principios__lista { grid-template-columns: repeat(3, 1fr); }
  .principios, .ods-bloque { padding: var(--space-7); }
}

/* ---------- Escritorio ---------- */
@media (min-width: 48rem) {
  .seccion { padding-block: var(--space-9); }
  .ficha-cabecera { grid-template-columns: 1fr 1fr; }
  .dos-columnas { grid-template-columns: 1.15fr 1fr; }
  .dos-columnas--invertida > :first-child { order: 2; }
  .libros-vacio { grid-template-columns: 1fr 1.3fr; padding: var(--space-6); }
  .hero { padding-block: var(--space-7) var(--space-8); }
  .hero__rejilla { grid-template-columns: 1.05fr 1fr; }
  /* Escritorio: los cuatro círculos que se solapan del Explorer */
  .tonos { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .tonos li {
    aspect-ratio: 1;
    border-radius: var(--radius-pill);
    padding: var(--space-6) var(--space-7);
    margin-inline: calc(var(--space-4) * -1);
  }
  .ilustracion--pequena { max-width: 20rem; }
}
@media (min-width: 64rem) {
  /* Barra fija en escritorio: las anclas dejan sitio con scroll-margin */
  .barra { position: sticky; top: 0; box-shadow: var(--shadow-lg); }
  .barra__fila { flex-wrap: nowrap; }
  .nav { flex: 1 1 auto; margin-inline: 0; overflow: visible; }
  .nav ul { width: auto; padding-inline: 0; justify-content: flex-end; }
  .seccion { scroll-margin-top: var(--header-h); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .tarjeta-libro:hover, .tarjeta-libro:focus-within, .boton:active { transform: none; }
}