/* ============================================================
   Tema Seclusia sobre los tokens de scroll-craft.
   Solo colores y fuentes de la paleta de marca (ver assets/fonts/LICENCIAS.md).
   ============================================================ */

@font-face { font-family: "Helvetica Now Display"; font-weight: 500; font-display: swap; src: url("../assets/fonts/helvetica-now-display-500.woff2") format("woff2"); }
@font-face { font-family: "Helvetica Now Display"; font-weight: 800; font-display: swap; src: url("../assets/fonts/helvetica-now-display-800.woff2") format("woff2"); }
@font-face { font-family: "ITC Garamond Cond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../assets/fonts/itc-garamond-cond-italic-400.woff2") format("woff2"); }
@font-face { font-family: "Basquiat"; font-weight: 500; font-display: swap; src: url("../assets/fonts/basquiat.woff2") format("woff2"); }

:root {
  /* Paleta de marca */
  --crema: #fbf9ef; --beige: #e6e4d2; --negro: #221f1f; --bosque: #142818;
  --oliva-oscuro: #394634; --ocre: #87733a; --oliva-claro: #aaa85f;
  --amarillo: #f8ebaa; --naranja: #ca8847; --mostaza: #dbcf5d;

  /* Fuentes de marca (ver assets/fonts/LICENCIAS.md) */
  --fuente-texto: "Helvetica Now Display", "Helvetica Neue", Arial, sans-serif;
  --fuente-cursiva: "ITC Garamond Cond", Georgia, serif;
  --fuente-manuscrita: "Basquiat", cursive;

  /* Tokens del motor: seis colores y dos familias */
  --sc-canvas: var(--bosque);
  --sc-surface: var(--oliva-oscuro);
  --sc-ink: var(--crema);
  --sc-ink-soft: var(--oliva-claro);
  --sc-accent: var(--amarillo);
  --sc-accent-ink: var(--negro);
  --sc-font-display: var(--fuente-texto);
  --sc-font-text: var(--fuente-texto);
  --sc-shadow-color: 135 40% 4%;
}

html { background: var(--bosque); }
body { font-weight: 500; }

/* Texto claro sobre fondo oscuro: un poco más de interlineado y tracking */
.sc-body { line-height: 1.68; letter-spacing: 0.005em; }

.cursiva { font-family: var(--fuente-cursiva); font-style: italic; font-weight: 400; }
.manuscrita { font-family: var(--fuente-manuscrita); font-weight: 500; letter-spacing: 0.01em; }
.versalitas { font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: var(--sc-t-xs); }

/* Botón: un solo estilo para "Nos vemos adentro" y "Quiero mi invitación" */
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--sc-6);
  border: 1px solid var(--amarillo); border-radius: var(--sc-r-pill);
  background: var(--amarillo); color: var(--negro);
  font: 800 var(--sc-t-sm)/1 var(--fuente-texto); letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.boton:hover { background: var(--naranja); border-color: var(--naranja); }
.boton:active { transform: translateY(1px) scale(0.98); }
.boton:disabled { opacity: 0.6; cursor: wait; }
.boton--fantasma { background: transparent; color: var(--amarillo); }
.boton--fantasma:hover { background: var(--amarillo); color: var(--negro); }
:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 3px; }

/* ---------- Barra fija: aparece cuando la portada ya pasó ---------- */
.barra {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-4) var(--sc-gutter);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  /* visibility: hidden saca la barra del orden de tabulación mientras no se ve; el retraso deja terminar el fundido */
  visibility: hidden;
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out), visibility 0s 240ms;
}
.barra--visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.barra__marca { display: block; width: 28px; height: 28px; color: var(--amarillo); }
.barra__marca svg { width: 100%; height: 100%; }

/* ---------- Acto 1: portada en planos ---------- */
/* overflow: clip, nunca hidden: hidden crea un contenedor de scroll y rompe el position: sticky del escenario */
.portada { position: relative; overflow: clip; color: var(--amarillo); text-align: center; }
.portada__sombras {
  position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background:
    /* scrim al centro, donde va el texto: el video de la selva es más claro que la hoja (rayos de luz, casa blanca) */
    radial-gradient(32% 30% at 50% 50%, color-mix(in srgb, var(--negro) 60%, transparent) 0%, transparent 100%),
    radial-gradient(40% 55% at 20% 30%, var(--negro) 0%, transparent 70%),
    radial-gradient(35% 60% at 75% 20%, var(--negro) 0%, transparent 70%),
    radial-gradient(45% 40% at 60% 85%, var(--oliva-oscuro) 0%, transparent 70%),
    radial-gradient(30% 50% at 35% 75%, var(--negro) 0%, transparent 70%);
  filter: blur(28px); opacity: 0.85;
  /* el puntero mueve las sombras apenas (spotlight publica --sc-mx/--sc-my) */
  translate: calc((var(--sc-mx, 0.5) - 0.5) * -24px) calc((var(--sc-my, 0.5) - 0.5) * -16px);
}
.portada__capa { position: absolute; inset: 0; display: grid; place-items: center; }
.portada__contenido {
  position: relative; z-index: 2; display: grid; gap: var(--sc-4); justify-items: center;
  padding: var(--sc-8) var(--sc-gutter); max-width: 60rem;
}
.portada__chilcuague { display: grid; justify-items: center; gap: var(--sc-2); }
/* La entrada animada (WebP 640x400: logo y PRESENTS debajo) a 21rem deja el círculo del logo a ~56px, el mismo tamaño que la versión fija */
.portada__entrada { width: min(72vw, 21rem); height: auto; }
.portada__chilcuague svg { width: 56px; height: 56px; }
.portada__nombre { letter-spacing: 0.32em; font-size: var(--sc-t-sm); }
.portada__raiz { font-family: var(--fuente-cursiva); font-style: italic; font-size: var(--sc-t-xs); letter-spacing: 0.2em; text-transform: uppercase; color: var(--beige); }
.portada__fondo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
/* Con movimiento normal se ve la entrada animada y la versión fija (icono, nombre, raíz, presents) queda solo para
   lectores de pantalla. Con movimiento reducido es al revés. */
@media (prefers-reduced-motion: no-preference) {
  .portada__chilcuague > :not(.portada__entrada) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .portada__entrada { display: none; }
}
.portada__presents { font-family: var(--fuente-cursiva); font-style: italic; letter-spacing: 0.3em; font-size: var(--sc-t-xs); text-transform: uppercase; }
.portada__refugio { display: flex; gap: var(--sc-5); font-size: var(--sc-t-base); }
.portada__refugio .cursiva { font-size: 1.15em; }
.portada__wordmark { width: min(78vw, 56rem); height: auto; margin: var(--sc-2) 0; }
.portada__wordmark svg { width: 100%; height: auto; display: block; }
.portada__tagline { font-size: var(--sc-t-xl); line-height: 1.15; text-wrap: balance; max-width: 30ch; }
.portada__tagline .manuscrita { font-size: 1.1em; text-transform: uppercase; letter-spacing: 0.08em; }
.portada__lugar { margin-top: var(--sc-5); font-size: var(--sc-t-sm); text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.5; }
.portada__fecha { font-size: var(--sc-t-lg); text-transform: uppercase; letter-spacing: 0.06em; }

/* Computadoras con pantalla baja (laptops de 720 a 960 px de alto): el contenido medía ~1000 px y se cortaba.
   Se quitan los márgenes de párrafo (el gap ya separa) y el logo y el wordmark se ajustan a la altura. */
@media (min-width: 701px) and (max-height: 960px) {
  .portada__contenido { padding-block: var(--sc-5); }
  .portada__contenido > p { margin-block: 0; }
  .portada__entrada { width: min(21rem, 24vh); }
  .portada__wordmark { width: min(78vw, 56rem, 100vh); }
}

@media (max-width: 700px) {
  .portada__contenido { gap: var(--sc-3); padding-top: var(--sc-7); }
  .portada__wordmark { width: 88vw; }
  /* Misma proporción que en computadora (cliente, 19 oct 2026): el bloque de Chilcuague ~40% del ancho de SECLUSIA */
  .portada__entrada { width: 36vw; }
  .portada__tagline { font-size: var(--sc-t-lg); }
  .portada__refugio { gap: var(--sc-3); font-size: var(--sc-t-sm); }
}

/* Entrada de la portada, una sola vez al cargar: primero la animación del cliente (logo Chilcuague que se arma, con PRESENTS
   debajo, ~2.8 s), y después el bloque de SECLUSIA con el wordmark letra por letra (referencia del
   cliente). Solo opacity y transform; el motor escribe la opacidad del contenedor, no de estos hijos. */
@keyframes portada-aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes portada-teclear { from { opacity: 0; } to { opacity: 1; } }
@keyframes portada-acercar { from { transform: scale(1.08); } to { transform: none; } }
.portada__fondo { animation: portada-acercar 7s var(--sc-ease-out) both; }
.portada__refugio { animation: portada-aparecer 600ms var(--sc-ease-out) 2800ms both; }
/* Las letras del wordmark son paths en orden S E C L U S A I: la I (8.º path) va antes que la A (7.º) */
.portada__wordmark path { animation: portada-teclear 120ms linear both; }
.portada__wordmark path:nth-of-type(1) { animation-delay: 2900ms; }
.portada__wordmark path:nth-of-type(2) { animation-delay: 2990ms; }
.portada__wordmark path:nth-of-type(3) { animation-delay: 3080ms; }
.portada__wordmark path:nth-of-type(4) { animation-delay: 3170ms; }
.portada__wordmark path:nth-of-type(5) { animation-delay: 3260ms; }
.portada__wordmark path:nth-of-type(6) { animation-delay: 3350ms; }
.portada__wordmark path:nth-of-type(8) { animation-delay: 3440ms; }
.portada__wordmark path:nth-of-type(7) { animation-delay: 3530ms; }
.portada__tagline { animation: portada-aparecer 600ms var(--sc-ease-out) 3600ms both; }
.portada__lugar { animation: portada-aparecer 600ms var(--sc-ease-out) 3750ms both; }
.portada__fecha { animation: portada-aparecer 600ms var(--sc-ease-out) 3870ms both; }

@media (prefers-reduced-motion: reduce) {
  .portada__sombras { translate: 0; }
  .barra { transition: none; }
  .portada__fondo, .portada__refugio, .portada__wordmark path, .portada__tagline, .portada__lugar, .portada__fecha { animation: none; }
}

/* ---------- Acto 2: la chapa ----------
   Dos capas. (1) .chapa__hoja: la hoja, fija al viewport, fuera del escenario, z-index 0: queda debajo de los
   escenarios fijados (z 1) y debajo del contenido del formulario (z 2), y no se mueve nunca; se acerca apenas con
   --sc-p. (2) .chapa__puerta: un cuadrado de 100vmax centrado en el escenario, del verde casi negro, con el ojo de
   la cerradura RECORTADO (máscara completa menos la silueta, mask-composite exclude). La puerta crece con --sc-p
   alrededor del centro del círculo hasta que el agujero cubre la pantalla y la puerta sale de ella; al terminar el
   acto el escenario se va vacío y el formulario sube sobre la misma hoja: no hay costura. Solo transform. */
.chapa {
  --chapa-smax: 14;
  --chapa-s: calc(1 + (var(--chapa-smax) - 1) * var(--sc-p, 0) * var(--sc-p, 0));
}
@media (max-aspect-ratio: 1/1) { .chapa { --chapa-smax: 9; } }
.chapa__hoja {
  position: fixed; left: 50%; top: 50svh; z-index: 0; width: 100vmax; height: 100vmax; max-width: none;
  margin: -50vmax 0 0 -50vmax; object-fit: cover; pointer-events: none;
  filter: brightness(1.2) saturate(1.1);
  transform: scale(calc(1 + 0.2 * var(--sc-p, 0))); transform-origin: 50% calc(50% - 6vh);
}
/* main.js pone .en-portada en <html> mientras se ve la portada: ahí la hoja no se usa y en iPhone se asomaba por arriba */
.en-portada .chapa__hoja { visibility: hidden; }
.chapa__escenario { background: transparent; }
.chapa__puerta {
  position: absolute; left: 50%; top: 50%; width: 100vmax; height: 100vmax; margin: -50vmax 0 0 -50vmax;
  background: color-mix(in oklab, var(--bosque) 70%, var(--negro));
  -webkit-mask-image: linear-gradient(var(--negro) 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 148'%3E%3Cpath d='M50 0A25 25 0 0 1 65 45L80 148H20L35 45A25 25 0 0 1 50 0Z'/%3E%3C/svg%3E");
  -webkit-mask-position: 0 0, 50% calc(50% + 9.2vh);
  -webkit-mask-size: 100% 100%, auto 46vh;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(var(--negro) 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 148'%3E%3Cpath d='M50 0A25 25 0 0 1 65 45L80 148H20L35 45A25 25 0 0 1 50 0Z'/%3E%3C/svg%3E");
  mask-position: 0 0, 50% calc(50% + 9.2vh);
  mask-size: 100% 100%, auto 46vh;
  mask-repeat: no-repeat;
  mask-composite: exclude;
  /* El origen de la escala es el centro del círculo, 6vh arriba del centro de la pantalla */
  transform: scale(var(--chapa-s)); transform-origin: 50% calc(50% - 6vh); will-change: transform;
}
.chapa__claim { top: 22%; color: var(--amarillo); }
.chapa__texto { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sc-6); font-size: var(--sc-t-xl); margin: 0; }
.chapa__texto .cursiva { font-size: 1.1em; }
@media (max-width: 700px) { .chapa__texto { gap: var(--sc-4); font-size: var(--sc-t-lg); } }
@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento: la chapa se queda entreabierta y fija; el formulario llega después como sección normal */
  .chapa { --chapa-s: 1.6; }
  .chapa__hoja { transform: scale(1.1); }
}

/* ---------- Acto 3: el mundo oculto ---------- */
/* Último acto de la página: el contenido centrado en la pantalla y el pie abajo. La página se queda aquí. */
.mundo { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; overflow: clip; padding-block: var(--sc-8) var(--sc-6); }
/* Scrim: transparente en el borde superior (ahí la sección entra sobre la chapa abierta y cualquier borde
   se nota) y oscuro donde está el texto. Es la "capa" sobre la hoja que pidió el cliente. */
.mundo__scrim {
  z-index: 1;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in oklab, var(--bosque) 76%, transparent) 30%, color-mix(in oklab, var(--bosque) 82%, transparent) 100%);
}
.mundo__contenido { position: relative; z-index: 2; width: 100%; max-width: 32rem; text-align: center; justify-items: center; }
.mundo__titulo { font-size: var(--sc-t-3xl); line-height: 1; color: var(--amarillo); margin: 0; text-wrap: balance; text-transform: uppercase; letter-spacing: 0.04em; }
.mundo__subtitulo { font-size: var(--sc-t-lg); color: var(--amarillo); margin: 0; text-transform: uppercase; letter-spacing: 0.08em; text-wrap: balance; }
/* Textos blancos de Pre-register más chicos y con interlineado cerrado, todo al centro (cliente, 19 oct 2026) */
/* margin-inline: auto centra la caja también en Safari: justify-items en un contenedor block solo lo respeta Chrome */
.mundo__texto { max-width: 38ch; margin-inline: auto; color: var(--crema); font-size: calc(var(--sc-t-sm) - 6px); line-height: 1.25; text-align: center; }
.mundo__pie { position: relative; z-index: 2; margin-top: var(--sc-9); display: grid; gap: var(--sc-3); justify-items: center; text-align: center; font-size: var(--sc-t-sm); color: var(--oliva-claro); }
.mundo__redes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sc-3); align-items: center; }
.mundo__redes:empty { display: none; }
.mundo__redes a:not(.boton), .mundo__legal a { color: var(--crema); text-underline-offset: 3px; }
.mundo__legal { margin: 0; }
/* Iconos de redes: el icono mide 26px y el área de toque 44px */
.redes__icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--amarillo); transition: color 160ms, background-color 160ms; }
.redes__icono svg { width: 26px; height: 26px; }
.redes__icono:hover { color: var(--negro); background: var(--amarillo); }
.redes__icono:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 3px; }

.formulario { display: grid; gap: var(--sc-4); margin-top: var(--sc-4); width: 100%; text-align: center; justify-items: center; }
.formulario > * { width: 100%; }
.formulario__campo { display: grid; gap: var(--sc-2); }
.formulario__campo label { font-size: var(--sc-t-xs); line-height: 1.3; }
.formulario__campo input {
  min-height: 48px; padding: 0 var(--sc-4);
  background: color-mix(in oklab, var(--negro) 55%, transparent); color: var(--crema);
  border: 1px solid var(--oliva-claro); border-radius: var(--sc-r-md);
  font: 500 var(--sc-t-base) var(--fuente-texto);
}
/* Texto del campo también al centro; se queda en --sc-t-base (16px o más) para que el iPhone no haga zoom al escribir */
.formulario__campo input { text-align: center; }
.formulario__campo input::placeholder { color: var(--oliva-claro); }
.formulario__campo input:focus-visible { border-color: var(--amarillo); }
.formulario__nota { margin: calc(var(--sc-2) * -1) 0 0; max-width: 36ch; font-size: var(--sc-t-xs); line-height: 1.35; color: var(--beige); }
/* El widget de Turnstile tiene ancho fijo: centrado */
.turnstile { display: flex; justify-content: center; }
.formulario__mensaje { min-height: 1.4em; margin: 0; font-size: var(--sc-t-xs); line-height: 1.35; }
.formulario__mensaje--error { color: var(--mostaza); }
.formulario__mensaje--exito { color: var(--amarillo); }
.formulario--enviado .formulario__campo, .formulario--enviado .formulario__nota, .formulario--enviado .turnstile, .formulario--enviado .boton { display: none; }

/* Signature move: la luz de la puerta inunda la pantalla al enviar el correo (js/llave.js) */
.llave__luz {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 40vmax; height: 40vmax;
  margin: -20vmax 0 0 -20vmax; border-radius: 50%;
  background: radial-gradient(circle, var(--amarillo) 0%, var(--amarillo) 35%, transparent 70%);
  opacity: 0; transform: scale(0.2); pointer-events: none;
  transition: transform 1400ms var(--sc-ease-out), opacity 900ms var(--sc-ease-out);
}
.llave__luz--activa { opacity: 0.92; transform: scale(5); }
.llave__exito { font-size: var(--sc-t-3xl); line-height: 1; color: var(--negro); margin: 0; }
.mundo--adentro .mundo__titulo, .mundo--adentro .mundo__texto { color: var(--negro); }

@media (prefers-reduced-motion: reduce) {
  .llave__luz { transition: opacity 300ms linear; transform: scale(5); }
}

/* "More info" flotante abajo a la derecha. Pasa sobre zonas claras (la luz de la puerta): fondo translúcido para que
   siempre se lea. Mismo patrón de aparición que la barra (visibility lo saca del tabulador mientras no se ve). */
.flotante {
  position: fixed; z-index: var(--sc-z-chrome);
  right: max(var(--sc-gutter), env(safe-area-inset-right, 0px));
  bottom: calc(var(--sc-5) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in oklab, var(--bosque) 72%, transparent);
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity 240ms var(--sc-ease-out), transform 240ms var(--sc-ease-out), visibility 0s 240ms;
}
.flotante:hover { background: var(--amarillo); }
.flotante--visible { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .flotante { transition: none; } }

/* ---------- Acto 4: manifiesto ---------- */
.manifiesto__escenario { display: grid; place-items: center; padding: 0 var(--sc-gutter); }
.manifiesto__linea {
  grid-area: 1 / 1; margin: 0; max-width: 24ch; text-align: center;
  font-size: var(--sc-t-2xl); line-height: 1.12; color: var(--crema); text-wrap: balance;
}
.manifiesto__linea .cursiva { color: var(--amarillo); font-size: 1.12em; }

/* ---------- Acto 5: el lugar ---------- */
.lugar { padding-block: 0; }
.lugar__foto { margin: 0; height: 80svh; overflow: clip; }
.lugar__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lugar__texto { padding-block: var(--sc-9); text-align: center; align-items: center; }
.lugar__claim { font-size: var(--sc-t-3xl); line-height: 1; color: var(--amarillo); margin: 0; text-wrap: balance; }
@media (max-width: 700px) { .lugar__foto { height: 60svh; } .lugar__claim { font-size: var(--sc-t-2xl); } }

/* ---------- Acto 6: line up ---------- */
.lineup { color: var(--amarillo); }
.lineup__titulo { color: var(--crema); margin: 0; }
.lineup__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sc-3); counter-reset: artista; }
.lineup__lista li { display: flex; gap: var(--sc-4); align-items: baseline; font-size: var(--sc-t-3xl); line-height: 1; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; }
.lineup__lista li::before { content: counter(artista, decimal-leading-zero); counter-increment: artista; font-size: var(--sc-t-sm); font-weight: 500; letter-spacing: 0.1em; color: var(--crema); min-width: 2.2em; }
.lineup__lista li[data-destacado="true"] { font-size: var(--sc-t-4xl); }
.lineup__vacio { font-size: var(--sc-t-2xl); font-weight: 800; text-transform: uppercase; margin: 0; }
.lineup__lista:not(:empty) + .lineup__vacio { display: none; }
.lineup__iconos { list-style: none; margin: var(--sc-6) 0 0; padding: 0; display: flex; gap: var(--sc-6); opacity: 0.8; color: var(--amarillo); }
.lineup__iconos svg { width: 48px; height: 48px; display: block; }

/* ---------- Acto 7: cierre ---------- */
.cierre__escenario { display: grid; grid-template-rows: 1fr auto; padding: var(--sc-8) var(--sc-gutter) var(--sc-6); }
.cierre__contenido { display: grid; gap: var(--sc-6); place-content: center; justify-items: center; text-align: center; }
.cierre__frase { font-size: var(--sc-t-3xl); line-height: 1; color: var(--amarillo); margin: 0; text-wrap: balance; max-width: 16ch; }
.cierre__pie { display: grid; gap: var(--sc-4); justify-items: center; text-align: center; font-size: var(--sc-t-sm); color: var(--oliva-claro); }
.cierre__logo { width: min(40vw, 16rem); height: auto; color: var(--amarillo); }
.cierre__redes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sc-5); }
.cierre__redes:empty { display: none; }
.cierre__redes a, .cierre__legal a { color: var(--crema); text-underline-offset: 3px; }

/* Bajo 860px el motor ancla .sc-copy a los márgenes pero conserva translate(-50%) del centrado: se anula el eje X */
@media (max-width: 860px) {
  .chapa__claim { translate: 0 -50%; }
}

/* Con la luz encendida, el mensaje de éxito y la marca de la barra también pasan a tinta oscura */
.mundo--adentro .formulario__mensaje--exito { color: var(--negro); }

/* Rendimiento: la portada es una cue "greet" (visible desde p = 0). Se muestra antes de que cargue el motor
   para que el primer pintado no espere al JavaScript; el motor luego escribe la misma opacidad en línea. */
.portada__contenido[data-sc-cue] { opacity: 1; }

/* Geometría previa al motor. El motor fija al montarse la altura de cada acto fijado (span × 100vh) y de su
   escenario (una pantalla); si el CSS no la tiene desde antes, la portada mide 0 y todo salta al cargar
   (CLS). Aquí van los mismos valores que escribe el motor, en las clases propias de la página. */
.portada { height: 160vh; }
.chapa { height: 320vh; }
.manifiesto { height: 240vh; }
.cierre { height: 120vh; }
.escenario, .manifiesto__escenario, .cierre__escenario { position: sticky; top: 0; height: 100vh; height: 100svh; }