/* Jimmy & Bella Fest · construido 2026-10-07T18:58:15.497Z */
/* --- sistema de diseño: tokens --- */
/* ==========================================================================
   Sistema de diseño · Agencia IA — tokens base
   --------------------------------------------------------------------------
   Tres capas, siempre en este orden:

   1. SEMILLAS (--piel-*)   Las pone cada piel: 5 colores, 2 familias, 4 ajustes.
                            Aquí solo hay valores de respaldo (neutros, provisionales).
                            Opcional: ajustes finos por tema (--piel-claro-<rol>,
                            --piel-noche-<rol>) para fijar un rol con un valor exacto.
   2. ESCALAS               Tipo, espacio, radios, capas y movimiento. No cambian
                            entre clientes; la piel solo toca fuentes y radio base.
   3. ROLES POR TEMA        Lo único que usan los componentes: --fondo, --tinta,
                            --marca… Dos juegos de valores del mismo rol:
                            «panel-claro» (backoffice) y «sitio-noche» (público).
                            Cada rol = ajuste fino de la piel, o si no existe, una
                            derivación de las semillas.

   Reglas de uso
   - Los componentes NUNCA leen --piel-* ni un hex: leen roles.
   - Una piel SOLO declara variables en su propio [data-piel="…"], sin
     selectores descendientes. Así una isla con otra piel nunca hereda
     ajustes de la de afuera (en cada [data-piel] los ajustes finos se
     reinician a «initial»).
   - data-piel va en <html> (o en un ancestro del elemento con data-tema).
   - data-tema va en <html> o en cualquier contenedor: un tema es un ámbito.
     Una isla oscura dentro del panel es <div data-tema="sitio-noche">.
   - Si una isla lleva OTRA piel, lleva también su data-tema en el mismo
     elemento (los roles se calculan donde se declara data-tema).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1 · Semillas de respaldo (piel provisional neutra)
   Especificidad cero con :where() para que cualquier piel las sobrescriba
   sin importar el orden de carga.
   -------------------------------------------------------------------------- */
:where(:root) {
  --piel-profunda: #1d2127;      /* color oscuro de marca: fondos nocturnos y riel de navegación */
  --piel-marca: #2a2f37;         /* acción sobre claro (botón primario del panel) */
  --piel-sobre-marca: #ffffff;   /* tinta sobre --piel-marca */
  --piel-luz: #e9e7e2;           /* la «luz» de la marca sobre oscuro: acción e indicadores de noche */
  --piel-sobre-luz: #15171b;     /* tinta sobre --piel-luz */

  --piel-fuente-texto: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --piel-fuente-display: var(--piel-fuente-texto);
  --piel-display-peso: 700;
  --piel-display-estilo: normal;
  --piel-display-tracking: -0.015em;
  --piel-radio: 6px;
}

/* Ajustes finos por tema: vacíos («initial») en cada frontera de piel, para
   que una piel anidada no herede los de la piel de afuera. Una piel afinada
   los llena en su propio [data-piel="…"]; ver skins/gps-car-solution/skin.css. */
:where([data-piel]) {
  --piel-claro-fondo: initial;
  --piel-claro-superficie: initial;
  --piel-claro-superficie-2: initial;
  --piel-claro-tinta: initial;
  --piel-claro-tinta-suave: initial;
  --piel-claro-linea: initial;
  --piel-claro-linea-fuerte: initial;
  --piel-claro-marca: initial;
  --piel-claro-marca-hover: initial;
  --piel-claro-sobre-marca: initial;
  --piel-claro-marca-tinta: initial;
  --piel-claro-acento: initial;
  --piel-claro-foco: initial;
  --piel-claro-velo: initial;
  --piel-claro-exito: initial;
  --piel-claro-exito-fondo: initial;
  --piel-claro-aviso: initial;
  --piel-claro-aviso-fondo: initial;
  --piel-claro-peligro: initial;
  --piel-claro-peligro-fondo: initial;

  --piel-noche-fondo: initial;
  --piel-noche-superficie: initial;
  --piel-noche-superficie-2: initial;
  --piel-noche-tinta: initial;
  --piel-noche-tinta-suave: initial;
  --piel-noche-linea: initial;
  --piel-noche-linea-fuerte: initial;
  --piel-noche-marca: initial;
  --piel-noche-marca-hover: initial;
  --piel-noche-sobre-marca: initial;
  --piel-noche-marca-tinta: initial;
  --piel-noche-acento: initial;
  --piel-noche-foco: initial;
  --piel-noche-velo: initial;
  --piel-noche-exito: initial;
  --piel-noche-exito-fondo: initial;
  --piel-noche-aviso: initial;
  --piel-noche-aviso-fondo: initial;
  --piel-noche-peligro: initial;
  --piel-noche-peligro-fondo: initial;
}


/* --------------------------------------------------------------------------
   2 · Escalas (independientes del tema)
   Se declaran también en [data-piel] y [data-tema] para que una isla con otra
   piel recalcule fuentes y radios en su propio ámbito.
   -------------------------------------------------------------------------- */
:where(:root, [data-piel], [data-tema]) {
  /* Familias ---------------------------------------------------------------- */
  --fuente-texto: var(--piel-fuente-texto);
  --fuente-display: var(--piel-fuente-display);
  --fuente-cifra: var(--piel-fuente-display);

  /* Escala tipográfica fluida: mínimo a 360 px, máximo a 1280 px de ancho.
     El término en rem conserva el zoom del usuario (WCAG 1.4.4). */
  --tipo-display: clamp(2.5rem, 1.3261rem + 5.2174vw, 5.5rem);     /* 40 → 88 px */
  --tipo-h1:      clamp(1.875rem, 1.4348rem + 1.9565vw, 3rem);     /* 30 → 48 px */
  --tipo-h2:      clamp(1.5rem, 1.2554rem + 1.087vw, 2.125rem);    /* 24 → 34 px */
  --tipo-h3:      clamp(1.1875rem, 1.1141rem + 0.3261vw, 1.375rem);/* 19 → 22 px */
  --tipo-cuerpo:  clamp(1rem, 0.9755rem + 0.1087vw, 1.0625rem);    /* 16 → 17 px */
  --tipo-pequeno: clamp(0.8125rem, 0.788rem + 0.1087vw, 0.875rem); /* 13 → 14 px */
  --tipo-cifra:   clamp(1.75rem, 1.4565rem + 1.3043vw, 2.5rem);    /* 28 → 40 px */

  --interlineado-display: 0.94;
  --interlineado-h1: 1.04;
  --interlineado-h2: 1.12;
  --interlineado-h3: 1.25;
  --interlineado-cuerpo: 1.55;
  --interlineado-pequeno: 1.45;
  --interlineado-cifra: 1;

  --peso-display: var(--piel-display-peso);
  --peso-titulo: 700;
  --peso-enfasis: 600;
  --peso-cuerpo: 400;
  --estilo-display: var(--piel-display-estilo);
  --tracking-display: var(--piel-display-tracking);
  --tracking-titulo: -0.005em;

  --medida-lectura: 66ch;           /* renglón máximo de texto corrido */

  /* Espaciado: múltiplos de 4 px. --esp-N = N × 4 px = la utilidad p-N de Tailwind. */
  --esp-0: 0;
  --esp-1: 0.25rem;   /*  4 */
  --esp-2: 0.5rem;    /*  8 */
  --esp-3: 0.75rem;   /* 12 */
  --esp-4: 1rem;      /* 16 */
  --esp-5: 1.25rem;   /* 20 */
  --esp-6: 1.5rem;    /* 24 */
  --esp-8: 2rem;      /* 32 */
  --esp-10: 2.5rem;   /* 40 */
  --esp-12: 3rem;     /* 48 */
  --esp-16: 4rem;     /* 64 */
  --esp-20: 5rem;     /* 80 */
  --esp-24: 6rem;     /* 96 */
  --esp-32: 8rem;     /* 128 */
  --esp-seccion: clamp(4rem, 2.0435rem + 8.6957vw, 9rem);  /* 64 → 144 px entre secciones del sitio */
  --esp-margen: clamp(1rem, 0.413rem + 2.6087vw, 2.5rem);  /* 16 → 40 px de margen lateral */
  --ancho-contenido: 72rem;
  --ancho-lectura: 40rem;
  --objetivo-tactil: 44px;          /* alto mínimo de todo lo que se toca */
  --objetivo-compacto: 36px;        /* solo en tablas densas del panel, nunca en el sitio */

  /* Radios: jerarquía, no un solo valor para todo. */
  --radio-chico: 4px;                                   /* píldoras cuadradas, marcas internas */
  --radio-control: var(--piel-radio);                   /* botones, campos */
  --radio-tarjeta: calc(var(--piel-radio) * 1.5);       /* tarjetas */
  --radio-dialogo: calc(var(--piel-radio) * 2);         /* diálogos, paneles grandes */
  --radio-pildora: 999px;

  /* Capas (z-index): siempre por nombre, nunca un número suelto. */
  --z-base: 0;
  --z-elevado: 10;       /* tarjeta levantada, texto sobre lienzo */
  --z-pegajoso: 100;     /* encabezado del sitio, encabezados de tabla */
  --z-barra: 200;        /* barra inferior del panel en celular */
  --z-flotante: 300;     /* botón flotante de WhatsApp */
  --z-menu: 400;         /* menús y listas desplegables */
  --z-dialogo: 500;      /* diálogo modal y su velo */
  --z-aviso: 600;        /* avisos (toasts): encima de todo lo demás */
  --z-saltar: 1000;      /* enlace «Saltar al contenido» */

  /* Movimiento ------------------------------------------------------------- */
  --dur-instante: 90ms;    /* respuesta al presionar */
  --dur-rapida: 150ms;     /* hover, cambio de color, casilla */
  --dur-media: 240ms;      /* abrir/cerrar algo chico, aviso que entra */
  --dur-lenta: 420ms;      /* diálogo, panel lateral, cambio de paso */
  --dur-escena: 900ms;     /* el único momento orquestado de una página */

  --curva-estandar: cubic-bezier(0.2, 0, 0, 1);    /* cambios de estado en su lugar */
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);   /* lo que ENTRA: arranca rápido y se posa */
  --curva-entrada: cubic-bezier(0.7, 0, 0.84, 0);  /* lo que SE VA: acelera hacia afuera */
  --curva-scroll: linear;                          /* scrub: el dedo ya es la curva */

  --dist-corta: 4px;
  --dist-media: 12px;
  --dist-larga: 32px;
  --escala-presion: 0.97;
  --escala-aparecer: 0.98;
  --latido: 1.6s;          /* pulso del pin: SOLO para un dato en vivo */
}

/* Movimiento reducido: sin desplazamientos ni escalas; los fundidos cortos se
   quedan porque orientan sin mover nada. data-movimiento="reducido" lo fuerza
   (lo usa el preview y sirve como preferencia guardada del usuario). */
@media (prefers-reduced-motion: reduce) {
  :where(:root, [data-piel], [data-tema]) {
    --dur-instante: 0ms;
    --dur-media: 120ms;
    --dur-lenta: 150ms;
    --dur-escena: 0ms;
    --dist-corta: 0px;
    --dist-media: 0px;
    --dist-larga: 0px;
    --escala-presion: 1;
    --escala-aparecer: 1;
  }
}
[data-movimiento="reducido"],
[data-movimiento="reducido"] :where([data-piel], [data-tema]) {
  --dur-instante: 0ms;
  --dur-media: 120ms;
  --dur-lenta: 150ms;
  --dur-escena: 0ms;
  --dist-corta: 0px;
  --dist-media: 0px;
  --dist-larga: 0px;
  --escala-presion: 1;
  --escala-aparecer: 1;
}


/* --------------------------------------------------------------------------
   3 · Roles por tema
   Cada rol toma el ajuste fino de la piel (--piel-claro-* / --piel-noche-*)
   y, si no hay, lo DERIVA de las semillas (color-mix en oklab): una piel
   nueva funciona con 5 colores. Verifica siempre en el preview: la matriz de
   contraste calcula cada par en las dos pieles y los dos temas.
   -------------------------------------------------------------------------- */

/* Panel claro: backoffice, para operar. Es el tema por defecto. -------------- */
:where(:root),
[data-tema="panel-claro"] {
  color-scheme: light;

  --fondo: var(--piel-claro-fondo, color-mix(in oklab, var(--piel-profunda) 5%, #ffffff));
  --superficie: var(--piel-claro-superficie, #ffffff);
  --superficie-2: var(--piel-claro-superficie-2, color-mix(in oklab, var(--piel-profunda) 8%, #ffffff));
  --tinta: var(--piel-claro-tinta, color-mix(in oklab, var(--piel-profunda) 62%, #000000));
  --tinta-suave: var(--piel-claro-tinta-suave, color-mix(in oklab, var(--tinta) 64%, #ffffff));
  --linea: var(--piel-claro-linea, color-mix(in oklab, var(--piel-profunda) 14%, #ffffff));        /* divisores (decorativo) */
  --linea-fuerte: var(--piel-claro-linea-fuerte, color-mix(in oklab, var(--piel-profunda) 52%, #ffffff)); /* borde de controles, ≥ 3:1 */

  --marca: var(--piel-claro-marca, var(--piel-marca));
  --marca-hover: var(--piel-claro-marca-hover, color-mix(in oklab, var(--piel-marca) 80%, #000000));
  --sobre-marca: var(--piel-claro-sobre-marca, var(--piel-sobre-marca));
  --marca-tinta: var(--piel-claro-marca-tinta, color-mix(in oklab, var(--piel-marca) 82%, #000000));     /* texto de marca, enlaces */
  --acento: var(--piel-claro-acento, var(--piel-marca));                                            /* indicadores, nunca texto */
  --foco: var(--piel-claro-foco, var(--piel-marca));

  --exito: var(--piel-claro-exito, #17683f);
  --exito-fondo: var(--piel-claro-exito-fondo, #e2f3e9);
  --aviso: var(--piel-claro-aviso, #87520a);
  --aviso-fondo: var(--piel-claro-aviso-fondo, #fdf0da);
  --peligro: var(--piel-claro-peligro, #a8321c);
  --peligro-fondo: var(--piel-claro-peligro-fondo, #fce9e5);

  --velo: var(--piel-claro-velo, color-mix(in oklab, var(--piel-profunda) 55%, transparent));     /* detrás de diálogos */

  --sombra-0: none;
  --sombra-1: 0 1px 2px color-mix(in oklab, var(--piel-profunda) 8%, transparent),
              0 1px 3px color-mix(in oklab, var(--piel-profunda) 6%, transparent);
  --sombra-2: 0 4px 12px -2px color-mix(in oklab, var(--piel-profunda) 14%, transparent),
              0 2px 4px color-mix(in oklab, var(--piel-profunda) 6%, transparent);
  --sombra-3: 0 24px 48px -12px color-mix(in oklab, var(--piel-profunda) 30%, transparent),
              0 4px 12px color-mix(in oklab, var(--piel-profunda) 8%, transparent);
  --realce-marca: 0 0 0 0 transparent;      /* halo del primario al pasar el cursor */
  --resplandor: 0 0 0 2px var(--acento);    /* elección marcada (tarjeta de plan) */
}

/* Sitio noche: la página pública. -------------------------------------------- */
[data-tema="sitio-noche"] {
  color-scheme: dark;

  --fondo: var(--piel-noche-fondo, color-mix(in oklab, var(--piel-profunda) 42%, #000000));
  --superficie: var(--piel-noche-superficie, color-mix(in oklab, var(--piel-profunda) 72%, #000000));
  --superficie-2: var(--piel-noche-superficie-2, var(--piel-profunda));
  --tinta: var(--piel-noche-tinta, color-mix(in oklab, var(--piel-profunda) 5%, #ffffff));
  --tinta-suave: var(--piel-noche-tinta-suave, color-mix(in oklab, var(--piel-profunda) 36%, #ffffff));
  --linea: var(--piel-noche-linea, color-mix(in oklab, var(--tinta) 14%, transparent));
  --linea-fuerte: var(--piel-noche-linea-fuerte, color-mix(in oklab, var(--tinta) 56%, var(--fondo)));

  --marca: var(--piel-noche-marca, var(--piel-luz));
  --marca-hover: var(--piel-noche-marca-hover, color-mix(in oklab, var(--piel-luz) 82%, #ffffff));
  --sobre-marca: var(--piel-noche-sobre-marca, var(--piel-sobre-luz));
  --marca-tinta: var(--piel-noche-marca-tinta, color-mix(in oklab, var(--piel-luz) 70%, #ffffff));
  --acento: var(--piel-noche-acento, var(--piel-luz));
  --foco: var(--piel-noche-foco, color-mix(in oklab, var(--piel-luz) 55%, #ffffff));

  --exito: var(--piel-noche-exito, #5fd49b);
  --exito-fondo: var(--piel-noche-exito-fondo, #0c2a20);
  --aviso: var(--piel-noche-aviso, #ffc468);
  --aviso-fondo: var(--piel-noche-aviso-fondo, #2c2110);
  --peligro: var(--piel-noche-peligro, #ff8f7a);
  --peligro-fondo: var(--piel-noche-peligro-fondo, #34150f);

  --velo: var(--piel-noche-velo, rgb(0 0 0 / 0.66));

  --sombra-0: none;
  --sombra-1: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 1px 2px rgb(0 0 0 / 0.5);
  --sombra-2: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 10px 28px -6px rgb(0 0 0 / 0.7);
  --sombra-3: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 32px 64px -16px rgb(0 0 0 / 0.85);
  --realce-marca: 0 0 0 1px color-mix(in oklab, var(--acento) 45%, transparent),
                  0 10px 30px -8px color-mix(in oklab, var(--acento) 60%, transparent);
  --resplandor: 0 0 0 2px var(--acento),
                0 0 36px -4px color-mix(in oklab, var(--acento) 55%, transparent);
}

/* --- sistema de diseño: componentes --- */
/* ==========================================================================
   Sistema de diseño · Agencia IA — componentes de referencia (CSS plano)
   --------------------------------------------------------------------------
   Implementación canónica de lo que describe componentes.md. La usa el preview
   y sirve de especificación exacta para los componentes React + Tailwind.
   Solo lee ROLES y ESCALAS de tokens.css; nunca un hex ni una semilla --piel-*.

   En un proyecto con Tailwind 4, impórtala dentro de la capa de componentes
   para que las utilidades puedan sobrescribirla:
       @import "./sistema/componentes.css" layer(components);
   Prefijo sd- en todas las clases para no chocar con nada.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--tipo-cuerpo);
  line-height: var(--interlineado-cuerpo);
  font-weight: var(--peso-cuerpo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Una isla de tema dentro de otra: <div class="sd-isla" data-tema="sitio-noche"> */
.sd-isla {
  background: var(--fondo);
  color: var(--tinta);
}

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

::selection {
  background: var(--marca);
  color: var(--sobre-marca);
}

a {
  color: var(--marca-tinta);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-thickness: 2px; }

input, select, textarea, button { font: inherit; color: inherit; }

/* Solo para lectores de pantalla. Es absoluto: todo contenedor con overflow que
   lo contenga debe llevar position: relative, o el texto oculto escapa del
   recorte y ensancha la página en celular. */
.sd-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.sd-saltar {
  position: absolute;
  left: var(--esp-4);
  top: var(--esp-2);
  z-index: var(--z-saltar);
  padding: var(--esp-2) var(--esp-4);
  background: var(--marca);
  color: var(--sobre-marca);
  border-radius: var(--radio-control);
  font-weight: var(--peso-enfasis);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur-rapida) var(--curva-estandar);
}
.sd-saltar:focus-visible { transform: none; }

.sd-contenedor {
  width: min(100% - 2 * var(--esp-margen), var(--ancho-contenido));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Tipografía por rol
   -------------------------------------------------------------------------- */
.sd-display,
.sd-h1,
.sd-h2,
.sd-h3 {
  margin: 0;
  font-family: var(--fuente-display);
  text-wrap: balance;
}
.sd-display {
  font-size: var(--tipo-display);
  line-height: var(--interlineado-display);
  font-weight: var(--peso-display);
  font-style: var(--estilo-display);
  letter-spacing: var(--tracking-display);
}
.sd-h1 {
  font-size: var(--tipo-h1);
  line-height: var(--interlineado-h1);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
}
.sd-h2 {
  font-size: var(--tipo-h2);
  line-height: var(--interlineado-h2);
  font-weight: var(--peso-titulo);
  letter-spacing: var(--tracking-titulo);
}
.sd-h3 {
  font-size: var(--tipo-h3);
  line-height: var(--interlineado-h3);
  font-weight: var(--peso-titulo);
}
.sd-cuerpo {
  font-size: var(--tipo-cuerpo);
  line-height: var(--interlineado-cuerpo);
  max-width: var(--medida-lectura);
  text-wrap: pretty;
}
.sd-pequeno {
  font-size: var(--tipo-pequeno);
  line-height: var(--interlineado-pequeno);
}
.sd-suave { color: var(--tinta-suave); }
.sd-cifra {
  font-family: var(--fuente-cifra);
  font-size: var(--tipo-cifra);
  line-height: var(--interlineado-cifra);
  font-weight: var(--peso-titulo);
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}
.sd-num { font-variant-numeric: tabular-nums lining-nums; }

/* --------------------------------------------------------------------------
   Marca (logo + wordmark de la piel)
   -------------------------------------------------------------------------- */
.sd-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--tinta);
  text-decoration: none;
}
.sd-marca__logo { width: 36px; height: 36px; flex: none; }
.sd-marca__texto {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-style: var(--estilo-display);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.sd-marca__texto b { font-weight: inherit; color: var(--acento); }

/* --------------------------------------------------------------------------
   Botón: primario · secundario · fantasma
   -------------------------------------------------------------------------- */
.sd-boton {
  --_alto: var(--objetivo-tactil);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--_alto);
  padding: 0 var(--esp-5);
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  background: transparent;
  font-family: var(--fuente-texto);
  font-size: var(--tipo-cuerpo);
  font-weight: var(--peso-enfasis);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur-rapida) var(--curva-estandar),
    border-color var(--dur-rapida) var(--curva-estandar),
    color var(--dur-rapida) var(--curva-estandar),
    box-shadow var(--dur-media) var(--curva-estandar),
    transform var(--dur-instante) var(--curva-estandar);
}
.sd-boton:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  transform: scale(var(--escala-presion));
}
.sd-boton svg { width: 1.15em; height: 1.15em; flex: none; }

.sd-boton--primario {
  background: var(--marca);
  color: var(--sobre-marca);
}
.sd-boton--primario:hover {
  background: var(--marca-hover);
  box-shadow: var(--realce-marca);
}

.sd-boton--secundario {
  border-color: var(--linea-fuerte);
  color: var(--tinta);
}
.sd-boton--secundario:hover {
  background: var(--superficie-2);
  border-color: var(--tinta-suave);
}

.sd-boton--fantasma {
  color: var(--marca-tinta);
  padding-inline: var(--esp-3);
}
.sd-boton--fantasma:hover {
  background: color-mix(in oklab, var(--marca-tinta) 12%, transparent);
}

.sd-boton--peligro {
  border-color: color-mix(in oklab, var(--peligro) 55%, transparent);
  color: var(--peligro);
}
.sd-boton--peligro:hover { background: var(--peligro-fondo); }

.sd-boton--compacto {
  --_alto: var(--objetivo-compacto);
  padding-inline: var(--esp-3);
  font-size: var(--tipo-pequeno);
}
.sd-boton--ancho { width: 100%; }

.sd-boton:disabled,
.sd-boton[aria-disabled="true"] {
  background: var(--superficie-2);
  border-color: var(--linea);
  color: var(--tinta-suave);
  box-shadow: none;
  cursor: not-allowed;
}

.sd-boton[aria-busy="true"] { cursor: progress; }
.sd-boton[aria-busy="true"]::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: sd-girar 700ms linear infinite;
}
@keyframes sd-girar { to { transform: rotate(1turn); } }

/* --------------------------------------------------------------------------
   Campo · selector · casilla
   -------------------------------------------------------------------------- */
.sd-campo {
  display: grid;
  gap: 6px;
  align-content: start;
}
.sd-campo__etiqueta {
  font-size: var(--tipo-pequeno);
  font-weight: var(--peso-enfasis);
  color: var(--tinta);
}
.sd-campo__control {
  width: 100%;
  min-height: var(--objetivo-tactil);
  padding: 0 var(--esp-3);
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-control);
  font-size: max(16px, var(--tipo-cuerpo));   /* 16 px mínimo: iOS no hace zoom */
  line-height: 1.3;
  transition:
    border-color var(--dur-rapida) var(--curva-estandar),
    box-shadow var(--dur-rapida) var(--curva-estandar);
}
textarea.sd-campo__control {
  min-height: 6rem;
  padding-block: 10px;
  resize: vertical;
}
.sd-campo__control::placeholder { color: var(--tinta-suave); opacity: 1; }
.sd-campo__control:hover { border-color: var(--tinta-suave); }
.sd-campo__control:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 1px;
  border-color: var(--foco);
}
.sd-campo__control[aria-invalid="true"] {
  border-color: var(--peligro);
  box-shadow: inset 0 0 0 1px var(--peligro);
}
/* Con error y foco a la vez: un solo anillo, del color del error. */
.sd-campo__control[aria-invalid="true"]:focus-visible { outline-color: var(--peligro); border-color: var(--peligro); }
.sd-campo__ayuda {
  margin: 0;
  font-size: var(--tipo-pequeno);
  line-height: var(--interlineado-pequeno);
  color: var(--tinta-suave);
}
.sd-campo__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  font-size: var(--tipo-pequeno);
  line-height: var(--interlineado-pequeno);
  font-weight: var(--peso-enfasis);
  color: var(--peligro);
}
.sd-campo__error svg { width: 1.05em; height: 1.05em; flex: none; margin-top: 0.15em; }

.sd-selector { position: relative; }
.sd-selector > select {
  appearance: none;
  padding-right: var(--esp-10);
  cursor: pointer;
}
.sd-selector::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--tinta-suave);
  border-bottom: 2px solid var(--tinta-suave);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.sd-casilla {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--esp-3);
  min-height: var(--objetivo-tactil);
  padding-block: 11px;
  line-height: 1.35;
  cursor: pointer;
}
/* El control real (invisible) cubre TODA la etiqueta: el área táctil mide lo mismo que la
   fila (≥ 44 px de alto) y no solo los 22 px de la caja dibujada. QA multiplataforma 26-sep. */
.sd-casilla__control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: var(--objetivo-tactil);
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.sd-casilla__caja {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  background: var(--superficie);
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-chico);
  transition:
    background-color var(--dur-rapida) var(--curva-estandar),
    border-color var(--dur-rapida) var(--curva-estandar);
}
.sd-casilla__caja svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--sobre-marca);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-media) var(--curva-salida);
}
.sd-casilla:hover .sd-casilla__caja { border-color: var(--tinta-suave); }
.sd-casilla__control:checked + .sd-casilla__caja {
  background: var(--marca);
  border-color: var(--marca);
}
.sd-casilla__control:checked + .sd-casilla__caja svg { stroke-dashoffset: 0; }
.sd-casilla__control:focus-visible + .sd-casilla__caja {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Píldora de estado de vencimiento
   -------------------------------------------------------------------------- */
.sd-pildora {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radio-pildora);
  background: var(--superficie-2);
  color: var(--tinta-suave);
  font-size: var(--tipo-pequeno);
  font-weight: var(--peso-enfasis);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sd-pildora svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sd-pildora--peligro { background: var(--peligro-fondo); color: var(--peligro); }
.sd-pildora--aviso { background: var(--aviso-fondo); color: var(--aviso); }
.sd-pildora--exito { background: var(--exito-fondo); color: var(--exito); }
.sd-pildora--marca {
  background: color-mix(in oklab, var(--acento) 14%, var(--superficie));
  color: var(--marca-tinta);
}

/* Latido: SOLO para un dato en vivo. 3 pulsos y se queda quieto. */
.sd-latido {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.sd-latido::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  animation: sd-latido var(--latido) var(--curva-salida) 3;
  opacity: 0;
}
@keyframes sd-latido {
  from { transform: scale(1); opacity: 0.55; }
  to { transform: scale(2.8); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Tarjeta genérica
   -------------------------------------------------------------------------- */
.sd-tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-1);
  padding: var(--esp-6);
}

/* --------------------------------------------------------------------------
   Tarjeta de plan (grupo de radios)
   -------------------------------------------------------------------------- */
.sd-planes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--esp-4);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.sd-plan {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--esp-3);
  padding: var(--esp-6);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-1);
  transition:
    border-color var(--dur-rapida) var(--curva-estandar),
    box-shadow var(--dur-media) var(--curva-estandar),
    transform var(--dur-media) var(--curva-salida);
}
.sd-plan:hover { border-color: var(--linea-fuerte); }
.sd-plan__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
}
.sd-plan__etiqueta { cursor: pointer; }
.sd-plan__etiqueta::after {           /* toda la tarjeta elige el plan */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.sd-plan__marca {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 50%;
  transition: background-color var(--dur-rapida) var(--curva-estandar), border-color var(--dur-rapida) var(--curva-estandar);
}
.sd-plan__marca::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sobre-marca);
  transform: scale(0);
  transition: transform var(--dur-media) var(--curva-salida);
}
.sd-plan__insignia {
  justify-self: start;
  padding: 2px 10px;
  border-radius: var(--radio-pildora);
  background: color-mix(in oklab, var(--acento) 14%, var(--superficie));
  color: var(--marca-tinta);
  font-size: var(--tipo-pequeno);
  font-weight: var(--peso-enfasis);
}
.sd-plan__para { margin: 0; color: var(--tinta-suave); }
.sd-plan__precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin: var(--esp-1) 0 0;
  color: var(--tinta-suave);
}
.sd-plan__precio .sd-cifra { color: var(--tinta); }
.sd-plan__datos {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--linea);
}
.sd-plan__datos > div {
  display: flex;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-block: var(--esp-2);
  border-bottom: 1px solid var(--linea);
}
.sd-plan__datos dt { color: var(--tinta-suave); }
.sd-plan__datos dd { margin: 0; font-weight: var(--peso-enfasis); font-variant-numeric: tabular-nums; }
.sd-plan__anticipo { margin: 0; font-size: var(--tipo-pequeno); color: var(--tinta-suave); }

.sd-plan:has(.sd-plan__control:checked) {
  border-color: var(--acento);
  box-shadow: var(--resplandor);
  transform: translateY(calc(var(--dist-corta) * -1));
}
.sd-plan__control:checked ~ .sd-plan__cabeza .sd-plan__marca {
  background: var(--marca);
  border-color: var(--marca);
}
.sd-plan__control:checked ~ .sd-plan__cabeza .sd-plan__marca::after { transform: scale(1); }
.sd-plan:has(.sd-plan__control:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Paso de asistente con barra de progreso
   -------------------------------------------------------------------------- */
.sd-pasos {
  container-type: inline-size;
  display: grid;
  gap: var(--esp-3);
}
.sd-pasos__texto {
  margin: 0;
  font-size: var(--tipo-pequeno);
  color: var(--tinta-suave);
}
.sd-pasos__texto strong { color: var(--tinta); font-weight: var(--peso-enfasis); }
.sd-pasos__lista {
  display: grid;
  grid-template-columns: repeat(var(--pasos, 4), minmax(0, 1fr));
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.sd-pasos__paso {
  counter-increment: paso;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
  font-size: var(--tipo-pequeno);
  color: var(--tinta-suave);
}
.sd-pasos__paso::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: var(--peso-enfasis);
  font-variant-numeric: tabular-nums;
}
.sd-pasos__paso--hecho { color: var(--tinta); }
.sd-pasos__paso--hecho::before {
  content: "✓" / "";
  background: var(--superficie-2);
  border-color: transparent;
  color: var(--marca-tinta);
}
.sd-pasos__paso[aria-current="step"] {
  color: var(--tinta);
  font-weight: var(--peso-enfasis);
}
.sd-pasos__paso[aria-current="step"]::before {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--sobre-marca);
}
.sd-pasos__nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-pasos__barra {
  height: 4px;
  border-radius: var(--radio-pildora);
  background: var(--superficie-2);
  overflow: hidden;
}
.sd-pasos__barra > span {
  display: block;
  height: 100%;
  background: var(--acento);
  transform-origin: left center;
  transform: scaleX(var(--avance, 0));
  transition: transform var(--dur-lenta) var(--curva-salida);
}
/* Angosto: solo el paso actual lleva nombre; los demás, su número. */
@container (max-width: 30rem) {
  .sd-pasos__paso:not([aria-current="step"]) .sd-pasos__nombre {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .sd-pasos__lista { grid-template-columns: repeat(var(--pasos, 4), auto); justify-content: start; gap: var(--esp-3); }
}

/* --------------------------------------------------------------------------
   Tabla que se vuelve tarjetas (consulta de contenedor, no de pantalla)
   -------------------------------------------------------------------------- */
.sd-tabla-marco {
  position: relative;          /* ancla los .sd-oculto: sin esto escapan del scroll y ensanchan la página */
  container-type: inline-size;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  overflow-x: auto;
}
.sd-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.sd-tabla caption {
  padding: var(--esp-4) var(--esp-4) var(--esp-2);
  text-align: left;
  font-weight: var(--peso-enfasis);
}
.sd-tabla th {
  padding: 10px var(--esp-4);
  background: var(--superficie-2);
  color: var(--tinta-suave);
  font-size: var(--tipo-pequeno);
  font-weight: var(--peso-enfasis);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--linea);
}
.sd-tabla td {
  padding: var(--esp-3) var(--esp-4);
  border-bottom: 1px solid var(--linea);
  vertical-align: middle;
}
.sd-tabla tbody tr:last-child td { border-bottom: 0; }
.sd-tabla tbody tr:hover { background: color-mix(in oklab, var(--superficie-2) 55%, transparent); }
.sd-tabla .sd-num { text-align: right; white-space: nowrap; }
.sd-tabla__principal { font-weight: var(--peso-enfasis); }
.sd-tabla__secundario { display: block; font-weight: var(--peso-cuerpo); color: var(--tinta-suave); font-size: var(--tipo-pequeno); }

@container (max-width: 40rem) {
  .sd-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .sd-tabla,
  .sd-tabla tbody,
  .sd-tabla caption { display: block; }
  .sd-tabla tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "principal estado"
      "detalle detalle"
      "monto accion";
    gap: 6px var(--esp-3);
    padding: var(--esp-4);
    border-bottom: 1px solid var(--linea);
  }
  .sd-tabla tbody tr:last-child { border-bottom: 0; }
  .sd-tabla td { display: block; padding: 0; border: 0; }
  .sd-tabla td[data-area="principal"] { grid-area: principal; }
  .sd-tabla td[data-area="estado"] { grid-area: estado; justify-self: end; }
  .sd-tabla td[data-area="detalle"] { grid-area: detalle; text-align: left; color: var(--tinta-suave); font-size: var(--tipo-pequeno); }
  .sd-tabla td[data-area="monto"] { grid-area: monto; align-self: center; text-align: left; }
  .sd-tabla td[data-area="accion"] { grid-area: accion; justify-self: end; }
  .sd-tabla td[data-etiqueta]::before {
    content: attr(data-etiqueta) " ";
    color: var(--tinta-suave);
    font-weight: var(--peso-cuerpo);
  }
}

/* --------------------------------------------------------------------------
   Diálogo (elemento <dialog> nativo)
   -------------------------------------------------------------------------- */
.sd-dialogo {
  width: min(100% - 2 * var(--esp-4), 32rem);
  max-height: min(100dvh - 2 * var(--esp-4), 46rem);
  padding: 0;
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-dialogo);
  box-shadow: var(--sombra-3);
}
.sd-dialogo[open] {
  display: flex;
  flex-direction: column;
  animation: sd-dialogo-entra var(--dur-lenta) var(--curva-salida);
}
.sd-dialogo::backdrop {
  background: var(--velo, rgb(4 10 24 / 0.6));   /* respaldo: navegadores donde ::backdrop no hereda */
  animation: sd-fundido var(--dur-lenta) var(--curva-estandar);
}
.sd-dialogo__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-4);
  padding: var(--esp-6) var(--esp-6) var(--esp-2);
}
.sd-dialogo__cuerpo {
  display: grid;
  gap: var(--esp-4);
  padding: var(--esp-2) var(--esp-6) var(--esp-6);
  overflow-y: auto;
}
.sd-dialogo__pie {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-6);
  border-top: 1px solid var(--linea);
  background: var(--superficie-2);
  border-radius: 0 0 var(--radio-dialogo) var(--radio-dialogo);
}
.sd-dialogo__cerrar {
  display: grid;
  place-items: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  margin: calc(var(--esp-2) * -1) calc(var(--esp-3) * -1) 0 0;
  border: 0;
  border-radius: var(--radio-control);
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
}
.sd-dialogo__cerrar:hover { background: var(--superficie-2); color: var(--tinta); }
.sd-dialogo__cerrar svg { width: 20px; height: 20px; }
@keyframes sd-dialogo-entra {
  from { opacity: 0; transform: translateY(var(--dist-media)) scale(var(--escala-aparecer)); }
}
@keyframes sd-fundido { from { opacity: 0; } }

@media (max-width: 30rem) {
  /* En celular sube desde abajo, al alcance del pulgar. */
  .sd-dialogo {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: var(--radio-dialogo) var(--radio-dialogo) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sd-dialogo__pie { flex-direction: column-reverse; border-radius: 0; }
  .sd-dialogo__pie .sd-boton { width: 100%; }
}

/* --------------------------------------------------------------------------
   Aviso (toast) y aviso en bloque
   -------------------------------------------------------------------------- */
.sd-avisos {
  position: fixed;
  z-index: var(--z-aviso);
  inset-inline: var(--esp-4);
  bottom: calc(var(--esp-4) + env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
  pointer-events: none;
}
@media (min-width: 48rem) {
  .sd-avisos { inset-inline: auto var(--esp-6); bottom: var(--esp-6); justify-items: end; }
}
.sd-aviso {
  --_estado: var(--acento);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: max-content;
  max-width: min(28rem, 100%);
  padding: 10px 10px 10px var(--esp-4);
  background: var(--superficie);
  color: var(--tinta);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-2);
  animation: sd-aviso-entra var(--dur-media) var(--curva-salida);
}
.sd-aviso[data-saliendo] { animation: sd-aviso-sale var(--dur-media) var(--curva-entrada) forwards; }
.sd-aviso--exito { --_estado: var(--exito); }
.sd-aviso--aviso { --_estado: var(--aviso); }
.sd-aviso--peligro { --_estado: var(--peligro); }
.sd-aviso__icono { width: 20px; height: 20px; flex: none; color: var(--_estado); }
.sd-aviso__texto { margin: 0; flex: 1; }
@keyframes sd-aviso-entra {
  from { opacity: 0; transform: translateY(var(--dist-media)); }
}
@keyframes sd-aviso-sale {
  to { opacity: 0; transform: translateY(var(--dist-corta)); }
}

.sd-bloque-aviso {
  --_estado: var(--acento);
  --_estado-fondo: var(--superficie-2);
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--_estado-fondo);
  color: var(--tinta);
  border: 1px solid color-mix(in oklab, var(--_estado) 35%, transparent);
  border-radius: var(--radio-tarjeta);
}
.sd-bloque-aviso svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--_estado); }
.sd-bloque-aviso p { margin: 0; }
.sd-bloque-aviso--peligro { --_estado: var(--peligro); --_estado-fondo: var(--peligro-fondo); }
.sd-bloque-aviso--aviso { --_estado: var(--aviso); --_estado-fondo: var(--aviso-fondo); }
.sd-bloque-aviso--exito { --_estado: var(--exito); --_estado-fondo: var(--exito-fondo); }

/* --------------------------------------------------------------------------
   Estado vacío
   -------------------------------------------------------------------------- */
.sd-vacio {
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
  padding: var(--esp-12) var(--esp-6);
  text-align: center;
}
.sd-vacio__dibujo { width: 72px; height: 72px; color: var(--tinta-suave); }
.sd-vacio p { margin: 0; max-width: 36ch; color: var(--tinta-suave); }
.sd-vacio .sd-boton { margin-top: var(--esp-2); }

/* --------------------------------------------------------------------------
   Navegación del panel: riel en computadora, barra inferior en celular.
   El riel es una isla oscura: <nav class="sd-nav" data-tema="sitio-noche">
   -------------------------------------------------------------------------- */
/* Flex con salto de línea (no grid): una consulta de contenedor no puede
   restilar al propio contenedor, solo a sus hijos. */
.sd-panel {
  container: panel / inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  min-height: 100%;
  background: var(--fondo);
  color: var(--tinta);
}
.sd-nav {
  flex: 0 0 15rem;
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
  padding: var(--esp-5) var(--esp-3);
  background: var(--superficie-2);
  color: var(--tinta);
}
.sd-nav .sd-marca { padding-inline: var(--esp-2); }
.sd-nav__lista {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-nav__enlace {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 40px;
  padding: 0 var(--esp-3);
  border-radius: var(--radio-control);
  color: var(--tinta-suave);
  font-weight: var(--peso-enfasis);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--dur-rapida) var(--curva-estandar), color var(--dur-rapida) var(--curva-estandar);
}
.sd-nav__enlace svg { width: 20px; height: 20px; flex: none; }
.sd-nav__enlace:hover { color: var(--tinta); background: var(--linea); }
.sd-nav__enlace[aria-current="page"] {
  color: var(--tinta);
  background: color-mix(in oklab, var(--acento) 18%, transparent);
}
.sd-nav__enlace[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--acento);
}
.sd-nav [data-solo-barra] { display: none; }
.sd-panel__contenido { flex: 1 1 0; min-width: 0; padding: var(--esp-6); }

@container panel (max-width: 47.99rem) {
  .sd-panel__contenido { flex-basis: 100%; padding: var(--esp-4); padding-bottom: var(--esp-6); }
  .sd-nav {
    flex-basis: 100%;
    align-self: flex-end;
    order: 2;
    position: sticky;
    bottom: 0;
    z-index: var(--z-barra);
    padding: 0 var(--esp-1) env(safe-area-inset-bottom);
    border-top: 1px solid var(--linea);
  }
  .sd-nav .sd-marca,
  .sd-nav [data-solo-riel] { display: none; }
  .sd-nav [data-solo-barra] { display: block; }
  .sd-nav__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
  .sd-nav__enlace {
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 6px 2px;
    border-radius: 0;
    font-size: 0.75rem;
    font-weight: var(--peso-enfasis);
    background: transparent;
    text-align: center;
  }
  .sd-nav__enlace:hover { background: transparent; }
  .sd-nav__enlace[aria-current="page"] { background: transparent; color: var(--tinta); }
  .sd-nav__enlace[aria-current="page"]::before {
    left: 25%;
    right: 25%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 3px;
    border-radius: 0 0 3px 3px;
  }
}

/* --------------------------------------------------------------------------
   Encabezado del sitio
   -------------------------------------------------------------------------- */
.sd-encabezado {
  container-type: inline-size;
  position: sticky;
  top: 0;
  z-index: var(--z-pegajoso);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-media) var(--curva-estandar),
    border-color var(--dur-media) var(--curva-estandar);
}
.sd-encabezado[data-desplazado="true"] {
  background: color-mix(in oklab, var(--fondo) 84%, transparent);
  border-bottom-color: var(--linea);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}
.sd-encabezado__fila {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  width: min(100% - 2 * var(--esp-margen), var(--ancho-contenido));
  min-height: 64px;
  margin-inline: auto;
}
.sd-encabezado__nav {
  display: flex;
  gap: var(--esp-1);
  margin-left: auto;
}
.sd-encabezado__nav a {
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-control);
  color: var(--tinta-suave);
  font-weight: var(--peso-enfasis);
  text-decoration: none;
}
.sd-encabezado__nav a:hover { color: var(--tinta); background: var(--linea); }
.sd-encabezado__acciones { display: flex; align-items: center; gap: var(--esp-2); }
@container (max-width: 48rem) {
  .sd-encabezado__nav { display: none; }
  .sd-encabezado__acciones { margin-left: auto; }
  .sd-encabezado__acciones [data-solo-ancho] { display: none; }
}

/* --------------------------------------------------------------------------
   Pie del sitio
   -------------------------------------------------------------------------- */
.sd-pie {
  border-top: 1px solid var(--linea);
  padding-block: var(--esp-12) var(--esp-8);
  color: var(--tinta-suave);
  font-size: var(--tipo-pequeno);
}
.sd-pie__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--esp-8);
  width: min(100% - 2 * var(--esp-margen), var(--ancho-contenido));
  margin-inline: auto;
}
.sd-pie__lema {
  margin: var(--esp-3) 0 0;
  color: var(--tinta);
  font-family: var(--fuente-display);
  font-size: var(--tipo-h3);
  font-style: var(--estilo-display);
  font-weight: var(--peso-display);
  line-height: 1.1;
}
.sd-pie ul { display: grid; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.sd-pie a { color: var(--tinta); }
.sd-pie__legal {
  width: min(100% - 2 * var(--esp-margen), var(--ancho-contenido));
  margin: var(--esp-10) auto 0;
}

/* --------------------------------------------------------------------------
   Movimiento reducido: lo que no se puede expresar solo con tokens
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sd-latido::after { animation: none; }
  .sd-boton[aria-busy="true"]::before { animation-duration: 1.8s; }
  .sd-encabezado[data-desplazado="true"] { transition: none; }
}
[data-movimiento="reducido"] .sd-latido::after { animation: none; }
[data-movimiento="reducido"] .sd-boton[aria-busy="true"]::before { animation-duration: 1.8s; }

/* --- piel del evento --- */
/* ==========================================================================
   Piel del evento · Jimmy & Bella Fest
   --------------------------------------------------------------------------
   Solo SEMILLAS (--piel-*) y los dos acentos de mundo. La plantilla nunca lee
   un hex: lee roles (tokens.css + el bloque de roles de invitación en
   plantilla/estilos.css), y esos roles salen de aquí.

   Paleta tomada del arte original (muestreo con Pillow):
     marino del «Jimmy» #0a2552 · dorado del «&» #8f5a12 · vino del «Bella Fest» #86173f
     cielo azul #8fc3e8 · sol #f7e4a3 · lila #d9b3ea · rosa #f5c4dc
   Contraste verificado con qa/contraste-pagina.mjs (fórmula WCAG 2.2).

   Fuentes: construir.mjs lee --piel-fuentes-url y la pone en <head> con
   preconnect (no @import: bloquearía el primer pintado).
   Uso: <html data-piel="evento" data-tema="panel-claro">
   ========================================================================== */

[data-piel="evento"] {
  /* Google Fonts: Fraunces 900 con eje SOFT al máximo (redondo, como el título
     del arte), Nunito para texto y etiquetas, Dancing Script para el lema. */
  --piel-fuentes-url: "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Fraunces:opsz,wght,SOFT@144,900,100&family=Nunito:wght@400;600;800;900&display=swap";
  --piel-color-tema: #0a2552;          /* theme-color del navegador */
  --piel-color-favicon: #b07818;       /* el «&» del favicon */

  /* Semillas del sistema ---------------------------------------------------- */
  --piel-profunda: #0a2552;            /* marino del «Jimmy» */
  --piel-marca: #86173f;               /* vino: botón primario sobre claro */
  --piel-sobre-marca: #ffffff;
  --piel-luz: #f2c760;                 /* dorado claro: acción sobre noche */
  --piel-sobre-luz: #0a1a3c;

  --piel-fuente-texto: "Nunito", ui-rounded, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --piel-fuente-display: "Fraunces", "Cooper Black", Georgia, serif;
  --piel-fuente-manuscrita: "Dancing Script", "Segoe Script", cursive;
  --piel-fuente-etiqueta: "Nunito", ui-rounded, system-ui, sans-serif;
  --piel-display-peso: 900;
  --piel-display-estilo: normal;
  --piel-display-tracking: -0.02em;
  --piel-radio: 14px;

  /* Tema claro (la invitación) afinado a papel crema ------------------------ */
  --piel-claro-fondo: #fbf6ee;
  --piel-claro-superficie: #fffdf9;
  --piel-claro-superficie-2: #f4ecdf;
  --piel-claro-tinta: #0f2550;
  --piel-claro-tinta-suave: #4a5474;
  --piel-claro-linea: #e8dfcf;
  --piel-claro-linea-fuerte: #7d849c;
  --piel-claro-marca: #86173f;
  --piel-claro-marca-hover: #6b0f31;
  --piel-claro-marca-tinta: #86173f;
  --piel-claro-acento: #b07818;
  --piel-claro-foco: #1d4fa3;
  --piel-claro-exito: #17557f;         /* azul guacamaya: la palomita es del evento */
  --piel-claro-exito-fondo: #e3eff6;

  /* Tema noche (islas: pie) -------------------------------------------------- */
  --piel-noche-fondo: #081735;
  --piel-noche-superficie: #0e2149;
  --piel-noche-superficie-2: #0a2552;
  --piel-noche-tinta: #fbf6ee;
  --piel-noche-tinta-suave: #c6cbe0;
  --piel-noche-marca: #f2c760;
  --piel-noche-marca-hover: #f7d98f;
  --piel-noche-sobre-marca: #0a1a3c;
  --piel-noche-marca-tinta: #f5d27f;
  --piel-noche-acento: #f2c760;
  --piel-noche-foco: #f7d98f;

  /* Invitación: título en los colores del arte ------------------------------ */
  --piel-titulo-a: #0a2552;            /* «Jimmy» */
  --piel-titulo-y: #8f5a12;            /* «&» (texto grande: ≥ 3:1; cumple 4.5:1 igual) */
  --piel-titulo-y-brillo: #a26c16;     /* brillo del degradado del «&» (≥ 3:1 en el peor fondo) */
  --piel-titulo-b: #86173f;            /* «Bella Fest» */

  /* Cielo que fusiona los dos mundos (detrás de las puertas) */
  --piel-cielo-1: #8fc3e8;
  --piel-cielo-2: #f7e4a3;
  --piel-cielo-3: #d9b3ea;
  --piel-cielo-4: #f5c4dc;
  --piel-resplandor: #fff8ec;          /* velo cálido detrás del título sobre el arte */
  --piel-luz-costura: #ffd98a;         /* la línea de luz dorada entre las puertas */

  /* Los dos mundos */
  --mundo-selva: #17557f;              /* azul guacamaya */
  --mundo-selva-suave: #e3eff6;
  --mundo-castillo: #9c2766;           /* rosa del cojín */
  --mundo-castillo-suave: #f8e6f0;
}

/* --- plantilla de invitación --- */
/* ==========================================================================
   Plantilla · Invitación web de evento (Agencia IA)
   --------------------------------------------------------------------------
   Va DESPUÉS de tokens.css, componentes.css y la piel del evento.
   §0 declara los roles propios de la invitación a partir de las semillas de la
   piel (igual que tokens.css hace con los roles del sistema). De §1 en adelante
   solo se leen roles: ni un hex del evento, ni una semilla --piel-*.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Roles de invitación (con respaldo neutro si la piel no los trae)
   -------------------------------------------------------------------------- */
:where(:root) {
  --fuente-manuscrita: var(--piel-fuente-manuscrita, cursive);
  --fuente-etiqueta: var(--piel-fuente-etiqueta, var(--fuente-texto));

  --titulo-a: var(--piel-titulo-a, var(--tinta));
  --titulo-y: var(--piel-titulo-y, var(--acento));
  --titulo-y-brillo: var(--piel-titulo-y-brillo, var(--titulo-y));
  --titulo-b: var(--piel-titulo-b, var(--marca-tinta));

  --cielo-1: var(--piel-cielo-1, #cfe3f3);
  --cielo-2: var(--piel-cielo-2, #f6efd9);
  --cielo-3: var(--piel-cielo-3, #e6dcf1);
  --cielo-4: var(--piel-cielo-4, #f4e0ea);
  --resplandor-portada: var(--piel-resplandor, #ffffff);
  --luz-costura: var(--piel-luz-costura, #fff3cf);

  /* La legibilidad sobre el arte la dan las letras: un halo de 2–3 px del
     resplandor pegado a cada trazo (como el sticker del original), así el
     velo puede ser ligero y el arte se ve. Contraste: qa/contraste-pagina.mjs. */
  --halo-texto: 0 0 1px var(--resplandor-portada), 0 0 1px var(--resplandor-portada), 0 0 2px var(--resplandor-portada), 0 0 3px var(--resplandor-portada);
  --velo-portada: color-mix(in oklab, var(--resplandor-portada) 55%, transparent);
  --velo-revelado: color-mix(in oklab, var(--resplandor-portada) 70%, transparent);
  --velo-tarjeta: color-mix(in oklab, var(--superficie) 80%, transparent);
  --sombra-titulo: color-mix(in oklab, var(--titulo-a) 22%, transparent);
}

[hidden] { display: none !important; }

html { scroll-padding-top: var(--esp-4); }
body {
  overflow-x: clip;
  font-feature-settings: "kern";
}
img { max-width: 100%; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

svg[aria-hidden="true"]:not(.sprite) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.etiqueta {
  margin: 0;
  font-family: var(--fuente-etiqueta);
  font-weight: 900;
  font-size: clamp(0.9rem, 0.84rem + 0.3vw, 1.05rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--titulo-b);
}

/* --------------------------------------------------------------------------
   1 · Portal «Dos mundos»
   Sin JavaScript o con movimiento reducido: la escena queda fija arriba y el
   bloque del revelado va debajo, sobre el panorama. Con movimiento: sección de
   170svh, escenario pegajoso; app.js escribe --abrir, --revelar y --titulo y,
   si el dedo se detiene a medias, termina la apertura solo (imán).
   -------------------------------------------------------------------------- */
.portal {
  position: relative;
  background: var(--cielo-3);
}

.portal__escenario {
  --abrir: 0;
  --revelar: 1;
  --titulo: 0;
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100vh auto;
  grid-template-rows: 100svh auto;
  overflow: hidden;
  isolation: isolate;
  /* Las puertas giran de verdad hacia quien mira. La perspectiva es
     proporcional al ancho: el giro se ve igual en celular y en escritorio y,
     abiertas del todo, las puertas salen de cuadro y queda solo el panorama. */
  perspective: 160vw;
}
.portal__puerta,
.portal__luz,
.portal__portada { grid-row: 1; grid-column: 1; }
.portal__cielo,
.portal__revelado { grid-row: 2; grid-column: 1; }

@media (prefers-reduced-motion: no-preference) {
  .js .portal { height: 170vh; height: 170svh; }
  .js .portal__escenario {
    --revelar: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    grid-template-rows: 100%;
  }
  .js .portal__cielo,
  .js .portal__revelado { grid-row: 1; }
  /* Mientras el revelado no se ve, no se puede tocar lo que tiene adentro. */
  .js .portal__escenario:not([data-revelado]) .portal__revelado { pointer-events: none; }
}

/* Detrás de las puertas: el panorama completo (los dos mundos juntos). Los
   degradados de la piel quedan de respaldo mientras carga la imagen. Al
   revelar, el panorama se asienta: baja de 1.12 a 1 y se enfoca. */
.portal__cielo {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(60% 48% at 50% 46%, color-mix(in oklab, var(--luz-costura) 70%, transparent), transparent 72%),
    linear-gradient(100deg, var(--cielo-1) 0%, var(--cielo-2) 38%, var(--cielo-3) 66%, var(--cielo-4) 100%);
}
.portal__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 55%;
  transform: scale(calc(1.12 - var(--revelar) * 0.12));
  filter: blur(calc((1 - var(--revelar)) * 6px));
}
.portal__cielo:has(.portal__fondo) .portal__nubes { opacity: 0.6; }
.portal__nubes {
  position: absolute;
  inset: auto -10% -6% -10%;
  height: 42%;
  background:
    radial-gradient(34% 58% at 16% 84%, color-mix(in oklab, var(--resplandor-portada) 85%, transparent), transparent 70%),
    radial-gradient(30% 50% at 50% 96%, color-mix(in oklab, var(--resplandor-portada) 80%, transparent), transparent 70%),
    radial-gradient(34% 58% at 86% 82%, color-mix(in oklab, var(--resplandor-portada) 85%, transparent), transparent 70%);
  filter: blur(8px);
}
.portal__destellos {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  color: var(--resplandor-portada);
  box-shadow:
    8vw 14vh 2px 1px, 21vw 31vh 1px 0, 33vw 9vh 2px 1px, 14vw 58vh 1px 0,
    44vw 21vh 1px 0, 58vw 12vh 2px 1px, 71vw 27vh 1px 0, 86vw 10vh 2px 1px,
    93vw 41vh 1px 0, 78vw 62vh 2px 1px, 62vw 72vh 1px 0, 27vw 78vh 2px 1px,
    6vw 86vh 1px 0, 51vw 88vh 2px 0, 88vw 84vh 1px 0, 39vw 52vh 1px 0;
  animation: titilar 3.4s ease-in-out infinite alternate;
}
.portal__destellos--b {
  transform: translate(3vw, 6vh);
  animation-delay: -1.7s;
  animation-duration: 2.8s;
}
@keyframes titilar {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

/* Lo que aparece detrás de las puertas */
.portal__revelado {
  position: relative;
  z-index: 1;
  isolation: isolate;
  align-self: center;
  justify-self: center;
  width: min(100% - 2 * var(--esp-4), 44rem);
  padding-block: var(--esp-16) var(--esp-20);
  text-align: center;
  opacity: var(--revelar);
  transform: translate3d(0, calc((1 - var(--revelar)) * var(--dist-larga)), 0) scale(calc(0.96 + var(--revelar) * 0.04));
}
/* Ya abiertas, las puertas quedan como marco a los lados: el revelado va encima. */
.portal__escenario[data-abierto] .portal__revelado { z-index: 5; }
/* Velo chico y radial: aclara solo detrás del texto; el arte se sigue viendo. */
.portal__revelado::before {
  content: "";
  position: absolute;
  inset: -24px;
  z-index: -1;
  background: radial-gradient(closest-side, var(--velo-revelado) 0%, var(--velo-revelado) 62%, transparent 100%);
  pointer-events: none;
}
.portal__revelado .etiqueta,
.revelado__fecha,
.contador__mensaje { text-shadow: var(--halo-texto); }
.revelado__titulo {
  margin: var(--esp-2) 0 var(--esp-3);
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tipo-display);
  line-height: var(--interlineado-display);
  letter-spacing: var(--tracking-display);
  color: var(--titulo-a);
  text-wrap: balance;
  text-shadow: var(--halo-texto), 0 6px 24px var(--sombra-titulo);
}
.revelado__titulo:focus { outline: none; }
.revelado__fecha {
  margin: 0;
  font-weight: 800;
  font-size: var(--tipo-h3);
  color: var(--tinta);
}

/* Contador */
.contador { margin-block: var(--esp-8) var(--esp-8); }
.contador__celdas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-2);
  margin: 0 auto;
  padding: 0;
  max-width: 34rem;
  list-style: none;
}
.contador__celda {
  display: grid;
  justify-items: center;
  gap: var(--esp-1);
  padding: var(--esp-4) var(--esp-1) var(--esp-3);
  background: var(--velo-tarjeta);
  border: 1px solid color-mix(in oklab, var(--resplandor-portada) 70%, transparent);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
.contador__num {
  min-width: 2ch;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: clamp(2rem, 1.4rem + 4vw, 3.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--titulo-a);
}
.contador__lbl {
  font-size: var(--tipo-pequeno);
  font-weight: 800;
  color: var(--tinta-suave);
}
.contador__mensaje {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tipo-h1);
  line-height: var(--interlineado-h1);
  color: var(--titulo-b);
}
.revelado__cta { min-height: 52px; padding-inline: var(--esp-8); border-radius: var(--radio-pildora); }

/* Las dos puertas */
.portal__puerta {
  position: relative;
  z-index: 3;
  width: 50%;
  height: 100%;
  overflow: hidden;
  background: var(--cielo-3);
}
/* Giro real de puerta sobre su bisagra (la orilla de afuera). */
.portal__puerta--izq { justify-self: start; transform-origin: 0 50%; transform: rotateY(calc(var(--abrir) * -78deg)); }
.portal__puerta--der { justify-self: end; transform-origin: 100% 50%; transform: rotateY(calc(var(--abrir) * 78deg)); }
.portal__puerta img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--focal, 50% 50%);
  transform: scale(calc(1 + var(--abrir) * 0.1));
  filter: brightness(calc(1 - var(--abrir) * 0.2));   /* la puerta se sombrea al girar */
}
.portal__puerta--izq img { transform-origin: 100% 50%; }
.portal__puerta--der img { transform-origin: 0% 50%; }
/* Canto de luz dorada en el borde de cada puerta + sombra que crece al abrir */
.portal__puerta::before,
.portal__puerta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
.portal__puerta::before {
  width: 22%;
  opacity: calc(var(--abrir) * 1.6);
  background: linear-gradient(90deg, transparent, var(--sombra-titulo));
}
.portal__puerta::after {
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--luz-costura) 18%, var(--resplandor-portada) 50%, var(--luz-costura) 82%, transparent);
  box-shadow: 0 0 14px 2px color-mix(in oklab, var(--luz-costura) 80%, transparent);
}
.portal__puerta--izq::before { right: 0; }
.portal__puerta--izq::after { right: 0; }
.portal__puerta--der::before { left: 0; transform: scaleX(-1); }
.portal__puerta--der::after { left: 0; }

/* La línea de luz que se ensancha en la costura */
.portal__luz {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: calc(min(1, var(--abrir) * 6) * (1 - var(--revelar) * 0.85));
}
/* Haz de luz: nace en la costura y se ensancha mientras las puertas se abren */
.portal__luz::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 8vw;
  margin-left: -4vw;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--luz-costura) 80%, transparent) 30%, var(--resplandor-portada) 50%, color-mix(in oklab, var(--luz-costura) 80%, transparent) 70%, transparent);
  -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  transform: scaleX(calc(0.1 + var(--abrir) * 2.5));
}

/* Portada: título sobre la costura */
.portal__portada {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  padding: max(var(--esp-6), env(safe-area-inset-top)) var(--esp-4) max(var(--esp-6), env(safe-area-inset-bottom));
  opacity: calc(1 - var(--titulo));
  transform: translate3d(0, calc(var(--titulo) * -4vh), 0) scale(calc(1 + var(--titulo) * 0.05));
}
.portal__escenario[data-abierto] .portal__portada { visibility: hidden; }

.portada__centro {
  grid-row: 2;
  position: relative;
  isolation: isolate;
  max-width: 100%;
  padding: var(--esp-3) var(--esp-2);
  text-align: center;
}
/* Velo cálido ligero (55 %), apenas más grande que el texto: suaviza el arte
   sin taparlo. El contraste lo garantiza el halo de cada letra. */
.portada__centro::before {
  content: "";
  position: absolute;
  inset: -16px -24px;
  z-index: -1;
  background: var(--velo-portada);
  border-radius: 64px;
  filter: blur(18px);
}
.titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: clamp(2.9rem, 1rem + 12.5vw, 5.25rem);
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.titulo > span { display: block; }
.titulo__a,
.titulo__b { text-shadow: var(--halo-texto), 0 2px 0 var(--resplandor-portada), 0 6px 24px var(--sombra-titulo); }
.titulo__a { color: var(--titulo-a); }
.titulo__b { color: var(--titulo-b); }
.titulo__y {
  color: var(--titulo-y);
  font-size: 1.12em;
  line-height: 0.82;
  background-image: linear-gradient(180deg, var(--titulo-y-brillo) 0%, var(--titulo-y) 58%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 1px var(--resplandor-portada)) drop-shadow(0 0 1px var(--resplandor-portada)) drop-shadow(0 0 2px var(--resplandor-portada)) drop-shadow(0 2px 0 var(--resplandor-portada));
}
.lema {
  margin: var(--esp-4) 0 0;
  font-family: var(--fuente-manuscrita);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.2rem);
  line-height: 1.15;
  color: var(--titulo-a);
  text-shadow: var(--halo-texto);
}
.portada__pie {
  grid-row: 3;
  align-self: end;
  display: grid;
  justify-items: center;
  gap: var(--esp-2);
}
.portada__abrir {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 48px;
  padding: 0 var(--esp-5) 0 var(--esp-6);
  border: 1.5px solid var(--acento);
  border-radius: var(--radio-pildora);
  background: var(--superficie);
  color: var(--tinta);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--sombra-2);
  transition: transform var(--dur-instante) var(--curva-estandar), box-shadow var(--dur-media) var(--curva-estandar);
}
.portada__abrir:hover { box-shadow: var(--sombra-3); }
.portada__abrir:active { transform: scale(var(--escala-presion)); }
.portada__abrir svg { width: 20px; height: 20px; animation: invitar 1.6s var(--curva-estandar) infinite alternate; }
@keyframes invitar { to { transform: translateY(var(--dist-corta)); } }

@media (min-width: 48rem) {
  .titulo { font-size: clamp(4rem, 0.8rem + 7.4vw, 8.5rem); white-space: nowrap; }
  .titulo > span { display: inline; }
  .titulo__y { margin-inline: -0.04em; }
  .portada__centro { padding: var(--esp-4) var(--esp-6); }
  .portada__centro::before { inset: -24px -48px; border-radius: 96px; filter: blur(20px); }
}

/* --------------------------------------------------------------------------
   2 · Hoja de contenido (sube sobre el portal)
   -------------------------------------------------------------------------- */
.hoja {
  position: relative;
  z-index: 1;
  margin-top: calc(var(--esp-8) * -1);
  padding-top: var(--esp-2);
  background: var(--fondo);
  border-radius: 2rem 2rem 0 0;
  box-shadow: 0 -20px 40px -24px var(--sombra-titulo);
}
/* En el celular, la barra «Confirmar asistencia» nunca tapa lo último de la hoja. */
@media (max-width: 47.99rem) {
  .hoja { padding-bottom: calc(52px + 2 * var(--esp-4) + env(safe-area-inset-bottom)); }
  .hoja > .seccion:last-child { padding-bottom: var(--esp-8); }
}
.seccion { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.seccion + .seccion { padding-top: 0; }
.seccion__marco {
  width: min(100% - 2 * var(--esp-margen), var(--ancho-contenido));
  margin-inline: auto;
}
.seccion__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-variation-settings: "SOFT" 100;
  font-size: var(--tipo-h1);
  line-height: var(--interlineado-h1);
  letter-spacing: -0.015em;
  color: var(--titulo-a);
  text-align: center;
  text-wrap: balance;
}
/* Adorno: línea — rombo — línea, como las líneas del arte */
.seccion__titulo::after {
  content: "";
  display: block;
  width: 10rem;
  height: 12px;
  margin: var(--esp-4) auto 0;
  background: var(--acento);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cdefs%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5.25' width='66' height='1.5' fill='url(%23a)'/%3E%3Crect x='94' y='5.25' width='66' height='1.5' fill='url(%23b)'/%3E%3Cpath d='M80 0l6 6-6 6-6-6z'/%3E%3Ccircle cx='70' cy='6' r='1.6'/%3E%3Ccircle cx='90' cy='6' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12'%3E%3Cdefs%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b'%3E%3Cstop offset='0'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5.25' width='66' height='1.5' fill='url(%23a)'/%3E%3Crect x='94' y='5.25' width='66' height='1.5' fill='url(%23b)'/%3E%3Cpath d='M80 0l6 6-6 6-6-6z'/%3E%3Ccircle cx='70' cy='6' r='1.6'/%3E%3Ccircle cx='90' cy='6' r='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.seccion__intro {
  margin: var(--esp-4) auto 0;
  max-width: 34rem;
  text-align: center;
  color: var(--tinta-suave);
  font-size: var(--tipo-cuerpo);
}

/* --------------------------------------------------------------------------
   3 · Detalles: un boleto
   -------------------------------------------------------------------------- */
.boleto {
  position: relative;
  display: grid;
  max-width: 56rem;
  margin: var(--esp-10) auto 0;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-dialogo);
  box-shadow: var(--sombra-3);
  overflow: hidden;
}
.boleto__fecha {
  display: grid;
  justify-items: center;
  align-content: center;
  padding: var(--esp-8) var(--esp-6) var(--esp-10);
  text-align: center;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--mundo-1-suave, var(--superficie-2)), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, var(--mundo-2-suave, var(--superficie-2)), transparent 60%),
    var(--superficie-2);
}
.boleto__fecha p { margin: 0; }
.boleto__semana {
  font-family: var(--fuente-etiqueta);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--titulo-b);
}
.boleto__dia {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: clamp(6.5rem, 5rem + 7vw, 10rem);
  line-height: 0.86;
  letter-spacing: -0.04em;
  font-variant-numeric: lining-nums;
  color: var(--titulo-a);
}
.boleto__mes {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tipo-h2);
  line-height: 1.1;
  color: var(--titulo-a);
}
.boleto__mes span {
  display: block;
  margin-top: var(--esp-1);
  font-family: var(--fuente-texto);
  font-size: var(--tipo-pequeno);
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--tinta-suave);
}
.boleto__info {
  position: relative;
  display: grid;
  align-content: center;
  gap: var(--esp-6);
  padding: var(--esp-8) var(--esp-6);
  border-top: 2px dashed var(--linea);
}
/* Muescas del boleto sobre la perforación */
.boleto__info::before,
.boleto__info::after {
  content: "";
  position: absolute;
  top: -15px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fondo);
  box-shadow: inset 0 0 0 1px var(--linea);
}
.boleto__info::before { left: -15px; }
.boleto__info::after { right: -15px; }

.dato {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--esp-4);
}
.dato p { margin: 0; }
.dato__icono {
  width: 48px;
  height: 48px;
  padding: 11px;
  border-radius: 50%;
  background: var(--superficie-2);
  color: var(--titulo-b);
}
.dato__lbl {
  font-size: var(--tipo-pequeno);
  font-weight: 800;
  color: var(--tinta-suave);
}
.dato__valor {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tipo-h2);
  line-height: 1.12;
  color: var(--titulo-a);
}
.dato__valor--pendiente {
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: var(--tipo-h3);
  line-height: 1.3;
  color: var(--tinta);
}
.dato__extra { color: var(--tinta-suave); }
.boleto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  padding-top: var(--esp-2);
}
.boleto__acciones > * { flex: 1 1 14rem; }

@media (min-width: 48rem) {
  .boleto { grid-template-columns: minmax(16rem, 5fr) 7fr; }
  .boleto__fecha { padding: var(--esp-10) var(--esp-8); }
  .boleto__info {
    padding: var(--esp-10) var(--esp-10);
    border-top: 0;
    border-left: 2px dashed var(--linea);
  }
  .boleto__info::before { top: -15px; left: -15px; }
  .boleto__info::after { top: auto; bottom: -15px; left: -15px; right: auto; }
}

/* Menú «Agregar a mi calendario» */
.calendario { display: grid; gap: var(--esp-2); align-content: start; }
.calendario__boton { width: 100%; }
.calendario__boton svg { width: 1.2em; height: 1.2em; }
.calendario__opciones {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: var(--esp-2);
  list-style: none;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-2);
  text-align: left;
}
.js .calendario:not([data-abierto]) .calendario__opciones { display: none; }
.calendario[data-abierto] .calendario__opciones { animation: aparecer var(--dur-media) var(--curva-salida); }
.calendario__opciones a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--esp-2);
  min-height: var(--objetivo-tactil);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-control);
  color: var(--tinta);
  font-weight: 700;
  text-decoration: none;
}
.calendario__opciones a:hover { background: var(--superficie-2); }
.calendario__opciones svg { width: 1em; height: 1em; color: var(--tinta-suave); }
.calendario__nota { font-weight: 400; color: var(--tinta-suave); }
@keyframes aparecer { from { opacity: 0; transform: translateY(calc(var(--dist-corta) * -1)); } }

/* --------------------------------------------------------------------------
   4 · Los dos mundos
   -------------------------------------------------------------------------- */
.mundos {
  display: grid;
  gap: var(--esp-4);
  align-items: center;
  max-width: 60rem;
  margin: var(--esp-10) auto 0;
}
.mundos__y {
  justify-self: center;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-variation-settings: "SOFT" 100;
  font-size: clamp(3rem, 2.4rem + 3vw, 5rem);
  line-height: 1;
  color: var(--titulo-y);
}
.mundo {
  --mundo-color: var(--titulo-a);
  --mundo-fondo: var(--superficie-2);
  display: grid;
  gap: var(--esp-5);
  padding: var(--esp-5) var(--esp-5) var(--esp-8);
  text-align: center;
  background: linear-gradient(180deg, var(--mundo-fondo), var(--superficie) 70%);
  border: 1px solid var(--linea);
  border-radius: var(--radio-dialogo);
  box-shadow: var(--sombra-2);
}
.mundo__arco {
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  border-radius: 999px 999px var(--radio-tarjeta) var(--radio-tarjeta);
  border: 3px solid var(--mundo-color);
  box-shadow: 0 0 0 5px var(--superficie), 0 0 0 6px color-mix(in oklab, var(--mundo-color) 35%, transparent);
  margin: var(--esp-2) var(--esp-2) 0;
}
.mundo__arco img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mundo__texto { display: grid; gap: var(--esp-2); }
.mundo__texto p { margin: 0; }
.mundo__quien {
  font-family: var(--fuente-etiqueta);
  font-weight: 900;
  font-size: var(--tipo-pequeno);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mundo-color);
}
.mundo__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tipo-h2);
  line-height: var(--interlineado-h2);
  color: var(--mundo-color);
  text-wrap: balance;
}
.mundo__desc { color: var(--tinta-suave); max-width: 30ch; justify-self: center; }

/* Personajes fuera del marco: solo sus siluetas se superponen a las ilustraciones. */
.mundo__personaje{display:none}
body[data-version="pro"] .seccion--mundos{position:relative;overflow:clip}
body[data-version="pro"] .seccion--mundos .seccion__marco{position:relative;isolation:isolate}
body[data-version="pro"] .seccion--mundos .seccion__marco::before{content:"";position:absolute;inset:20% -18% 0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 14% 54%,#afd6c436,transparent 45%),radial-gradient(ellipse at 88% 53%,#edb5d036,transparent 46%)}
body[data-version="pro"] .mundo{position:relative;isolation:isolate}
body[data-version="pro"] .mundo__personaje{display:block;position:absolute;pointer-events:auto;cursor:pointer;z-index:3;translate:0 var(--mundo-desplazamiento,0px);transition:translate 380ms ease-out}
.mundo__personaje img{display:block;width:100%;height:auto;filter:drop-shadow(1px 7px 5px #23384d26);animation:personaje-respira 6s ease-in-out infinite alternate;animation-play-state:paused;transform-origin:50% 80%}
.mundos-vivos .mundo__personaje img{animation-play-state:running}
.mundo__personaje--selva{width:clamp(174px,25.8vw,347px);left:-38%;top:23%}
.mundo__personaje--castillo{width:clamp(168px,21.3vw,282px);right:-34%;top:10%}
.mundo__personaje--castillo img{animation-delay:-2.4s;animation-duration:7s}
@keyframes personaje-respira{from{transform:translateY(2px) rotate(-.65deg)}to{transform:translateY(-3px) rotate(.65deg)}}
@media(min-width:48rem) and (max-width:76rem){body[data-version="pro"] .mundos{margin-inline:60px}.mundo__personaje--selva{left:-40%;width:246px}.mundo__personaje--castillo{right:-35%;width:213px}}
@media(max-width:47.99rem){body[data-version="pro"] .mundos{margin-inline:22px}.mundo__personaje--selva{width:166px;left:-55px;top:27%}.mundo__personaje--castillo{width:148px;right:-32px;top:12%}}
@media(prefers-reduced-motion:reduce){.mundo__personaje img{animation:none}body[data-version="pro"] .mundo__personaje{translate:none;transition:none}}

@media (min-width: 48rem) {
  .mundos { grid-template-columns: 1fr auto 1fr; gap: var(--esp-6); }
}

/* --------------------------------------------------------------------------
   5 · Confirma tu asistencia
   -------------------------------------------------------------------------- */
.rsvp {
  position: relative;
  overflow: hidden;
  width: min(100%, 38rem);
  margin-inline: auto;
  padding: var(--esp-10) var(--esp-5) var(--esp-8);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-dialogo);
  box-shadow: var(--sombra-3);
}
.rsvp::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--mundo-1, var(--titulo-a)), var(--acento) 50%, var(--mundo-2, var(--titulo-b)));
}
.rsvp__limite {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--esp-2);
  margin: var(--esp-2) 0 var(--esp-8);
  font-weight: 800;
  color: var(--titulo-b);
  text-align: center;
}
.rsvp__limite svg { width: 1.25em; height: 1.25em; flex: none; }
.rsvp__previo {
  margin: 0 0 var(--esp-6);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--radio-control);
  background: var(--exito-fondo);
  color: var(--tinta);
  font-size: var(--tipo-pequeno);
}
.rsvp__form { display: grid; gap: var(--esp-6); }
.opcional { font-weight: 400; color: var(--tinta-suave); }

.opciones,
.cuantos {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.opciones legend,
.cuantos legend { padding: 0; margin-bottom: var(--esp-2); }
.opciones__fila,
.cuantos__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--esp-3);
}
.opcion {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: 56px;
  padding: var(--esp-3) var(--esp-4);
  border: 1.5px solid var(--linea-fuerte);
  border-radius: var(--radio-control);
  background: var(--superficie);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--curva-estandar), background-color var(--dur-rapida) var(--curva-estandar), box-shadow var(--dur-rapida) var(--curva-estandar);
}
.opcion:hover { border-color: var(--tinta-suave); }
.opcion__control {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opcion__marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 50%;
  transition: background-color var(--dur-rapida) var(--curva-estandar), border-color var(--dur-rapida) var(--curva-estandar);
}
.opcion__marca svg { width: 15px; height: 15px; fill: none; stroke: var(--sobre-marca); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.opcion:has(.opcion__control:checked) {
  border-color: var(--marca);
  background: color-mix(in oklab, var(--marca) 7%, var(--superficie));
  box-shadow: inset 0 0 0 1px var(--marca);
}
.opcion:has(.opcion__control:checked) .opcion__marca { background: var(--marca); border-color: var(--marca); }
.opcion:has(.opcion__control:checked) .opcion__marca svg { opacity: 1; }
.opcion:has(.opcion__control:focus-visible) { outline: 2px solid var(--foco); outline-offset: 2px; }
.opciones[aria-invalid="true"] .opcion { border-color: var(--peligro); }

.paso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4);
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-control);
}
.paso__etiqueta { font-weight: 700; }
.paso__control { display: flex; align-items: center; gap: var(--esp-1); }
.paso__boton {
  display: grid;
  place-items: center;
  width: var(--objetivo-tactil);
  height: var(--objetivo-tactil);
  padding: 0;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-rapida) var(--curva-estandar), color var(--dur-rapida) var(--curva-estandar), transform var(--dur-instante) var(--curva-estandar);
}
.paso__boton:hover { border-color: var(--marca); color: var(--marca); }
.paso__boton:active { transform: scale(var(--escala-presion)); }
.paso__numero {
  width: 3ch;
  min-height: var(--objetivo-tactil);
  padding: 0;
  border: 0;
  border-radius: var(--radio-chico);
  background: transparent;
  text-align: center;
  font-size: 1.375rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  -moz-appearance: textfield;
  appearance: textfield;
}
.paso__numero::-webkit-inner-spin-button,
.paso__numero::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.paso__numero:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; }
.cuantos[aria-invalid="true"] .paso { border-color: var(--peligro); }

.telefono { display: flex; align-items: stretch; }
.telefono__prefijo {
  display: grid;
  place-items: center;
  padding: 0 var(--esp-3);
  background: var(--superficie-2);
  border: 1px solid var(--linea-fuerte);
  border-right: 0;
  border-radius: var(--radio-control) 0 0 var(--radio-control);
  font-weight: 800;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.telefono .sd-campo__control { border-radius: 0 var(--radio-control) var(--radio-control) 0; letter-spacing: 0.02em; }

.sd-casilla { font-weight: 600; }

.trampa {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.privacidad {
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-control);
}
.privacidad summary {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--objetivo-tactil);
  padding: 0 var(--esp-4);
  font-size: var(--tipo-pequeno);
  font-weight: 800;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radio-control);
}
.privacidad summary::-webkit-details-marker { display: none; }
.privacidad summary svg { width: 1.2em; height: 1.2em; color: var(--tinta-suave); }
.privacidad summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--tinta-suave);
  border-bottom: 2px solid var(--tinta-suave);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-media) var(--curva-estandar);
}
.privacidad[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.privacidad__texto {
  padding: 0 var(--esp-4) var(--esp-3);
  font-size: var(--tipo-pequeno);
  line-height: var(--interlineado-pequeno);
  color: var(--tinta-suave);
}
.privacidad__texto p { margin: 0 0 var(--esp-2); }
.privacidad__texto strong { color: var(--tinta); }

.rsvp__error-red {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  background: var(--peligro-fondo);
  border: 1px solid color-mix(in oklab, var(--peligro) 35%, transparent);
  border-radius: var(--radio-control);
  color: var(--tinta);
}
.rsvp__error-red svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--peligro); }
.rsvp__error-red p { margin: 0; }
.rsvp__enviar { min-height: 52px; font-size: 1.0625rem; font-weight: 800; }

.rsvp__exito {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  text-align: center;
}
.rsvp__exito > p { margin: 0; max-width: 32rem; }
.rsvp__sello {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--exito-fondo);
  color: var(--exito);
  animation: sello var(--dur-lenta) var(--curva-salida);
}
.rsvp__sello svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sello { from { opacity: 0; transform: scale(var(--escala-aparecer)) translateY(var(--dist-media)); } }
.rsvp__exito-titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tipo-h1);
  line-height: var(--interlineado-h1);
  color: var(--titulo-a);
}
.rsvp__exito-titulo:focus { outline: none; }
.rsvp__exito-texto { font-size: var(--tipo-h3); color: var(--tinta); }
.rsvp__exito-cal { width: min(100%, 22rem); }
.rsvp__lugar {
  display: grid;
  gap: var(--esp-1);
  width: min(100%, 26rem);
  padding: var(--esp-4) var(--esp-5);
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
}
.rsvp__lugar p { margin: 0; }
.rsvp__lugar-lbl { font-size: var(--tipo-pequeno); font-weight: 800; color: var(--tinta-suave); }
.rsvp__lugar-nombre { font-weight: 800; color: var(--tinta); }
.rsvp__lugar-dir { color: var(--tinta); }
.rsvp__lugar-botones { display: grid; gap: var(--esp-2); margin-top: var(--esp-3); }
.llegar { display: contents; }
.rsvp__exito-nota { color: var(--tinta-suave); font-size: var(--tipo-pequeno); }

@media (min-width: 40rem) {
  .rsvp { padding: var(--esp-12) var(--esp-10) var(--esp-10); }
}

/* --------------------------------------------------------------------------
   6 · Mesa de regalos
   -------------------------------------------------------------------------- */
.regalos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--esp-5);
  max-width: 52rem;
  margin: var(--esp-10) auto 0;
}
.regalo {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--esp-3);
  padding: var(--esp-6);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-dialogo);
  box-shadow: var(--sombra-2);
}
.regalo > p { margin: 0; }
.regalo .sd-boton { width: 100%; }
.regalo__icono {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--superficie-2);
  color: var(--titulo-b);
}
.regalo__icono svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.regalo__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tipo-h3);
  line-height: var(--interlineado-h3);
  color: var(--titulo-a);
}
.regalo__numero { display: grid; gap: 2px; }
.regalo__numero-lbl { font-size: var(--tipo-pequeno); font-weight: 800; color: var(--tinta-suave); }
.regalo__numero-valor { font-family: var(--fuente-display); font-weight: var(--peso-display); font-size: var(--tipo-cifra); color: var(--titulo-a); letter-spacing: 0.02em; }
.regalos--uno { grid-template-columns: minmax(0, 24rem); justify-content: center; }
.regalo .sd-boton svg { width: 1.1em; height: 1.1em; }
/* Nada listo todavía: una sola tarjeta compacta, sin botones */
.regalo--pronto {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-4);
  max-width: 34rem;
  margin: var(--esp-10) auto 0;
  padding: var(--esp-5) var(--esp-6);
}
.regalo__pronto-texto { display: grid; gap: var(--esp-1); }
.regalo__pronto-texto p { margin: 0; color: var(--tinta-suave); }
.regalos__pendiente {
  margin: var(--esp-5) auto 0;
  max-width: 34rem;
  text-align: center;
  font-size: var(--tipo-pequeno);
  color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   7 · Pie (isla de noche)
   -------------------------------------------------------------------------- */
.pie {
  position: relative;
  overflow: hidden;
  padding: var(--esp-20) var(--esp-4) calc(var(--esp-24) + env(safe-area-inset-bottom));
  background:
    radial-gradient(80% 60% at 50% 0%, var(--superficie-2), transparent 70%),
    var(--fondo);
  color: var(--tinta);
  text-align: center;
}
.pie::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  color: var(--acento);
  opacity: 0.8;
  box-shadow:
    6vw 2.5rem 1px, 18vw 1.5rem 0, 30vw 3.5rem 1px, 44vw 1.2rem 0, 58vw 2.8rem 1px, 71vw 1.6rem 0,
    84vw 3.2rem 1px, 94vw 1.8rem 0, 4vw 9rem 0, 95vw 11rem 1px, 8vw 16rem 1px, 91vw 18rem 0;
}
.pie__marco { position: relative; display: grid; gap: var(--esp-3); max-width: 36rem; margin-inline: auto; }
.pie__marco p { margin: 0; }
.pie__lema {
  font-family: var(--fuente-manuscrita);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  color: var(--marca-tinta);
}
.pie__titulo {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tipo-h2);
  line-height: var(--interlineado-h2);
}
.pie__fecha { font-weight: 800; color: var(--tinta-suave); }
.pie__gracias { color: var(--tinta-suave); font-size: var(--tipo-pequeno); margin-top: var(--esp-4) !important; }
.pie__contacto-agencia { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid color-mix(in oklab, var(--tinta-suave) 25%, transparent); color: var(--tinta-suave); font-size: .875rem; line-height: 1.6; }
.pie__contacto-agencia p + p { margin-top: .2rem; }
.pie__contacto-agencia a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; color: var(--tinta); text-underline-offset: .25em; }
.pie__contacto-agencia a svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Botón flotante, avisos y confeti
   -------------------------------------------------------------------------- */
/* Celular: barra inferior de ancho completo (no flota sobre las ilustraciones).
   Escritorio: no hace falta; el formulario queda a un scroll. */
.cta-barra {
  position: fixed;
  z-index: var(--z-flotante);
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--esp-4) var(--esp-4) calc(var(--esp-4) + env(safe-area-inset-bottom));
  background: var(--velo-tarjeta);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -10px 30px -18px var(--sombra-titulo);
  animation: cta-entra var(--dur-media) var(--curva-salida);
}
.cta-barra__boton {
  display: flex;
  width: 100%;
  max-width: 28rem;
  min-height: 52px;
  margin-inline: auto;
  border-radius: var(--radio-pildora);
  font-weight: 800;
}
@media (min-width: 48rem) {
  .cta-barra { display: none !important; }
}
@keyframes cta-entra { from { opacity: 0; transform: translateY(var(--dist-media)); } }
.confeti { position: fixed; inset: 0; z-index: var(--z-aviso); pointer-events: none; }

/* --------------------------------------------------------------------------
   Movimiento reducido: lo que no se expresa solo con tokens
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .portal__destellos,
  .portada__abrir svg { animation: none; }
  .portal__destellos { opacity: 0.7; }
  /* El enlace «Saltar a los detalles» aparece sin deslizarse. */
  .sd-saltar { transition: none; }
}

/* --------------------------------------------------------------------------
   Edición cuento · Una sola apertura, luego páginas para leer con calma.
   Las imágenes de la plantilla siguen siendo el respaldo. Cuando el arte
   nuevo esté listo, construir.mjs puede sustituirlo sin cambiar esta piel.
   -------------------------------------------------------------------------- */
.portal__escenario::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: clamp(10px, 2.2vw, 24px);
  border: 1px solid color-mix(in oklab, var(--luz-costura) 84%, transparent);
  border-radius: 43% 43% 4px 4px / 5% 5% 4px 4px;
  box-shadow: inset 0 0 0 4px color-mix(in oklab, var(--resplandor-portada) 26%, transparent), 0 0 0 1px color-mix(in oklab, var(--titulo-a) 24%, transparent);
  pointer-events: none;
}
.portal__cielo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 52% 35% at 50% 53%, color-mix(in oklab, var(--resplandor-portada) 46%, transparent), transparent 90%);
  pointer-events: none;
}
.portal__fondo {
  transition: transform 950ms cubic-bezier(.19,1,.22,1), filter 850ms ease;
}
.portal__senda {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--luz-costura);
  stroke-width: 9;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px var(--resplandor-portada)) drop-shadow(0 0 18px var(--luz-costura));
  opacity: calc(var(--revelar) * .85);
  transition: opacity 500ms ease 250ms;
  pointer-events: none;
}
.portal__destellos {
  z-index: 2;
  opacity: .5;
  animation-duration: 5s;
}
.portada__nota {
  grid-row: 1;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: var(--esp-4) 0 0;
  padding: .45rem .9rem;
  background: var(--velo-portada);
  border: 1px solid color-mix(in oklab, var(--titulo-y) 40%, transparent);
  border-radius: 999px;
  color: var(--titulo-a);
  font-family: var(--fuente-display);
  font-size: clamp(.82rem, .72rem + .4vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 5px 24px var(--sombra-titulo);
}
.portada__nota svg { width: .85rem; height: .85rem; color: var(--titulo-y); }
.portada__centro::before {
  inset: -2rem -2.5rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, var(--velo-portada) 0%, color-mix(in oklab, var(--resplandor-portada) 30%, transparent) 58%, transparent 78%);
  filter: none;
}
.portada__abrir {
  gap: .65rem;
  min-height: 54px;
  border: 2px solid var(--titulo-y);
  box-shadow: 0 6px 0 color-mix(in oklab, var(--titulo-y) 38%, transparent), 0 16px 28px var(--sombra-titulo);
}
.portada__abrir svg { animation: none; width: 1.35rem; height: 1.35rem; }
.portada__abrir:hover { box-shadow: 0 3px 0 color-mix(in oklab, var(--titulo-y) 38%, transparent), 0 12px 22px var(--sombra-titulo); }
.portal__revelado::before {
  inset: -2.5rem -3rem;
  background: radial-gradient(ellipse, var(--velo-revelado) 0%, color-mix(in oklab, var(--resplandor-portada) 40%, transparent) 54%, transparent 82%);
}
.revelado__titulo { font-size: clamp(2.6rem, 2rem + 3vw, 5rem); }
.contador__celdas { gap: clamp(.25rem, 1vw, .75rem); }
.contador__celda {
  border-radius: 12px 12px 24px 24px;
  border-color: color-mix(in oklab, var(--titulo-y) 34%, var(--resplandor-portada));
  box-shadow: 0 3px 0 color-mix(in oklab, var(--titulo-y) 24%, transparent), var(--sombra-2);
}

/* El cuerpo se lee como páginas de un mismo libro. Los adornos son quietos;
   la fecha, el formulario y los enlaces conservan el primer plano. */
.hoja {
  margin-top: 0;
  padding-top: clamp(1.5rem, 5vw, 4rem);
  border-radius: 0;
  background:
    linear-gradient(90deg, color-mix(in oklab, var(--titulo-y) 6%, transparent), transparent 12%, transparent 88%, color-mix(in oklab, var(--titulo-y) 6%, transparent)),
    radial-gradient(ellipse 120% 38rem at 50% 0%, var(--superficie), transparent 70%),
    var(--fondo);
  box-shadow: inset 0 1rem 2rem -2rem var(--sombra-titulo);
}
.hoja::before {
  content: "";
  display: block;
  width: min(11rem, 36vw);
  height: 1.1rem;
  margin: 0 auto;
  border-top: 2px solid var(--acento);
  border-bottom: 1px solid var(--acento);
  -webkit-mask: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  mask: linear-gradient(90deg, transparent, #000 24%, #000 76%, transparent);
  opacity: .65;
}
.seccion { position: relative; }
.seccion__titulo { font-size: clamp(2.25rem, 1.65rem + 3.2vw, 4.2rem); }
.seccion__titulo::after { width: 8rem; margin-top: var(--esp-3); }
.boleto {
  border: 1px solid color-mix(in oklab, var(--titulo-y) 42%, var(--linea));
  border-radius: 4px 4px 28px 28px;
  box-shadow: 0 12px 0 -6px var(--superficie-2), 0 24px 36px -23px var(--sombra-titulo);
}
.boleto__fecha {
  background:
    radial-gradient(circle at 16% 12%, var(--mundo-1-suave, var(--superficie-2)), transparent 47%),
    radial-gradient(circle at 83% 92%, var(--mundo-2-suave, var(--superficie-2)), transparent 48%),
    var(--superficie-2);
}
.boleto__dia { text-shadow: 0 3px 0 color-mix(in oklab, var(--titulo-y) 20%, transparent); }
.dato__icono {
  border-radius: 50% 50% 42% 42%;
  border: 1px solid color-mix(in oklab, var(--titulo-y) 36%, var(--linea));
}
.seccion--mundos::before {
  content: "";
  display: block;
  width: 2px;
  height: clamp(2rem, 5vw, 4rem);
  margin: 0 auto var(--esp-6);
  background: linear-gradient(transparent, var(--acento), transparent);
}
.cuento__marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  width: 8rem;
  margin: 0 auto var(--esp-3);
  color: var(--acento);
}
.cuento__marca span { width: 2.2rem; height: 1px; background: currentColor; opacity: .55; }
.cuento__marca svg { width: 1rem; height: 1rem; }
.mundo {
  border-radius: 46% 46% 12px 12px / 6% 6% 12px 12px;
  border-color: color-mix(in oklab, var(--mundo-color) 36%, var(--linea));
  box-shadow: 0 8px 0 -4px color-mix(in oklab, var(--mundo-color) 18%, transparent), 0 20px 36px -25px var(--sombra-titulo);
}
.mundo__arco {
  border-width: 2px;
  box-shadow: 0 0 0 4px var(--superficie), 0 0 0 6px color-mix(in oklab, var(--mundo-color) 46%, transparent);
}
.mundos__y {
  position: relative;
  text-shadow: 0 0 12px var(--resplandor-portada);
}
.mundos__y::before,
.mundos__y::after {
  content: "";
  display: block;
  width: 2px;
  height: 1.5rem;
  margin: .3rem auto;
  background: linear-gradient(transparent, var(--acento), transparent);
}
.rsvp {
  border-radius: 28px 28px 8px 8px;
  border-color: color-mix(in oklab, var(--titulo-y) 32%, var(--linea));
  box-shadow: 0 10px 0 -5px var(--superficie-2), 0 24px 40px -25px var(--sombra-titulo);
}
.rsvp::before { height: 4px; background: linear-gradient(90deg, var(--mundo-1), var(--acento), var(--mundo-2)); }
.seccion--regalos { padding-top: clamp(3rem, 5vw, 5rem); }
.regalo { border-color: color-mix(in oklab, var(--titulo-y) 26%, var(--linea)); }

@media (max-height: 710px) {
  .js .portal { min-height: 31rem; }
  .js .portal__revelado { padding-block: var(--esp-3); }
  .contador { margin-block: var(--esp-3); }
  .contador__celda { padding-block: var(--esp-2); }
  .portada__nota { margin-top: 0; }
}
@media (max-width: 40rem) {
  .portada__centro::before { inset: -1.3rem -.8rem; }
  .portada__nota { max-width: 75%; }
  .js .portal__revelado { width: min(100% - 2.4rem, 30rem); }
  .contador__num { font-size: clamp(1.6rem, 8vw, 2.6rem); }
  .contador__lbl { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .portal__fondo, .portal__senda, .portal__puerta, .portal__puerta img,
  .portal__luz, .portal__luz::after, .portal__portada, .js .portal__revelado,
  .js .portal__escenario[data-abierto] .portal__revelado { transition: none; }
  .portal__destellos { animation: none; }
}

/* ==========================================================================
   Lista de invitados (/lista) · panel claro del sistema
   ========================================================================== */
.lista { min-height: 100vh; }
.lista__marco { width: min(100% - 2 * var(--esp-margen), var(--ancho-contenido)); margin-inline: auto; }
.lista__cabeza {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
  padding-block: var(--esp-6);
}
.lista__cabeza-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-4);
}
.lista__cabeza p { margin: 0; }
.lista__evento {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tipo-h3);
  color: var(--titulo-b);
}
.lista__titulo { font-family: var(--fuente-texto); font-weight: 800; color: var(--tinta); margin: 0; }
.lista__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
@media (max-width: 40rem) {
  .lista__acciones { width: 100%; }
  .lista__acciones .sd-boton { flex: 1 1 auto; }
  .total { padding: var(--esp-4); }
  .total--si { grid-column: 1 / -1; }
}
.lista__acciones .sd-boton svg { width: 1.15em; height: 1.15em; }
.lista__cuerpo { display: grid; gap: var(--esp-6); padding-block: var(--esp-6) var(--esp-16); }
.lista__estado p { margin: 0; }
.lista__estado-titulo { font-weight: 800; }

.lista__totales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--esp-3);
}
.total {
  display: grid;
  gap: var(--esp-1);
  padding: var(--esp-5);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio-tarjeta);
  box-shadow: var(--sombra-1);
}
.total .sd-cifra { font-size: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); color: var(--titulo-a); }
.total__lbl { font-weight: 700; color: var(--tinta-suave); }
.total--si { border-top: 4px solid var(--exito); }
.total--no { border-top: 4px solid var(--linea-fuerte); }

.lista__filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--esp-3);
  margin-bottom: var(--esp-2);
}
.lista__buscar-caja { position: relative; }
.lista__buscar-caja svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  color: var(--tinta-suave);
  pointer-events: none;
}
.lista__buscar-caja .sd-campo__control { padding-left: 40px; }
.lista__mensaje { font-style: italic; max-width: 40ch; }
.lista__tel { white-space: nowrap; font-weight: 600; }
.lista__recuerda { display: inline-flex; align-items: center; gap: 4px; }
.lista__recuerda svg { width: 14px; height: 14px; }
.lista__wa svg { width: 1.1em; height: 1.1em; }
.lista__tabla td[data-area="accion"] { text-align: right; }

@container (max-width: 40rem) {
  .lista__tabla tr {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "principal estado"
      "adultos ninos"
      "contacto contacto"
      "accion accion";
  }
  .lista__tabla td[data-area="adultos"] { grid-area: adultos; text-align: left; }
  .lista__tabla td[data-area="ninos"] { grid-area: ninos; text-align: left; justify-self: start; }
  .lista__tabla td[data-area="contacto"] { grid-area: contacto; }
  .lista__tabla td[data-area="accion"] { grid-area: accion; justify-self: stretch; }
  .lista__tabla .lista__wa { width: 100%; min-height: var(--objetivo-tactil); }
}

/* Lugar: misma información y navegación para Estándar y Pro. */
.lugar-estado { width:fit-content; margin:0 0 .6rem !important; padding:.35rem .7rem; border-radius:99px; font-family:var(--fuente-texto); font-size:.75rem; font-weight:800; line-height:1.35; color:var(--titulo-b); background:color-mix(in oklab,var(--titulo-b) 8%,var(--superficie)); }
.lugar-referencia { margin-top:.65rem !important; font-size:.92rem; line-height:1.55; color:var(--tinta-suave); }
.lugar-foto { margin:0; overflow:hidden; border:1px solid var(--linea); border-radius:18px; background:var(--superficie-2); }
.lugar-foto img { display:block; width:100%; height:auto; aspect-ratio:8/5; object-fit:cover; }
.lugar-foto figcaption { padding:.7rem 1rem; font-size:.8rem; line-height:1.5; color:var(--tinta-suave); }
.boleto__acciones .lugar-maps { width:100%; }
.boleto__info { min-width:0; }
.boleto__info .dato__valor,.boleto__info .dato__extra { overflow-wrap:anywhere; }

/* --------------------------------------------------------------------------
   3b · Programa: tarjetas de lo que habrá (sección propia tras «Cuándo y dónde»)
   Celular: una columna de tarjetas horizontales (medallón a la izquierda), sin
   huecos aunque una tarjeta traiga enlace. Desde 40rem: rejilla de 3 con el arco
   de cuento de las tarjetas de mundo. El mundo de la actividad tiñe fondo, borde e
   ícono. Fondos solo con tokens (-suave, superficie, superficie-2) para que
   qa/contraste-pagina.mjs los verifique. La tarjeta con enlace es un <a> completo.
   -------------------------------------------------------------------------- */
.programa {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-3);
  max-width: 56rem;
  margin: var(--esp-8) auto 0;
  padding: 0;
}
.programa__celda { display: grid; min-width: 0; }
.actividad {
  --act-color: var(--titulo-b);
  --act-fondo: var(--superficie-2);
  position: relative;               /* ancla el .sd-oculto del enlace */
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-width: 0;
  min-height: 5rem;
  padding: var(--esp-3) var(--esp-4) var(--esp-3) var(--esp-3);
  text-align: left;
  color: var(--tinta);
  text-decoration: none;
  background: linear-gradient(90deg, var(--act-fondo), var(--superficie) 88%);
  border: 1px solid color-mix(in oklab, var(--act-color) 28%, var(--linea));
  border-radius: 40px 18px 18px 40px;
  box-shadow: 0 5px 0 -3px color-mix(in oklab, var(--act-color) 16%, transparent), 0 14px 24px -20px var(--sombra-titulo);
}
.actividad--selva { --act-color: var(--mundo-selva, var(--titulo-a)); --act-fondo: var(--mundo-selva-suave, var(--superficie-2)); }
.actividad--castillo { --act-color: var(--mundo-castillo, var(--titulo-b)); --act-fondo: var(--mundo-castillo-suave, var(--superficie-2)); }
.actividad__icono {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50% 50% 42% 42%;
  background: var(--superficie);
  border: 1px solid color-mix(in oklab, var(--titulo-y) 36%, var(--linea));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--act-color) 9%, transparent);
  color: var(--act-color);
}
.actividad__icono svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.actividad__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-1); flex: 1; min-width: 0; }
.actividad__mundo {
  font-family: var(--fuente-etiqueta);
  font-size: .6875rem;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--act-color);
}
.actividad__hora { font-size: var(--tipo-pequeno); font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--tinta-suave); }
.actividad__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-variation-settings: "SOFT" 100;
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.35rem);
  line-height: 1.15;
  color: var(--titulo-a);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
/* Con enlace: marco dorado del «&» y una píldora vino que dice a dónde lleva. */
a.actividad {
  cursor: pointer;
  min-height: var(--objetivo-tactil);
  border: 1.5px solid color-mix(in oklab, var(--titulo-y) 62%, var(--linea));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--titulo-y) 12%, transparent), 0 6px 0 -3px color-mix(in oklab, var(--titulo-y) 26%, transparent), 0 18px 30px -20px var(--sombra-titulo);
  transition: transform var(--dur-rapida) var(--curva-estandar), box-shadow var(--dur-media) var(--curva-estandar);
  -webkit-tap-highlight-color: transparent;
}
.actividad__cta {
  display: inline-block;            /* si se parte en dos líneas, la flecha sigue a la última palabra */
  margin-top: var(--esp-2);
  padding: .6rem .95rem;
  border-radius: 14px;
  text-align: center;
  background: var(--marca);
  color: var(--sobre-marca);
  font-family: var(--fuente-texto);
  font-size: .875rem;
  font-weight: 800;
  line-height: 1.25;
  text-wrap: balance;
}
.actividad__flecha { display: inline-block; margin-left: .4em; transition: transform var(--dur-rapida) var(--curva-estandar); }
a.actividad:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  a.actividad:hover { transform: translateY(-3px); box-shadow: 0 0 0 5px color-mix(in oklab, var(--titulo-y) 18%, transparent), 0 9px 0 -4px color-mix(in oklab, var(--titulo-y) 30%, transparent), 0 24px 36px -22px var(--sombra-titulo); }
  a.actividad:hover .actividad__cta { background: var(--marca-hover, var(--marca)); }
  a.actividad:hover .actividad__flecha { transform: translateX(3px); }
}
a.actividad:active { transform: scale(var(--escala-presion, .98)); }
@media (prefers-reduced-motion: reduce) {
  a.actividad, .actividad__flecha { transition: none; }
  a.actividad:hover, a.actividad:active, a.actividad:hover .actividad__flecha { transform: none; }
}
/* iPad y computadora: rejilla de 3 tarjetas en arco, contenido centrado. */
@media (min-width: 40rem) {
  .programa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-4); margin-top: var(--esp-10); }
  .actividad {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--esp-3);
    padding: var(--esp-5) var(--esp-4);
    text-align: center;
    background: linear-gradient(180deg, var(--act-fondo), var(--superficie) 80%);
    border-radius: 999px 999px 16px 16px / 64px 64px 16px 16px;
    box-shadow: 0 6px 0 -3px color-mix(in oklab, var(--act-color) 16%, transparent), 0 16px 28px -22px var(--sombra-titulo);
  }
  .actividad__texto { flex: 1; align-items: center; width: 100%; }
  .actividad__titulo:not(:last-child) { margin-bottom: var(--esp-2); }
  .actividad__cta { margin-top: auto; }
}

/* Dos experiencias del mismo evento. El desplazamiento Pro conserva el imán. */
.comparar { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 18px; padding:8px 12px; background:#112939; color:#f8e5b3; font:600 13px/1.4 var(--fuente-texto); }
.comparar span { opacity:.8; }
.comparar a { color:inherit; padding:10px 8px; text-decoration:none; border-bottom:2px solid transparent; }
.comparar a[aria-current] { border-color:#f8e5b3; }
.cuento__volver { display:block; margin:12px auto 0; padding:10px 14px; min-height:44px; border:0; background:var(--velo-revelado); border-radius:30px; color:var(--titulo-a); font:600 13px var(--fuente-texto); cursor:pointer; }
.cuento__paginas { display:none; }
.privacidad-breve { display:grid; gap:14px; font-size:14px; line-height:1.55; }
.privacidad-breve p { margin:0; color:var(--tinta-suave); }
.privacidad-breve .sd-casilla { align-items:start; }
.privacidad-breve a { color:var(--titulo-a); text-underline-offset:3px; }
.aviso-general { background:#f7f8f7; color:#172e3e; font:17px/1.7 system-ui,sans-serif; }
.aviso-general main { max-width:760px; margin:0 auto; padding:40px 22px 80px; }
.aviso-general h1 { font-size:clamp(2rem,6vw,3.4rem); line-height:1.1; }
.aviso-general h2 { margin-top:36px; font-size:1.3rem; }
.aviso-general a { color:#12516a; display:inline-flex; align-items:center; min-height:44px; text-underline-offset:3px; }
.aviso-borrador { padding:16px; background:#fff2cc; border-left:3px solid #9b6a00; }
/* Estándar recupera el portal original de dos mitades y su controlador de scroll. */
body[data-version="estandar"] .portal__escenario::after, body[data-version="estandar"] .portal__senda, body[data-version="estandar"] .cuento-video { display:none; }
body[data-version="estandar"] .portada__nota { display:none; }
body[data-version="estandar"] .portal__portada { padding-bottom:90px; }
body[data-version="estandar"] .portada__abrir { border-width:1px; box-shadow:0 4px 18px #17304426; }

/* Preferencias compactas: un control voluntario, aviso junto al envío. */
.privacidad-breve{gap:4px;font-size:12px;line-height:1.45}
.privacidad-breve .sd-casilla{font-size:13px;gap:8px;min-height:44px;align-items:center}
.privacidad-breve .sd-casilla__caja{width:18px;height:18px}
.privacidad-breve small{font-size:11px}
.privacidad-breve p{font-size:12px}

/* Prólogo inmersivo: arte original → vuelo → invitación con pausa de lectura. */
.viaje-capas{display:none}
body[data-version="pro"] .portal{--alto-escena:100svh;--ancho-cuento:min(100vw,calc(var(--alto-escena)*.67));background:#16394b}
body[data-version="pro"] .portal__escenario{--viaje:0;--salida:0;perspective:none}
body[data-version="pro"] .portal__puerta{display:block;width:calc(var(--ancho-cuento)/2);height:100%;align-self:center;border:0;margin:0;border-radius:0;box-shadow:none;background:none;transition:none}
body[data-version="pro"] .portal__puerta--izq{justify-self:center;margin-right:calc(var(--ancho-cuento)/2);transform:translateX(calc(var(--abrir)*-75vw)) scale(calc(1 + var(--abrir)*.5))}
body[data-version="pro"] .portal__puerta--der{justify-self:center;margin-left:calc(var(--ancho-cuento)/2);transform:translateX(calc(var(--abrir)*75vw)) scale(calc(1 + var(--abrir)*.5))}
body[data-version="pro"] .portal__puerta img{opacity:1;filter:none;transform:none;object-position:var(--focal)}
body[data-version="pro"] .portal__puerta::before,body[data-version="pro"] .portal__puerta::after,body[data-version="pro"] .portal__luz,body[data-version="pro"] .cuento__paginas,body[data-version="pro"] .portal__senda,body[data-version="pro"] .portal__nubes,body[data-version="pro"] .portal__escenario::after{display:none}
body[data-version="pro"] .portal__portada{width:var(--ancho-cuento);height:100%;border:0;border-radius:0;box-shadow:none;background:none;padding:24px 18px;justify-self:center;grid-template-rows:1fr auto 1fr;transform:scale(calc(1 + var(--titulo)*.3));opacity:calc(1 - var(--titulo));transition:none}
body[data-version="pro"] .portal__portada::after,body[data-version="pro"] .portada__nota{display:none}
body[data-version="pro"] .portada__centro{grid-row:2;align-self:center;width:100%;padding:0;filter:none}
body[data-version="pro"] .portada__centro::before{display:block;inset:-22px 0;background:#fff2d064;filter:blur(22px)}
body[data-version="pro"] .titulo{font-size:clamp(3rem,9vh,5.2rem);line-height:.92;white-space:normal}
body[data-version="pro"] .titulo>span{display:block;text-shadow:var(--halo-texto),0 3px 12px #ffffff88}
body[data-version="pro"] .titulo__a{color:var(--titulo-a)}
body[data-version="pro"] .titulo__b{color:var(--titulo-b)}
body[data-version="pro"] .lema{color:var(--titulo-a);text-shadow:var(--halo-texto);font-size:clamp(1.3rem,3vh,1.8rem);margin-top:16px}
body[data-version="pro"] .portada__abrir{background:#fffbee;color:#142f47;box-shadow:0 4px 24px #14354535;font-size:15px;min-height:52px}
body[data-version="pro"] .portal__fondo{filter:brightness(.78) blur(4px);transform:scale(calc(1.05 + var(--viaje)*.16));transition:none;opacity:1}
body[data-version="pro"] .portal__revelado{width:min(88%,600px);z-index:7;opacity:var(--revelar);transform:translateY(calc((1 - var(--revelar))*24px));transition:none}
body[data-version="pro"] .portal__revelado::before{inset:-24px -18px;border-radius:28px;background:#fff8ede8;box-shadow:0 16px 70px #0a223855;filter:none}
body[data-version="pro"] .cuento-video{display:none}
body[data-version="pro"] .cine-listo .cuento-video{display:block;position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;background:transparent;z-index:1;opacity:1}
body[data-version="pro"] .cine-listo .portal__cielo{background:#153041}
body[data-version="pro"] .cine-listo .portal__fondo{opacity:1;filter:blur(22px) brightness(.52)}
body[data-version="pro"] .cine-listo .portal__puerta{display:block}
body[data-version="pro"] .viaje-capas{display:block;position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden;opacity:calc(min(1,var(--viaje)*14)*(1 - var(--revelar)))}
.viaje-hojas{position:absolute;top:-2%;height:104%;width:32%;filter:drop-shadow(4px 4px 10px #08253444);will-change:transform}
.viaje-hojas--izq{left:0;transform:translateX(calc(var(--salida)*-105%)) scale(calc(1 + var(--salida)*.22));transform-origin:left center}
.viaje-hojas--der{right:0;transform:translateX(calc(var(--salida)*105%)) scaleX(-1) scale(calc(1 + var(--salida)*.22));transform-origin:center}
.viaje-marco{position:absolute;inset:8px;border:1px solid #e7cd91aa;border-radius:45% 45% 3px 3px/15% 15% 3px 3px;transform:scale(calc(1 + var(--salida)*1.7));opacity:calc(1 - var(--salida))}
.viaje-niebla{position:absolute;inset:60% -20% -20%;background:radial-gradient(ellipse,#eacfea88,transparent 68%);filter:blur(26px);transform:translateY(calc(var(--salida)*85%)) scale(calc(1 + var(--salida)))}
.viaje-luz{position:absolute;inset:0;background:radial-gradient(ellipse 30% 55% at 50% 48%,#fff4c35c,transparent 70%);opacity:calc(1 - var(--salida))}
@media(prefers-reduced-motion:no-preference){
 .js body[data-version="pro"] .portal{height:calc(var(--alto-escena)*(2.6 + var(--pausa-invitacion,1)));min-height:0}
 .js body[data-version="pro"] .portal__escenario{height:var(--alto-escena);position:sticky;top:0;grid-template-rows:100%;overflow:clip}
 .js body[data-version="pro"] .portal__escenario.salida-fija{position:fixed;inset:0;width:100%;z-index:0}
 .js body[data-version="pro"] .portal__escenario.salida-cubierta{visibility:hidden;pointer-events:none}
 body[data-version="pro"] .hoja{width:calc(100% - var(--hoja-margen,36px));margin:0 auto;border-radius:36px 36px 0 0;border:1px solid #fff9;border-bottom:0;box-shadow:0 -12px 48px #0c263338;background:var(--superficie,#fffdf9);padding-top:48px}
 body[data-version="pro"] .hoja::before{content:"";position:absolute;left:50%;right:auto;top:16px;translate:-50% 0;width:42px;height:5px;margin:0;border:0;border-radius:8px;mask:none;opacity:1;background:#122d4929;pointer-events:none}
 .salida-cubierta .cuento-brisa,.salida-cubierta .cuento-respira,.salida-cubierta .globo,.salida-cubierta .portal__revelado::after{animation-play-state:paused}
}
@media(max-width:600px){body[data-version="pro"] .hoja{--hoja-margen:14px;border-radius:28px 28px 0 0}}
@media(prefers-reduced-motion:reduce){
 body[data-version="pro"] .portal{height:auto;min-height:0}
 body[data-version="pro"] .portal__escenario{height:auto;position:relative;grid-template-rows:100svh auto;--abrir:0;--titulo:0;--revelar:1}
 body[data-version="pro"] .portal__cielo,body[data-version="pro"] .portal__revelado{grid-row:2}
 body[data-version="pro"] .portal__revelado{padding:48px 0;transform:none;opacity:1;visibility:visible;pointer-events:auto}
 body[data-version="pro"] .viaje-capas,body[data-version="pro"] .cuento-video{display:none!important}
 body[data-version="pro"] .portal__portada{visibility:visible!important;opacity:1;transform:none}
}
@media(max-width:600px){body[data-version="pro"] .portal{--ancho-cuento:100vw}body[data-version="pro"] .cine-listo .cuento-video{width:100%;left:0;object-fit:cover}body[data-version="pro"] .titulo{font-size:clamp(3rem,14vw,4.8rem)}}
body[data-version="pro"] .titulo>.titulo__a{color:var(--titulo-a)}
body[data-version="pro"] .titulo>.titulo__b{color:var(--titulo-b)}
body[data-version="pro"] .titulo>.titulo__y{color:var(--titulo-y)}
body[data-version="pro"] .portal__portada{padding-bottom:82px}
body[data-version="pro"] .portada__centro{transform:translateY(-20px)}
body[data-version="pro"] .titulo>.titulo__y{background:none;-webkit-text-fill-color:#98600e;filter:none;text-shadow:0 1px 2px #fff5d5;font-size:.95em;line-height:.82}
body[data-version="pro"] .portal__revelado{align-self:center;height:auto;padding-block:20px}
body[data-version="pro"] .portal__revelado::before{inset:-20px -12px}
/* Las máscaras de personajes del arte original siguen pendientes; evitar siluetas genéricas sobre la toma. */
.viaje-hojas{display:none}
/* Personajes recortados: activar únicamente cuando existan las cuatro piezas reales. */
.cuento-composicion{position:absolute;z-index:3;inset:0;pointer-events:none}
.cuento-base{position:absolute;inset:0;opacity:calc(1 - var(--base-sale,0));transform:scale(calc(1 + var(--viaje)*.18));transform-origin:35% 34%}
.cuento-base img{width:100%;height:100%;object-fit:cover}
body[data-version="pro"] .con-personajes .portal__puerta{display:none}
/* Cada mitad se ancla a SU orilla con la proporción real de la pieza (1520x2688 = .5655).
   Antes el ancho se forzaba a min(100vw,...): en pantallas angostas la planta se aplastaba
   horizontalmente y, como 100vw incluye la barra de scroll, la mitad derecha se recorría
   hacia adentro y dejaba una franja sin arte en la orilla. El 2% extra es sangrado para que
   la brisa no descubra el borde al girar. */
.cuento-planta{--mitad:min(50%,calc(var(--alto-escena)*.2828));position:absolute;top:-1%;height:102%;width:calc(var(--mitad) + 2%);z-index:2;opacity:calc(1 - var(--base-sale,0));transform-origin:center}
.cuento-planta--izq{left:-2%;--lado:-1}
.cuento-planta--der{right:-2%;--lado:1}
.cuento-planta--alta{transform:translate(calc(var(--lado)*var(--plantas-lejos,0)*55vw),calc(var(--plantas-lejos,0)*-24vh))}
.cuento-planta--baja{z-index:4;transform:translate(calc(var(--lado)*var(--plantas-cerca,0)*65vw),calc(var(--plantas-cerca,0)*26vh))}
.cuento-brisa{width:100%;height:100%;animation:cuento-brisa 5.8s ease-in-out infinite alternate;transform-origin:0 0;--brisa-lado:1;--brisa-arco:1.05deg;--brisa-x:5px;--brisa-y:3px}
.cuento-planta--der .cuento-brisa{--brisa-lado:-1;transform-origin:100% 0;animation-duration:7.1s;animation-delay:-2.2s}
.cuento-planta--baja .cuento-brisa{--brisa-arco:1.65deg;--brisa-x:9px;--brisa-y:5px;animation-duration:4.8s;animation-delay:-3s;transform-origin:50% 100%}
.cuento-planta--baja.cuento-planta--der .cuento-brisa{animation-duration:6.2s;animation-delay:-1.4s}
.cuento-planta--alta .cuento-brisa{mask-image:linear-gradient(#000 24%,transparent 57%)}
.cuento-planta--baja .cuento-brisa{mask-image:linear-gradient(transparent 34%,#000 67%)}
/* cover + object-position mantiene la proporción y pega el arte a la orilla de afuera:
   la mitad que sobra se recorta por el centro (que está vacío), nunca por las plantas. */
.cuento-brisa img{width:100%;height:100%;object-fit:cover}
.cuento-planta--izq .cuento-brisa img{object-position:left center}
.cuento-planta--der .cuento-brisa img{object-position:right center}
.cuento-planta{mix-blend-mode:multiply}
.cuento-camaleon{position:absolute;z-index:3;left:-5%;bottom:3%;width:clamp(280px,46.6vw,676px);opacity:calc(1 - var(--base-sale,0));transform:translate(calc(var(--camaleon-sale,0)*-65vw),calc(var(--camaleon-sale,0)*12vh)) scale(calc(1 + var(--camaleon-sale,0)*.24));transform-origin:21.4% 65%}
.cuento-respira{animation:cuento-respirar 6s ease-in-out infinite alternate;transform-origin:27.4% 70%}
.cuento-mirada{position:relative;translate:var(--raton-x,0px) var(--raton-y,0px);transition:translate 300ms ease-out}
.cuento-respira img{width:100%;height:auto;display:block}
.cuento-ojo{position:absolute;left:70.33%;top:20.7%;width:3.86%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#e3ab27 40%,#c79c2c 61%,transparent 72%);display:grid;place-items:center}
.cuento-pupila{width:48%;aspect-ratio:.88;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff6d8 0 12%,#1c2117 18% 67%,#354825 100%);transform:translate(var(--ojo-x,0px),var(--ojo-y,0px));transition:transform 160ms ease-out}
.capas-pausadas .cuento-respira,.capas-pausadas .cuento-brisa{animation-play-state:paused}
@keyframes cuento-respirar{from{transform:translateY(-2.6px) rotate(-.8deg)}to{transform:translateY(2.6px) rotate(.8deg)}}
@keyframes cuento-brisa{from{transform:translate(0,calc(var(--brisa-y)*-1)) rotate(calc(var(--brisa-lado)*var(--brisa-arco)*-1))}to{transform:translate(calc(var(--brisa-lado)*var(--brisa-x)),var(--brisa-y)) rotate(calc(var(--brisa-lado)*var(--brisa-arco)))}}
/* Un solo fondo a sangre; las capas se anclan a los bordes del viewport. */
body[data-version="pro"] .con-personajes .cuento-video{object-fit:cover}
body[data-version="pro"] .con-personajes .portal__portada{width:min(90vw,950px)}
.con-personajes:not(.cine-listo) .cuento-base{opacity:1}
@media(min-aspect-ratio:1/1){
 .cuento-camaleon{bottom:-16%}
 body[data-version="pro"] .con-personajes .titulo>span{display:inline}
 body[data-version="pro"] .con-personajes .titulo{font-size:clamp(3rem,6vw,6rem);line-height:1.1}
 body[data-version="pro"] .con-personajes .titulo>.titulo__y{margin-inline:.12em}
}
@media(max-aspect-ratio:1/1){.cuento-camaleon{left:-6%;bottom:4%;width:min(75.8vw,408px)}}
/* La película empieza en el mismo dibujo. La transformación ocurre dentro del video. */
.cine-listo .cuento-base{transform:none;mask-image:none;filter:none}
.cuento-composicion::after{display:none}
body[data-version="pro"] .con-personajes.cine-listo .cuento-video{width:100%;max-width:none;height:100%;left:0;right:0;object-fit:cover;object-position:50% 50%;background:#0c2227}
body[data-version="pro"] .con-personajes.cine-listo .portal__cielo{background:radial-gradient(ellipse at 22% 50%,#123c3e,transparent 50%),radial-gradient(ellipse at 88% 55%,#352738,transparent 50%),#091b22}
body[data-version="pro"] .con-personajes.cine-listo .portal__fondo{opacity:0}
.cine-estado{position:absolute;left:50%;bottom:7%;translate:-50% 0;z-index:12;padding:10px 18px;border:1px solid #d6b570;border-radius:24px;background:#fffaf0ed;color:#173550;font:500 13px var(--fuente-texto);white-space:nowrap;pointer-events:none}
.cine-estado[hidden]{display:none}
.cuento-magia{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
@media(pointer:fine) and (prefers-reduced-motion:no-preference){
 .portal__escenario.hada-activa,.portal__escenario.hada-activa *{cursor:none!important}
}
body[data-version="pro"] .portal__revelado{width:min(86%,580px);padding:28px 8px}
body[data-version="pro"] .portal__revelado::before{inset:-14px -18px;border-radius:80px 80px 30px 30px/40px 40px 30px 30px;background:#fff8ece8;border:1px solid #e4c780;box-shadow:0 14px 60px #132c4138}
body[data-version="pro"] .portal__revelado::after{content:"✧  ✦  ✧";position:absolute;top:-26px;left:50%;translate:-50% 0;color:#b97d25;font-size:28px;letter-spacing:14px;white-space:nowrap;animation:cuento-constelacion 5s ease-in-out infinite alternate}
body[data-version="pro"] .portal__revelado .etiqueta{font-size:12px;letter-spacing:.2em}
body[data-version="pro"] .revelado__titulo{font-size:clamp(2.3rem,5vw,3.8rem);line-height:1.05;margin-top:10px}
body[data-version="pro"] .revelado__fecha{font-size:clamp(.95rem,2vw,1.2rem);max-width:27ch;margin:18px auto 0}
body[data-version="pro"] .contador__celdas{gap:0;border-block:1px solid #d7b9697a;padding:14px 0}
body[data-version="pro"] .contador__celda{--paso:0;--entrada:clamp(0,calc(var(--revelar)*1.7 - var(--paso)*.18),1);border:0;border-radius:0;box-shadow:none;background:none;backdrop-filter:none;padding:10px 2px;opacity:var(--entrada);transform:translateY(calc((1 - var(--entrada))*22px))}
body[data-version="pro"] .contador__celda+li{border-left:1px solid #d7b96966}
body[data-version="pro"] .contador__celda:nth-child(2){--paso:1}
body[data-version="pro"] .contador__celda:nth-child(3){--paso:2}
body[data-version="pro"] .contador__celda:nth-child(4){--paso:3}
body[data-version="pro"] .contador__num{font-size:clamp(2rem,5vw,3.5rem)}
body[data-version="pro"] .revelado__cta{box-shadow:0 6px 22px #86123a26}
.capas-pausadas .portal__revelado::after{animation-play-state:paused}
@keyframes cuento-constelacion{from{transform:translateY(-2px);opacity:.65}to{transform:translateY(3px);opacity:1}}
@media(prefers-reduced-motion:reduce){.cuento-composicion{height:100svh;bottom:auto}.cuento-respira,.cuento-brisa,body[data-version="pro"] .portal__revelado::after{animation:none}.cuento-mirada,.cuento-pupila{translate:none;transform:none;transition:none}.cuento-base,.cuento-planta,.cuento-camaleon{opacity:1;transform:none;mask-image:none;filter:none}.cuento-composicion::after{display:none}body[data-version="pro"] .contador__celda{opacity:1;transform:none}}


/* Globos lisos: dos profundidades alrededor de la tarjeta, sin dibujos impresos. */
.llegada-globos{display:none}
body[data-version="pro"] .llegada-globos{display:block;position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(96vw,1000px);height:var(--alto-escena);z-index:-2;pointer-events:none;opacity:var(--revelar,0);transform:translateY(calc((1 - var(--revelar,0))*230px))}
.globo{position:absolute;width:clamp(64px,7vw,112px);aspect-ratio:.78;translate:var(--globo-x,0px) var(--globo-y,0px);animation:globo-brisa 5.8s ease-in-out infinite alternate;transform-origin:50% 130%;will-change:transform,translate}
.globo__cuerpo{display:block;position:absolute;inset:0;border-radius:49% 49% 47% 47%/43% 43% 56% 56%;background:radial-gradient(ellipse at 29% 22%,#ffffffd9,transparent 17%),radial-gradient(ellipse at 38% 32%,color-mix(in srgb,var(--globo-color),white 46%),var(--globo-color) 50%,color-mix(in srgb,var(--globo-color),#391329 40%) 88%);box-shadow:inset -7px -5px 13px #47111b24,inset 3px 2px 5px #fff8,0 7px 18px #431b3020}
.globo__cuerpo::after{content:"";position:absolute;top:98%;left:43%;width:15%;height:7%;background:var(--globo-color);clip-path:polygon(50% 0,100% 100%,0 100%)}
.globo__cuerpo::before{content:"";position:absolute;left:17%;top:14%;width:12%;height:31%;border-radius:50%;background:linear-gradient(#ffffff70,#ffffff00);rotate:22deg;filter:blur(1px)}
body[data-version="pro"] .llegada-globos--frente{z-index:2}
.llegada-globos--frente .globo--1{left:17%;top:19%;width:clamp(50px,6vw,86px)}
.llegada-globos--frente .globo--4{right:17%;top:71%}
.globo svg{position:absolute;top:104%;left:38%;width:25%;height:110px;overflow:visible;fill:none;stroke:#f7df9cbc;stroke-width:1.2;vector-effect:non-scaling-stroke}
.globo--1{left:7%;top:22%;rotate:-12deg}
.globo--2{left:17%;top:10%;width:clamp(54px,6vw,86px);rotate:7deg;animation-delay:-2.3s;animation-duration:7s}
.globo--3{right:7%;top:17%;rotate:13deg;animation-delay:-1.5s;animation-duration:6.5s}
.globo--4{right:15%;top:65%;width:clamp(50px,5vw,80px);rotate:-8deg;animation-delay:-3.7s}
.globo--5{left:1%;top:51%;width:clamp(54px,6vw,94px);rotate:9deg;animation-delay:-1.1s;animation-duration:7.5s}
.globo--6{left:27%;top:4%;width:clamp(42px,4.8vw,65px);rotate:-7deg;animation-delay:-4.3s;animation-duration:6.8s}
.globo--7{right:25%;top:6%;width:clamp(44px,5vw,72px);rotate:8deg;animation-delay:-3s;animation-duration:8s}
.globo--8{right:0;top:49%;width:clamp(52px,5.8vw,90px);rotate:-11deg;animation-delay:-5s;animation-duration:7.4s}
.portada-pausada .globo,.capas-pausadas .globo{animation-play-state:paused}
@keyframes globo-brisa{from{transform:translate(-5px,7px) rotate(-3deg)}to{transform:translate(6px,-9px) rotate(3deg)}}
@media(max-width:600px){.globo--1{left:-2%;top:17%}.globo--2{left:8%;top:8%}.globo--3{right:-2%;top:15%}.globo--4{right:3%;top:72%}.globo--5{left:-3%;top:54%}.globo--6{left:30%;top:3%}.globo--7{right:25%;top:6%}.globo--8{right:-3%;top:51%}}
@media(max-width:600px){.llegada-globos--frente .globo--1{left:-5%;top:16%;width:50px}.llegada-globos--frente .globo--4{right:-5%;top:74%;width:50px}}
@media(prefers-reduced-motion:reduce){body[data-version="pro"] .llegada-globos{display:none}.globo{animation:none;will-change:auto}}

/* La entrada ES un libro abierto. Estela de Kuranderos adaptada a su silueta. */
body[data-version] .portada__abrir--libro {
  position:relative;
  display:block;
  width:256px;
  height:88px;
  min-height:88px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:#142f47;
  transform-origin:50% 70%;
  transition:transform 240ms cubic-bezier(.16,1,.3,1);
  -webkit-tap-highlight-color:transparent;
}
body[data-version] .portada__abrir--libro:hover {transform:translateY(-2px) scale(1.035);box-shadow:none}
body[data-version] .portada__abrir--libro:active {transform:scale(.97)}
body[data-version] .portada__abrir--libro:focus-visible {outline:0}
body[data-version] .portada__abrir--libro .libro-boton {
  display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  animation:none;transform:none;fill:none;stroke:none;
  filter:drop-shadow(0 5px 8px #23364c30);
}
.libro-boton__papel {fill:#fffcf4;fill-opacity:.96}
.libro-boton__paginas {stroke:#be9449;stroke-width:1;opacity:.48;stroke-linecap:round}
.libro-boton__borde {stroke:#a97a29;stroke-width:1.5;transition:stroke 180ms,stroke-width 180ms}
.libro-boton__halo,.libro-boton__estela,.libro-boton__punta {
  fill:none;stroke-linecap:round;animation:libro-cometa 4.8s linear infinite;
}
.libro-boton__halo {stroke:#ffd35c;stroke-width:7;stroke-dasharray:11 89;filter:blur(3px);opacity:.8}
.libro-boton__estela {stroke:#edbb45;stroke-width:2.5;stroke-dasharray:10 90}
.libro-boton__punta {stroke:#fffdf0;stroke-width:2.4;stroke-dasharray:1.2 98.8;filter:drop-shadow(0 0 2px #fff8d8)}
.libro-boton__texto {
  position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;
  align-items:center;text-align:center;padding:0 16px 2px;gap:8px;
  font-size:15px;font-weight:800;line-height:1.15;letter-spacing:0;
}
.portada__abrir--libro:is(:hover,:focus-visible) .libro-boton__borde {stroke:#885f13;stroke-width:2}
.portada__abrir--libro:focus-visible .libro-boton__borde {stroke:#142f47;stroke-width:3}
.portada__abrir--libro:is(:hover,:focus-visible) .libro-boton__halo {opacity:1;stroke-width:9}
@keyframes libro-cometa {from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* Anclaje al extremo de la boca del recorte 2048²; hereda su respiración/parallax. */
.cuento-lengua {
  position:absolute;left:93.2%;top:23.2%;width:24%;height:auto;overflow:visible;
  pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round;
}
.cuento-lengua__gesto {
  transform-origin:0 34px;opacity:0;
  animation:camaleon-gesto 11.5s linear infinite;
}
.cuento-lengua__sombra {stroke:#996957;stroke-width:7.5;opacity:.5}
.cuento-lengua__trazo {stroke:url(#lengua-ambar);stroke-width:5.5}
.cuento-lengua__luz {stroke:#ffe9cc;stroke-width:1.2;opacity:.7}
@keyframes camaleon-gesto {
  0%,17% {transform:scaleX(.025) scaleY(.7);opacity:0}
  18% {transform:scaleX(.08) scaleY(.85);opacity:.8;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  21.5% {transform:scaleX(1) scaleY(1);opacity:1;animation-timing-function:ease-in-out}
  24% {transform:scaleX(.97) scaleY(.94);opacity:1;animation-timing-function:cubic-bezier(.55,0,.85,.45)}
  28% {transform:scaleX(.025) scaleY(.7);opacity:0}
  100% {transform:scaleX(.025) scaleY(.7);opacity:0}
}
.portada-pausada :is(.libro-boton__halo,.libro-boton__estela,.libro-boton__punta,.cuento-lengua__gesto),
[data-abierto] :is(.libro-boton__halo,.libro-boton__estela,.libro-boton__punta,.cuento-lengua__gesto) {animation-play-state:paused}
[data-abierto] .cuento-lengua {visibility:hidden}
@media(max-width:420px) {
  body[data-version] .portada__abrir--libro {width:240px;height:82.5px;min-height:82.5px}
  .libro-boton__texto {font-size:14px}
}
@media(prefers-reduced-motion:reduce) {
  .cuento-lengua {display:none}
  .libro-boton__halo,.libro-boton__estela,.libro-boton__punta {animation:none}
  .libro-boton__halo {opacity:.4}
  body[data-version] .portada__abrir--libro {transition:none}
  body[data-version] .portada__abrir--libro:hover {transform:none}
}

/* El mismo libro de Higgsfield, aislado de su escena y a escala de control. */
body[data-version] .portada__abrir--libro{width:168px;height:157px;min-height:157px;perspective:700px;isolation:isolate}
body[data-version] .portada__abrir--libro:focus-visible{outline:0}
.libro-real{display:block;position:absolute;inset:0;perspective:650px;transform-style:preserve-3d;filter:drop-shadow(0 6px 7px #172d4c45)}
body[data-version] .portada__abrir--libro .libro-real svg{position:absolute;inset:0;width:100%;height:100%;animation:none;overflow:visible;fill:none;stroke:none}
body[data-version] .portada__abrir--libro .libro-real__brillo{pointer-events:none;filter:drop-shadow(0 0 2px #edbb45)}
.libro-real__brillo use{fill:none;stroke:#ffd271;stroke-width:5;stroke-dasharray:64 2100;stroke-linecap:round;animation:libro-dorado 6s linear infinite}
body[data-version] .portada__abrir--libro:focus-visible .libro-real__brillo use{animation:none;stroke:#173b59;stroke-width:12;stroke-dasharray:none}
.portada-pausada .libro-real__brillo use,[data-abierto] .libro-real__brillo use{animation-play-state:paused}
@keyframes libro-dorado{to{stroke-dashoffset:-2164}}
@media(max-width:600px){body[data-version] .portada__abrir--libro{width:150px;height:140px;min-height:140px}body[data-version="pro"] .portal__portada{padding-bottom:58px}}
@media(max-height:650px){body[data-version] .portada__abrir--libro{width:128px;height:119px;min-height:119px}body[data-version="pro"] .portal__portada{padding-bottom:36px}}
@media(prefers-reduced-motion:reduce){.libro-real__brillo use{animation:none;stroke-dasharray:none;opacity:.4}}
.musica-control{position:fixed;right:18px;left:auto;top:max(74px,env(safe-area-inset-top));bottom:auto;z-index:80;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #b9934e88;border-radius:50%;background:#fffaf0f2;color:#17324f;box-shadow:0 3px 16px #122b4926;cursor:pointer}
.musica-control span{display:none}
.musica-control[aria-pressed="false"]::after{content:"";position:absolute;width:22px;height:1.5px;background:currentColor;rotate:-45deg;box-shadow:0 0 0 1px #fffaf0}
.musica-control[hidden]{display:none}.musica-control svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.musica-control:focus-visible{outline:2px solid #173b59;outline-offset:3px}

/* Libro con lomo, páginas y tapa articulada: un mismo objeto de botón a pantalla completa. */
body[data-version] .portada__abrir--libro{width:120px;height:164px;min-height:164px;perspective:1000px}
body[data-version] .portada__abrir--libro:focus-visible{outline:2px solid #b78026;outline-offset:9px;border-radius:5px}
.libro-objeto{display:block;position:absolute;inset:0;transform:rotate(-8deg);transform-style:preserve-3d;perspective:1400px;filter:drop-shadow(0 10px 12px #17304840)}
.libro-hojas{position:absolute;inset:3px -3px -3px 2px;border-radius:2px 7px 7px 2px;background:repeating-linear-gradient(0deg,#e6d1a6 0 1px,#fff6e0 1px 3px);border:1px solid #ab803a;box-shadow:3px 3px 0 #123553;overflow:hidden}
.libro-pagina{position:absolute;inset:4px 5px 6px 2px;background:#fff4dc var(--libro-escena,url('arte/base-capas.webp')) center/cover;border-radius:0 4px 4px 0;box-shadow:inset 6px 0 8px #3f240d44}
.libro-tapa{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;transform:rotateY(0deg)}
.libro-tapa__frente,.libro-tapa__dentro{position:absolute;inset:0;border-radius:3px 7px 7px 3px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-sizing:border-box}
.libro-tapa__frente{display:grid;place-items:center;border:1px solid #d6b975;background:radial-gradient(ellipse at 25% 15%,#345674,#152c47 70%);box-shadow:inset 6px 0 5px #06182a,inset 8px 0 0 #baa35e80,inset -2px 0 2px #ffda9477;color:#eacf8a}
.libro-filo{position:absolute;inset:10px;border:1px solid #d7b25c88;border-radius:2px}
body[data-version] .portada__abrir .libro-ornamento,.libro-cine .libro-ornamento{position:absolute;inset:0;width:100%;height:100%;stroke:#d8b76b;stroke-width:.7;fill:none;animation:none;transform:none}
.libro-titulo{font-family:Georgia,serif;font-size:23px;line-height:1.2;font-weight:700;text-align:center;text-shadow:0 1px 1px #0008;letter-spacing:.01em}
.libro-tapa__dentro{transform:rotateY(180deg);background:linear-gradient(90deg,#e2c99a,#fff3da 22%,#fff6e4 82%,#d8bc86);border:3px solid #234665;box-shadow:inset -7px 0 10px #79522455;display:grid;place-items:center}
.libro-tapa__dentro span{color:#926521;font:italic 15px/1.6 Georgia,serif;text-align:center;border-block:1px solid #c5a56799;padding:15px 7px}
.libro-cine{position:fixed;z-index:65;pointer-events:none;transform-origin:50% 50%;perspective:1600px}
.libro-cine .libro-objeto{filter:drop-shadow(0 20px 30px #132a4950)}
.libro-cine-fondo{position:fixed;inset:0;z-index:64;pointer-events:none;background:radial-gradient(ellipse,#ffedc352,#142b4840);opacity:0}
.libro-en-apertura{visibility:hidden!important}
.polvo-pagina{position:fixed;inset:0;width:100%;height:100svh;z-index:0;pointer-events:none;opacity:var(--polvo-visible,0)}
.hoja>.seccion{z-index:1}
@media(max-width:600px){body[data-version] .portada__abrir--libro{width:104px;height:142px;min-height:142px}.libro-titulo{font-size:20px}.musica-control{right:12px;top:70px}}
@media(prefers-reduced-motion:reduce){.libro-objeto{transform:none}.libro-cine,.libro-cine-fondo{display:none}}

/* 25-sep · El libro invita al clic: respira, lo rodea un aura dorada y una energía recorre su contorno.
   El pulso usa `scale` (propiedad propia) para no pelear con el `transform` del hover ni con la apertura. */
body[data-version="pro"] .portada__abrir--libro{animation:libro-invita 2.8s ease-in-out infinite;transform-origin:50% 60%}
body[data-version="pro"] .portada__abrir--libro:is(:hover,:focus-visible){animation-play-state:paused}
@keyframes libro-invita{0%,100%{scale:1}50%{scale:1.075}}
.libro-aura{position:absolute;inset:-30% -38%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#fff3c4d9,#ffd86e80 42%,#f6b94b33 64%,transparent 78%);
  filter:blur(6px);opacity:.55;animation:libro-aura 2.8s ease-in-out infinite}
@keyframes libro-aura{0%,100%{opacity:.4;scale:.9}50%{opacity:.95;scale:1.08}}
body[data-version] .portada__abrir .libro-energia{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);
  overflow:visible;fill:none;stroke-linecap:round;animation:none;pointer-events:none}
.libro-energia rect{vector-effect:non-scaling-stroke;animation:libro-cometa 3.6s linear infinite}
.libro-energia__halo{stroke:#ffd35c;stroke-width:9;stroke-dasharray:16 84;opacity:.75;filter:blur(3.5px)}
.libro-energia__estela{stroke:#f4c653;stroke-width:2.6;stroke-dasharray:13 87}
.libro-energia__punta{stroke:#fffdf0;stroke-width:3;stroke-dasharray:1.4 98.6;filter:drop-shadow(0 0 3px #fff7d1) drop-shadow(0 0 6px #ffd35c)}
/* La copia que vuela a pantalla completa no arrastra la energía. */
.libro-cine .libro-energia{display:none}
.portada-pausada :is(.libro-aura,.libro-energia rect),[data-abierto] :is(.libro-aura,.libro-energia rect),
.portada-pausada .portada__abrir--libro,[data-abierto] .portada__abrir--libro{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  body[data-version="pro"] .portada__abrir--libro,.libro-aura,.libro-energia rect{animation:none}
  .libro-aura{opacity:.55}
  .libro-energia__halo,.libro-energia__punta{display:none}
  .libro-energia__estela{stroke-dasharray:none;opacity:.7}
}

/* 25-sep · En Pro no se desplaza la página hasta tocar el libro (lo controla portada-interacciones.js). */
html:has(body[data-version="pro"]){scrollbar-gutter:stable}
html.portada-bloqueada{overflow:hidden}
html.portada-bloqueada body{overscroll-behavior:none}

/* Los dos mundos (Pro) · 25-sep: fuegos artificiales de verdad en el cielo del castillo (canvas,
   dentro del arco) y hojas con volumen que vuelan desde la selva. Se ven solos al llegar a la sección,
   de vez en cuando mientras está a la vista, y en ráfaga al pasar el cursor, enfocar o tocar la tarjeta.
   Con movimiento reducido: sin fuegos ni hojas volando; la hoja de la rama queda fija. */
body[data-version="pro"] .mundo:focus-visible {
  outline: 3px solid var(--mundo-color);
  outline-offset: 7px;
}
body[data-version="pro"] .mundo__personaje { isolation: isolate; }
body[data-version="pro"] .mundo__personaje > img { position: relative; z-index: 1; }
.mundo-efecto, .mundo-efecto * { pointer-events: none; }
.mundo-efecto { position: absolute; inset: 0; z-index: 2; overflow: visible; perspective: 700px; }
.mundo-efecto svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Hoja fija sobre el corte de la rama: ahora con volumen y un vaivén suave mientras la sección se ve. */
.mundo-efecto__ancla {
  position: absolute;
  width: 31%;
  aspect-ratio: 1;
  left: -12%;
  top: 37%;
  rotate: -18deg;
  transform-origin: 78% 70%;
  filter: drop-shadow(1px 4px 3px #16302440);
}
.mundos-vivos .mundo-efecto__ancla { animation: ancla-mece 5.5s ease-in-out infinite alternate; }
@keyframes ancla-mece { from { rotate: -22deg; } to { rotate: -13deg; } }

/* Nervaduras compartidas por todas las hojas */
.hoja-svg .hoja-cuerpo { stroke: none; }
.hoja-svg .hoja-brillo { fill: #ffffff; opacity: .16; stroke: none; }
.hoja-svg .hoja-nervio { fill: none; stroke: #e2f0b3; stroke-width: 1.8; stroke-linecap: round; opacity: .85; }
.hoja-svg .hoja-venas { fill: none; stroke: #d3e7a4; stroke-width: 1.1; stroke-linecap: round; opacity: .5; }

/* Hojas que vuelan: el JS las crea con variables al azar y las borra al terminar. */
.hoja-vuela {
  position: absolute;
  aspect-ratio: 1;
  opacity: 0;
  transform-style: preserve-3d;
  filter: drop-shadow(1px 5px 4px #16302438);
  animation: hoja-vuela var(--dur, 2200ms) cubic-bezier(.22, .61, .36, 1) var(--espera, 0ms) both;
  will-change: transform, opacity;
}
@keyframes hoja-vuela {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--r0)) rotateY(0deg) scale(.45); }
  14%  { opacity: 1; }
  40%  { transform: translate(calc(var(--dx) * .42), calc(var(--dy) * .62)) rotate(calc(var(--r0) + var(--giro) * .45)) rotateY(calc(var(--flip) * .5)) scale(1); }
  78%  { opacity: .92; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r0) + var(--giro))) rotateY(var(--flip)) scale(1.04); }
}

/* Fuegos: lienzo dentro del arco del castillo, detrás del personaje. */
body[data-version="pro"] .mundo--castillo .mundo__arco { position: relative; }
.mundo-fuegos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mundos-vivos .mundo-efecto__ancla { animation: none; }
  .hoja-vuela, .mundo-fuegos { display: none; }
}

/* ==========================================================================
   Producto terminado · estados pendientes, áreas táctiles y ajustes comunes.
   Va al final de estilos.css (construir.mjs). Sirve a Estándar y Pro por igual,
   salvo donde se indica la versión.
   ========================================================================== */

/* Nunca se parte «2:30 p.m.» */
.sin-corte { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Accesibilidad: áreas táctiles de 44 px
   -------------------------------------------------------------------------- */
.sd-saltar { min-height: 44px; display: inline-flex; align-items: center; }
.comparar { gap: 0 6px; padding: 0 8px; min-height: 44px; }
.comparar span { padding-inline: 4px; }
.comparar a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

/* Consentimiento y aviso: tamaño de lectura normal y enlace fácil de tocar */
.privacidad-breve { gap: 6px; font-size: 14px; line-height: 1.5; }
.privacidad-breve .sd-casilla { font-size: 15px; gap: 10px; }
.privacidad-breve .sd-casilla__caja { width: 20px; height: 20px; }
.privacidad-breve small { font-size: 13px; }
.privacidad-breve p { font-size: 14px; }
.privacidad-breve a { display: inline-block; padding-block: 14px; margin-block: -14px; }

/* --------------------------------------------------------------------------
   Confirma tu asistencia: título a la medida de la tarjeta
   -------------------------------------------------------------------------- */
.rsvp .seccion__titulo { font-size: clamp(2rem, 1.55rem + 1.9vw, 2.9rem); }

/* Registro cerrado (lo activa el Worker con RSVP_ACTIVO = "false") */
.rsvp__cerrado {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  margin-top: var(--esp-6);
  text-align: center;
}
.rsvp__cerrado > p { margin: 0; max-width: 30rem; }
.rsvp__cerrado-sello {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--titulo-y) 16%, var(--superficie));
  border: 1px solid color-mix(in oklab, var(--titulo-y) 45%, var(--linea));
  color: var(--titulo-b);
}
.rsvp__cerrado-sello svg { width: 30px; height: 30px; fill: color-mix(in oklab, var(--titulo-y) 35%, transparent); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.rsvp__cerrado-titulo {
  font-family: var(--fuente-display);
  font-weight: var(--peso-display);
  font-size: var(--tipo-h3);
  line-height: var(--interlineado-h3, 1.25);
  color: var(--titulo-a);
  text-wrap: balance;
}
.rsvp__cerrado-texto { color: var(--tinta-suave); text-wrap: pretty; }
.rsvp__cerrado-acciones {
  display: grid;
  gap: var(--esp-3);
  width: min(100%, 22rem);
  margin-top: var(--esp-2);
}
.rsvp__cerrado-acciones .sd-boton { width: 100%; }
body[data-registro="cerrado"] #rsvp-limite,
body[data-registro="cerrado"] .cta-barra { display: none !important; }
/* Respaldo si llegara la nota vieja del Worker */
.formulario__nota { margin: var(--esp-6) auto 0; max-width: 28rem; text-align: center; color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   Mesa de regalos: una tarjeta por tienda, también cuando aún no hay dato
   -------------------------------------------------------------------------- */
.regalos { max-width: 44rem; }
.regalo--pendiente {
  justify-items: center;
  text-align: center;
  gap: var(--esp-2);
  padding: var(--esp-6) var(--esp-5);
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie) 60%);
}
.regalo--pendiente .regalo__titulo { margin-top: var(--esp-1); }
.regalo__estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 12px;
  border-radius: var(--radio-pildora);
  background: color-mix(in oklab, var(--titulo-b) 9%, var(--superficie));
  color: var(--titulo-b);
  font-size: var(--tipo-pequeno);
  font-weight: 800;
}
.regalo__estado svg { width: 14px; height: 14px; }
.regalo__nota { margin: 0; color: var(--tinta-suave); max-width: 22rem; }

/* --------------------------------------------------------------------------
   Hoja: el primer adorno no deja una franja vacía antes de «Cuándo y dónde»
   -------------------------------------------------------------------------- */
.hoja > .seccion:first-of-type { padding-top: clamp(2rem, 1rem + 3vw, 3.5rem); }

/* --------------------------------------------------------------------------
   Pie: los dos enlaces en la misma línea base y con área de 44 px
   -------------------------------------------------------------------------- */
.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--esp-2);
  margin-top: var(--esp-2);
}
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 6px; }
.pie__separador { color: var(--tinta-suave); }

/* --------------------------------------------------------------------------
   Estándar: se abre con un botón sencillo (sin libro, sin «Volver al inicio»)
   -------------------------------------------------------------------------- */
.portada__abrir--sobre { font-size: 1.0625rem; padding-inline: var(--esp-6); }
.portada__abrir--sobre svg { width: 1.4rem; height: 1.4rem; color: var(--titulo-b); }
body[data-version="estandar"] .cuento__volver { display: none; }

/* --------------------------------------------------------------------------
   Pro: pista bajo el libro y portada que cabe en celulares chicos
   -------------------------------------------------------------------------- */
.portada__pista {
  margin: 6px 0 0;
  padding: 4px 12px;
  border-radius: var(--radio-pildora);
  background: #fffaf0e6;
  color: #173550;
  font: 700 13px/1.3 var(--fuente-texto);
  box-shadow: 0 2px 10px #122b4920;
}
[data-abierto] .portada__pista { visibility: hidden; }
@media (max-height: 720px) {
  body[data-version="pro"] .titulo { font-size: clamp(2.4rem, 8.5vh, 3.6rem); }
  body[data-version="pro"] .lema { font-size: clamp(1.1rem, 2.8vh, 1.5rem); margin-top: 8px; }
  body[data-version] .portada__abrir--libro { width: 92px; height: 126px; min-height: 126px; }
  body[data-version="pro"] .portal__portada { padding-top: 12px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  body[data-version="pro"] .portada__centro { transform: translateY(-8px); }
  /* La pista va arriba del libro para que ambos quepan en la primera pantalla */
  body[data-version="pro"] .portada__pie { display: flex; flex-direction: column-reverse; align-items: center; gap: 8px; }
  body[data-version="pro"] .portada__pista { margin: 0; }
  /* Con la barra de muestra arriba, el escenario empieza 44 px más abajo */
  body[data-version="pro"] .comparar + main .portal__portada { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   Botón de música: en celular baja a la esquina inferior izquierda
   (arriba de la barra de confirmar cuando ésta se ve), sin tapar títulos
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .musica-control {
    top: auto;
    right: auto;
    left: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    background: #fffaf0d9;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  body.cta-visible .musica-control { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   Pro con movimiento reducido: la llegada sobre el primer cuadro del cuento,
   en su propia pantalla, sin restos de capas ni tarjeta cortada
   -------------------------------------------------------------------------- */
.portal__fondo--reducido { display: none; }
@media (prefers-reduced-motion: reduce) {
  body[data-version="pro"] .portal__escenario { grid-template-rows: 100svh minmax(100svh, auto); }
  body[data-version="pro"] .portal__cielo { min-height: 100svh; }
  body[data-version="pro"] .portal__fondo--reducido {
    display: block;
    opacity: 1;
    filter: blur(6px) brightness(.9) saturate(1.05);
    transform: scale(1.08);
  }
  body[data-version="pro"] .portal__revelado { align-self: center; }
  /* Las capas de la portada no asoman sobre la llegada */
  body[data-version="pro"] .cuento-composicion { overflow: hidden; }
}

/* Fecha y hora de la llegada: en celular van en dos renglones limpios (sin «·» colgando) */
@media (max-width: 600px) {
  .revelado__sep { display: block; height: 0; overflow: hidden; }
}
body[data-version="pro"] .revelado__fecha { max-width: none; }

/* ==========================================================================
   26-sep · Multiplataforma (iPad/iPhone con WebKit). Ver skill paginas-agencia-multiplataforma.
   ========================================================================== */
/* 1) En Safari un `filter` sobre un objeto 3D lo aplana y la cara trasera (rotada 180°) se pinta
      ENCIMA, en espejo. La sombra pasa a las hojas y la cara interior no existe en la portada. */
.libro-objeto, .libro-cine .libro-objeto { filter: none; -webkit-transform-style: preserve-3d; }
.libro-tapa { -webkit-transform-style: preserve-3d; }
.libro-hojas { box-shadow: 3px 3px 0 #123553, 0 12px 16px -4px #17304859; }
.libro-cine .libro-hojas { box-shadow: 3px 3px 0 #123553, 0 22px 34px -8px #132a4966; }
.portada__abrir .libro-tapa__dentro { visibility: hidden; }
.libro-cine .libro-tapa__dentro { visibility: visible; }
.libro-energia { transform: translateZ(1px); }
.libro-cine__zoom { transform-style: preserve-3d; }

/* 2) El libro y la pista nunca quedan bajo la barra de inicio ni pegados al borde inferior. */
body[data-version="pro"] .portal__portada { padding-bottom: calc(max(28px, 7svh) + env(safe-area-inset-bottom)); }
@media (max-width: 600px) { body[data-version="pro"] .portal__portada { padding-bottom: calc(max(36px, 5svh) + env(safe-area-inset-bottom)); } }
@media (max-height: 650px) { body[data-version="pro"] .portal__portada { padding-bottom: calc(26px + env(safe-area-inset-bottom)); } }

/* 3) Nota cuando la invitación se actualizó y el formulario se rellenó solo. */
.formulario__aviso { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--superficie-2, #f3efe6); color: var(--tinta-suave, #4a5568); font-size: 15px; line-height: 1.45; text-align: center; }