/* ==========================================================================
   Rollo — hoja de estilos «Revelado»
   Concepto: el cuarto oscuro de la fotografía.
   - Lo de los novios (sitio y panel) es el papel fotográfico: marfil, tinta y
     champagne. Tema claro, en :root.
   - Lo de los invitados (la app en la fiesta) es el cuarto oscuro: negro,
     mínimo, con luces puntuales. Tema oscuro, en .tema-app / .tema-noche.
   Los dos temas comparten tipografía y acentos; solo cambian las variables.

   Reglas:
   - Una sola acción fuerte por pantalla: tinta en lo claro, champagne en lo oscuro.
   - El iris marca lo interactivo y lo "tecnológico"; nunca rellena botones grandes.
   - Títulos en Instrument Serif; interfaz en Geist; números en Geist Mono.
   ========================================================================== */

:root {
  /* Superficies y texto (tema claro) */
  --fondo: #FAF7F2;          /* marfil */
  --superficie: #FFFFFF;     /* tarjetas */
  --superficie-2: #F1EBE1;   /* arena: bandas alternas, hover */
  --campo: #FFFFFF;          /* campos de texto */
  --texto: #1A1523;          /* tinta con un toque violeta */
  --texto-2: #5E566B;
  --texto-3: #8A8296;
  --linea: #E7E0D6;
  --linea-fuerte: #D6CCBE;
  --hover: rgba(26, 21, 35, .05);
  --vidrio: rgba(250, 247, 242, .82);

  /* Acción principal y selección */
  --primario: #1A1523;
  --primario-hover: #2E2640;
  --sobre-primario: #FAF7F2;
  --seleccion: #1A1523;

  /* Acentos */
  --champagne: #C9A46A;
  --champagne-texto: #8E6A2E; /* champagne que se lee sobre marfil */
  --iris: #6D4AFF;
  --iris-suave: rgba(109, 74, 255, .09);
  --rosa: #E8456E;
  --rosa-suave: rgba(232, 69, 110, .1);
  --ok: #17895E;
  --ok-suave: rgba(61, 220, 151, .14);
  --aviso: #A86A0C;
  --aviso-suave: rgba(255, 181, 71, .16);
  --peligro: #D93A3F;
  --peligro-suave: rgba(229, 72, 77, .1);

  --dorado: linear-gradient(135deg, #F1DCA6 0%, #E2C27D 45%, #C9A46A 100%);

  /* Sombras suaves, estilo shadcn */
  --sombra-1: 0 1px 2px rgba(26, 21, 35, .05);
  --sombra-2: 0 1px 2px rgba(26, 21, 35, .04), 0 10px 30px -8px rgba(26, 21, 35, .12);
  --sombra-3: 0 24px 64px -12px rgba(26, 21, 35, .28);

  /* Tipografía */
  --f-titulo: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --f-ui: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Espaciado (base 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-7: 32px; --e-8: 48px; --e-9: 72px; --e-10: 104px;

  --r-control: 10px;
  --r-foto: 12px;
  --r-tarjeta: 16px;
  --r-grande: 24px;

  --t-rapida: 150ms;
  --t-media: 250ms;
  --t-lenta: 450ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-rebote: cubic-bezier(.34, 1.56, .64, 1);

  --nav-alto: 66px;
  --cabecera-alto: 68px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-arriba: env(safe-area-inset-top, 0px);

  color-scheme: light;
}

/* El cuarto oscuro: la app de los invitados y las bandas oscuras del sitio. */
.tema-app, .tema-noche {
  --fondo: #0B0A12;
  --superficie: #16141F;
  --superficie-2: #201D2C;
  --campo: #0F0E17;
  --texto: #F5F2EC;
  --texto-2: #A39DB0;
  --texto-3: #6F6A7C;
  --linea: #2A2738;
  --linea-fuerte: #3A3650;
  --hover: rgba(255, 255, 255, .05);
  --vidrio: rgba(11, 10, 18, .8);

  --primario: #E2C27D;
  --primario-hover: #ECD39C;
  --sobre-primario: #1A1306;
  --seleccion: #E2C27D;

  --champagne-texto: #E2C27D;
  --iris: #8B7BFF;
  --iris-suave: rgba(139, 123, 255, .14);
  --rosa: #FF6B8B;
  --rosa-suave: rgba(255, 107, 139, .14);
  --ok: #3DDC97;
  --aviso: #FFB547;
  --peligro: #FF6B6B;
  --peligro-suave: rgba(255, 107, 107, .12);

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
  --sombra-2: 0 12px 32px -10px rgba(0, 0, 0, .6);
  --sombra-3: 0 30px 80px -10px rgba(0, 0, 0, .75);

  color-scheme: dark;
  background-color: var(--fondo);
  color: var(--texto);
}

/* --- Base ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
body.tema-app, body.tema-noche {
  background:
    radial-gradient(90% 40% at 50% -10%, rgba(226, 194, 125, .09), transparent 70%),
    var(--fondo);
  background-repeat: no-repeat;
  background-color: var(--fondo);
}

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

a { color: inherit; }
p a:not([class]), li a:not([class]), dd a:not([class]), .check a:not([class]) {
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--iris);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color var(--t-rapida);
}
p a:not([class]):hover, li a:not([class]):hover, .check a:not([class]):hover { color: var(--iris); }

h1, h2 {
  font-family: var(--f-titulo);
  font-weight: 400;
  letter-spacing: -.015em;
  margin: 0 0 var(--e-4);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.5vw, 4.2rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.06; }
h3 {
  font-family: var(--f-ui);
  font-size: 1.12rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.35;
  margin: 0 0 var(--e-2);
}
h1 em, h2 em { font-style: italic; color: var(--champagne-texto); }

p { margin: 0 0 var(--e-4); text-wrap: pretty; }
b, strong { font-weight: 600; }

:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; border-radius: 6px; }
::selection { background: rgba(201, 164, 106, .35); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.i {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.i-s { width: 16px; height: 16px; }
.i-l { width: 28px; height: 28px; }
.i-xl { width: 40px; height: 40px; stroke-width: 1.4; }

/* Los nombres de los novios: serif editorial, sin cursiva de invitación. */
.script {
  font-family: var(--f-titulo);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.05;
}

/* Etiqueta chica arriba de los títulos, con una rayita champagne. */
.kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--champagne-texto);
  margin-bottom: var(--e-3);
}
.kicker::before { content: ""; flex: none; width: 18px; height: 1px; background: currentColor; }
.kicker .i { width: 15px; height: 15px; }

.muted { color: var(--texto-2); }
.centro { text-align: center; }
.mono, code { font-family: var(--f-mono); }
code { font-size: .88em; }
.contenedor { width: min(1180px, 100% - 32px); margin-inline: auto; }
.contenedor-angosto { width: min(560px, 100% - 32px); margin-inline: auto; }

/* --- Botones ------------------------------------------------------------- */

.btn {
  --btn-fondo: var(--superficie);
  --btn-texto: var(--texto);
  --btn-borde: var(--linea-fuerte);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 46px;
  padding: 0 var(--e-5);
  border: 1px solid var(--btn-borde);
  border-radius: var(--r-control);
  background: var(--btn-fondo);
  color: var(--btn-texto);
  box-shadow: var(--sombra-1);
  font: 600 .95rem/1 var(--f-ui);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida),
              transform var(--t-rapida) var(--curva);
}
.btn:hover { --btn-fondo: var(--superficie-2); }
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn-primario { --btn-fondo: var(--primario); --btn-texto: var(--sobre-primario); --btn-borde: var(--primario); }
.btn-primario:hover { --btn-fondo: var(--primario-hover); --btn-borde: var(--primario-hover); }

/* Secundaria: tinte iris. */
.btn-tinta { --btn-fondo: var(--iris-suave); --btn-texto: var(--iris); --btn-borde: transparent; box-shadow: none; }
.btn-tinta:hover { --btn-fondo: rgba(109, 74, 255, .16); }
.tema-app .btn-tinta:hover, .tema-noche .btn-tinta:hover { --btn-fondo: rgba(139, 123, 255, .24); }

.btn-fantasma { --btn-fondo: transparent; --btn-borde: transparent; box-shadow: none; }
.btn-fantasma:hover { --btn-fondo: var(--hover); }

.btn-peligro { --btn-texto: var(--peligro); --btn-borde: color-mix(in srgb, var(--peligro) 35%, transparent); }
.btn-peligro:hover { --btn-fondo: var(--peligro-suave); }

/* Crema: el botón claro dentro de lo oscuro. */
.btn-crema { --btn-fondo: #F5F2EC; --btn-texto: #1A1523; --btn-borde: #F5F2EC; }
.btn-crema:hover { --btn-fondo: #fff; --btn-borde: #fff; }

/* Brillo que recorre el botón (solo en la portada). */
.btn-brillo { overflow: hidden; }
.btn-brillo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .btn-brillo::after { animation: brillo-boton 3.6s ease-in-out 1.2s infinite; }
}
@keyframes brillo-boton { 0% { transform: translateX(-100%); } 40%, 100% { transform: translateX(100%); } }

.btn-grande { min-height: 54px; font-size: 1rem; padding: 0 var(--e-7); }
.btn-chico { min-height: 38px; padding: 0 var(--e-4); font-size: .88rem; border-radius: 9px; }
.btn-bloque { width: 100%; }
.btn-icono { width: 44px; min-height: 44px; padding: 0; }

/* --- Formularios --------------------------------------------------------- */

.campo { margin-bottom: var(--e-6); }
.campo > label:not([class]), .campo-titulo {
  display: block;
  font-weight: 600; font-size: .92rem;
  margin-bottom: var(--e-2);
}
.campo-ayuda { font-size: .85rem; color: var(--texto-2); margin-top: var(--e-2); }
.campo-error { font-size: .86rem; color: var(--peligro); margin-top: var(--e-2); font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="search"], textarea, select {
  width: 100%;
  min-height: 48px;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--r-control);
  background: var(--campo);
  color: var(--texto);
  box-shadow: var(--sombra-1);
  font: 400 1rem/1.4 var(--f-ui);
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--texto-3); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--iris);
  box-shadow: 0 0 0 3px var(--iris-suave);
}
.campo.con-error input { border-color: var(--peligro); }
.tema-app ::-webkit-calendar-picker-indicator { filter: invert(.8); }

.check {
  display: flex; gap: var(--e-3); align-items: flex-start;
  font-size: .94rem; cursor: pointer; padding: var(--e-1) 0;
}
.check input {
  appearance: none; flex: none;
  width: 22px; height: 22px; margin: 1px 0 0;
  border: 1px solid var(--linea-fuerte); border-radius: 6px;
  background: var(--campo);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color var(--t-rapida), border-color var(--t-rapida);
}
.check input::after {
  content: ""; width: 11px; height: 6px;
  border: solid var(--sobre-primario); border-width: 0 0 2px 2px;
  transform: translateY(-2px) rotate(-45deg) scale(0);
  transition: transform var(--t-rapida) var(--curva-rebote);
}
.check input:checked { background: var(--primario); border-color: var(--primario); }
.check input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }

.switch {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  cursor: pointer;
}
.switch input {
  appearance: none; flex: none; margin: 0;
  width: 46px; height: 26px; border-radius: 999px;
  background: var(--linea-fuerte);
  position: relative; cursor: pointer;
  transition: background-color var(--t-media);
}
.switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform var(--t-media) var(--curva);
}
.switch input:checked { background: var(--primario); }
.switch input:checked::after { transform: translateX(20px); }
.tema-app .switch input:checked::after { background: #1A1306; }

.opciones { display: grid; gap: var(--e-3); }
.opcion {
  position: relative;
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-4);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  box-shadow: var(--sombra-1);
  cursor: pointer;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.opcion:hover { border-color: var(--linea-fuerte); }
.opcion input { position: absolute; opacity: 0; pointer-events: none; }
.opcion:has(input:checked) { border-color: var(--seleccion); box-shadow: 0 0 0 1px var(--seleccion); }
.opcion:has(input:focus-visible) { outline: 2px solid var(--iris); outline-offset: 2px; }
.opcion-icono {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-control);
  display: grid; place-items: center;
  background: var(--superficie-2); color: var(--texto);
}
.opcion:has(input:checked) .opcion-icono { background: var(--seleccion); color: var(--sobre-primario); }
.opcion strong { display: block; margin-bottom: 2px; }
.opcion small { color: var(--texto-2); font-size: .87rem; line-height: 1.45; display: block; }

/* --- Tarjetas, chips, insignias ----------------------------------------- */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  padding: var(--e-6);
  box-shadow: var(--sombra-1);
}

.chips {
  display: flex; gap: var(--e-2);
  overflow-x: auto; scrollbar-width: none;
  padding: var(--e-1) 16px; margin-inline: -16px;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 16px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: start;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 var(--e-4);
  border: 1px solid var(--linea-fuerte); border-radius: 999px;
  background: var(--superficie); color: var(--texto);
  font: 500 .9rem/1 var(--f-ui); text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-rapida), border-color var(--t-rapida), color var(--t-rapida);
}
.chip:hover { background: var(--superficie-2); }
.chip[aria-current="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.chip .cuenta { opacity: .6; font-family: var(--f-mono); font-size: .8rem; }

.insignia {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .74rem; font-weight: 600;
  background: var(--superficie-2); color: var(--texto-2);
  border: 1px solid var(--linea);
}
.insignia-oro { background: rgba(201, 164, 106, .16); color: var(--champagne-texto); border-color: rgba(201, 164, 106, .35); }
.insignia-acento { background: var(--iris-suave); color: var(--iris); border-color: transparent; }
.insignia-ok { background: var(--ok-suave); color: var(--ok); border-color: transparent; }
.insignia-peligro { background: var(--peligro-suave); color: var(--peligro); border-color: transparent; }

.avatar {
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover;
  background: var(--superficie-2);
  border: 2px solid var(--superficie);
  box-shadow: 0 0 0 1px var(--linea-fuerte);
}
.avatar-s { width: 28px; height: 28px; border-width: 1.5px; }
.avatar-l { width: 64px; height: 64px; }
.avatar-xl { width: 96px; height: 96px; border-width: 3px; }

/* --- Avisos (toasts) ----------------------------------------------------- */

.avisos {
  position: fixed; z-index: 90;
  top: calc(var(--e-3) + var(--seguro-arriba)); left: 50%;
  transform: translateX(-50%);
  width: min(440px, 100% - 24px);
  display: grid; gap: var(--e-2);
  pointer-events: none;
}
.aviso {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-tarjeta);
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra-3);
  font-size: .94rem; font-weight: 500;
  animation: aviso-entra var(--t-lenta) var(--curva-rebote) both;
}
.tema-app .aviso, .tema-noche .aviso { background: var(--superficie-2); border-color: var(--linea-fuerte); }
.aviso > .i { color: var(--ok); }
.aviso.sale { animation: aviso-sale var(--t-media) var(--curva) both; }
.aviso a { color: var(--iris); font-weight: 600; }
.aviso-error { border-color: color-mix(in srgb, var(--peligro) 45%, transparent); }
.aviso-error > .i { color: var(--peligro); }
@keyframes aviso-entra { from { opacity: 0; transform: translateY(-16px) scale(.96); } }
@keyframes aviso-sale { to { opacity: 0; transform: translateY(-12px); } }

/* --- Hojas y diálogos ---------------------------------------------------- */

dialog {
  border: 0; padding: 0;
  background: transparent; color: inherit;
  max-width: 100%; max-height: 100%;
}
dialog::backdrop { background: rgba(11, 10, 18, .55); backdrop-filter: blur(4px); }

.hoja {
  margin: auto auto 0;
  width: min(520px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--linea);
  border-bottom: 0;
  border-radius: var(--r-grande) var(--r-grande) 0 0;
  padding: var(--e-3) var(--e-6) calc(var(--e-6) + var(--seguro-abajo));
  box-shadow: var(--sombra-3);
}
.hoja[open] { animation: hoja-sube var(--t-lenta) var(--curva) both; }
.hoja::before {
  content: ""; display: block;
  width: 40px; height: 4px; border-radius: 4px;
  background: var(--linea-fuerte);
  margin: 0 auto var(--e-4);
}
@media (min-width: 640px) {
  .hoja { margin: auto; border-radius: var(--r-grande); border-bottom: 1px solid var(--linea); padding-bottom: var(--e-6); }
  .hoja::before { display: none; }
}
@keyframes hoja-sube { from { transform: translateY(40px); opacity: 0; } }

.hoja-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  margin-bottom: var(--e-4);
}
.hoja-cabecera h2 { margin: 0; font-size: 1.9rem; }
.hoja-acciones { display: grid; gap: var(--e-3); margin-top: var(--e-6); }

/* ==========================================================================
   App del invitado (cuarto oscuro)
   ========================================================================== */

.app {
  min-height: 100dvh;
  padding-bottom: calc(var(--nav-alto) + var(--seguro-abajo) + var(--e-7));
}

.barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  padding: calc(var(--e-3) + var(--seguro-arriba)) 16px var(--e-3);
  background: var(--vidrio);
  backdrop-filter: saturate(1.3) blur(16px);
  -webkit-backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid var(--linea);
}
.barra-titulo {
  font-family: var(--f-titulo);
  font-size: 1.65rem; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.barra-acciones { display: flex; align-items: center; gap: var(--e-2); }
.barra-perfil { border-radius: 50%; text-decoration: none; }

.campana {
  position: relative;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: transparent; color: inherit; cursor: pointer;
  transition: background-color var(--t-rapida);
}
.campana:hover { background: var(--hover); }
.campana-cuenta {
  position: absolute; top: 4px; right: 3px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px;
  background: var(--rosa); color: #fff;
  border: 2px solid var(--fondo);
  font: 600 .66rem/15px var(--f-mono); text-align: center;
}
.campana-cuenta[hidden] { display: none; }
.campana.sacude .i { animation: sacude .7s var(--curva); }
@keyframes sacude {
  20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); }
  60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); }
}

/* Navegación inferior: 3 o 4 botones, al alcance del pulgar. */
.nav {
  position: fixed; z-index: 40;
  left: 50%; bottom: calc(var(--e-3) + var(--seguro-abajo));
  transform: translateX(-50%);
  display: flex; gap: var(--e-1);
  padding: 5px;
  border-radius: 18px;
  background: rgba(22, 20, 31, .9);
  border: 1px solid var(--linea-fuerte);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sombra-3);
}
.nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 78px; height: 54px;
  border-radius: 13px;
  color: var(--texto-2); text-decoration: none;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  transition: color var(--t-rapida), background-color var(--t-rapida);
}
.nav a:hover { color: var(--texto); }
.nav a[aria-current="page"] { background: var(--primario); color: var(--sobre-primario); }
.nav:has(> a:nth-child(4)) a { min-width: 70px; }
@media (max-width: 340px) { .nav a { min-width: 0; padding: 0 10px; } }

.pagina { padding: var(--e-6) 0 var(--e-7); }
.pagina > h1 { font-size: 2.8rem; margin-bottom: var(--e-2); }
.pagina > h1 + p { margin-bottom: var(--e-7); }

/* --- Entrada ------------------------------------------------------------- */

.entrada {
  min-height: 100dvh;
  display: grid; align-content: start;
  padding: calc(var(--e-8) + var(--seguro-arriba)) 0 var(--e-8);
}
.invitacion { text-align: center; margin-bottom: var(--e-7); }
.invitacion .kicker { justify-content: center; }
.invitacion .kicker::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.invitacion .script { font-size: clamp(3.2rem, 15vw, 4.6rem); margin: var(--e-2) 0 var(--e-3); }
.invitacion .fecha { font-size: .95rem; color: var(--texto-2); }
.ornamento { display: none; }

.reglas { display: grid; gap: var(--e-2); margin: 0 0 var(--e-7); padding: 0; list-style: none; }
.reglas li {
  display: flex; gap: var(--e-3); align-items: flex-start;
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
}
.reglas .opcion-icono { background: rgba(226, 194, 125, .12); color: var(--champagne-texto); }
.reglas strong { display: block; }
.reglas span { color: var(--texto-2); font-size: .9rem; }

.selfie {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  cursor: pointer;
  transition: border-color var(--t-rapida);
}
.selfie:hover { border-color: var(--champagne); }
.selfie input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.selfie:has(input:focus-visible) { outline: 2px solid var(--iris); outline-offset: 2px; }
.selfie-foto {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(226, 194, 125, .12); color: var(--champagne-texto);
  overflow: hidden;
}
.selfie-foto img { width: 100%; height: 100%; object-fit: cover; }
.selfie.lista { border-style: solid; border-color: color-mix(in srgb, var(--ok) 60%, transparent); }
.selfie strong { display: block; }
.selfie small { color: var(--texto-2); }

.bloque-match {
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  padding: var(--e-4);
  margin-bottom: var(--e-6);
}
.bloque-match .switch strong { display: block; }
.bloque-match .switch small { color: var(--texto-2); font-size: .85rem; }
.bloque-match-detalle { margin-top: var(--e-4); padding-top: var(--e-4); border-top: 1px solid var(--linea); }
.bloque-match-detalle[hidden] { display: none; }
.bloque-match-detalle .campo:last-child { margin-bottom: 0; }

/* --- Cámara -------------------------------------------------------------- */

.tema-noche .hoja .reglas li { background: var(--fondo); }

.camara { padding: var(--e-4) 0 var(--e-7); }

.visor {
  position: relative;
  margin: 0 auto var(--e-7);
  padding: var(--e-7) var(--e-6) var(--e-6);
  border-radius: var(--r-grande);
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(226, 194, 125, .12), transparent 70%),
    var(--superficie);
  border: 1px solid var(--linea);
  text-align: center;
  overflow: hidden;
}
.visor::after {
  /* Grano de película sutil */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* El contador: una pantallita de cámara con números champagne. */
.contador {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: var(--e-3) var(--e-6) var(--e-2);
  border-radius: 16px;
  background: #050409;
  border: 1px solid #2A2738;
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, .8);
}
.contador-numero {
  font-family: var(--f-mono);
  font-size: clamp(4rem, 21vw, 5.4rem);
  font-weight: 500;
  line-height: 1;
  color: #E2C27D;
  text-shadow: 0 0 24px rgba(226, 194, 125, .4);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.contador-numero.cambia { animation: numero-cambia var(--t-lenta) var(--curva); }
@keyframes numero-cambia { 0% { transform: translateY(-10px); opacity: 0; filter: blur(4px); } }
.contador-etiqueta {
  font-family: var(--f-mono);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: #A39DB0; margin-top: 4px;
}

.pelicula {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;
  max-width: 300px; margin: var(--e-6) auto var(--e-7);
}
.pelicula span {
  width: 16px; height: 24px; border-radius: 4px;
  background: #F5F2EC;
  transition: background-color var(--t-lenta), transform var(--t-lenta) var(--curva);
}
.pelicula span.usada { background: #2A2738; transform: scale(.86); }
/* Con muchas fotos (más de 24) los cuadros se achican para que la tira no ocupe media pantalla. */
.pelicula-larga { gap: 3px; max-width: 320px; }
.pelicula-larga span { width: 8px; height: 12px; border-radius: 2px; }

.obturador-zona { display: grid; justify-items: center; gap: var(--e-3); }
.obturador-zona[hidden] { display: none; }
.obturador {
  position: relative;
  width: 96px; height: 96px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: transparent;
  display: grid; place-items: center;
  touch-action: manipulation;
}
.obturador::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid #F5F2EC;
  transition: transform var(--t-media) var(--curva);
}
.obturador span {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--dorado);
  display: grid; place-items: center; color: #1A1306;
  box-shadow: 0 0 34px rgba(226, 194, 125, .35);
  transition: transform var(--t-rapida) var(--curva), filter var(--t-media);
}
.obturador:hover span { filter: brightness(1.06); }
.obturador:active span { transform: scale(.86); }
.obturador:disabled { cursor: not-allowed; opacity: .35; }
.obturador-texto { font-weight: 600; font-size: 1.02rem; }
.recordatorio {
  display: inline-flex; align-items: center; gap: var(--e-2);
  font-size: .84rem; color: var(--texto-2);
  margin-top: var(--e-2);
}

.estado-subida {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 32px; padding: 0 var(--e-3) 0 var(--e-2);
  border-radius: 999px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  font-size: .8rem; font-weight: 500;
  color: var(--texto-2);
  transition: color var(--t-media);
}
.estado-subida[data-estado="subiendo"] { color: var(--iris); }
.estado-subida[data-estado="sin-conexion"] { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 35%, transparent); }
.estado-subida[data-estado="listo"] { color: var(--ok); }
.estado-subida .punto {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-left: 4px;
  box-shadow: 0 0 8px currentColor;
}
.estado-subida[data-estado="subiendo"] .punto { animation: late 1s infinite; }
@keyframes late { 50% { opacity: .25; } }

.seccion-noche { margin-bottom: var(--e-7); }
.seccion-noche-titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3);
  margin-bottom: var(--e-4);
}
.seccion-noche-titulo h2 { margin: 0; font-size: 2rem; }

.rollo {
  display: flex; gap: var(--e-2);
  overflow-x: auto; scrollbar-width: none;
  padding: var(--e-1) 16px; margin-inline: -16px;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
}
.rollo::-webkit-scrollbar { display: none; }
.rollo-vacio {
  padding: var(--e-6); border-radius: var(--r-tarjeta);
  border: 1px dashed var(--linea-fuerte);
  color: var(--texto-2); text-align: center; font-size: .9rem;
}
.copia-mini {
  position: relative; flex: none; scroll-snap-align: start; margin: 0;
  width: 86px; aspect-ratio: 4 / 5;
  border-radius: 10px;
  border: 1px solid var(--linea-fuerte);
  overflow: hidden;
  background: var(--superficie);
}
.copia-mini img, .copia-mini .revelando {
  width: 100%; height: 100%; object-fit: cover; background: var(--superficie-2);
}
.copia-mini.nueva { animation: copia-entra .7s var(--curva-rebote) both; }
.copia-mini.nueva img { animation: revelar 2.4s ease-out both; }
.copia-mini .marca {
  position: absolute; right: 6px; bottom: 4px;
  font-size: .6rem; color: #fff; font-family: var(--f-mono);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.copia-mini .pendiente {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11, 10, 18, .8); color: var(--iris);
}
@keyframes copia-entra { from { transform: translateY(24px) rotate(-6deg) scale(.8); opacity: 0; } }
/* La foto se "revela": sale blanca y lavada y toma color. */
@keyframes revelar {
  0% { filter: sepia(.6) brightness(2) contrast(.35) blur(3px); }
  60% { filter: sepia(.25) brightness(1.15) contrast(.85); }
  100% { filter: none; }
}

.retos { display: grid; gap: var(--e-2); }
.reto {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  border: 1px solid var(--linea);
}
.reto-texto { flex: 1; min-width: 0; }
.reto-texto strong { display: block; font-size: .98rem; margin-bottom: 2px; }
.reto-texto small { display: block; color: var(--texto-2); font-size: .85rem; }
.reto .insignia { margin-top: var(--e-2); background: rgba(226, 194, 125, .12); color: var(--champagne-texto); border-color: transparent; }
.reto-accion {
  flex: none; width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--champagne); background: transparent; color: var(--champagne-texto);
  cursor: pointer;
  transition: background-color var(--t-rapida), color var(--t-rapida), transform var(--t-rapida);
}
.reto-accion:hover { background: var(--primario); color: var(--sobre-primario); }
.reto-accion:active { transform: scale(.92); }
.reto-hecho {
  flex: none; width: 50px; height: 50px; border-radius: 10px; overflow: hidden;
  position: relative; border: 1px solid var(--linea-fuerte);
}
.reto-hecho img { width: 100%; height: 100%; object-fit: cover; }
.reto-hecho .tilde {
  position: absolute; right: 3px; bottom: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ok); color: #0B0A12; display: grid; place-items: center;
}
.reto.hecho { opacity: .7; }

.fin-rollo {
  padding: var(--e-6); border-radius: var(--r-grande);
  background: radial-gradient(90% 80% at 50% 0%, rgba(226, 194, 125, .16), transparent 75%), var(--superficie);
  border: 1px solid var(--linea);
  text-align: center;
}
.fin-rollo h3 { font-family: var(--f-titulo); font-weight: 400; font-size: 1.9rem; }
.fin-rollo[hidden] { display: none; }
.camara-cerrada { display: grid; justify-items: center; gap: var(--e-2); padding: var(--e-2) 0; }
.camara-cerrada .sello { width: 64px; height: 64px; margin: 0 0 var(--e-2); }
.camara-cerrada strong { font-family: var(--f-titulo); font-weight: 400; font-size: 2rem; }
.camara-cerrada .btn { margin-top: var(--e-3); }
.estado-fila {
  display: flex; flex-wrap: wrap; gap: var(--e-2); justify-content: center;
  margin: calc(var(--e-5) * -1) 0 var(--e-7);
}
.hoja .reglas { margin-bottom: 0; }

.flash {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: #fff; opacity: 0;
}
.flash.activo { animation: flash .55s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }

.cuenta-regresiva-chip {
  display: inline-flex; align-items: center; gap: var(--e-2);
  padding: 6px var(--e-3); border-radius: 999px;
  background: var(--superficie); border: 1px solid var(--linea); color: var(--texto-2);
  font-size: .8rem; font-weight: 500;
}
.cuenta-regresiva-chip b { color: var(--texto); font-family: var(--f-mono); font-weight: 500; }

/* --- Book ---------------------------------------------------------------- */

.book-cabecera { text-align: center; padding: var(--e-6) 0; }
.book-cabecera .kicker { justify-content: center; }
.book-cabecera .kicker::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.book-cabecera .script { font-size: clamp(3rem, 13vw, 4.4rem); margin: 0 0 var(--e-2); }
.book-cabecera .fecha { color: var(--texto-2); font-size: .95rem; margin: 0; }
.book-datos {
  display: flex; justify-content: center; gap: var(--e-6);
  margin-top: var(--e-4);
  font-size: .88rem; color: var(--texto-2);
}
.book-datos b { color: var(--texto); font-family: var(--f-mono); font-weight: 500; }
.album-publico .book-cabecera { padding-top: var(--e-9); }

.book-recap {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--e-4);
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(226, 194, 125, .4); color: var(--champagne-texto);
  font-size: .85rem; font-weight: 600; text-decoration: none;
}
.book-recap:hover { border-color: var(--champagne); }

.recap-cta {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4) var(--e-5);
  margin-bottom: var(--e-6);
  border-radius: var(--r-grande);
  background:
    radial-gradient(80% 140% at 100% 0%, rgba(226, 194, 125, .22), transparent 70%),
    var(--superficie);
  border: 1px solid rgba(226, 194, 125, .3);
  color: var(--texto);
  text-decoration: none;
  transition: transform var(--t-media) var(--curva), border-color var(--t-media);
}
.recap-cta:hover { transform: translateY(-2px); border-color: rgba(226, 194, 125, .6); }
.recap-cta .apilado { position: relative; width: 64px; height: 64px; flex: none; }
.recap-cta .apilado img {
  position: absolute; width: 44px; height: 56px; object-fit: cover;
  border: 2px solid #F5F2EC; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
.recap-cta .apilado img:nth-child(1) { left: 0; top: 4px; transform: rotate(-8deg); }
.recap-cta .apilado img:nth-child(2) { left: 18px; top: 0; transform: rotate(6deg); }
.recap-cta strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.recap-cta small { color: var(--texto-2); }
.recap-cta .i { margin-left: auto; color: var(--champagne-texto); }

.ganadores { margin-bottom: var(--e-7); }
.ganadores .rollo { padding-bottom: var(--e-3); }
.ganador { flex: none; width: 168px; scroll-snap-align: start; text-decoration: none; }
.ganador .copia { margin-bottom: var(--e-2); }
.ganador strong { display: block; font-size: .9rem; line-height: 1.25; }
.ganador small { color: var(--texto-2); font-size: .8rem; }

.titulo-seccion {
  display: flex; align-items: center; gap: var(--e-2);
  font-family: var(--f-titulo); font-size: 1.8rem; font-weight: 400;
  margin: 0 0 var(--e-3);
}
.titulo-seccion .i { color: var(--champagne-texto); }

.votacion-aviso {
  display: flex; gap: var(--e-3); align-items: center;
  padding: var(--e-3) var(--e-4);
  margin: var(--e-4) 0;
  border-radius: var(--r-control);
  background: var(--iris-suave); color: var(--texto);
  font-size: .9rem;
}
.votacion-aviso > .i { color: var(--iris); }

.muro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-5) var(--e-3);
  margin-top: var(--e-4);
}
/* En el book del invitado van 2 por fila, para que se lea quién sacó cada foto.
   El álbum público usa todo el ancho y suma columnas. */
@media (min-width: 720px) { .album-publico .muro { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6); } }
@media (min-width: 1040px) { .album-publico .muro { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.copia { position: relative; display: block; }
.copia-boton {
  display: block; width: 100%; padding: 0; background: none; cursor: zoom-in;
  border: 1px solid var(--linea); border-radius: var(--r-foto); overflow: hidden;
}
.copia-boton img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--superficie);
  transition: transform var(--t-lenta) var(--curva);
}
@media (hover: hover) { .copia:hover .copia-boton img { transform: scale(1.04); } }
.copia-foto { position: relative; }
.copia-pie { display: flex; align-items: center; gap: var(--e-2); min-height: 48px; padding: var(--e-2) 2px 0; }
.autor-nombre {
  flex: 1; min-width: 0;
  font-size: .88rem; font-weight: 600; line-height: 1.25;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.autor { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font-size: .84rem; font-weight: 600; }
.autor span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autor-enlace { display: flex; align-items: center; gap: var(--e-2); flex: 1; min-width: 0; color: inherit; text-decoration: none; }
a.autor[href] { color: inherit; text-decoration: none; }
.copia-lider {
  position: absolute; top: 9px; left: 9px; z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px;
  background: var(--dorado); color: #1A1306;
  font-size: .7rem; font-weight: 600;
}
.copia-reto {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  max-width: calc(100% - 84px);
  padding: 4px 9px; border-radius: 999px;
  background: rgba(11, 10, 18, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: .7rem; font-weight: 500; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none;
}
.like.like-sobre {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  height: 32px; min-width: 50px; padding: 0 10px;
  background: rgba(11, 10, 18, .66); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.like.like-sobre::before { content: ""; position: absolute; inset: -6px; }
.like.like-sobre:hover { background: rgba(11, 10, 18, .85); }
.like.like-sobre[aria-pressed="true"] { color: #FF6B8B; }
.like.like-sobre:disabled { background: rgba(11, 10, 18, .5); }

.like {
  flex: none; position: relative;
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 44px; height: 44px; padding: 0 var(--e-2);
  border: 0; border-radius: 999px; background: transparent;
  color: var(--texto-2); cursor: pointer;
  font: 500 .82rem/1 var(--f-mono);
  transition: color var(--t-rapida), background-color var(--t-rapida);
}
.like:hover { background: var(--hover); color: var(--texto); }
.like[aria-pressed="true"] { color: var(--rosa); }
.like[aria-pressed="true"] .i { fill: currentColor; }
.like.late .i { animation: late-corazon .45s var(--curva-rebote); }
.like:disabled { cursor: default; background: transparent; }
@keyframes late-corazon { 40% { transform: scale(1.35); } }

.corazon-persona {
  flex: none; position: relative;
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--linea-fuerte); background: var(--superficie);
  color: var(--texto-2); cursor: pointer;
  transition: all var(--t-rapida);
}
.corazon-persona .i { width: 15px; height: 15px; }
.corazon-persona::before { content: ""; position: absolute; inset: -6px; }
.corazon-persona:hover { border-color: var(--rosa); color: var(--rosa); }
.corazon-persona[aria-pressed="true"] { background: var(--rosa); border-color: var(--rosa); color: #fff; }
.corazon-persona[aria-pressed="true"] .i { fill: currentColor; }
.corazon-persona[data-match="true"] { background: var(--dorado); border-color: transparent; color: #1A1306; }
.corazon-persona.late { animation: late-corazon .45s var(--curva-rebote); }
.avatar-con-corazon { position: relative; flex: none; display: inline-flex; }
.corazon-persona.mini {
  position: absolute; right: -9px; bottom: -7px;
  width: 22px; height: 22px;
  border: 1.5px solid var(--fondo);
  color: var(--rosa);
}
.corazon-persona.mini .i { width: 12px; height: 12px; stroke-width: 2.6; }
.corazon-persona.mini::before { content: ""; position: absolute; inset: -12px; }

.sellado {
  text-align: center;
  padding: var(--e-8) var(--e-6);
  margin: var(--e-4) 0 var(--e-7);
  border-radius: var(--r-grande);
  background: radial-gradient(80% 80% at 50% 0%, rgba(226, 194, 125, .14), transparent 75%), var(--superficie);
  border: 1px solid var(--linea);
}
.sellado .kicker { justify-content: center; }

/* El sello: un lacre champagne con el candado. */
.sello {
  width: 72px; height: 72px; margin: 0 auto var(--e-4);
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dorado);
  color: #1A1306;
  box-shadow: 0 0 0 6px rgba(226, 194, 125, .12), 0 10px 34px rgba(226, 194, 125, .3);
}
.cuenta-regresiva {
  display: flex; justify-content: center; gap: var(--e-2);
  margin: var(--e-6) 0 var(--e-3);
}
.cuenta-regresiva div {
  min-width: 68px; padding: var(--e-3) var(--e-2);
  border-radius: var(--r-control);
  background: var(--fondo);
  border: 1px solid var(--linea);
}
.cuenta-regresiva b {
  display: block;
  font-family: var(--f-mono); font-size: 2rem; font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cuenta-regresiva small {
  font-family: var(--f-mono);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--texto-2);
}

.vacio { text-align: center; padding: var(--e-8) var(--e-4); color: var(--texto-2); }
.vacio .i-xl { margin: 0 auto var(--e-3); color: var(--linea-fuerte); }

/* Visor de fotos (lightbox) */
.visor-fotos {
  width: 100%; height: 100%;
  margin: 0;
  background: #000;
  color: #F5F2EC;
}
.visor-fotos::backdrop { background: #000; }
.visor-fotos[open] { display: grid; grid-template-rows: auto 1fr auto; animation: aparece var(--t-media) var(--curva); }
@keyframes aparece { from { opacity: 0; } }
.visor-arriba, .visor-abajo { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) 16px; }
.visor-arriba { padding-top: calc(var(--e-3) + var(--seguro-arriba)); }
.visor-abajo { padding-bottom: calc(var(--e-4) + var(--seguro-abajo)); }
.visor-arriba .autor { font-size: .95rem; flex: 0 1 auto; }
.visor-arriba .avatar { border-color: #000; box-shadow: none; }
.visor-imagen {
  position: relative; min-height: 0;
  display: grid; place-items: center;
  touch-action: pan-y;
  overflow: hidden;
}
.visor-imagen img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  user-select: none; -webkit-user-drag: none;
  transition: opacity var(--t-media);
}
.visor-imagen img.cargando { opacity: .3; }
.visor-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  display: none; place-items: center;
  border: 0; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer;
}
.visor-flecha:hover { background: rgba(255, 255, 255, .2); }
.visor-flecha.izq { left: 16px; }
.visor-flecha.der { right: 16px; }
@media (hover: hover) { .visor-flecha { display: grid; } }
.visor-btn {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 44px; padding: 0 var(--e-4);
  border: 0; border-radius: var(--r-control);
  background: rgba(255, 255, 255, .1); color: #F5F2EC;
  font: 500 .9rem/1 var(--f-ui); cursor: pointer;
  transition: background-color var(--t-rapida), color var(--t-rapida);
}
.visor-btn:hover { background: rgba(255, 255, 255, .18); }
a.visor-btn, a.like { text-decoration: none; }
.visor-btn[aria-pressed="true"] { background: #FF6B8B; color: #fff; }
.visor-btn[aria-pressed="true"] .i { fill: currentColor; }
.visor-btn[hidden] { display: none; }
.visor-reto { font-size: .82rem; color: #A39DB0; margin-left: auto; text-align: right; }
.visor-cerrar { margin-left: auto; }
.visor-cerrar, .visor-arriba .visor-btn { width: 44px; padding: 0; justify-content: center; }

/* --- Gente --------------------------------------------------------------- */

.match-intro {
  display: flex; gap: var(--e-4); align-items: center;
  padding: var(--e-5); margin-bottom: var(--e-6);
  border-radius: var(--r-grande);
  background: radial-gradient(90% 120% at 0% 0%, var(--rosa-suave), transparent 70%), var(--superficie);
  border: 1px solid var(--linea);
}
a.match-intro { text-decoration: none; }
.personas-destacadas { margin-bottom: var(--e-8); }
.match-intro .sello { width: 52px; height: 52px; margin: 0; flex: none; background: var(--rosa); color: #fff; box-shadow: 0 8px 28px rgba(255, 107, 139, .35); }
.match-intro strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.45rem; line-height: 1.15; margin-bottom: 2px; }
.match-intro small { color: var(--texto-2); }

.lista-matches { display: grid; gap: var(--e-2); margin-bottom: var(--e-7); }
.match {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-tarjeta);
  background: var(--superficie);
  border: 1px solid rgba(226, 194, 125, .45);
}
.match-texto { flex: 1; min-width: 0; }
.match-texto strong { display: block; }
.match-texto small { color: var(--texto-2); font-family: var(--f-mono); font-size: .8rem; }

.personas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-6) var(--e-3); }
@media (min-width: 640px) { .personas { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.persona { text-align: center; position: relative; }
.persona .avatar-xl { margin: 0 auto var(--e-2); width: min(96px, 100%); height: auto; aspect-ratio: 1; }
.persona strong { display: block; font-size: .9rem; line-height: 1.2; overflow-wrap: anywhere; }
.persona small { color: var(--texto-2); font-size: .78rem; }
.persona-enlace { display: block; color: inherit; text-decoration: none; border-radius: var(--r-tarjeta); }
.persona-enlace:active .avatar-xl { transform: scale(.96); }
.persona .persona-vinculo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 2px 0; color: var(--champagne-texto); font-size: .74rem; line-height: 1.3;
}
.persona .corazon-persona {
  position: absolute; top: 0; left: 50%; margin-left: 22px;
  width: 36px; height: 36px; box-shadow: var(--sombra-2);
}

/* --- Ranking de fotógrafos ---------------------------------------------- */

/* En la cámara: el puesto y cuánto falta, justo arriba de los retos. */
.ranking-camara {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-4); margin-bottom: var(--e-7);
  border-radius: var(--r-tarjeta);
  background: radial-gradient(90% 140% at 0% 0%, rgba(226, 194, 125, .16), transparent 70%), var(--superficie);
  border: 1px solid rgba(226, 194, 125, .35);
  text-decoration: none; color: var(--texto);
}
.ranking-camara > .i { margin-left: auto; color: var(--texto-3); flex: none; }
.ranking-camara-puesto {
  flex: none; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--dorado); color: #1A1306;
  font: 500 1.15rem/1 var(--f-mono); letter-spacing: -.04em;
}
.ranking-camara-texto { display: grid; gap: 2px; min-width: 0; }
.ranking-camara-texto strong { font-size: .98rem; }
.ranking-camara-texto small { color: var(--texto-2); font-size: .84rem; }
.ranking-camara .ranking-premio { display: inline-flex; align-items: center; gap: 4px; color: var(--champagne-texto); }
.ranking-camara.sube .ranking-camara-puesto { animation: late-corazon .6s var(--curva-rebote); }

/* En el book: el top 5. */
.ranking { margin: var(--e-2) 0 var(--e-7); scroll-margin-top: 80px; }
.ranking-premio { display: flex; align-items: center; gap: 6px; margin: 0 0 var(--e-4); color: var(--champagne-texto); font-size: .92rem; }
.ranking-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.ranking-lista li {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-tarjeta);
  background: var(--superficie); border: 1px solid var(--linea);
}
.ranking-lista li.primero {
  background: radial-gradient(90% 160% at 0% 0%, rgba(226, 194, 125, .22), transparent 70%), var(--superficie);
  border-color: rgba(226, 194, 125, .5);
}
.ranking-lista li:has(> .ranking-fila) { padding: 0; }
.ranking-fila {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-4); color: inherit; text-decoration: none; border-radius: inherit;
}
.ranking .ranking-yo { margin: 0 0 var(--e-4); }
.ranking .btn-bloque { margin-top: var(--e-5); }
.ranking-lista li.soy-yo { box-shadow: inset 3px 0 0 var(--champagne); }
.ranking-puesto { flex: none; width: 22px; font: 500 1.05rem/1 var(--f-mono); color: var(--texto-3); text-align: center; }
.ranking-lista li.primero .ranking-puesto { color: var(--champagne-texto); }
.ranking-nombre { flex: 1; min-width: 0; display: grid; }
.ranking-nombre strong { font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-nombre em { font-style: normal; color: var(--champagne-texto); font-weight: 500; }
.ranking-nombre small { color: var(--texto-2); font-size: .78rem; }
.ranking-puntos { flex: none; display: grid; justify-items: end; font: 500 1.3rem/1 var(--f-mono); letter-spacing: -.03em; }
.ranking-puntos small { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin-top: 3px; }
.ranking-vacio { color: var(--texto-2); margin: 0; }
.ranking-yo { margin: var(--e-3) 0 0; font-size: .9rem; color: var(--texto); }
.ranking-reglas { margin: var(--e-3) 0 0; font: 400 .72rem/1.6 var(--f-mono); color: var(--texto-3); }
.ranking-reglas b { color: var(--champagne-texto); font-weight: 500; }

/* En el panel de los novios */
.ranking-panel { margin-bottom: var(--e-8); }
.ranking-panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-3); }
.ranking-panel h3 { display: flex; align-items: center; gap: var(--e-2); margin: 0; }
.ranking-panel h3 .i { color: var(--champagne-texto); }
.ranking-panel .ranking-lista li { background: var(--fondo); }

/* Confeti del match (lo crea personas.js) */
.confeti { position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; }
.confeti i {
  position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px;
  animation: cae var(--dura, 1.8s) cubic-bezier(.2, .6, .4, 1) var(--demora, 0s) forwards;
}
@keyframes cae {
  to { transform: translate(var(--x, 0), 105vh) rotate(var(--giro, 540deg)); opacity: .9; }
}

/* Notificaciones */
.notif-lista { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.notif {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3);
  border-radius: var(--r-control);
  background: var(--fondo);
}
.notif.no-leida { background: var(--iris-suave); }
.notif-texto { flex: 1; min-width: 0; font-size: .92rem; }
.notif-texto small { display: block; color: var(--texto-2); }
.notif-texto a { color: var(--iris); font-weight: 600; }

/* --- Recap (stories) ----------------------------------------------------- */

.recap {
  position: fixed; inset: 0;
  background: #0B0A12; color: #F5F2EC;
  overflow: hidden;
  user-select: none;
}
.recap-barras {
  position: absolute; z-index: 5;
  top: calc(var(--e-3) + var(--seguro-arriba)); left: 12px; right: 12px;
  display: flex; gap: 4px;
}
.recap-barras span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.recap-barras i { display: block; height: 100%; width: 0; background: #fff; }
.recap-cerrar {
  position: absolute; z-index: 6;
  top: calc(var(--e-6) + var(--seguro-arriba)); right: 8px;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; text-decoration: none;
}
.recap-pausa { position: absolute; z-index: 6; top: calc(var(--e-6) + var(--seguro-arriba)); right: 52px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 0; background: transparent; color: #fff; cursor: pointer; }
.recap-toque { position: absolute; z-index: 4; top: 0; bottom: 0; border: 0; background: transparent; cursor: pointer; }
.recap-toque.izq { left: 0; width: 32%; }
.recap-toque.der { right: 0; width: 68%; }

.diapo {
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center;
  padding: calc(var(--e-9) + var(--seguro-arriba)) var(--e-6) calc(var(--e-8) + var(--seguro-abajo));
  text-align: center;
  opacity: 0; visibility: hidden;
  background: radial-gradient(90% 60% at 50% 0%, rgba(226, 194, 125, .16), transparent 70%), #0B0A12;
  transition: opacity var(--t-lenta), visibility var(--t-lenta);
}
.diapo.activa { opacity: 1; visibility: visible; }
.diapo-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.diapo-fondo img { width: 100%; height: 100%; object-fit: cover; }
.diapo-fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 10, 18, .55) 0%, rgba(11, 10, 18, .35) 45%, rgba(11, 10, 18, .92) 100%);
}
.diapo.activa .diapo-fondo img { animation: ken-burns 6s ease-out both; }
@keyframes ken-burns { from { transform: scale(1.12); } to { transform: scale(1); } }

.diapo-fondo.desenfocado img { filter: blur(24px) brightness(.5); transform: scale(1.1); }
.diapo-fondo.suave img { filter: blur(6px) brightness(.6); }
.diapo-momento { align-content: end; }
.diapo-firma { display: inline-flex; align-items: center; gap: var(--e-2); color: #fff; font-weight: 600; }
.diapo .recap-final { position: relative; z-index: 6; margin-top: var(--e-6); }
.sellado-claro { color: var(--texto); }
.diapo .script { font-size: clamp(3.6rem, 16vw, 6rem); color: #fff; margin: 0; }
.diapo h2 { font-size: clamp(2.2rem, 9vw, 3.2rem); color: #fff; }
.diapo .kicker { color: #E2C27D; justify-content: center; }
.diapo-sub { color: rgba(245, 242, 236, .85); font-size: 1.05rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.kicker .i { display: inline-block; vertical-align: -3px; }

.diapo.activa .entra { animation: entra .8s var(--curva) both; }
.diapo.activa .entra:nth-child(2) { animation-delay: .15s; }
.diapo.activa .entra:nth-child(3) { animation-delay: .3s; }
.diapo.activa .entra:nth-child(4) { animation-delay: .45s; }
.diapo.activa .entra:nth-child(5) { animation-delay: .6s; }
@keyframes entra { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }

.numeros { display: grid; gap: var(--e-6); }
.numero b {
  display: block;
  font-family: var(--f-mono); font-weight: 500;
  font-size: clamp(3.6rem, 18vw, 5.4rem); line-height: .95; letter-spacing: -.04em;
  color: #E2C27D;
  font-variant-numeric: tabular-nums;
}
.numero span { font-family: var(--f-mono); font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: #A39DB0; }

.podio { list-style: none; padding: 0; display: grid; gap: var(--e-3); width: min(340px, 100%); margin-top: var(--e-6); }
.podio li {
  display: flex; align-items: center; gap: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-tarjeta);
  background: rgba(22, 20, 31, .75);
  border: 1px solid #2A2738;
  text-align: left;
}
.podio .lugar { font-family: var(--f-mono); font-size: 1.5rem; color: #E2C27D; width: 26px; }
.podio .avatar { border-color: #16141F; box-shadow: none; }
.podio strong { display: block; }
.podio small { color: #A39DB0; }

/* El fotógrafo de la noche (recap) */
.avatar.campeon {
  width: 150px; height: 150px; margin: var(--e-5) 0 var(--e-4);
  border: 3px solid #E2C27D;
  box-shadow: 0 0 0 8px rgba(226, 194, 125, .15), 0 20px 60px rgba(226, 194, 125, .35);
}
.diapo .campeon-nombre { font-size: clamp(3rem, 14vw, 5rem); }
.premio-recap {
  display: inline-flex; align-items: center; gap: var(--e-2);
  margin-top: var(--e-4); padding: var(--e-2) var(--e-4); border-radius: 999px;
  background: var(--dorado); color: #1A1306; font-weight: 600;
}
.copia-grande {
  width: min(300px, 72vw);
  padding: 10px 10px 48px;
  background: #F5F2EC;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  transform: rotate(-2.5deg);
  position: relative;
  margin: var(--e-6) 0;
}
.copia-grande img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.copia-grande figcaption {
  position: absolute; left: 0; right: 0; bottom: 10px;
  font-family: var(--f-titulo); font-style: italic; font-size: 1.5rem; color: #1A1523;
}

.collage {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  width: min(360px, 100%); margin-top: var(--e-6);
}
.collage figure { margin: 0; position: relative; }
.collage img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.collage figcaption {
  position: absolute; right: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(11, 10, 18, .75); color: #fff;
  font: 500 .7rem/1.4 var(--f-mono);
}
.collage figcaption .i { width: 12px; height: 12px; fill: #FF6B8B; stroke: none; }

/* ==========================================================================
   Marca y panel de los novios (papel)
   ========================================================================== */

.cabecera-sitio {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: calc(var(--e-4) + var(--seguro-arriba)) 0 var(--e-4);
}
.cabecera-sitio nav { display: flex; align-items: center; gap: var(--e-2); }
.cabecera-sitio nav form { display: contents; }

.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-titulo); font-size: 1.75rem; line-height: 1;
  text-decoration: none; color: var(--texto);
}
.logo-marca {
  width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center;
  background: #1A1523; color: #E2C27D;
}
.tema-app .logo-marca { background: #F5F2EC; color: #1A1523; }
.logo-marca .i { width: 17px; height: 17px; stroke-width: 2; }

.panel-cabecera { border-bottom: 1px solid var(--linea); background: var(--superficie); }
.panel-titulo {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-7) 0 var(--e-5);
}
.panel-titulo .script { font-size: clamp(2.8rem, 8vw, 3.8rem); margin: 0; }
.pestanas { display: flex; gap: var(--e-1); overflow-x: auto; scrollbar-width: none; margin-bottom: -1px; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  display: inline-flex; align-items: center; gap: var(--e-2);
  min-height: 48px; padding: 0 var(--e-4);
  border-bottom: 2px solid transparent;
  color: var(--texto-2); text-decoration: none; font-weight: 500; font-size: .93rem;
  white-space: nowrap;
  transition: color var(--t-rapida), border-color var(--t-rapida);
}
.pestanas a:hover { color: var(--texto); }
.pestanas a[aria-current="page"] { color: var(--texto); border-color: var(--texto); }

.panel-cuerpo { padding: var(--e-7) 0 var(--e-10); }

.estado-evento {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-4);
  padding: var(--e-5) var(--e-6);
  border-radius: var(--r-tarjeta);
  margin-bottom: var(--e-5);
  border: 1px solid var(--linea);
  background: var(--superficie);
}
.estado-evento.pendiente { background: var(--aviso-suave); border-color: rgba(255, 181, 71, .45); }
.estado-evento.pendiente .opcion-icono { background: rgba(255, 181, 71, .25); color: var(--aviso); }
.estado-evento.activo { background: var(--ok-suave); border-color: rgba(61, 220, 151, .45); }
.estado-evento.activo .opcion-icono { background: rgba(61, 220, 151, .25); color: var(--ok); }
.estado-evento.vencido { background: var(--superficie-2); }
.estado-evento > div { flex: 1; min-width: 220px; }
.estado-evento strong { display: block; font-size: 1.04rem; }
.estado-evento small { color: var(--texto-2); }

.estadisticas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); margin-bottom: var(--e-5); }
@media (min-width: 720px) { .estadisticas { grid-template-columns: repeat(4, 1fr); } }
.estadistica { padding: var(--e-5); border-radius: var(--r-tarjeta); background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-1); }
.estadistica b {
  display: block; font-family: var(--f-mono); font-weight: 500;
  font-size: 2.2rem; line-height: 1; letter-spacing: -.03em; margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.estadistica span { font-size: .85rem; color: var(--texto-2); }

.acciones-rapidas { display: grid; gap: var(--e-3); margin-bottom: var(--e-8); }
@media (min-width: 720px) { .acciones-rapidas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .acciones-rapidas { grid-template-columns: repeat(4, 1fr); } }
.accion {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 66px; padding: var(--e-3) var(--e-4);
  border-radius: var(--r-tarjeta);
  background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-1);
  text-decoration: none;
  cursor: pointer; font: inherit; font-weight: 600; color: inherit; text-align: left;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.accion:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
.accion small { display: block; font-weight: 400; color: var(--texto-2); font-size: .83rem; }
.accion form { display: contents; }

.galeria-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
@media (min-width: 640px) { .galeria-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .galeria-panel { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.foto-panel {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta);
  overflow: hidden; box-shadow: var(--sombra-1);
}
.foto-panel > a img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--superficie-2); }
.foto-panel-info { padding: var(--e-2) var(--e-3); font-size: .8rem; }
.foto-panel-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto-panel-info .muted { display: flex; gap: var(--e-2); align-items: center; }
.foto-panel-acciones { display: flex; border-top: 1px solid var(--linea); }
.foto-panel-acciones form { flex: 1; display: flex; }
.foto-panel-acciones button {
  flex: 1; min-height: 42px; border: 0; background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: 500 .8rem/1 var(--f-ui); color: var(--texto-2);
  transition: background-color var(--t-rapida), color var(--t-rapida);
}
.foto-panel-acciones form + form button { border-left: 1px solid var(--linea); }
.foto-panel-acciones button:hover { background: var(--superficie-2); color: var(--texto); }
.foto-panel-acciones button.peligro:hover { color: var(--peligro); background: var(--peligro-suave); }

.lista-retos { display: grid; gap: var(--e-2); margin-bottom: var(--e-7); }
.fila-reto {
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-5);
  border-radius: var(--r-tarjeta);
  background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-1);
}
.fila-reto > div { flex: 1; min-width: 0; }
.fila-reto strong { display: block; }
.fila-reto small { color: var(--texto-2); }
.fila-reto form { display: contents; }
.fila-invitado { padding-left: var(--e-3); }

.sugeridos { display: grid; gap: var(--e-2); }
@media (min-width: 720px) { .sugeridos { grid-template-columns: repeat(2, 1fr); } }
.sugerido {
  display: flex; align-items: center; gap: var(--e-3); width: 100%;
  min-height: 56px; padding: var(--e-2) var(--e-2) var(--e-2) var(--e-4);
  border-radius: var(--r-tarjeta);
  border: 1px dashed var(--linea-fuerte); background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: border-color var(--t-rapida), background-color var(--t-rapida);
}
.sugerido:hover { border-color: var(--texto-3); background: var(--superficie); }
.sugerido > span { flex: 1; }
.sugerido small { display: block; color: var(--texto-2); font-size: .82rem; }
.sugerido .mas {
  flex: none; width: 38px; height: 38px; border-radius: var(--r-control);
  display: grid; place-items: center; background: var(--superficie-2);
}
.sugerido:hover .mas { background: var(--primario); color: var(--sobre-primario); }

.columnas { display: grid; gap: var(--e-7); }
@media (min-width: 960px) { .columnas { grid-template-columns: 1fr 1fr; } }

.filtros-grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
@media (min-width: 640px) { .filtros-grilla { grid-template-columns: repeat(3, 1fr); } }
.filtro-opcion { position: relative; cursor: pointer; }
.filtro-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.filtro-opcion img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-foto);
  border: 2px solid transparent; background: var(--superficie-2);
  box-shadow: 0 0 0 1px var(--linea);
  transition: border-color var(--t-rapida);
}
.filtro-opcion span { display: block; text-align: center; font-weight: 500; font-size: .9rem; margin-top: var(--e-2); }
.filtro-opcion:has(input:checked) img { border-color: var(--seleccion); box-shadow: 0 0 0 3px rgba(26, 21, 35, .1); }
.filtro-opcion:has(input:checked) span { font-weight: 600; }
.filtro-opcion:has(input:focus-visible) img { outline: 2px solid var(--iris); outline-offset: 2px; }

.grupo-ajustes { margin-bottom: var(--e-8); }
.grupo-ajustes > h2 { font-size: 2rem; margin-bottom: var(--e-2); }
.grupo-ajustes > p { color: var(--texto-2); margin-bottom: var(--e-5); }
.fila-campos { display: grid; gap: 0 var(--e-4); }
@media (min-width: 640px) { .fila-campos { grid-template-columns: 1fr 1fr; } }

.barra-guardar {
  position: sticky; bottom: 0; z-index: 10;
  padding: var(--e-3) 0 calc(var(--e-3) + var(--seguro-abajo));
  background: linear-gradient(transparent, var(--fondo) 35%);
}

/* La tarjeta imprimible del QR: va al papel. */
.qr-hoja {
  width: min(420px, 100%); margin: 0 auto;
  padding: var(--e-7) var(--e-6);
  text-align: center;
  background: #fff;
  color: #1A1523;
  border: 1px solid var(--linea);
  border-radius: var(--r-grande);
  box-shadow: var(--sombra-2);
}
.qr-hoja .script { font-size: 3.2rem; margin: 0 0 var(--e-4); }
.qr-hoja .kicker { justify-content: center; color: #8E6A2E; }
.qr-hoja .kicker::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.qr-hoja .qr { width: 220px; margin: var(--e-6) auto; padding: var(--e-3); background: #fff; border-radius: var(--r-control); }
.qr-hoja .qr svg { width: 100%; height: auto; }
.qr-hoja .qr svg path { fill: #1A1523; }
.qr-hoja .muted { color: #5E566B; }
.qr-hoja .ornamento { display: none; }

.autenticacion {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--e-7) 16px;
  background:
    radial-gradient(60% 50% at 0% 0%, rgba(226, 194, 125, .22), transparent 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(109, 74, 255, .08), transparent 70%),
    var(--fondo);
}
.autenticacion .tarjeta { width: min(420px, 100%); padding: var(--e-8) var(--e-7); box-shadow: var(--sombra-2); }
.autenticacion h1 { font-size: 2.8rem; margin-top: var(--e-6); }

.mensaje-error {
  padding: var(--e-3) var(--e-4); border-radius: var(--r-control);
  background: var(--peligro-suave); color: var(--peligro);
  font-size: .92rem; margin-bottom: var(--e-4);
}

.pie-form { margin: var(--e-6) 0 0; }
.panel-titulo-simple { padding-top: 0; }
.panel-titulo-simple h1, .panel-titulo-simple h2 { margin: 0; }
.fila-evento { text-decoration: none; transition: border-color var(--t-rapida), box-shadow var(--t-rapida); }
.fila-evento:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
.fila-evento .script { font-size: 2rem; line-height: 1.1; }
.contenedor-sin-margen { width: 100%; max-width: 640px; margin-inline: 0; }
fieldset.sin-borde { border: 0; padding: 0; margin: 0 0 var(--e-6); min-width: 0; }
.qr-intro { max-width: 640px; margin-bottom: var(--e-7); }
.qr-intro .hero-acciones { margin-top: var(--e-4); }
.formatos-pdf { display: grid; gap: var(--e-3); margin-top: var(--e-4); }
/* Plan gratis: resumen y cómo pasarse al completo. */
.plan-gratis {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-4);
  margin-top: var(--e-4); padding: var(--e-4) var(--e-5);
  border: 1px dashed var(--champagne); border-radius: var(--r-tarjeta);
  background: rgba(201, 164, 106, .08);
}
.plan-gratis .opcion-icono { background: var(--dorado); color: #1A1306; }
.plan-gratis > div { flex: 1; min-width: 200px; }
.plan-gratis strong { display: block; }
.plan-gratis small { color: var(--texto-2); font-size: .86rem; }
.no-incluido { text-align: center; padding-top: var(--e-7); }
.no-incluido .kicker { justify-content: center; }
.no-incluido .plan-gratis { text-align: left; }
.grupo-ajustes[hidden], .vista-tipo[hidden] { display: none; }
.qr-a-medida {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-3) var(--e-4); align-items: center;
  margin-top: var(--e-6); padding: var(--e-5);
  border-radius: var(--r-tarjeta);
  background: radial-gradient(90% 140% at 100% 0%, rgba(226, 194, 125, .2), transparent 70%), var(--fondo);
}
.qr-a-medida .opcion-icono { background: rgba(226, 194, 125, .16); color: #E2C27D; }
.qr-a-medida strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.qr-a-medida p { margin: 4px 0 0; color: var(--texto-2); font-size: .92rem; }
.qr-a-medida .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 640px) { .qr-a-medida { grid-template-columns: auto minmax(0, 1fr) auto; } .qr-a-medida .btn { grid-column: auto; } }
.qr-url { font-size: .78rem; overflow-wrap: anywhere; margin: 0; font-family: var(--f-mono); }

.resumen-bloqueado {
  margin: 0; border: 1px solid var(--linea); border-radius: var(--r-tarjeta);
  background: var(--superficie); overflow: hidden;
}
.resumen-bloqueado div { display: flex; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) var(--e-4); }
.resumen-bloqueado div + div { border-top: 1px solid var(--linea); }
.resumen-bloqueado dt { color: var(--texto-2); font-size: .9rem; }
.resumen-bloqueado dd { margin: 0; font-weight: 600; text-align: right; }

/* --- Panel: compartir ---------------------------------------------------- */
.compartir { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-4); margin-bottom: var(--e-8); }
@media (min-width: 900px) { .compartir { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.compartir .tarjeta { min-width: 0; }
.compartir .tarjeta h3 { display: flex; align-items: center; gap: var(--e-2); margin-bottom: var(--e-2); }
.compartir .tarjeta p { color: var(--texto-2); font-size: .94rem; }
.compartir-link {
  display: flex; align-items: center; gap: var(--e-2);
  padding: var(--e-2) var(--e-2) var(--e-2) var(--e-3);
  border: 1px solid var(--linea); border-radius: var(--r-control);
  background: var(--fondo); margin-bottom: var(--e-3);
  font-family: var(--f-mono); font-size: .78rem; overflow: hidden;
}
.compartir-link span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compartir-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.compartir-acciones form { display: contents; }
.album-ayuda { margin: var(--e-3) 0 0; font-size: .9rem; }
.album-pie { margin-top: var(--e-9); text-align: center; }
.album-publico .muro { margin-bottom: var(--e-7); }

/* --- Tipo de evento (crear y ajustes) ----------------------------------- */
.tipos-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
@media (min-width: 560px) { .tipos-grilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tipo-opcion {
  position: relative;
  display: flex; align-items: center; gap: var(--e-3);
  min-height: 56px; padding: var(--e-2) var(--e-3);
  border: 1px solid var(--linea); border-radius: var(--r-control);
  background: var(--superficie); cursor: pointer; box-shadow: var(--sombra-1);
  font-weight: 500; font-size: .9rem; line-height: 1.2;
  transition: border-color var(--t-rapida), box-shadow var(--t-rapida);
}
.tipo-opcion:hover { border-color: var(--linea-fuerte); }
.tipo-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-opcion .opcion-icono { width: 34px; height: 34px; border-radius: 8px; }
.tipo-opcion:has(input:checked) { border-color: var(--seleccion); box-shadow: 0 0 0 1px var(--seleccion); }
.tipo-opcion:has(input:checked) .opcion-icono { background: var(--seleccion); color: var(--sobre-primario); }
.tipo-opcion:has(input:focus-visible) { outline: 2px solid var(--iris); outline-offset: 2px; }

.vista-tipo {
  margin: 0 0 var(--e-7); padding: var(--e-5) var(--e-6);
  border-radius: var(--r-tarjeta);
  background: rgba(201, 164, 106, .1); border: 1px solid rgba(201, 164, 106, .35);
}
.vista-tipo.cambia { animation: aparece var(--t-lenta) var(--curva); }
.vista-tipo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.vista-tipo li { display: flex; gap: var(--e-2); align-items: flex-start; font-size: .92rem; }
.vista-tipo li[hidden] { display: none; }
.vista-tipo li .i { margin-top: 3px; color: var(--champagne-texto); }
.hoja-corazon { text-align: center; }
.hoja-corazon .avatar { margin: 0 auto var(--e-4); }
.hoja-corazon h2 { font-size: 2rem; }
.tipo-fijo {
  display: flex; gap: var(--e-3); align-items: center;
  padding: var(--e-3) var(--e-4); margin-bottom: var(--e-6);
  border-radius: var(--r-tarjeta); background: var(--superficie-2);
}
.tipo-fijo strong { display: block; }
.tipo-fijo small { color: var(--texto-2); font-size: .85rem; }
.sin-match { display: flex; gap: var(--e-3); align-items: flex-start; margin: 0; }
.sin-match strong { display: block; }
.sin-match small { color: var(--texto-2); font-size: .85rem; }
.sin-match[hidden], .bloque-match[hidden] { display: none; }
.bloque-ranking { margin-top: var(--e-4); }
.bloque-ranking .switch strong .i { display: inline-block; vertical-align: -2px; margin-right: 4px; color: var(--champagne-texto); }
.bloque-pantalla { margin-top: var(--e-2); }
.bloque-pantalla strong .i { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.recomendado {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  background: rgba(201, 164, 106, .18); color: var(--champagne-texto); font-size: .66rem; font-weight: 600; vertical-align: 1px;
}
.recomendado[hidden] { display: none; }

/* ==========================================================================
   Pantalla del salón (tele o proyector, horizontal)
   ========================================================================== */

.pantalla-cuerpo { overflow: hidden; }
.pantalla-cuerpo.sin-cursor, .pantalla-cuerpo.sin-cursor * { cursor: none !important; }
.pantalla {
  position: fixed; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 420px);
  background: #0B0A12;
  overflow: hidden;
}
.pantalla-fondo { position: absolute; inset: 0; z-index: 0; }
.pantalla-fondo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(48px) brightness(.35) saturate(1.2); transform: scale(1.2);
  transition: opacity 1.2s;
}
.pantalla-escena { position: relative; z-index: 1; display: grid; place-items: center; }
.pantalla-copia {
  position: absolute; margin: 0;
  max-width: 86%; max-height: 86%;
  padding: 1.4vh 1.4vh 7vh;
  background: #F5F2EC; border-radius: 6px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6);
  opacity: 0; transform: rotate(var(--giro, 0deg)) scale(.94);
  transition: opacity 1.1s var(--curva), transform 1.4s var(--curva);
}
.pantalla-copia.activa { opacity: 1; transform: rotate(var(--giro, 0deg)) scale(1); }
.pantalla-copia img { display: block; max-width: 100%; max-height: 72vh; width: auto; height: auto; border-radius: 3px; }
.pantalla-copia figcaption {
  position: absolute; left: 0; right: 0; bottom: 1.2vh; height: 4.8vh;
  display: flex; align-items: center; justify-content: center; gap: 1.2vh; padding: 0 2vh;
  color: #1A1523; white-space: nowrap; overflow: hidden;
}
.pantalla-copia figcaption .avatar {
  flex: none; width: 4.8vh; height: 4.8vh; min-width: 32px; min-height: 32px;
  border: 2px solid #fff; border-radius: 50%; object-fit: cover; box-shadow: 0 2px 8px rgba(26, 21, 35, .25);
}
.pantalla-pie-nombre {
  font-family: var(--f-titulo); font-style: italic; font-size: clamp(1.4rem, 3.4vh, 2.6rem); line-height: 1;
  overflow: hidden; text-overflow: ellipsis;
}
.pantalla-copia figcaption small {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font: 500 clamp(.75rem, 1.6vh, 1.1rem)/1 var(--f-mono); color: #6B6478; letter-spacing: .02em;
}
.pantalla-nueva {
  position: absolute; top: 2.6vh; left: 2.6vh;
  display: none; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px;
  background: var(--dorado); color: #1A1306;
  font-weight: 600; font-size: clamp(.8rem, 1.2vw, 1.1rem);
}
.pantalla-copia.es-nueva .pantalla-nueva { display: inline-flex; }

.pantalla-lateral {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2.5vh;
  padding: 4.5vh 2.5vw;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(11, 10, 18, 0), rgba(11, 10, 18, .8) 30%);
}
.pantalla-lateral .script { font-size: clamp(2.2rem, min(4.4vw, 8.5vh), 5.2rem); color: #fff; margin: 0; }
.pantalla-lateral .kicker { color: #E2C27D; }
.pantalla-autor { display: flex; align-items: center; gap: 1.2vw; }
.pantalla-autor[hidden] { display: none; }
.pantalla-autor .avatar { width: clamp(48px, min(5vw, 9vh), 88px); height: clamp(48px, min(5vw, 9vh), 88px); border-color: #0B0A12; }
.pantalla-autor small { display: block; color: #A39DB0; font-size: clamp(.8rem, 1vw, 1rem); }
.pantalla-autor strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.8rem, 2.6vw, 2.8rem); line-height: 1.1; }
.pantalla-autor span { color: #A39DB0; font-family: var(--f-mono); font-size: clamp(.8rem, 1vw, 1rem); }
.pantalla-ranking[hidden] { display: none; }
.pantalla-ranking .kicker { margin-bottom: 1.2vh; }
.pantalla-ranking ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1vh; }
.pantalla-ranking li {
  display: flex; align-items: center; gap: .9vw;
  padding: .7vh 1vw; border-radius: var(--r-control);
  background: rgba(22, 20, 31, .7); border: 1px solid #2A2738;
}
.pantalla-ranking li:first-child { border-color: rgba(226, 194, 125, .55); }
.pantalla-ranking .avatar { width: clamp(30px, 2.6vw, 44px); height: clamp(30px, 2.6vw, 44px); border-color: #16141F; box-shadow: none; }
.pantalla-ranking strong { flex: 1; min-width: 0; font-size: clamp(.9rem, 1.15vw, 1.25rem); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pantalla-ranking-puesto { width: 1.4em; font: 500 clamp(.9rem, 1.2vw, 1.3rem)/1 var(--f-mono); color: #E2C27D; }
.pantalla-ranking-puntos { font: 500 clamp(.8rem, 1vw, 1.1rem)/1 var(--f-mono); color: #A39DB0; }
.pantalla-ranking-premio { display: block; margin-top: 1vh; color: #E2C27D; font-size: clamp(.75rem, .95vw, 1rem); }
.pantalla-total { margin: 0 0 1.5vh; color: #A39DB0; font-size: clamp(.9rem, 1.2vw, 1.2rem); }
.pantalla-total b { color: #E2C27D; font-family: var(--f-mono); font-weight: 500; font-size: 1.6em; }
.pantalla-qr {
  display: flex; align-items: center; gap: 1.2vw;
  padding: 1.6vh; border-radius: var(--r-tarjeta);
  background: #F5F2EC; color: #1A1523;
}
.pantalla-qr .qr { flex: none; width: clamp(96px, 9vw, 150px); background: #fff; padding: 6px; border-radius: 8px; }
.pantalla-qr .qr svg { width: 100%; height: auto; }
.pantalla-qr strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(1.4rem, 1.8vw, 2rem); line-height: 1.1; }
.pantalla-qr small { color: #5E566B; font-size: clamp(.75rem, .95vw, .95rem); }

.pantalla-espera {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-content: center; justify-items: center; gap: 3vh;
  padding: 6vh; text-align: center;
  background: radial-gradient(70% 70% at 50% 40%, #201D2C, #0B0A12);
}
.pantalla-espera[hidden] { display: none; }
.pantalla-espera .script { font-size: clamp(3.4rem, 8vw, 8rem); color: #fff; margin: 0; }
.pantalla-espera p { font-size: clamp(1rem, 1.8vw, 1.8rem); color: #A39DB0; margin: 0; }
.pantalla-espera b { color: #E2C27D; }
.pantalla-espera[data-estado="vacio"] .pantalla-espera-sellado,
.pantalla-espera[data-estado="sellado"] .pantalla-espera-vacio { display: none; }
.pantalla-espera .pantalla-qr { max-width: 460px; text-align: left; }

.pantalla-completa { position: absolute; z-index: 6; left: 16px; top: 16px; opacity: .85; }
.pantalla-qr-lateral { flex-direction: column; align-items: flex-start; }
.pantalla-qr-lateral .qr { width: clamp(96px, min(11vw, 17vh), 180px); }
.pantalla-completa[hidden] { display: none; }
/* En teles de poca altura (720p) el QR va al costado del texto para que entre todo. */
@media (max-height: 820px) and (min-aspect-ratio: 1/1) {
  .pantalla-qr-lateral { flex-direction: row; align-items: center; }
  .pantalla-qr-lateral .qr { width: min(8vw, 15vh); }
  .pantalla-autor small { display: none; }
}

@media (max-aspect-ratio: 1/1) {
  .pantalla { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .pantalla-lateral { background: linear-gradient(180deg, rgba(11, 10, 18, 0), rgba(11, 10, 18, .88) 30%); }
}

/* ==========================================================================
   Sitio público (papel)
   ========================================================================== */

.sitio-cabecera {
  position: sticky; top: 0; z-index: 30;
  background: var(--vidrio);
  backdrop-filter: saturate(1.3) blur(16px); -webkit-backdrop-filter: saturate(1.3) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-media);
}
.sitio-cabecera.con-scroll { border-bottom-color: var(--linea); }
.sitio-barra {
  display: flex; align-items: center; gap: var(--e-5);
  min-height: var(--cabecera-alto); padding-top: var(--seguro-arriba);
}
/* Navegación en mayúsculas chicas y monoespaciada, como los datos al borde de un negativo. */
.sitio-nav { display: none; gap: var(--e-6); margin-inline: auto; }
.sitio-nav a {
  position: relative; padding: var(--e-2) 0;
  font: 500 .74rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-2); text-decoration: none;
  transition: color var(--t-rapida);
}
.sitio-nav a:hover, .sitio-nav a[aria-current="page"] { color: var(--texto); }
.sitio-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 50%; bottom: -6px; translate: -50% 0;
  width: 4px; height: 4px; border-radius: 50%; background: var(--champagne);
}
.sitio-acciones { display: flex; align-items: center; gap: var(--e-4); margin-left: auto; }
.sitio-ingresar { font-weight: 500; font-size: .92rem; color: var(--texto-2); text-decoration: none; }
.sitio-ingresar:hover { color: var(--texto); }
.sitio-menu-boton {
  width: 44px; height: 44px; margin-right: -10px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--texto); cursor: pointer;
}
.hamburguesa { display: grid; gap: 6px; width: 22px; }
.hamburguesa i { display: block; height: 1.5px; background: currentColor; border-radius: 2px; }
.hamburguesa i:last-child { width: 14px; justify-self: end; }
@media (min-width: 1100px) {
  .sitio-nav { display: flex; }
  .sitio-acciones { margin-left: 0; }
  .sitio-menu-boton { display: none; }
}
@media (max-width: 420px) {
  .sitio-barra { gap: var(--e-3); }
  .sitio-acciones { gap: var(--e-3); }
  .sitio-texto-largo { display: none; }
}
@media (max-width: 360px) { .sitio-ingresar { display: none; } }

/* Índice (menú del celular): pantalla completa y oscura, con las secciones numeradas. */
.indice {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
  padding: calc(var(--e-3) + var(--seguro-arriba)) 0 calc(var(--e-6) + var(--seguro-abajo));
  overflow-y: auto;
}
.indice[open] { display: flex; flex-direction: column; animation: aparece var(--t-media) var(--curva); }
.indice-barra { display: flex; align-items: center; justify-content: space-between; min-height: 56px; margin-bottom: var(--e-7); }
.indice-lista { display: grid; }
.indice-lista a {
  display: flex; align-items: baseline; gap: var(--e-5);
  padding: var(--e-3) 0; border-bottom: 1px solid var(--linea);
  font-family: var(--f-titulo); font-size: clamp(2.2rem, 9vw, 3.4rem); line-height: 1.1;
  text-decoration: none;
  transition: color var(--t-rapida);
}
.indice-lista a span { font: 500 .72rem/1 var(--f-mono); color: var(--champagne-texto); letter-spacing: .1em; }
.indice-lista a:hover { font-style: italic; color: var(--champagne-texto); }
@media (prefers-reduced-motion: no-preference) {
  .indice[open] .indice-lista a { animation: entra .5s var(--curva) both; }
  .indice[open] .indice-lista a:nth-child(2) { animation-delay: .04s; }
  .indice[open] .indice-lista a:nth-child(3) { animation-delay: .08s; }
  .indice[open] .indice-lista a:nth-child(4) { animation-delay: .12s; }
  .indice[open] .indice-lista a:nth-child(5) { animation-delay: .16s; }
  .indice[open] .indice-lista a:nth-child(6) { animation-delay: .2s; }
  .indice[open] .indice-lista a:nth-child(7) { animation-delay: .24s; }
}
.indice-acciones { display: grid; gap: var(--e-3); margin-top: auto; padding-top: var(--e-8); }

/* --- Secciones ----------------------------------------------------------- */
.lead { font-size: clamp(1.04rem, 1.5vw, 1.16rem); line-height: 1.6; color: var(--texto-2); max-width: 56ch; }

.link-flecha {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--texto); font-weight: 600; text-decoration: none;
  transition: gap var(--t-rapida), color var(--t-rapida);
}
.link-flecha:hover { gap: 10px; color: var(--iris); }
.link-flecha.volver { color: var(--texto-2); margin-bottom: var(--e-5); }

/* ==========================================================================
   Portada: el sitio contado como un rollo de fotos
   ========================================================================== */

/* Encabezado de cada capítulo: el número de fotograma y el título. */
.encabezado {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-5);
  align-items: start; margin-bottom: var(--e-8); max-width: 760px;
}
.encabezado-num {
  padding-top: 10px; min-width: 40px;
  border-top: 1px solid currentColor;
  font: 500 .78rem/1 var(--f-mono); color: var(--champagne-texto); letter-spacing: .06em;
}
.encabezado h2 { margin: 0; font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1; }
.encabezado .kicker::before { display: none; }
.encabezado-bajada { margin: var(--e-4) 0 0; max-width: 46ch; color: var(--texto-2); font-size: 1.06rem; }

/* 1. Portada --------------------------------------------------------------- */
.portada {
  position: relative; overflow: hidden;
  margin-top: calc(var(--cabecera-alto) * -1);
  padding: calc(var(--cabecera-alto) + var(--e-9)) 0 var(--e-9);
  text-align: center;
  background:
    radial-gradient(50% 45% at 15% 15%, rgba(226, 194, 125, .3), transparent 70%),
    radial-gradient(45% 45% at 88% 25%, rgba(109, 74, 255, .12), transparent 70%),
    var(--fondo);
}
.portada .kicker { justify-content: center; }
.portada .kicker::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.portada-titulo {
  font-size: clamp(3.8rem, 13.5vw, 11rem);
  line-height: .86; letter-spacing: -.035em;
  margin: var(--e-2) auto 0;
}
.portada-titulo em { display: block; }

/* La tira de película: negativo oscuro con perforaciones, cruzando torcida. */
.tira {
  position: relative; z-index: 1;
  width: 112vw; margin: var(--e-8) 0 var(--e-8) -6vw;
  padding: 28px 0;
  background: #0B0A12;
  rotate: -3deg;
  box-shadow: var(--sombra-3);
}
.tira::before, .tira::after {
  content: ""; position: absolute; left: 0; right: 0; height: 9px;
  background: repeating-linear-gradient(90deg, rgba(245, 242, 236, .82) 0 13px, transparent 13px 28px);
  border-radius: 2px;
}
.tira::before { top: 10px; }
.tira::after { bottom: 10px; }
.tira-pista { display: flex; gap: 10px; width: max-content; }
@media (prefers-reduced-motion: no-preference) {
  .tira-pista { animation: desliza 80s linear infinite; }
}
@keyframes desliza { to { transform: translateX(calc(-50% - 5px)); } }
.tira-cuadro { position: relative; margin: 0; width: clamp(130px, 15vw, 200px); }
.tira-cuadro img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.tira-cuadro span {
  position: absolute; left: 8px; bottom: 6px; z-index: 1;
  font: 500 .62rem/1 var(--f-mono); color: #E2C27D; letter-spacing: .08em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
}
.portada-pie { max-width: 640px; margin-top: var(--e-6); }
.portada-pie .lead { margin: 0 auto var(--e-7); }
.portada .tira { margin-bottom: 0; }
.portada-pie .hero-acciones { justify-content: center; }
@media (max-width: 480px) { .portada-pie .hero-acciones .btn { flex: 1 1 100%; } }

.portada-titulo-largo { font-size: clamp(2.9rem, 7vw, 6rem); line-height: .92; max-width: 16ch; }
.portada-titulo-largo em { display: block; }
.portada-nota { margin: var(--e-5) 0 0; font: 400 .74rem/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }

/* El problema y la solución --------------------------------------------- */
.dolor { padding: var(--e-10) 0 var(--e-9); }
.dolor-grilla { display: grid; gap: var(--e-4); }
@media (min-width: 900px) { .dolor-grilla { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.dolor-antes, .dolor-despues {
  display: flex; flex-direction: column; gap: var(--e-5);
  padding: var(--e-7) var(--e-6); border-radius: var(--r-grande);
}
@media (min-width: 900px) { .dolor-antes, .dolor-despues { padding: var(--e-8); } }
.dolor-antes { background: var(--superficie-2); border: 1px solid var(--linea); }
.dolor-despues {
  background: radial-gradient(90% 120% at 100% 0%, rgba(226, 194, 125, .18), transparent 70%), var(--fondo);
  box-shadow: var(--sombra-3);
}
.dolor-etiqueta { margin: 0; font: 500 .72rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--champagne-texto); }
.dolor-antes .dolor-etiqueta { color: var(--texto-2); text-decoration: line-through; text-decoration-color: var(--peligro); }
.dolor-texto { margin: 0; font-family: var(--f-titulo); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; }
.dolor-antes .dolor-texto { color: var(--texto-2); }
/* Unos mensajes de chat para que se vea el "pasame las fotos". */
.dolor-chat { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 6px; justify-items: start; }
.dolor-chat li {
  padding: 8px 14px; border-radius: 16px 16px 16px 4px;
  background: var(--superficie); border: 1px solid var(--linea);
  font-size: .9rem; color: var(--texto-2);
}
.dolor-chat li:nth-child(2) { justify-self: end; border-radius: 16px 16px 4px 16px; }
.dolor-lista { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: var(--e-3); }
.dolor-lista li { display: flex; gap: var(--e-3); align-items: center; font-weight: 500; }
.dolor-lista .i { color: var(--ok); flex: none; }

/* Por qué Rollo ------------------------------------------------------------ */
.porque { padding: var(--e-9) 0 var(--e-10); }
.porque-grilla { display: grid; gap: var(--e-7) var(--e-6); border-top: 1px solid var(--linea-fuerte); padding-top: var(--e-7); }
@media (min-width: 760px) { .porque-grilla { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .porque-grilla { grid-template-columns: repeat(4, 1fr); } }
.porque-num { display: block; font-family: var(--f-titulo); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--champagne-texto); margin-bottom: var(--e-4); }
.porque h3 { font-family: var(--f-titulo); font-weight: 400; font-size: 1.9rem; line-height: 1.05; margin-bottom: var(--e-3); }
.porque p { color: var(--texto-2); margin: 0; }

/* 2. La historia del invitado ---------------------------------------------- */
.historia { padding: var(--e-10) 0 var(--e-9); }
.historia-pasos { list-style: none; margin: 0; padding: 0; }
.historia-pasos li { padding: var(--e-8) 0; border-top: 1px solid var(--linea); }
.historia-num { display: block; margin-bottom: var(--e-4); font: 500 .74rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--champagne-texto); }
.historia-pasos h3 { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1.02; margin-bottom: var(--e-4); }
.historia-pasos p { color: var(--texto-2); font-size: 1.06rem; max-width: 40ch; }
.historia-mini { width: min(240px, 70%); margin-top: var(--e-6); border-radius: 30px; border: 7px solid #1A1523; box-shadow: var(--sombra-3); }
.historia-celu { display: none; }
/* En el celular, la captura va chiquita al costado del texto en vez de debajo. */
@media (max-width: 899px) {
  .historia-pasos li {
    display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: var(--e-5);
    align-items: center; padding: var(--e-6) 0;
  }
  .historia-pasos li > :not(.historia-mini) { grid-column: 1; }
  .historia-pasos h3 { font-size: 1.9rem; margin-bottom: var(--e-2); }
  .historia-pasos p { font-size: .98rem; margin: 0; }
  .historia-num { margin-bottom: var(--e-2); }
  .historia-mini {
    grid-column: 2; grid-row: 1 / span 3; width: 100%; margin: 0;
    border-width: 4px; border-radius: 16px;
  }
}
@media (min-width: 900px) {
  .historia-grilla { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--e-9); }
  .historia-celu {
    display: grid; place-items: center;
    position: sticky; top: calc(var(--cabecera-alto) + var(--e-5));
    height: calc(100vh - var(--cabecera-alto) - var(--e-8));
  }
  .historia-pasos li {
    min-height: 72vh; display: flex; flex-direction: column; justify-content: center;
    opacity: .3; transition: opacity var(--t-lenta) var(--curva);
  }
  .historia-pasos li.activo { opacity: 1; }
  .historia-mini { display: none; }
}
.historia-marco {
  position: relative; overflow: hidden;
  width: min(300px, 100%); max-height: 100%; aspect-ratio: 480 / 1039;
  border: 10px solid #1A1523; border-radius: 46px;
  background: #0B0A12;
  box-shadow: var(--sombra-3);
}
.historia-marco img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04);
  transition: opacity .6s var(--curva), transform .8s var(--curva);
}
.historia-marco img.activa { opacity: 1; transform: none; }

/* 3. Hoja de contactos ----------------------------------------------------- */
.contactos { padding: var(--e-10) 0; }
.hoja-contactos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-7) var(--e-4);
}
@media (min-width: 900px) { .hoja-contactos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-8) var(--e-6); } }
.cuadro { margin: 0; }
.cuadro-num { display: block; margin-bottom: 8px; font: 500 .66rem/1 var(--f-mono); letter-spacing: .12em; color: var(--champagne-texto); }
.cuadro-foto { position: relative; }
.cuadro-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.cuadro:not(.marcado) img { opacity: .45; filter: saturate(.5); transition: opacity var(--t-media), filter var(--t-media); }
.cuadro:not(.marcado):hover img { opacity: 1; filter: none; }
@media (max-width: 899px) {
  .cuadro:not(.marcado) { display: none; }
  .cuadro-foto img { aspect-ratio: 1; }
  .cuadro figcaption { margin-top: var(--e-4); font-size: .86rem; }
  .cuadro figcaption strong { font-size: 1.35rem; }
}
/* El círculo de lápiz graso que marca la foto elegida. */
.lapiz {
  position: absolute; inset: -12px -14px; width: calc(100% + 28px); height: calc(100% + 24px);
  max-width: none; overflow: visible; pointer-events: none;
}
.lapiz path {
  fill: none; stroke: var(--rosa); stroke-width: 1.1; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .js-revela .cuadro.marcado .lapiz path { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6, .1, .3, 1) .35s; }
  .js-revela .cuadro.marcado.visible .lapiz path { stroke-dashoffset: 0; }
}
.cuadro figcaption { margin-top: var(--e-5); font-size: .92rem; color: var(--texto-2); line-height: 1.5; }
.cuadro figcaption strong { display: block; margin-bottom: 4px; font-family: var(--f-titulo); font-weight: 400; font-size: 1.6rem; line-height: 1.1; color: var(--texto); }

/* 4. El revelado ----------------------------------------------------------- */
.revelado-seccion { padding: var(--e-10) 0; background: var(--superficie-2); overflow: hidden; }
.revelado-grilla { display: grid; gap: var(--e-9); align-items: center; }
@media (min-width: 900px) { .revelado-grilla { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.revelado-seccion .encabezado { margin-bottom: var(--e-6); }
.reloj-grande { display: flex; align-items: flex-start; gap: var(--e-3); margin-top: var(--e-7); }
.reloj-grande div { display: grid; justify-items: center; gap: 6px; }
.reloj-grande b { font: 500 clamp(3rem, 8vw, 5.4rem)/1 var(--f-mono); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.reloj-grande small { font: 500 .64rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.reloj-grande i { font: 400 clamp(2.4rem, 6vw, 4rem)/1.2 var(--f-titulo); color: var(--champagne); font-style: normal; }
.copia-revelada {
  position: relative; margin: 0; justify-self: center;
  width: min(360px, 86%);
  padding: 14px 14px 60px;
  background: #fff; border-radius: 4px;
  box-shadow: var(--sombra-3);
  rotate: 3deg;
}
.copia-revelada img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.copia-revelada figcaption {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  font-family: var(--f-titulo); font-style: italic; font-size: 1.4rem; color: #1A1523;
}
@media (prefers-reduced-motion: no-preference) {
  .js-revela .copia-revelada:not(.visible) img { filter: sepia(.6) brightness(2.2) contrast(.3) blur(4px); }
  .js-revela .copia-revelada.visible img { animation: revelar-lento 3.4s ease-out .3s both; }
}
@keyframes revelar-lento {
  0% { filter: sepia(.6) brightness(2.2) contrast(.3) blur(4px); }
  55% { filter: sepia(.3) brightness(1.3) contrast(.75) blur(1px); }
  100% { filter: none; }
}

/* 4 bis. La pantalla del salón: una tele en penumbra con la pantalla real ---- */
.salon-seccion {
  padding: var(--e-10) 0; overflow: hidden;
  background: radial-gradient(55% 45% at 50% 42%, rgba(226, 194, 125, .13), transparent 72%), var(--fondo);
}
.salon { position: relative; margin: 0 auto var(--e-8); max-width: 1000px; }
.tele {
  position: relative; z-index: 1;
  padding: clamp(5px, 1vw, 12px); border-radius: clamp(8px, 1.3vw, 16px);
  background: linear-gradient(180deg, #1D1C22, #0C0B0F);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 120px rgba(226, 194, 125, .2), 0 40px 70px rgba(0, 0, 0, .65);
}
.tele-pantalla { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #000; }
.tele-pantalla img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* El brillo del vidrio. */
.tele-pantalla::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .07) 0%, transparent 38%);
}
@media (prefers-reduced-motion: no-preference) {
  .tele-pantalla img { opacity: 0; animation: tele-pasa 15s infinite; }
  .tele-pantalla img:nth-child(2) { animation-delay: 5s; }
  .tele-pantalla img:nth-child(3) { animation-delay: 10s; }
  .tele-pantalla img:first-child { animation-name: tele-pasa-primera; }
}
@keyframes tele-pasa { 0% { opacity: 0; } 5%, 33% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes tele-pasa-primera { 0%, 33% { opacity: 1; } 38%, 95% { opacity: 0; } 100% { opacity: 1; } }
.tele-pie {
  display: block; width: 22%; height: clamp(10px, 2vw, 22px); margin: 0 auto;
  background: linear-gradient(180deg, #121116, #1F1E24);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
}
.salon::after {  /* la luz de la pantalla sobre la mesa */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -10px; height: 60px; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(226, 194, 125, .22), transparent 70%);
  filter: blur(8px);
}
.salon figcaption { margin-top: var(--e-6); text-align: center; color: var(--texto-2); font-size: .95rem; }
.salon-modos { display: grid; gap: var(--e-4); max-width: 1000px; margin: 0 auto; }
@media (min-width: 760px) { .salon-modos { grid-template-columns: 1fr 1fr; } }
.salon-modos article {
  padding: var(--e-6); border-radius: var(--r-grande);
  background: var(--superficie); border: 1px solid var(--linea);
}
.salon-modos h3 { font-family: var(--f-titulo); font-weight: 400; font-size: 1.9rem; line-height: 1.05; margin-bottom: var(--e-2); }
.salon-modos p { margin: 0; color: var(--texto-2); }
.reloj-salon { margin-top: var(--e-5); gap: var(--e-2); }
.reloj-salon b { font-size: clamp(2.2rem, 5vw, 3rem); }
.reloj-salon i { font-size: clamp(1.8rem, 4vw, 2.4rem); }

/* 5. Para cada fiesta: riel horizontal ------------------------------------- */
.fiestas { padding: var(--e-10) 0 var(--e-9); }
.fiestas-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-5); }
.riel-flechas { display: none; gap: var(--e-2); margin-bottom: var(--e-8); }
@media (min-width: 900px) { .riel-flechas { display: flex; } }
.riel {
  --borde: max(16px, (100vw - 1180px) / 2);
  display: flex; gap: var(--e-4);
  overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x mandatory;
  padding: 0 var(--borde) var(--e-3);
  scroll-padding-inline: var(--borde);
}
.riel::-webkit-scrollbar { display: none; }
.riel-tarjeta {
  position: relative; flex: none; overflow: hidden;
  width: clamp(250px, 28vw, 340px); aspect-ratio: 3 / 4;
  border-radius: var(--r-grande);
  scroll-snap-align: start;
  color: #fff; text-decoration: none;
  background: #1A1523;
}
.riel-tarjeta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
.riel-tarjeta:hover img { transform: scale(1.06); }
.riel-tarjeta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(11, 10, 18, .88)); }
.riel-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: 6px; padding: var(--e-6); }
.riel-icono {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  margin-bottom: var(--e-2);
}
.riel-tarjeta strong { font-family: var(--f-titulo); font-weight: 400; font-size: 2.2rem; line-height: 1; }
.riel-tarjeta small { font-size: .84rem; color: rgba(255, 255, 255, .78); line-height: 1.45; }

/* 6. Precios: cajas de rollo ------------------------------------------------ */
.rollos-seccion { padding: var(--e-10) 0; background: var(--superficie-2); }
.rollos { display: grid; gap: var(--e-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .rollos { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e-4); } }
.caja-rollo.gratis .caja-banda { background: transparent; color: var(--champagne-texto); border-bottom: 1px dashed var(--champagne); }
.caja-rollo.gratis { background: transparent; border-style: dashed; border-color: var(--champagne); box-shadow: none; }
.caja-rollo.gratis .caja-cuerpo { background: none; }
.caja-rollo.gratis .caja-precio { font-size: .86rem; }
@media (max-width: 599px) {
  .caja-banda span + span { display: none; }
  .caja-cuerpo { padding: var(--e-5) var(--e-4); }
  .caja-exp { font-size: 2.6rem; }
  .caja-rollo strong { font-size: 1.5rem; }
}
.caja-rollo {
  display: grid; overflow: hidden;
  border-radius: 14px; background: var(--superficie);
  border: 1px solid var(--linea); box-shadow: var(--sombra-2);
  text-decoration: none;
  transition: transform var(--t-media) var(--curva), box-shadow var(--t-media);
}
.caja-rollo:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--sombra-3); }
.caja-banda {
  display: flex; justify-content: space-between; gap: var(--e-3);
  padding: 12px 16px;
  background: #1A1523; color: #E2C27D;
  font: 500 .68rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase;
}
.caja-rollo.destacada .caja-banda { background: var(--dorado); color: #1A1306; }
.caja-rollo.destacada { border-color: #1A1523; box-shadow: 0 0 0 1px #1A1523, var(--sombra-2); }
.caja-cuerpo {
  display: grid; gap: 6px; padding: var(--e-6) var(--e-5) var(--e-6);
  background: linear-gradient(125deg, transparent 72%, rgba(201, 164, 106, .14) 72% 80%, transparent 80%);
}
.caja-exp { display: grid; font: 500 3.6rem/1 var(--f-mono); letter-spacing: -.05em; margin-bottom: var(--e-3); }
.caja-exp small { font: 500 .66rem/1.6 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-2); }
.caja-rollo strong { font-family: var(--f-titulo); font-weight: 400; font-size: 1.9rem; line-height: 1.05; }
.caja-precio { font-size: 1.05rem; color: var(--texto-2); }
.rollos-nota { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-5); margin: var(--e-7) 0 0; color: var(--texto-2); }

/* 7. Notas al dorso: preguntas a dos columnas -------------------------------- */
/* En la portada van plegadas: se ve la pregunta y la respuesta se abre al tocarla. */
.notas-plegadas { display: grid; gap: 0 var(--e-7); margin: 0 0 var(--e-8); }
@media (min-width: 900px) { .notas-plegadas { grid-template-columns: 1fr 1fr; } }
.notas-plegadas details { border-top: 1px solid var(--linea-fuerte); }
.notas-plegadas summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-5) 0; cursor: pointer; list-style: none;
  font-family: var(--f-titulo); font-size: clamp(1.4rem, 2.4vw, 1.7rem); line-height: 1.15;
}
.notas-plegadas summary::-webkit-details-marker { display: none; }
.notas-signo {
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--linea-fuerte); color: var(--champagne-texto);
  transition: transform var(--t-media) var(--curva), background-color var(--t-rapida);
}
.notas-plegadas details[open] .notas-signo { transform: rotate(45deg); background: var(--superficie-2); }
.notas-plegadas details p { margin: 0 0 var(--e-5); color: var(--texto-2); max-width: 52ch; }
.notas-seccion { padding: var(--e-10) 0; }
.notas { display: grid; gap: var(--e-7); margin: 0 0 var(--e-8); }
@media (min-width: 800px) { .notas { grid-template-columns: 1fr 1fr; gap: var(--e-8) var(--e-9); } }
.notas div { padding-top: var(--e-5); border-top: 1px solid var(--linea-fuerte); }
.notas dt { font-family: var(--f-titulo); font-size: 1.8rem; line-height: 1.12; margin-bottom: var(--e-3); }
.notas dd { margin: 0; color: var(--texto-2); }

/* Último fotograma: el cierre de todas las páginas ---------------------------- */
.final { padding: var(--e-10) 0; text-align: center; }
.final .kicker { justify-content: center; }
.final .kicker::after { content: ""; width: 18px; height: 1px; background: currentColor; }
.final-titulo { font-size: clamp(3rem, 8.5vw, 7rem); line-height: .95; max-width: 13ch; margin: 0 auto var(--e-8); }
.final-titulo + .final-texto { margin-top: calc(var(--e-5) * -1); }
.final-texto { max-width: 52ch; margin: 0 auto var(--e-8); color: var(--texto-2); font-size: 1.08rem; }
.final-acciones { display: flex; flex-direction: column; align-items: center; gap: var(--e-5); }

/* --- Pie: con el nombre gigante ------------------------------------------ */
.pie {
  padding: var(--e-7) 0 calc(var(--e-7) + var(--seguro-abajo));
  border-top: 1px solid var(--linea);
  color: var(--texto-2); font-size: .9rem;
}
.sitio-pie { padding-top: var(--e-9); overflow: hidden; color: var(--texto-2); font-size: .92rem; }
.sitio-pie-columnas { display: grid; gap: var(--e-7); }
@media (min-width: 640px) { .sitio-pie-columnas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .sitio-pie-columnas { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.sitio-pie-lema { font-family: var(--f-titulo); font-size: 1.7rem; line-height: 1.15; color: var(--texto); max-width: 18ch; margin: 0; }
.sitio-pie nav { display: grid; gap: var(--e-3); align-content: start; }
.sitio-pie nav strong { color: var(--texto); font: 500 .7rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--e-1); }
.sitio-pie nav a { text-decoration: none; transition: color var(--t-rapida); }
.sitio-pie nav a:hover { color: var(--texto); }
.sitio-pie-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3);
  margin-top: var(--e-8); padding-top: var(--e-5);
  border-top: 1px solid var(--linea);
  font: 400 .78rem/1.5 var(--f-mono); color: var(--texto-3);
}
.sitio-pie-legal nav { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.sitio-pie-marca {
  margin: var(--e-6) 0 -.2em; text-align: center;
  font-family: var(--f-titulo); font-size: clamp(8rem, 30vw, 26rem); line-height: .8; letter-spacing: -.04em;
  color: var(--texto); user-select: none;
}

/* ==========================================================================
   Páginas interiores: el mismo rollo, en capítulos
   ========================================================================== */

/* Portadilla: el titular grande y, a la derecha, el número de la sección hueco. */
.portadilla {
  position: relative; overflow: hidden;
  margin-top: calc(var(--cabecera-alto) * -1);
  padding: calc(var(--cabecera-alto) + var(--e-9)) 0 var(--e-8);
  background:
    radial-gradient(50% 80% at 0% 0%, rgba(226, 194, 125, .26), transparent 70%),
    radial-gradient(40% 70% at 100% 20%, rgba(109, 74, 255, .08), transparent 70%),
    var(--fondo);
}
.portadilla-grilla { display: grid; gap: var(--e-8); align-items: end; }
@media (min-width: 900px) { .portadilla-grilla { grid-template-columns: minmax(0, 1fr) auto; } }
.portadilla h1 { font-size: clamp(3rem, 8vw, 6.4rem); line-height: .92; letter-spacing: -.03em; max-width: 14ch; margin-bottom: var(--e-5); }
.portadilla .lead { margin-bottom: 0; }
.portadilla .link-flecha.volver { display: flex; width: fit-content; }
.portadilla .hero-acciones { margin-top: var(--e-7); }
.portadilla-num {
  display: none;
  font-family: var(--f-titulo); font-size: clamp(9rem, 18vw, 16rem); line-height: .75;
  color: transparent; -webkit-text-stroke: 1px var(--champagne);
  user-select: none;
}
@media (min-width: 900px) { .portadilla-num { display: block; } }
.portadilla-foto .copia-revelada { width: min(340px, 80%); margin-bottom: var(--e-5); }
@media (min-width: 900px) { .portadilla-foto .portadilla-grilla { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; } }

/* Borde de película: una franja oscura con perforaciones y la "data" del rollo. */
.borde-pelicula {
  position: relative; overflow: hidden;
  background: #0B0A12; padding: 22px 0;
  margin-bottom: var(--e-9);
}
.borde-pelicula::before, .borde-pelicula::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7px;
  background: repeating-linear-gradient(90deg, rgba(245, 242, 236, .8) 0 11px, transparent 11px 24px);
}
.borde-pelicula::before { top: 6px; }
.borde-pelicula::after { bottom: 6px; }
.borde-pelicula-texto {
  display: flex; gap: var(--e-8); width: max-content; padding-left: var(--e-6);
  font: 500 .66rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: #E2C27D;
  white-space: nowrap;
}

.seccion-interior { padding-bottom: var(--e-9); }

/* Filas numeradas: índices de tutoriales y recursos de ayuda. */
.filas { display: grid; border-top: 1px solid var(--linea-fuerte); }
.fila {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px var(--e-5);
  align-items: baseline;
  padding: var(--e-5) 0; border-bottom: 1px solid var(--linea);
  text-decoration: none;
  transition: background-color var(--t-media), padding var(--t-media) var(--curva);
}
.fila-num { font: 500 .72rem/1 var(--f-mono); letter-spacing: .08em; color: var(--champagne-texto); }
.fila-titulo { font-family: var(--f-titulo); font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.05; }
.fila-texto { grid-column: 2; color: var(--texto-2); font-size: .95rem; max-width: 60ch; }
.fila-texto small { display: block; margin-top: 4px; font: 400 .74rem/1.5 var(--f-mono); color: var(--texto-3); }
.fila > .i { grid-column: 3; grid-row: 1; align-self: center; color: var(--texto-3); transition: transform var(--t-media) var(--curva), color var(--t-media); }
.fila:hover { background: linear-gradient(90deg, rgba(201, 164, 106, .1), transparent 70%); padding-left: var(--e-3); }
.fila:hover .fila-titulo { font-style: italic; }
.fila:hover > .i { transform: translateX(4px); color: var(--texto); }
@media (min-width: 900px) {
  .fila { grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; }
  .fila-texto { grid-column: 3; }
  .fila > .i { grid-column: 4; }
}

/* Lista numerada (lo que incluye cada rollo). */
.lista-numerada { list-style: none; margin: 0 0 var(--e-8); padding: 0; counter-reset: item; display: grid; border-top: 1px solid var(--linea); }
@media (min-width: 760px) { .lista-numerada { grid-template-columns: 1fr 1fr; column-gap: var(--e-8); } }
.lista-numerada li {
  counter-increment: item; display: flex; gap: var(--e-4); align-items: baseline;
  padding: var(--e-4) 0; border-bottom: 1px solid var(--linea);
}
.lista-numerada li::before { content: counter(item, decimal-leading-zero); font: 500 .72rem/1 var(--f-mono); color: var(--champagne-texto); }

/* Ficha técnica: datos en mono, como en la caja de un rollo. */
.ficha { display: grid; margin: 0 0 var(--e-4); border-top: 1px solid var(--linea-fuerte); }
@media (min-width: 760px) { .ficha { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ficha div { padding: var(--e-5) var(--e-4) var(--e-5) 0; border-bottom: 1px solid var(--linea); }
@media (min-width: 760px) { .ficha div + div { padding-left: var(--e-5); border-left: 1px solid var(--linea); } }
.ficha dt { font: 500 .68rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--e-2); }
.ficha dd { margin: 0; font-family: var(--f-titulo); font-size: 1.6rem; line-height: 1.15; }

/* Retos de cada fiesta: filas numeradas. */
.retos-lista { list-style: none; margin: 0 0 var(--e-4); padding: 0; border-top: 1px solid var(--linea-fuerte); }
.retos-lista li { display: flex; align-items: baseline; gap: var(--e-5); padding: var(--e-4) 0; border-bottom: 1px solid var(--linea); }
.retos-lista-texto { flex: 1; min-width: 0; }
.retos-lista strong { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.6rem; line-height: 1.15; }
.retos-lista small { color: var(--texto-2); font-size: .92rem; }
.armar-nota { color: var(--texto-2); font-size: .92rem; margin: var(--e-4) 0 0; }

/* Notas con ícono (cómo funciona). */
.notas-iconos dt { display: flex; align-items: center; gap: var(--e-3); }
.notas-iconos dt .i { flex: none; color: var(--champagne-texto); }

/* Capítulos de "cómo funciona": la palabra grande marca el momento. */
.capitulo { padding: var(--e-9) 0; }
.capitulo-oscuro { padding: var(--e-10) 0; }
.capitulo-titulo {
  display: flex; align-items: flex-start; gap: var(--e-4);
  font-size: clamp(4.4rem, 16vw, 12rem); line-height: .8; letter-spacing: -.04em;
  margin-bottom: var(--e-8);
}
.capitulo-titulo span { font: 500 .78rem/1 var(--f-mono); letter-spacing: .1em; color: var(--champagne-texto); padding-top: .8em; }
.capitulo-grilla { display: grid; gap: var(--e-8); align-items: center; }
@media (min-width: 900px) { .capitulo-grilla { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: var(--e-9); } }
.capitulo .notas { margin: 0; }
.celu-marco { margin: 0; justify-self: center; width: min(260px, 70%); }
.celu-marco img { border-radius: 36px; border: 9px solid #1A1523; box-shadow: var(--sombra-3); }
.tema-app .celu-marco img { border-color: #2A2738; }

/* Hoja de contactos de fiestas. */
.hoja-fiestas {
  display: grid; gap: var(--e-8) var(--e-5); padding-bottom: var(--e-9);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.cuadro-fiesta { display: grid; gap: var(--e-2); align-content: start; text-decoration: none; }
.cuadro-fiesta-foto { position: relative; display: block; overflow: hidden; border-radius: 4px; margin-bottom: var(--e-3); }
.cuadro-fiesta-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--curva); }
.cuadro-fiesta-foto .riel-icono { position: absolute; left: 12px; bottom: 12px; color: #fff; margin: 0; }
.cuadro-fiesta:hover img { transform: scale(1.05); }
.cuadro-fiesta strong { font-family: var(--f-titulo); font-weight: 400; font-size: 2rem; line-height: 1.05; }
.cuadro-fiesta:hover strong { font-style: italic; }
.cuadro-fiesta-texto { color: var(--texto-2); font-size: .93rem; }
.cuadro-fiesta-retos { font: 400 .74rem/1.5 var(--f-mono); color: var(--champagne-texto); }
.riel-tarjeta-chica { width: clamp(200px, 22vw, 260px); }
.riel-tarjeta-chica strong { font-size: 1.8rem; }

/* Precios: armá tu rollo + el sobre del laboratorio. */
.armar { display: grid; gap: var(--e-8); padding-bottom: var(--e-9); align-items: start; }
@media (min-width: 960px) { .armar { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--e-9); } }
.armar-paso { border: 0; margin: 0 0 var(--e-8); padding: 0; min-width: 0; }
.armar-paso legend {
  display: flex; align-items: baseline; gap: var(--e-4); padding: 0; margin-bottom: var(--e-5);
  font-family: var(--f-titulo); font-size: clamp(1.9rem, 3.6vw, 2.6rem); line-height: 1.05;
}
.armar-paso legend span { font: 500 .74rem/1 var(--f-mono); color: var(--champagne-texto); letter-spacing: .08em; }
.armar .chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
.consejo-fotos {
  max-width: 58ch; margin: 0 0 var(--e-5); padding-left: var(--e-4);
  border-left: 2px solid var(--champagne);
  font-family: var(--f-titulo); font-size: 1.3rem; line-height: 1.35; color: var(--texto);
}
.consejo-fotos b { font-family: var(--f-ui); font-size: .95rem; font-weight: 600; }
.rollos-elegir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rollos-elegir .caja-rollo { cursor: pointer; }
.rollos-elegir .caja-rollo:has(input:checked) { border-color: #1A1523; box-shadow: 0 0 0 2px #1A1523, var(--sombra-3); transform: translateY(-4px); }
.rollos-elegir .caja-rollo:has(input:focus-visible) { outline: 2px solid var(--iris); outline-offset: 3px; }
.rollos-elegir .caja-rollo:not(:has(input:checked)) { opacity: .78; }
.rollos-elegir .caja-rollo.destacada:not(:has(input:checked)) { border-color: var(--linea); box-shadow: var(--sombra-2); }
.chip-radio { cursor: pointer; position: relative; }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio:has(input:checked) { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.chip-radio:has(input:focus-visible) { outline: 2px solid var(--iris); outline-offset: 2px; }
.sobre {
  position: relative;
  padding: var(--e-7) var(--e-6) var(--e-6);
  border-radius: 6px;
  box-shadow: var(--sombra-3);
}
@media (min-width: 960px) { .sobre { position: sticky; top: calc(var(--cabecera-alto) + var(--e-5)); } }
.sobre::before {
  /* la solapa del sobre */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px;
  background: repeating-linear-gradient(90deg, #E2C27D 0 18px, transparent 18px 26px);
  opacity: .5;
}
.sobre-titulo {
  display: flex; justify-content: space-between; gap: var(--e-3);
  font: 500 .7rem/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--champagne-texto);
  padding-bottom: var(--e-4); margin-bottom: var(--e-2); border-bottom: 1px dashed var(--linea-fuerte);
}
.sobre-lineas { margin: 0 0 var(--e-4); }
.sobre-lineas div { display: flex; justify-content: space-between; gap: var(--e-4); padding: 10px 0; border-bottom: 1px dashed var(--linea); }
.sobre-lineas dt { font: 400 .78rem/1.4 var(--f-mono); color: var(--texto-2); text-transform: uppercase; letter-spacing: .08em; }
.sobre-lineas dd { margin: 0; font-weight: 500; text-align: right; }
.sobre-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-4); margin: var(--e-5) 0 var(--e-6); }
.sobre-total span { font: 500 .78rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); }
.sobre-total b { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(3rem, 6vw, 4rem); line-height: 1; color: #E2C27D; }
.sobre-sin { margin: calc(var(--e-3) * -1) 0 var(--e-5); font-size: .88rem; color: var(--texto-2); }
.sobre-pie[hidden], .sobre-sin[hidden] { display: none; }
.chip.apagado { opacity: .35; pointer-events: none; }
/* Cuarta opción de fotos: un cuadro para escribir la cantidad. */
.fotos-elegir { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
.chip-otra { gap: 8px; padding-right: 5px; }
.chip-otra input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio .fotos-otra-cuadro {
  position: static; opacity: 1; pointer-events: auto;
  width: 104px; min-height: 30px; padding: 3px 10px;
  border-radius: 999px; box-shadow: none;
  font: 500 .88rem/1 var(--f-mono); text-align: center;
  background: var(--campo); color: #1A1523;
}
.chip-otra:has(input:checked) .fotos-otra-cuadro { border-color: transparent; }
.fotos-otra-cuadro::-webkit-inner-spin-button { opacity: .6; }
.sobre-pie { margin: var(--e-4) 0 0; text-align: center; font: 400 .72rem/1.5 var(--f-mono); color: var(--texto-2); }
.incluye { padding-bottom: var(--e-9); }
.sello-garantia {
  display: flex; gap: var(--e-5); align-items: center;
  padding: var(--e-6); border: 1px dashed var(--champagne); border-radius: var(--r-tarjeta);
  max-width: 640px;
}
.sello-garantia-icono {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--dorado); color: #1A1306; rotate: -8deg;
}
.sello-garantia strong { font-family: var(--f-titulo); font-weight: 400; font-size: 1.7rem; }
.sello-garantia p { margin: 2px 0 0; color: var(--texto-2); }

/* Ayuda: los canales, grandes como titulares. */
.canales { display: grid; gap: var(--e-4); padding-bottom: var(--e-9); }
@media (min-width: 900px) { .canales { grid-template-columns: 1fr 1fr; } }
.canal {
  display: grid; gap: var(--e-3); align-content: start;
  padding: var(--e-7) var(--e-6);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-grande);
  background: var(--superficie);
  text-decoration: none;
  transition: background-color var(--t-media), color var(--t-media), transform var(--t-media) var(--curva);
}
a.canal:hover { background: #0B0A12; color: #F5F2EC; transform: translateY(-3px); }
a.canal:hover .canal-pie { color: #A39DB0; }
.canal-etiqueta { font: 500 .7rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--champagne-texto); }
a.canal:hover .canal-etiqueta, a.canal:hover em { color: #E2C27D; }
.canal-texto { font-family: var(--f-titulo); font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1; overflow-wrap: anywhere; }
.canal-texto em { color: var(--champagne-texto); }
.canal-pie { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--texto-2); font-size: .95rem; }

/* Tutorial: cada paso es un fotograma, con la tira perforada a la izquierda. */
.fotogramas { list-style: none; margin: 0; padding: 0 0 0 44px; position: relative; max-width: 760px; }
.fotogramas::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 26px;
  background: #0B0A12;
  border-radius: 3px;
}
.fotogramas::after {
  content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 10px;
  background: repeating-linear-gradient(180deg, rgba(245, 242, 236, .8) 0 8px, transparent 8px 18px);
}
.fotogramas li { padding: 0 0 var(--e-9); }
.fotogramas li:last-child { padding-bottom: var(--e-4); }
.fotogramas h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: var(--e-3); }
.fotogramas p { color: var(--texto-2); font-size: 1.04rem; max-width: 52ch; }
.captura { margin: var(--e-5) 0 0; }
.captura img { border-radius: var(--r-tarjeta); box-shadow: var(--sombra-3); max-width: 100%; }
.captura-celu img { max-width: 260px; border-radius: 34px; border: 8px solid #1A1523; }
.tutorial-navegacion { padding-bottom: var(--e-9); }

/* Acordeón: filas separadas por líneas, con un + que gira. */
.acordeon { display: grid; margin-bottom: var(--e-6); border-top: 1px solid var(--linea); }
.acordeon details { border-bottom: 1px solid var(--linea); }
.acordeon summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4);
  padding: var(--e-5) 0; cursor: pointer; list-style: none;
  font-size: 1.04rem; font-weight: 500;
  transition: color var(--t-rapida);
}
.acordeon summary:hover { color: var(--iris); }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary .i {
  flex: none; width: 30px; height: 30px; padding: 7px;
  border-radius: 50%; border: 1px solid var(--linea-fuerte);
  transition: transform var(--t-media) var(--curva), background-color var(--t-media), color var(--t-media);
}
.acordeon details[open] summary .i { transform: rotate(45deg); background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.acordeon details p { margin: 0; padding: 0 var(--e-8) var(--e-6) 0; color: var(--texto-2); }
.acordeon details[open] p { animation: entra .4s var(--curva) both; }
.tema-preguntas { display: flex; align-items: baseline; gap: var(--e-4); margin-top: var(--e-8); font-size: clamp(2.2rem, 4vw, 3rem); }
.tema-preguntas span { font: 500 .74rem/1 var(--f-mono); color: var(--champagne-texto); letter-spacing: .08em; }
.preguntas-cuerpo { counter-reset: pregunta; }
.preguntas-cuerpo .acordeon summary { justify-content: flex-start; }
.preguntas-cuerpo .acordeon summary::before {
  counter-increment: pregunta; content: counter(pregunta, decimal-leading-zero);
  flex: none; width: 32px; font: 500 .7rem/1 var(--f-mono); color: var(--texto-3);
}
.preguntas-cuerpo .acordeon summary .i { margin-left: auto; }
.preguntas-cuerpo .acordeon details p { padding-left: 48px; }
.tema-preguntas:first-child { margin-top: 0; }

/* Página de preguntas: buscador + índice */
.preguntas-layout { display: grid; gap: var(--e-7); padding-bottom: var(--e-9); }
@media (min-width: 960px) { .preguntas-layout { grid-template-columns: 290px minmax(0, 1fr); gap: var(--e-9); } }
.preguntas-lateral { display: grid; gap: var(--e-5); align-content: start; }
@media (min-width: 960px) { .preguntas-lateral { position: sticky; top: 96px; align-self: start; } }
.buscador { position: relative; }
.buscador .i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--texto-3); pointer-events: none; }
.buscador input { padding-left: 42px; }
.temas { display: grid; gap: 2px; }
.temas a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--e-3);
  padding: 9px var(--e-3); border-radius: 8px;
  text-decoration: none; font-weight: 500; font-size: .93rem; color: var(--texto-2);
  transition: background-color var(--t-rapida), color var(--t-rapida);
}
.temas a:hover { background: var(--hover); color: var(--texto); }
.temas a[aria-current="true"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1), inset 2px 0 0 var(--champagne); }
.temas a span { font: 500 .76rem/1 var(--f-mono); opacity: .7; }
@media (max-width: 959px) {
  .temas { position: relative; display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px; }
  .temas::-webkit-scrollbar { display: none; }
  .temas a { flex: none; border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: var(--e-2) var(--e-4); white-space: nowrap; background: var(--superficie); }
  .temas a[aria-current="true"] { background: var(--texto); color: var(--fondo); box-shadow: none; border-color: var(--texto); }
}
.sin-resultados { padding: var(--e-7) var(--e-6); border-radius: var(--r-grande); border: 1px dashed var(--linea-fuerte); text-align: center; }
.sin-resultados[hidden], .grupo-preguntas[hidden], .acordeon details[hidden], .temas a[hidden] { display: none; }
.sin-resultados h3 { font-family: var(--f-titulo); font-weight: 400; font-size: 1.8rem; }
.sin-resultados .hero-acciones { justify-content: center; margin-top: var(--e-5); }
.sin-resultados .chips { justify-content: center; flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }

/* Lista con tildes (resumen de los textos legales) */
.lista-check { list-style: none; padding: 0; margin: 0 0 var(--e-7); display: grid; gap: var(--e-3); }
@media (min-width: 640px) { .lista-check { grid-template-columns: 1fr 1fr; } }
.lista-check li { display: flex; gap: var(--e-3); align-items: flex-start; }
.lista-check .i { color: var(--ok); margin-top: 4px; }

/* Textos legales */
.legal-selector {
  display: flex; width: fit-content; gap: 4px; padding: 4px; margin-bottom: var(--e-7);
  border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linea);
}
.legal-selector a {
  padding: 7px var(--e-4); border-radius: 9px;
  text-decoration: none; font-weight: 500; font-size: .9rem; color: var(--texto-2);
}
.legal-selector a:hover { color: var(--texto); }
.legal-selector a[aria-current="page"] { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-1); }
.legal-meta { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-5); color: var(--texto-2); font: 400 .82rem/1.5 var(--f-mono); }
.legal-meta span { display: inline-flex; align-items: center; gap: 6px; }

.progreso-lectura {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 2px;
  transform-origin: 0 50%; transform: scaleX(var(--avance, 0));
  background: linear-gradient(90deg, var(--champagne), var(--iris));
  pointer-events: none;
}

.legal { display: grid; gap: var(--e-7); padding-bottom: var(--e-9); }
@media (min-width: 960px) { .legal { grid-template-columns: 260px minmax(0, 1fr); gap: var(--e-9); } }
.legal-indice { display: grid; gap: 2px; align-content: start; }
@media (min-width: 960px) { .legal-indice { position: sticky; top: 96px; align-self: start; } }
@media (max-width: 959px) {
  .legal-indice {
    position: sticky; top: var(--cabecera-alto); z-index: 20;
    display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none;
    margin-inline: -16px; padding: var(--e-3) 16px;
    background: var(--vidrio);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--linea);
  }
  .legal-indice::-webkit-scrollbar { display: none; }
  .legal-indice strong { display: none; }
  .legal-indice a { flex: none; white-space: nowrap; border: 1px solid var(--linea-fuerte); border-radius: 999px; padding: 6px var(--e-4); background: var(--superficie); }
  .legal-indice a[aria-current="true"] { background: var(--texto); color: var(--fondo); border-color: var(--texto); box-shadow: none; }
  .legal-texto section { scroll-margin-top: 140px; }
}
.legal-indice strong { font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin-bottom: var(--e-3); }
.legal-indice a {
  padding: 7px var(--e-3); border-radius: 8px; text-decoration: none; font-size: .92rem; color: var(--texto-2);
  transition: color var(--t-rapida), background-color var(--t-rapida);
}
.legal-indice a:hover { color: var(--texto); background: var(--hover); }
.legal-indice a[aria-current="true"] { color: var(--texto); background: var(--superficie); box-shadow: var(--sombra-1), inset 2px 0 0 var(--champagne); }
.legal-texto { max-width: 740px; min-width: 0; }
.legal-texto section { padding-bottom: var(--e-7); margin-bottom: var(--e-7); border-bottom: 1px solid var(--linea); scroll-margin-top: 96px; }
.legal-texto section:last-child { border-bottom: 0; }
.legal-texto h2 { font-size: clamp(2rem, 3.6vw, 2.5rem); }
.legal-texto h3 { margin: var(--e-6) 0 var(--e-2); }
.legal-texto ul:not(.lista-check) { padding-left: 1.2em; display: grid; gap: var(--e-3); }
.legal-texto ul:not(.lista-check) li::marker { color: var(--champagne); }
.legal-texto .lista-check { grid-template-columns: 1fr; margin-bottom: var(--e-4); }
.legal-texto p, .legal-texto li { color: var(--texto-2); }
.legal-texto b { color: var(--texto); }
.legal-texto section.legal-resumen {
  padding: var(--e-6); border: 1px solid var(--linea); border-radius: var(--r-grande);
  background: var(--superficie); box-shadow: var(--sombra-2);
  border-top: 3px solid var(--champagne);
}
@media (min-width: 640px) { .legal-texto section.legal-resumen { padding: var(--e-7); } }
.legal-resumen .lista-check li { color: var(--texto); }
.legal-resumen p { margin: 0; }
.aviso-legal { margin: 0 0 var(--e-4); }
mark.pendiente { background: #fff1b8; color: #6b4e00; padding: 0 4px; border-radius: 4px; }

/* --- Aparición suave (la activa sitio.js) ------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-revela .revela { opacity: 0; transform: translateY(16px); filter: blur(6px); transition: opacity .7s var(--curva), transform .7s var(--curva), filter .7s var(--curva); }
  .js-revela .revela.visible { opacity: 1; transform: none; filter: none; }
}

/* --- Impresión del QR ---------------------------------------------------- */
@media print {
  body { background: #fff; }
  .no-imprimir, .avisos, .panel-cabecera { display: none !important; }
  .panel-cuerpo { padding: 0; }
  .qr-hoja { box-shadow: none; border: 1px solid #ccc; }
}

/* --- Movimiento reducido ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .diapo.activa .diapo-fondo img { animation: none; }
}

/* --- Perfil de un invitado --------------------------------------------- */

.perfil-persona { padding-top: var(--e-4); }
.perfil-persona .volver {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--e-4);
  color: var(--texto-2); font-size: .9rem; text-decoration: none;
}
.perfil-retrato { position: relative; margin: 0 auto var(--e-5); width: min(320px, 82%); }
.perfil-retrato img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: 28px; border: 1px solid var(--linea-fuerte); box-shadow: var(--sombra-3);
}
.perfil-retrato .corazon-persona { position: absolute; right: -10px; bottom: -10px; width: 56px; height: 56px; box-shadow: var(--sombra-3); }
.perfil-persona h1 { font-size: 2.6rem; margin-bottom: var(--e-2); }
.perfil-persona h1 em { font-family: var(--f-ui); font-style: normal; font-size: 1rem; color: var(--champagne-texto); vertical-align: middle; }
.perfil-vinculo { display: grid; gap: 2px; margin: 0 auto var(--e-5); max-width: 32ch; text-align: center; font-size: 1.05rem; color: var(--texto); }
.perfil-vinculo span { font: 400 .68rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.vacio-vinculo a { color: var(--champagne-texto); font-size: .92rem; }
.perfil-datos { display: flex; justify-content: center; gap: var(--e-3); margin: 0 0 var(--e-5); }
.perfil-datos div {
  min-width: 84px; padding: var(--e-3) var(--e-4); text-align: center;
  border-radius: var(--r-tarjeta); background: var(--superficie); border: 1px solid var(--linea);
}
.perfil-datos dt { font: 400 .62rem/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-3); }
.perfil-datos dd { margin: 2px 0 0; font: 500 1.4rem/1 var(--f-mono); }
.perfil-persona > .btn-bloque { margin-bottom: var(--e-3); }
.perfil-persona .titulo-seccion { margin-top: var(--e-6); }
.perfil-persona .muro .copia-pie { display: none; }  /* ya se sabe de quién son */

/* --- Cámara dentro de Rollo (pantalla completa) ------------------------ */

.camara-vivo {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  display: none; grid-template-rows: auto 1fr auto auto;
  background: #000; color: #F5F2EC;
}
.camara-vivo[open] { display: grid; }
.camara-vivo::backdrop { background: #000; }
.camara-vivo-arriba, .camara-vivo-abajo {
  display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: var(--e-2);
  padding: var(--e-3) 16px;
}
.camara-vivo-arriba { padding-top: calc(var(--e-3) + var(--seguro-arriba)); }
.camara-vivo-abajo { padding-top: var(--e-5); justify-items: center; }
.camara-vivo-titulo { display: grid; margin: 0; text-align: center; line-height: 1.2; min-width: 0; }
.camara-vivo-titulo .kicker { margin: 0 0 2px; justify-self: center; color: var(--champagne-texto); }
.camara-vivo-titulo strong { font: 400 1.35rem/1.15 var(--f-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camara-vivo-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: #F5F2EC; background: rgba(255, 255, 255, .12);
  touch-action: manipulation;
}
.camara-vivo-btn[hidden] { visibility: hidden; display: grid; }
.camara-vivo-imagen { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; }
.camara-vivo-imagen video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.camara-vivo-imagen video.espejo { transform: scaleX(-1); }
.camara-vivo-aviso { position: absolute; margin: 0; color: rgba(245, 242, 236, .7); font-size: .95rem; }
.camara-vivo-aviso[hidden] { display: none; }
.camara-vivo-fallo {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: var(--e-3);
  padding: var(--e-6); text-align: center; background: #000;
}
.camara-vivo-fallo[hidden] { display: none; }
.camara-vivo-fallo strong { font: 400 1.7rem/1.15 var(--f-titulo); }
.camara-vivo-fallo > span:not(.sello) { color: rgba(245, 242, 236, .75); max-width: 34ch; line-height: 1.5; }
.camara-vivo-fallo .btn { margin-top: var(--e-3); }
.camara-vivo-recordatorio {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
  padding: var(--e-3) 16px calc(var(--e-4) + var(--seguro-abajo));
  color: rgba(245, 242, 236, .6); font-size: .8rem;
}
.camara-vivo[data-estado="fallo"] .camara-vivo-abajo,
.camara-vivo[data-estado="fallo"] .camara-vivo-recordatorio { visibility: hidden; }
.camara-vivo-imagen::after { content: ""; position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.camara-vivo.disparo .camara-vivo-imagen::after { animation: flash .55s ease-out; }

/* Flash de la cámara: el rayo tachado está apagado; el dorado, prendido. */
.camara-flash .flash-si, .camara-vivo.con-flash .camara-flash .flash-no { display: none; }
.camara-vivo.con-flash .camara-flash .flash-si { display: block; }
.camara-vivo.con-flash .camara-flash { background: var(--dorado); color: #1A1306; }
.camara-vivo-estado-flash {
  position: absolute; top: var(--e-4); left: 50%; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6);
  font-size: .85rem; font-weight: 600; opacity: 0; pointer-events: none;
}
.camara-vivo-estado-flash.visible { animation: estado-flash 1.6s ease-out; }
@keyframes estado-flash { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* Flash de adelante: la pantalla entera se pone blanca para iluminar la cara. */
.camara-luz { position: absolute; inset: 0; z-index: 5; background: #FFFAF0; opacity: 0; pointer-events: none; transition: opacity .1s; }
.camara-vivo.luz-pantalla .camara-luz { opacity: 1; }

/* --- Instantánea: la foto recién sacada se revela como una foto instantánea --- */

.instantanea {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0;
  display: none; place-items: center; align-content: center; gap: var(--e-6);
  background: radial-gradient(70% 55% at 50% 45%, rgba(226, 194, 125, .12), transparent 70%), rgba(11, 10, 18, .94);
  color: #F5F2EC; cursor: pointer; overflow: hidden;
}
.instantanea[open] { display: grid; }
.instantanea::backdrop { background: transparent; }
.instantanea-copia {
  margin: 0; width: min(76vw, 340px, 50vh);
  padding: 5.5% 5.5% 0;
  background: linear-gradient(170deg, #FBF9F4, #EFEBE2);
  border-radius: 3px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .35);
  transform: rotate(-2.5deg);
}
.instantanea-foto { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #2B2A2E; }
.instantanea-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* El velo lechoso de la película recién salida: se va aclarando hasta mostrar la foto. */
.instantanea-velo {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, #F1EFE8, #E3E0D6);
}
.instantanea-brillo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 60%);
  mix-blend-mode: soft-light;
}
.instantanea figcaption {
  display: grid; justify-items: center; gap: 2px;
  padding: 7% 4px 11%; text-align: center; color: #2A2433;
}
.instantanea figcaption strong {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: italic 400 clamp(1.25rem, 5.6vw, 1.6rem)/1.1 var(--f-titulo);
}
.instantanea figcaption small { font: 500 .72rem/1 var(--f-mono); letter-spacing: .08em; color: #8A8396; }
.instantanea-ayuda { margin: 0; font-size: .85rem; color: rgba(245, 242, 236, .6); opacity: 0; }

/* La secuencia: sale de la cámara, el velo se aclara y los colores aparecen. */
.instantanea.revelando .instantanea-copia { animation: instantanea-sale .75s cubic-bezier(.2, .9, .25, 1.05) both; }
.instantanea.revelando .instantanea-velo { animation: instantanea-velo 3.6s cubic-bezier(.55, 0, .65, 1) .45s both; }
.instantanea.revelando .instantanea-foto img { animation: instantanea-color 4.2s ease-out .3s both; }
.instantanea.revelando .instantanea-brillo { animation: instantanea-brillo 1.4s ease-out .2s both; }
.instantanea.revelando .instantanea-ayuda { animation: instantanea-ayuda .5s ease-out 1s both; }
.instantanea.guardando .instantanea-copia { animation: instantanea-guarda .45s cubic-bezier(.5, 0, .75, .3) both; }
.instantanea.guardando { animation: instantanea-fondo .45s ease-in both; }

@keyframes instantanea-sale {
  0% { transform: translateY(70vh) rotate(0deg); }
  100% { transform: translateY(0) rotate(-2.5deg); }
}
@keyframes instantanea-velo {
  0% { opacity: 1; }
  35% { opacity: .82; }
  100% { opacity: 0; }
}
@keyframes instantanea-color {
  0% { filter: sepia(.55) saturate(.15) contrast(.4) brightness(1.5) blur(2.5px) hue-rotate(-12deg); }
  45% { filter: sepia(.35) saturate(.55) contrast(.7) brightness(1.2) blur(.8px) hue-rotate(-6deg); }
  100% { filter: none; }
}
@keyframes instantanea-brillo {
  0% { transform: translateX(-60%); opacity: 1; }
  100% { transform: translateX(60%); opacity: 0; }
}
@keyframes instantanea-ayuda { from { opacity: 0; } to { opacity: 1; } }
@keyframes instantanea-guarda {
  to { transform: translateY(40vh) rotate(4deg) scale(.35); opacity: 0; }
}
@keyframes instantanea-fondo { to { background-color: rgba(11, 10, 18, 0); } }

@media (prefers-reduced-motion: reduce) {
  .instantanea.revelando .instantanea-copia, .instantanea.guardando .instantanea-copia { animation: none; }
  .instantanea.revelando .instantanea-velo { animation-duration: 1.6s; animation-delay: 0s; }
  .instantanea.revelando .instantanea-foto img { animation-duration: 1.6s; animation-delay: 0s; }
}
.camara-vivo-estado-flash.fijo { opacity: 1; animation: none; }
.copia-mini-boton { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.copia-mini-boton:focus-visible { outline: 2px solid var(--champagne); outline-offset: -2px; }