/* espantos.serifeus.art — la casa de los tres sellos
 *
 * Registro: FORMACIÓN. Cosas sueltas que se ordenan.
 *
 * La decisión que gobierna esta hoja: cada nivel se lleva una franja de ancho
 * completo EN EL COLOR DE SU SELLO. Cempasúchil, verde nopal, hueso. Así la
 * prueba del brazo extendido no se afirma en un párrafo, se ejecuta a escala
 * de página: si alguien confunde dos de estas tres franjas, el sistema falló y
 * se ve aquí antes que en un tianguis.
 *
 * Reglas heredadas del índice y que siguen valiendo:
 *   1. El estado por defecto es el ESTADO FINAL. Sin JS la página está armada.
 *   2. CSS manda en opacidad y color; GSAP sólo toca transform y filtros.
 */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sin-paper);
  color: var(--esp-ink);
  font-family: var(--font-read);
  font-size: clamp(1rem, .55vw + .88rem, 1.18rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2 { font-family: var(--font-disp); font-weight: 400; line-height: 1.06; margin: 0; }
p { margin: 0 0 1.1em; max-width: 62ch; }
b { font-weight: 600; }
a { color: inherit; }

/* ── Idioma ─────────────────────────────────────────────────────────────
   Sin JS el CSS ya oculta el idioma que no toca. El botón sólo lo voltea. */
html[data-lang="es"] [lang="en"] { display: none; }
html[data-lang="en"] [lang="es"] { display: none; }

.lang {
  position: fixed; z-index: 50; top: 1rem; right: 1rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em;
  padding: .5rem .85rem;
  color: var(--esp-ink);
  background: rgba(247, 231, 200, .82);
  border: 1px solid currentColor;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.lang:hover { background: var(--esp-paper); }

/* ═══════════════════════════ 1 · HERO ═════════════════════════════════ */

.hero {
  background: var(--ground);
  color: var(--ink);
  padding: clamp(5rem, 12vh, 9rem) clamp(1.25rem, 5vw, 5rem) clamp(4rem, 10vh, 7rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
/* El texto va primero en el marcado, no reordenado con `order`: en móvil la
   alternativa servía seis viñetas misteriosas antes del titular. */
@media (min-width: 60rem) {
  .hero { grid-template-columns: 1.05fr .95fr; min-height: 100svh; }
}

.eyebrow {
  font-family: var(--font-sans); font-weight: 600;
  font-size: .78rem; letter-spacing: .2em;
  opacity: .72; margin-bottom: 1.4rem;
}

.hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 1.6rem; }
.hero .sub { font-size: clamp(1.05rem, .8vw + .9rem, 1.35rem); max-width: 44ch; }

/* ── El cuadro ──────────────────────────────────────────────────────────
   ⚠️ La tinta se trama, el PAPEL NO. Bajar la opacidad de la celda entera
   volvía las cinco viñetas naranja sobre naranja; en la contraportada impresa
   el papel sigue siendo papel y sólo la tinta va tramada. */
.cuadro { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.4rem, 1.1vw, .9rem); }

.cell {
  margin: 0; position: relative; aspect-ratio: 3 / 4;
  background: var(--esp-paper);
  border: 2px solid rgba(20, 18, 16, .3);
  padding: 8%;
  display: grid; place-items: center;
  will-change: transform;
}
.cell img {
  width: 100%; height: 100%; object-fit: contain;
  opacity: .3;
  transition: opacity var(--dur-base) var(--ease-formation);
}
/* La lengüeta de registro del cliché. Marca de imprenta, no adorno. */
.cell::before {
  content: "";
  position: absolute; top: -2px; left: 50%;
  width: 18%; height: .5rem;
  transform: translateX(-50%);
  background: rgba(20, 18, 16, .3);
  transition: background var(--dur-base) var(--ease-formation);
}
.cell--tuya, .cell:hover { border-color: var(--esp-ink); }
.cell--tuya img, .cell:hover img { opacity: 1; }
.cell--tuya::before, .cell:hover::before { background: var(--esp-ink); }

/* ═══════════════════════════ 2 · LOS TRES NIVELES ═════════════════════ */

.nivel {
  background: var(--band);
  color: var(--on);
  padding: clamp(4.5rem, 13vh, 9rem) clamp(1.25rem, 5vw, 5rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) {
  .nivel { grid-template-columns: .8fr 1.2fr; }
  /* Se alterna el lado para que las tres franjas no se lean como una lista. */
  .nivel--tie .nivel__art { order: 2; }
}

.nivel--esp { --band: var(--esp-ground); --on: var(--esp-ink);  }
.nivel--tie { --band: var(--tie-ground); --on: var(--tie-paper); }
/* Sin Remedio no tiene color, y ésa es la información. */
.nivel--sin { --band: var(--sin-ground); --on: var(--sin-ink);  }

/* La portada va sobre el color de su propio sello. Que se funda un poco en el
   fondo es correcto —está hecha de ese color— así que la sombra es lo único
   que la despega. */
.nivel__art img {
  width: min(100%, 24rem);
  margin-inline: auto;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3);
}

.nivel__edad {
  font-family: var(--font-sans); font-weight: 600;
  font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  opacity: .7; margin-bottom: .8rem;
}
.nivel h2 { font-size: clamp(2.1rem, 4.6vw, 3.8rem); margin-bottom: .5rem; }

/* La frase del nivel. No es un eslogan: es la razón por la que la paleta es la
   que es, y por eso se imprime al tamaño de un titular. */
.nivel__regla {
  font-family: var(--font-disp);
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: 1.4rem;
  opacity: .82;
}

/* ═══════════════════════════ 3 · LA COLECCIÓN ═════════════════════════ */

.coleccion {
  padding: clamp(4.5rem, 13vh, 9rem) clamp(1.25rem, 5vw, 5rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
  border-bottom: 1px solid rgba(20, 18, 16, .14);
}
@media (min-width: 60rem) { .coleccion { grid-template-columns: .85fr 1.15fr; } }
.coleccion__art img {
  width: min(100%, 22rem); margin-inline: auto;
  box-shadow: 0 1rem 3rem rgba(20, 18, 16, .2);
}
.coleccion h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); margin-bottom: 1.1rem; }
.quiet { font-size: .93em; opacity: .78; }

/* ═══════════════════════════ 4 · EL ESTADO ════════════════════════════ */

.estado {
  background: var(--ground);
  color: var(--ink);
  padding: clamp(4.5rem, 13vh, 9rem) clamp(1.25rem, 5vw, 5rem);
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 60rem) { .estado { grid-template-columns: 1fr 1fr; } }
.estado h2 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); margin-bottom: 1.1rem; }
.estado__art img {
  width: min(100%, 30rem); margin-inline: auto;
  box-shadow: 0 1.2rem 3.5rem rgba(0, 0, 0, .34);
}

/* ═══════════════════════════ 5 · LISTA DE ESPERA ══════════════════════ */

.espera {
  padding: clamp(4.5rem, 13vh, 9rem) clamp(1.25rem, 5vw, 5rem);
  background: var(--esp-ink);
  color: var(--esp-paper);
  text-align: center;
}
.espera h2 { font-size: clamp(1.9rem, 4vw, 3.2rem); margin-bottom: 1.2rem; }
.espera p { max-width: 54ch; margin-inline: auto; }

/* ═══════════════════════════ PIE ══════════════════════════════════════ */

footer {
  padding: clamp(3rem, 8vh, 5rem) clamp(1.25rem, 5vw, 5rem);
  font-family: var(--font-sans);
  font-size: .85rem; letter-spacing: .1em;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between;
}
footer p { margin: 0; max-width: none; }
.tagline { opacity: .62; }