/* =========================================================================
   Inolvidia · landing de ventas (dueño: landing). Docs: docs/CONTRATO.md §20.
   Mobile-first (390×844). Sin build step. La misma hoja sirve a /, /en/, /pt/ y /404.html.
   Marca v2 (marca/logo/tokens-v2.css, publicada en /brand/tokens.css): marfil y arena, NOCHE para leer y en las
   secciones oscuras, ORO ROSA como el hilo (poco y preciso), violeta y lavanda de puente. Sin destellos: el recurso
   gráfico es el hilo (remate recto) y el mundo del sobre con la tarjeta de galaxia.
   Tipos: Jost (titulares 300, texto 400, botones 600) + Libre Caslon Display solo en los nombres de las maquetas.
   Los nombres de las variables locales (--ciruela, --terracota…) son los de siempre; sus valores ya son v2.
   Las variables locales apuntan a los --ino-* de /brand/tokens.css (con respaldo por si no carga).
   ========================================================================= */

@property --a1 { syntax: '<color>'; inherits: true; initial-value: #E3B2A4; }
@property --a2 { syntax: '<color>'; inherits: true; initial-value: #94524C; }
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --num { syntax: '<integer>'; inherits: false; initial-value: 0; }

:root {
  /* Paleta de marca (§20.1) */
  --ciruela-noche: var(--ino-noche, #1B1630);
  --ciruela: var(--ino-noche, #1B1630);
  --ciruela-2: var(--ino-noche-2, #2A2342);
  --ciruela-suave: var(--ino-texto-suave, #5C5370);   /* texto secundario: 5,9:1 marfil · 5,1:1 arena */
  --malva: var(--ino-niebla, #B9AFC6);                   /* texto secundario sobre ciruela: 7,2:1 */
  --marfil: var(--ino-marfil, #FBF6F2);
  --arena: var(--ino-arena, #F3EAE3);
  --lino: var(--ino-linea, #E4D9D1);
  --terracota: var(--ino-oro-rosa, #B06E66);           /* el hilo: objetos, íconos y texto grande */
  --terracota-profunda: var(--ino-oro-rosa-profundo, #94524C); /* botón y acento de texto sobre marfil (5,1:1) */
  --terracota-honda: var(--ino-oro-rosa-profundo-hover, #7E443F);       /* texto chico de acento sobre arena (5,6:1) */
  --terracota-luz: var(--ino-oro-rosa-luz, #E3B2A4);           /* el hilo y el acento sobre ciruela (5,5:1) */
  --terracota-luz-2: var(--ino-oro-rosa-luz-hover, #EDC6BA);       /* acento sobre ciruela-2 (5,5:1) */
  --salvia: var(--ino-salvia, #8FA98B);
  --lavanda: var(--ino-lavanda, #A88FD0);
  --champan: var(--ino-oro-rosa-luz, #E3B2A4);               /* solo bodas y siempre sobre ciruela */

  --line: rgba(27, 22, 48, .12);
  --line-dark: rgba(251, 246, 242, .12);
  --soft-dark: rgba(251, 246, 242, .76);
  --focus: var(--terracota);

  /* Tipos v2 (marca/logo/tokens-v2.css): Jost para titulares y textos. Los nombres de las invitaciones de muestra
     (maquetas de teléfono, tarjetas, pases) van en Libre Caslon Display, la serifa de la línea bodas del kit. */
  --ff-display: var(--font-display, 'Jost', 'Segoe UI', system-ui, sans-serif);
  --ff-body: var(--font-texto, 'Jost', 'Segoe UI', system-ui, sans-serif);
  --ff-nombres: var(--font-bodas, 'Libre Caslon Display', 'Iowan Old Style', Georgia, serif);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-hilo: cubic-bezier(.65, 0, .25, 1);
  --sheet: 28px;
  --gutter: 20px;
  --sombra-boton: 0 6px 16px -6px rgba(148, 82, 76, .55);

  /* El hilo de la marca como trazo suelto (curva suave y asimétrica, remates redondos): subraya nombres */
  --hilo-subraya: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 12.5C40 9.5 70 4.5 112 4.8 146 5 170 8 198 6' fill='none' stroke='%23B06E66' stroke-width='3' stroke-linecap='butt' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --hilo-subraya-luz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 12.5C40 9.5 70 4.5 112 4.8 146 5 170 8 198 6' fill='none' stroke='%23E3B2A4' stroke-width='3' stroke-linecap='butt' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  :root { --sheet: 44px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* [hidden] siempre gana (p. ej. el menú móvil cerrado no debe tapar la página) */
[hidden] { display: none !important; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  background: var(--marfil);
  color-scheme: light;
}
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ciruela);
  background: var(--marfil);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas, iframe { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { overflow-wrap: break-word; }
::selection { background: var(--terracota); color: #fff; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.announce, .section--dark, .footer, .tile--passes { --focus: var(--terracota-luz); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i {
  width: 1.25em; height: 1.25em;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
/* El hilo como ícono (i-hilo): un trazo suelto un poco más grueso */
.i--spark { stroke-width: 2.2; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  padding: 12px 18px; border-radius: 12px;
  background: var(--ciruela); color: var(--marfil); font-weight: 600; text-decoration: none;
  transition: top .25s var(--ease-out);
}
.skip:focus { top: 12px; }

.container { width: min(100% - var(--gutter) * 2, 1200px); margin-inline: auto; }
/* En móvil el overflow-x del body no evita que el viewport se ensanche: recortamos aquí
   los adornos que sobresalen (toasts y adornos de las escenas del teléfono). clip no rompe sticky. */
#main { overflow-x: clip; }
/* Rejillas de una columna en móvil: minmax(0, 1fr) evita que un carrusel ensanche la página */
.hero__grid, .story__grid, .story__step, .config__grid, .host__grid,
.faq__grid, .contact__grid, .plans, .allies__card, .lead-form, .cfg { grid-template-columns: minmax(0, 1fr); }
.hide-sm { display: none; }
@media (min-width: 600px) { .hide-sm { display: inline; } }

/* ---------- Tipografía compartida ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracota-honda);
}
.eyebrow .i--spark { width: 22px; height: 14px; color: var(--terracota); }
.eyebrow--light { color: var(--terracota-luz); }
.eyebrow--light .i--spark { color: var(--terracota-luz); }

.h2 {
  margin: 16px 0 0;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(2.15rem, 1.3rem + 3.3vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
}
/* Kit v2: el énfasis de los titulares va recto (Jost no se inclina) y en color: oro rosa profundo sobre claro */
.h2 em, .hilo, .stdcard__names em, .addons__title em { font-style: normal; }
.h2 em { font-weight: 300; color: var(--terracota-profunda); }
.section--perla .h2 em { color: var(--terracota-honda); }
.section--dark .h2 em { color: var(--terracota-luz); }
.h2--xl { font-size: clamp(2.7rem, 1.4rem + 5vw, 5.2rem); line-height: .98; }
.h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.25rem + 1.3vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 10px 0 12px;
  text-wrap: balance;
}
.lead {
  margin: 18px auto 0;
  max-width: 58ch;
  font-size: clamp(1.04rem, .98rem + .3vw, 1.18rem);
  color: var(--ciruela-suave);
  text-wrap: pretty;
}
.section--dark .lead { color: var(--soft-dark); }
/* Palabra subrayada con el hilo de la marca (cursiva + trazo terracota que se dibuja al entrar) */
.hilo {
  position: relative; display: inline-block;
  padding-right: .06em;
}
.hilo::after {
  content: ''; position: absolute; left: -.04em; right: -.08em; bottom: -.12em; height: .2em;
  background: var(--hilo-subraya) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
  animation: hilo-subraya 1.3s .45s var(--ease-hilo) forwards;
  pointer-events: none;
}
@keyframes hilo-subraya { to { clip-path: inset(0 0 0 0); } }
.section--dark .hilo::after, .hilo--luz::after { background-image: var(--hilo-subraya-luz); }

.section-head { text-align: center; margin: 0 auto 48px; max-width: 820px; }
.section-head--left { text-align: left; margin-left: 0; }
.section-head--left .lead { margin-left: 0; }

/* ---------- Secciones tipo "hoja" apiladas ---------- */
.section {
  position: relative;
  padding-block: clamp(84px, 11vw, 140px);
  border-radius: var(--sheet) var(--sheet) 0 0;
  margin-top: calc(var(--sheet) * -1);
}
.section--light { background: var(--marfil); color: var(--ciruela); }
.section--perla { background: var(--arena); color: var(--ciruela); }
.section--dark {
  /* Kit v2: noche con luz difusa violeta (el cielo de la tarjeta de galaxia de las piezas y el og). Sin destellos. */
  background:
    radial-gradient(48rem 30rem at 88% 4%, rgba(75, 53, 119, .34), transparent 70%),
    radial-gradient(40rem 26rem at 6% 96%, rgba(46, 37, 82, .7), transparent 72%),
    var(--ciruela);
  color: var(--marfil);
}
/* Sobre arena, el acento chico de texto baja a terracota honda (AA) */
.section--perla .eyebrow { color: var(--terracota-honda); }

/* ---------- Botones ---------- */
.btn {
  --bg: transparent; --fg: inherit;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border-radius: 999px; border: 1.5px solid transparent;
  background: var(--bg); color: var(--fg);
  font: 600 15px/1.1 var(--ff-body); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .4s var(--ease-spring), box-shadow .35s, background-color .25s, color .25s, border-color .25s;
}
.btn .i { width: 18px; height: 18px; transition: transform .35s var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .i { transform: translateX(2px); }
.btn:active { transform: translateY(0) scale(.97); }
/* CTA de la marca: terracota profunda con texto blanco (5,5:1); hover terracota honda */
.btn--primary { --bg: var(--terracota-profunda); --fg: #fff; box-shadow: var(--sombra-boton); }
.btn--primary:hover { --bg: var(--terracota-honda); box-shadow: 0 12px 26px -10px rgba(126, 68, 63, .6); }
/* Sobre ciruela: terracota luz con texto ciruela (5,5:1), como el modo oscuro de los tokens */
.section--dark .btn--primary, .tile--passes .btn--primary { --bg: var(--terracota-luz); --fg: var(--ciruela-noche); box-shadow: 0 10px 24px -12px rgba(227, 178, 164, .7); }
.section--dark .btn--primary:hover { --bg: var(--terracota-luz-2); }
.btn--ghost {
  --fg: var(--ciruela);
  border-color: rgba(27, 22, 48, .22);
  background: rgba(255, 255, 255, .5);
}
.btn--ghost:hover { border-color: var(--ciruela); background: #fff; }
.section--dark .btn--ghost { --fg: var(--marfil); border-color: rgba(251, 246, 242, .3); background: rgba(251, 246, 242, .04); }
.section--dark .btn--ghost:hover { border-color: var(--marfil); background: rgba(251, 246, 242, .08); }
.btn--dark { --bg: var(--ciruela); --fg: var(--marfil); }
.btn--dark:hover { --bg: var(--ciruela-noche); box-shadow: 0 14px 30px -14px rgba(27, 22, 48, .6); }
.btn--outline { --fg: var(--ciruela); border-color: rgba(27, 22, 48, .22); }
.btn--outline:hover { border-color: var(--ciruela); }
.btn--light { --bg: var(--marfil); --fg: var(--ciruela); }
.btn--light:hover { --bg: #fff; }
.btn--outline-light { --fg: var(--marfil); border-color: rgba(251, 246, 242, .3); }
.btn--outline-light:hover { border-color: var(--marfil); background: rgba(251, 246, 242, .08); }
.btn--wa { --bg: #25D366; --fg: #06301A; box-shadow: 0 12px 28px -14px rgba(37, 211, 102, .8); }
.btn--wa .i { width: 20px; height: 20px; }
.btn--wa:hover .i, .btn--dark:hover .i[aria-hidden] { transform: none; }
.btn--sm { min-height: 40px; padding: 8px 15px; font-size: 13.5px; gap: 6px; }
.btn--sm .i { width: 16px; height: 16px; }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn--icon { width: 40px; padding: 0; }

.link {
  font-weight: 600; color: inherit;
  text-decoration: underline; text-decoration-color: rgba(27, 22, 48, .3);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
  transition: text-decoration-color .25s;
}
.link:hover { text-decoration-color: var(--terracota); }

/* ---------- Chips (claros por defecto; en secciones oscuras, sobre ciruela) ---------- */
.chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 42px; padding: 8px 17px;
  border-radius: 999px; border: 1.5px solid rgba(27, 22, 48, .14);
  background: rgba(255, 255, 255, .7);
  color: var(--ciruela);
  font: 600 14px/1 var(--ff-body);
  cursor: pointer; user-select: none;
  transition: background-color .3s, color .3s, border-color .3s, box-shadow .4s, transform .35s var(--ease-spring);
}
.chip:hover { border-color: rgba(27, 22, 48, .42); }
.chip:active { transform: scale(.95); }
.chip[aria-pressed='true'] {
  background: var(--ciruela); color: var(--marfil); border-color: var(--ciruela);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--a1) 45%, transparent), 0 10px 24px -14px rgba(27, 22, 48, .7);
}
.section--dark .chip { border-color: rgba(251, 246, 242, .18); background: rgba(251, 246, 242, .045); color: rgba(251, 246, 242, .9); }
.section--dark .chip:hover { border-color: rgba(251, 246, 242, .45); }
.chip__n {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 99px; font-size: 11px; font-weight: 600;
  background: rgba(27, 22, 48, .08);
}

/* ---------- Selector de idioma (§20.9): ES · EN · PT ---------- */
.ino-idiomas { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.ino-idiomas a {
  display: inline-grid; place-items: center; min-width: 34px; min-height: 36px; padding: 0 6px;
  border-radius: 10px; color: var(--ciruela-suave); text-decoration: none;
  transition: color .2s, background-color .2s;
}
.ino-idiomas a:hover { color: var(--ciruela); background: rgba(27, 22, 48, .06); }
.ino-idiomas a[aria-current='true'] {
  color: var(--ciruela);
  background: var(--hilo-subraya) center bottom 6px / 18px 4px no-repeat;
}
.ino-idiomas i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .35; color: var(--ciruela); }
.menu .ino-idiomas, .footer .ino-idiomas { font-size: 14px; }
.footer .ino-idiomas a, .menu--dark .ino-idiomas a { color: rgba(251, 246, 242, .7); }
.footer .ino-idiomas a:hover { color: var(--marfil); background: rgba(251, 246, 242, .08); }
.footer .ino-idiomas a[aria-current='true'] { color: var(--marfil); background-image: var(--hilo-subraya-luz); }
.footer .ino-idiomas i { color: var(--marfil); }
/* Sugerencia discreta de idioma (no redirige: §20.9) */
.lang-hint {
  position: relative; z-index: 61;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 48px 8px var(--gutter);
  background: var(--arena); color: var(--ciruela); font-size: 13.5px; line-height: 1.35; text-align: center;
  border-bottom: 1px solid var(--line);
}
.lang-hint a { color: var(--terracota-profunda); font-weight: 600; text-underline-offset: 3px; }
.lang-hint button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: none; color: var(--ciruela); cursor: pointer;
}
.lang-hint button:hover { background: rgba(27, 22, 48, .08); }
.lang-hint .i { width: 16px; height: 16px; }

/* ---------- Anuncio ---------- */
.announce {
  position: relative; z-index: 60;
  background: var(--ciruela);
  color: rgba(251, 246, 242, .88);
  font-size: 13px; line-height: 1.35;
}
.announce__txt {
  margin: 0 auto; padding: 9px var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  text-align: center;
}
.announce strong { color: var(--marfil); font-weight: 600; }
.announce .i--spark { width: 20px; height: 12px; color: var(--terracota-luz); }
.announce a {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--terracota-luz); font-weight: 600; text-decoration: none;
}
.announce a .i { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
.announce a:hover .i { transform: translateX(3px); }

/* ---------- Navegación (clara, sobre marfil) ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  isolation: isolate;
  color: var(--ciruela);
}
.nav::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(251, 246, 242, .82);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, box-shadow .3s, border-color .3s;
}
.nav.is-scrolled::before { background: rgba(251, 246, 242, .94); border-bottom-color: var(--line); box-shadow: 0 12px 30px -24px rgba(27, 22, 48, .45); }
.nav__inner { display: flex; align-items: center; gap: 8px; height: 64px; }
.nav__logo { flex: none; display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; border-radius: 8px; }
/* kit v2: micro de 150 a 260 px (153 px). Nunca se encoge: sin max-width y el enlace no es flexible. En pantallas de
   menos de 375 px (360: Android) el botón en portugués no deja sitio, así que el <picture> sirve la horizontal mini
   (80–150 px) a 26 px de alto = 131 px */
.nav__logo img { height: 33px; width: auto; max-width: none; aspect-ratio: 1203 / 260; }
@media (max-width: 374px) { .nav__logo img { height: 26px; aspect-ratio: 1212 / 240; } }
.nav__links { display: none; }
.nav__inner .ino-idiomas { display: none; }
.nav__cta { min-height: 40px; padding: 8px 14px; }
.nav__cta .i { width: 18px; height: 18px; }
.nav__cta:hover .i { transform: none; }
.nav__cta-long { display: none; }
.nav__burger {
  position: relative; width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: rgba(27, 22, 48, .06); cursor: pointer;
}
.nav__burger span {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px;
  background: var(--ciruela);
  transition: transform .4s var(--ease-out), top .3s var(--ease-out);
}
.nav__burger span:first-child { top: 17px; }
.nav__burger span:last-child { top: 25px; right: 17px; }
.nav__burger[aria-expanded='true'] span:first-child { top: 21px; transform: rotate(45deg); }
.nav__burger[aria-expanded='true'] span:last-child { top: 21px; right: 12px; transform: rotate(-45deg); }
@media (min-width: 600px) {
  .nav__inner .ino-idiomas { display: inline-flex; margin-right: 4px; }
}

.menu {
  position: fixed; inset: 0; z-index: -1;
  display: flex; flex-direction: column; gap: 24px;
  /* --menu-top = borde inferior real de la barra (con o sin el anuncio arriba); lo pone landing.js */
  padding: calc(var(--menu-top, 64px) + 40px) var(--gutter) max(28px, env(safe-area-inset-bottom));
  background: var(--marfil);
  overflow-y: auto;
  opacity: 0; transition: opacity .35s var(--ease-out);
  --focus: var(--terracota);
}
.menu.is-open { opacity: 1; }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a {
  padding: 12px 0;
  font-family: var(--ff-display); font-size: 2rem; font-weight: 300; line-height: 1.1;
  color: var(--ciruela); text-decoration: none;
  border-bottom: 1px solid var(--line);
  transform: translateY(14px); opacity: 0;
  transition: transform .5s var(--ease-out), opacity .5s var(--ease-out), color .2s;
}
.menu__nav a:hover { color: var(--terracota-profunda); }
.menu.is-open .menu__nav a { transform: none; opacity: 1; }
.menu.is-open .menu__nav a:nth-child(2) { transition-delay: .04s; }
.menu.is-open .menu__nav a:nth-child(3) { transition-delay: .08s; }
.menu.is-open .menu__nav a:nth-child(4) { transition-delay: .12s; }
.menu.is-open .menu__nav a:nth-child(5) { transition-delay: .16s; }
.menu.is-open .menu__nav a:nth-child(6) { transition-delay: .2s; }
.menu__lang { display: flex; align-items: center; gap: 12px; color: var(--ciruela-suave); font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.menu__foot { margin: auto 0 0; font-family: var(--ff-display); color: var(--ciruela-suave); font-size: 1.15rem; }
body.menu-open { overflow: hidden; }

@media (min-width: 1000px) {
  .nav__links { display: flex; align-items: center; gap: 28px; margin-right: 14px; }
  .nav__links a {
    position: relative; padding: 8px 0;
    font-size: 14.5px; font-weight: 600; color: var(--ciruela-suave); text-decoration: none;
    transition: color .25s;
  }
  .nav__links a::after {
    content: ''; position: absolute; left: -2px; right: -2px; bottom: 0; height: 5px;
    background: var(--hilo-subraya) center / 100% 100% no-repeat;
    clip-path: inset(0 100% 0 0);
    transition: clip-path .5s var(--ease-hilo);
  }
  .nav__links a:hover, .nav__links a.is-active { color: var(--ciruela); }
  .nav__links a:hover::after, .nav__links a.is-active::after { clip-path: inset(0 0 0 0); }
  .nav__cta-long { display: inline; }
  .nav__cta-short { display: none; }
  .nav__burger, .menu { display: none !important; }
  .nav__logo img { height: 36px; }
}

/* ---------- El hilo de fondo (SVG; se «dibuja» de izquierda a derecha al entrar en pantalla) ---------- */
/* Grosor constante (non-scaling-stroke) aunque el SVG se estire: el hilo de la marca no cambia de grosor */
.hilo-fondo { position: absolute; pointer-events: none; overflow: visible; }
.hilo-fondo path {
  fill: none; stroke: var(--terracota); stroke-width: 3; stroke-linecap: butt; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.js .hilo-fondo { clip-path: inset(-10px 100% -10px -10px); }
.js .hilo-fondo--der { clip-path: inset(-10px -10px -10px 100%); }
.js .hilo-fondo.is-in { animation: hilo-dibuja 2.4s .2s var(--ease-hilo) forwards; }
.section--dark .hilo-fondo path, .hilo-fondo--luz path { stroke: var(--terracota-luz); }
/* Antes estos contenedores pintaban destellos; hoy quedan vacíos (la marca no usa brillos) */
.glow, .twinkles { display: none; }

/* ---------- HERO (claro: marfil con el hilo) ---------- */
.hero {
  --a1: #E3B2A4; --a2: #94524C;
  position: relative; isolation: isolate; overflow: hidden;
  padding: 30px 0 72px;
  background: var(--marfil); color: var(--ciruela);
  transition: --a1 1.1s var(--ease-out), --a2 1.1s var(--ease-out);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* El hilo entra largo y bajo desde el borde izquierdo y sube hacia el teléfono */
.hero__hilo { left: 0; right: 0; bottom: 4px; width: 100%; height: 92px; }
.hero__grid { display: grid; gap: 34px; }
.hero__title {
  margin: 16px 0 0;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 1.35rem + 5.4vw, 5.3rem);
  line-height: 1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.hero__title .hilo { font-weight: 300; color: var(--ciruela); }
.hero__lead {
  margin: 22px 0 0; max-width: 36em;
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  color: var(--ciruela-suave);
  text-wrap: pretty;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__ctas .btn { flex: 1 1 100%; }
.hero__micro {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 18px 0 0; padding: 0; list-style: none;
  font-size: 13.5px; font-weight: 600; color: var(--ciruela-suave);
}
.hero__micro li { display: inline-flex; align-items: center; gap: 8px; }
.hero__micro li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--terracota); }

.hero__pick-label {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracota-honda);
}
.chips--hero {
  display: flex; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 10px;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 34px), transparent);
  mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 34px), transparent);
}
.chips--hero::-webkit-scrollbar { display: none; }
.hero__tagline {
  margin: 14px 0 0; min-height: 2.5em;
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.95rem);
  line-height: 1.2;
  color: var(--terracota-profunda);
}
.hero__tagline-txt {
  display: inline-block;
  transition: opacity .28s var(--ease-out), transform .45s var(--ease-out), filter .28s;
}
.hero__tagline.is-swapping .hero__tagline-txt { opacity: 0; transform: translateY(10px); filter: blur(6px); }

.hero__demo { position: relative; display: flex; flex-direction: column; align-items: center; }
.hero__stage { position: relative; perspective: 1400px; }
/* Cada evento se viste con su color: una «hoja» de papel teñida detrás del teléfono */
.hero__stage::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 128%; aspect-ratio: 1; border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  background: color-mix(in srgb, var(--a1) 30%, var(--arena));
  transform: translate(-50%, -50%) rotate(-6deg);
  transition: background-color 1s var(--ease-out);
}
/* Kit v2: el anillo abierto del logo como órbita del teléfono (hilo oro rosa, remate recto, abertura a la 1–2) */
.hero__stage::after {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; pointer-events: none;
  width: 146%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--terracota);
  -webkit-mask: conic-gradient(#000 0 24deg, transparent 24deg 62deg, #000 62deg);
  mask: conic-gradient(#000 0 24deg, transparent 24deg 62deg, #000 62deg);
  transform: translate(-50%, -50%);
  opacity: .85;
}
.phone--hero { --pw: min(64vw, 260px); transform-style: preserve-3d; transition: transform .8s var(--ease-out); }
.phone--hero .phone__frame {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 0 0 calc(var(--pw) * .012) #07060c,
    0 50px 80px -40px rgba(27, 22, 48, .55),
    0 18px 30px -18px rgba(27, 22, 48, .35);
}

.float-card {
  position: absolute; z-index: 6;
  display: none; align-items: center; gap: 10px;
  padding: 11px 15px 11px 11px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 24px 44px -24px rgba(27, 22, 48, .5);
  color: var(--ciruela); font-size: 13px; line-height: 1.3;
}
.float-card b { display: block; font-weight: 600; }
.float-card small { color: var(--ciruela-suave); font-size: 12px; }
.float-card__icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: #3F6E45; color: #fff; flex: none;
}
.float-card__icon .i { width: 18px; height: 18px; stroke-width: 2.4; }
.float-card--rsvp { left: -168px; top: 20%; animation: bob 6s ease-in-out infinite; }
.float-card--para {
  right: -104px; bottom: 22%;
  flex-direction: column; align-items: flex-start; gap: 0;
  padding: 12px 18px;
  animation: bob 7s -2s ease-in-out infinite;
}
.float-card--para small { font-family: var(--ff-display); font-size: 13px; color: var(--terracota-profunda); }
.float-card--para b { font-family: var(--ff-nombres); font-weight: 400; font-size: 1.35rem; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.para {
  display: flex; align-items: center; gap: 10px;
  width: min(100%, 340px); margin-top: 28px;
  padding: 5px 16px 5px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1.5px solid rgba(27, 22, 48, .16);
  box-shadow: 0 14px 30px -24px rgba(27, 22, 48, .5);
  transition: border-color .3s, box-shadow .3s, background-color .3s;
  cursor: text;
}
.para:hover { border-color: rgba(27, 22, 48, .32); }
.para:focus-within {
  border-color: var(--terracota);
  box-shadow: 0 0 0 4px rgba(176, 110, 102, .16);
}
.para__label { font-family: var(--ff-display); font-size: 1.15rem; color: var(--terracota-profunda); }
.para__input {
  flex: 1; min-width: 0; height: 46px;
  border: 0; outline: 0; background: transparent;
  font-size: 16px; font-weight: 600; color: var(--ciruela);
}
.para__input::placeholder { color: rgba(27, 22, 48, .45); font-weight: 500; }
.para__spark { width: 22px; height: 14px; color: var(--terracota); transition: transform .6s var(--ease-spring); }
.para.is-typing .para__spark { transform: translateX(3px) scale(1.15); }
.para__hint { margin: 10px 0 0; font-size: 13px; color: var(--ciruela-suave); text-align: center; }

@media (min-width: 600px) {
  .hero__ctas .btn { flex: 0 0 auto; }
}
@media (min-width: 760px) {
  .float-card { display: flex; }
  .float-card--rsvp { left: -150px; }
  .float-card--para { right: -96px; }
}
@media (min-width: 1024px) {
  .hero { padding: 24px 0 80px; }
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-areas: 'copy demo' 'pick demo';
    column-gap: 48px; row-gap: 30px;
    min-height: min(calc(100svh - 104px), 820px);
    align-content: center;
  }
  .hero__copy { grid-area: copy; align-self: end; }
  .hero__pick { grid-area: pick; align-self: start; }
  .hero__demo { grid-area: demo; align-self: center; }
  .chips--hero {
    flex-wrap: wrap; overflow: visible;
    margin: 0; padding: 0;
    -webkit-mask: none; mask: none;
  }
  .phone--hero { --pw: 282px; }
  .para__hint { max-width: 30ch; }
  .hero__hilo { height: 70%; }
}
@media (min-width: 1024px) and (max-height: 960px) {
  .phone--hero { --pw: 256px; }
  .hero__title { font-size: 4.5rem; }
  .hero__lead { margin-top: 18px; }
  .hero__ctas { margin-top: 24px; }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .phone--hero { --pw: 240px; }
  .hero__title { font-size: 4.1rem; }
}

/* ---------- Teléfono (mockup CSS) ---------- */
.phone { --pw: 280px; position: relative; width: var(--pw); flex: none; }
.phone::before, .phone::after {
  content: ''; position: absolute; width: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #6a5a6c, #2b2030);
}
.phone::before { left: -2px; top: 20%; height: 8%; box-shadow: 0 calc(var(--pw) * .22) 0 #3a2c3e; }
.phone::after { right: -2px; top: 27%; height: 13%; background: linear-gradient(270deg, #6a5a6c, #2b2030); }
.phone__frame {
  position: relative;
  padding: calc(var(--pw) * .034);
  border-radius: calc(var(--pw) * .168);
  background: linear-gradient(150deg, #4E4566 0%, #1B1630 20%, #0E0B1A 48%, #2A2342 76%, #5C5370 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    inset 0 0 0 calc(var(--pw) * .012) #07060c,
    0 40px 80px -34px rgba(27, 22, 48, .55);
}
.phone__screen {
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 390 / 844;
  border-radius: calc(var(--pw) * .135);
  background: #120c15;
  container-type: inline-size;
  transform: translateZ(0);
}
.phone__screen::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .03) 26%, transparent 38%);
}
.phone__island {
  position: absolute; z-index: 5; left: 50%; top: calc(var(--pw) * .058);
  width: 29%; height: calc(var(--pw) * .082);
  transform: translateX(-50%);
  border-radius: 99px; background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.phone iframe {
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 390px; height: 844px; max-width: none;
  border: 0; background: transparent;
  transform-origin: 0 0; transform: scale(var(--s, .6));
  transition: opacity .5s var(--ease-out);
}
.phone iframe.is-pending { opacity: 0; pointer-events: none; }

/* Portada ilustrada (se ve mientras carga la demo o si no está disponible). Es el arte de cada DEMO, no de la marca:
   por eso conserva sus colores y la estrella de algunas intros (--estrella-mask). */
.cover {
  --estrella-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.7 6.6 17.4 11.3 24 12 17.4 12.7 12.7 17.4 12 24 11.3 17.4 6.6 12.7 0 12 6.6 11.3 11.3 6.6 12 0Z'/%3E%3C/svg%3E");
  --c1: #F4ECDF; --c2: #8B1E2D; --c3: #C8A96A; --c4: #2B2522;
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3cqw; padding: 16cqw 9cqw 12cqw;
  text-align: center;
  background: var(--c1); color: var(--c4);
  overflow: hidden;
  transition: opacity .7s var(--ease-out), visibility .7s;
}
.phone.is-live .cover { opacity: 0; visibility: hidden; }
.cover__art { position: relative; flex: none; }
.cover__art i { position: absolute; display: block; font-style: normal; }
.cover__eyebrow {
  position: relative; z-index: 2; margin: 5cqw 0 0;
  font: 600 3.1cqw/1.2 var(--ff-body); letter-spacing: .26em; text-transform: uppercase;
  color: var(--c2);
}
.cover__title {
  position: relative; z-index: 2; margin: 0;
  font-family: var(--ff-nombres); font-weight: 300;
  font-size: 10.5cqw; line-height: 1.05; letter-spacing: -.01em;
  max-width: 100%; text-wrap: balance;
}
.cover__meta {
  position: relative; z-index: 2; margin: 1cqw 0 0;
  font-size: 3.4cqw; font-weight: 600; letter-spacing: .08em; opacity: .72;
}
.cover__para {
  position: relative; z-index: 2; margin: 3cqw 0 0; max-width: 100%;
  padding: 1.8cqw 4.2cqw; border-radius: 99px;
  background: color-mix(in srgb, var(--c4) 9%, transparent);
  border: .3cqw solid color-mix(in srgb, var(--c4) 18%, transparent);
  font: 400 4.2cqw/1.2 var(--ff-nombres); color: var(--c4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: pop-in .6s var(--ease-spring) both;
}
.cover__load {
  position: absolute; z-index: 3; left: 50%; bottom: 8cqw; transform: translateX(-50%);
  display: flex; gap: 2.4cqw; opacity: 0; transition: opacity .3s;
}
.cover__load i {
  width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--c2);
  animation: load-dot 1.1s ease-in-out infinite;
}
.cover__load i:nth-child(2) { animation-delay: .15s; }
.cover__load i:nth-child(3) { animation-delay: .3s; }
.phone.is-loading .cover__load { opacity: 1; }
.cover__soon {
  position: absolute; z-index: 3; left: 8cqw; right: 8cqw; bottom: 8cqw;
  padding: 2.4cqw 3cqw; border-radius: 99px;
  background: rgba(27, 22, 48, .8); color: #fff;
  font: 600 3.2cqw/1.2 var(--ff-body);
}

/* Arte por estilo de intro */
.art--envelope {
  width: 66cqw; height: 44cqw; margin-bottom: 2cqw;
  border-radius: 2cqw;
  background: linear-gradient(165deg, #fff 0%, color-mix(in srgb, var(--c1) 70%, var(--c4) 6%) 100%);
  box-shadow: 0 5cqw 9cqw -4cqw color-mix(in srgb, var(--c4) 45%, transparent), inset 0 0 0 .3cqw rgba(255, 255, 255, .6);
}
.art--envelope::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64%;
  background: linear-gradient(to top right, transparent 49.4%, color-mix(in srgb, var(--c4) 10%, transparent) 50%, transparent 50.6%),
              linear-gradient(to top left, transparent 49.4%, color-mix(in srgb, var(--c4) 10%, transparent) 50%, transparent 50.6%);
}
.art--envelope::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 62%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 80%, var(--c4) 8%), color-mix(in srgb, var(--c1) 70%, var(--c4) 14%));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.art--envelope i:nth-child(1) {
  left: 50%; top: 62%; z-index: 2; width: 17cqw; height: 17cqw; transform: translate(-50%, -50%);
  border-radius: 46% 54% 50% 50%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--c2), #fff 28%), var(--c2) 58%, color-mix(in srgb, var(--c2), #000 25%));
  box-shadow: 0 1.2cqw 2.4cqw rgba(0, 0, 0, .28), inset 0 0 0 1.2cqw color-mix(in srgb, var(--c2), #000 10%);
}
.art--envelope i:nth-child(2) {
  left: 50%; top: 62%; z-index: 3; transform: translate(-50%, -50%);
  font-family: var(--ff-nombres); font-size: 4.4cqw; white-space: nowrap;
  color: color-mix(in srgb, var(--c3), #fff 35%);
}
.art--polaroid {
  width: 50cqw; height: 60cqw; margin: 2cqw 0 1cqw;
  padding: 3.4cqw 3.4cqw 11cqw;
  background: #fff; transform: rotate(-5deg);
  box-shadow: 0 5cqw 10cqw -4cqw rgba(0, 0, 0, .35);
}
.art--polaroid i:nth-child(1) {
  position: static; width: 100%; height: 100%;
  background:
    radial-gradient(circle at 70% 26%, color-mix(in srgb, var(--c3), #fff 45%) 0 9%, transparent 10%),
    radial-gradient(120% 70% at 50% 110%, color-mix(in srgb, var(--c2), #000 25%) 0 45%, transparent 46%),
    linear-gradient(170deg, color-mix(in srgb, var(--c3), #fff 50%), color-mix(in srgb, var(--c2), #fff 20%));
}
.art--polaroid i:nth-child(2) {
  inset: 0; z-index: -1; background: #fff; transform: rotate(10deg) translate(3cqw, 1cqw);
  box-shadow: 0 3cqw 7cqw -3cqw rgba(0, 0, 0, .3);
}
.art--polaroid i:nth-child(3) {
  left: 3.4cqw; right: 3.4cqw; bottom: 3.6cqw; text-align: center;
  font-family: var(--ff-nombres); font-size: 4cqw;
  /* el papel siempre es blanco: tinta oscura derivada del acento (sirve en temas claros y oscuros) */
  color: color-mix(in srgb, var(--c2), #000 38%);
}
.art--curtain { position: absolute; inset: 0; }
.art--curtain::before {
  content: ''; position: absolute; left: 20%; right: 20%; top: 10%; height: 60%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c3) 55%, transparent), transparent);
}
.art--curtain i:nth-child(1), .art--curtain i:nth-child(2) {
  top: 0; bottom: 0; width: 36%;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--c2), #000 22%) 0 3.2cqw,
    var(--c2) 3.2cqw 6.4cqw,
    color-mix(in srgb, var(--c2), #fff 18%) 6.4cqw 8cqw,
    var(--c2) 8cqw 9.4cqw);
  box-shadow: 0 0 6cqw rgba(0, 0, 0, .35);
}
.art--curtain i:nth-child(1) { left: 0; clip-path: polygon(0 0, 100% 0, 58% 55%, 80% 100%, 0 100%); }
.art--curtain i:nth-child(2) { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%, 42% 55%); }
.art--curtain i:nth-child(3) {
  left: 0; right: 0; top: 0; height: 11%;
  background:
    radial-gradient(circle at 50% 0, var(--c3) 0 70%, transparent 71%) 0 100% / 10cqw 5cqw repeat-x,
    linear-gradient(var(--c3), color-mix(in srgb, var(--c3), #000 15%)) 0 0 / 100% 72% no-repeat;
  filter: drop-shadow(0 1.5cqw 2cqw rgba(0, 0, 0, .3));
}
.cover--curtain .cover__title { font-size: 11.5cqw; }
/* el telón usa --c2: el texto y la carga van en --c3 para leerse sobre el fondo oscuro */
.cover--curtain .cover__eyebrow { color: var(--c3); }
.cover--curtain .cover__load i { background: var(--c3); }
.art--ticket {
  width: 70cqw; height: 34cqw; margin-bottom: 4cqw;
  border-radius: 3cqw;
  background: linear-gradient(120deg, var(--c2), color-mix(in srgb, var(--c2), #fff 18%));
  transform: rotate(-7deg);
  box-shadow: 0 0 7cqw color-mix(in srgb, var(--c2) 65%, transparent), 4cqw 3.5cqw 0 -.4cqw var(--c3);
}
.art--ticket::before, .art--ticket::after {
  content: ''; position: absolute; top: 50%; width: 7cqw; height: 7cqw; border-radius: 50%;
  background: var(--c1); transform: translateY(-50%);
}
.art--ticket::before { left: -3.5cqw; }
.art--ticket::after { right: -3.5cqw; }
.art--ticket i:nth-child(1) { left: 7cqw; top: 6cqw; font: 600 2.8cqw/1 var(--ff-body); letter-spacing: .3em; color: rgba(255, 255, 255, .8); }
.art--ticket i:nth-child(1)::before { content: 'ACCESO TOTAL'; }
.art--ticket i:nth-child(2) { left: 7cqw; top: 11cqw; font: 600 14cqw/1 var(--ff-body); letter-spacing: -.02em; color: #fff; }
.art--ticket i:nth-child(2)::before { content: 'VIP'; }
.art--ticket i:nth-child(3) { right: 15cqw; top: 3cqw; bottom: 3cqw; border-left: .5cqw dashed rgba(255, 255, 255, .55); }
.art--ticket i:nth-child(3)::after { content: '18'; position: absolute; left: 3.4cqw; top: 50%; transform: translateY(-50%); font: 600 7cqw/1 var(--ff-body); color: #fff; }
.art--boarding {
  width: 72cqw; height: 44cqw; margin-bottom: 3cqw;
  border-radius: 3cqw; background: #fff; overflow: hidden;
  transform: rotate(-4deg);
  box-shadow: 0 5cqw 10cqw -4cqw rgba(0, 0, 0, .5);
}
.art--boarding::before {
  content: 'PASE DE ABORDAR'; position: absolute; left: 0; right: 0; top: 0; height: 10cqw;
  display: flex; align-items: center; padding-left: 5cqw;
  background: var(--c2); color: var(--c1);
  font: 600 2.8cqw/1 var(--ff-body); letter-spacing: .24em;
}
.art--boarding i:nth-child(1) { left: 5cqw; top: 14cqw; font: 600 2.6cqw/1 var(--ff-body); letter-spacing: .2em; color: #7a8193; }
.art--boarding i:nth-child(1)::before { content: 'DESTINO'; }
.art--boarding i:nth-child(2) { left: 5cqw; top: 18.5cqw; font: 600 7.6cqw/1 var(--ff-body); letter-spacing: -.01em; color: var(--c1); }
.art--boarding i:nth-child(2)::before { content: 'EL FUTURO'; }
.art--boarding i:nth-child(3) {
  left: 5cqw; right: 5cqw; bottom: 4cqw; height: 8cqw;
  background: repeating-linear-gradient(90deg, var(--c1) 0 .6cqw, transparent .6cqw 1.3cqw, var(--c1) 1.3cqw 2.4cqw, transparent 2.4cqw 3cqw, var(--c1) 3cqw 3.3cqw, transparent 3.3cqw 4.2cqw);
}
.cover--galaxy, .cover--giftbox {
  background:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 70% 38%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 24% 62%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 72%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 88%, #fff 50%, transparent 51%),
    radial-gradient(60% 40% at 80% 90%, color-mix(in srgb, var(--c3) 40%, transparent), transparent),
    radial-gradient(70% 50% at 10% 0%, rgba(120, 100, 255, .35), transparent),
    var(--c1);
}
.art--giftbox { width: 46cqw; height: 44cqw; margin: 6cqw 0 2cqw; }
.art--giftbox::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70%;
  border-radius: 1.6cqw;
  background: linear-gradient(90deg, transparent 43%, var(--c2) 43% 57%, transparent 57%), var(--c3);
  box-shadow: inset -4cqw 0 0 rgba(0, 0, 0, .12), 0 4cqw 8cqw -3cqw rgba(0, 0, 0, .5);
}
.art--giftbox::after {
  content: ''; position: absolute; left: -4%; right: -4%; top: 22%; height: 14%;
  border-radius: 1.6cqw;
  background: linear-gradient(90deg, transparent 43%, var(--c2) 43% 57%, transparent 57%), color-mix(in srgb, var(--c3), #fff 12%);
  box-shadow: 0 1.4cqw 0 rgba(0, 0, 0, .12);
}
.art--giftbox i:nth-child(1), .art--giftbox i:nth-child(2) {
  top: 2%; width: 17cqw; height: 11cqw; border-radius: 50%;
  border: 3cqw solid var(--c2); background: transparent;
}
.art--giftbox i:nth-child(1) { left: 16%; transform: rotate(-24deg); }
.art--giftbox i:nth-child(2) { right: 16%; transform: rotate(24deg); }
.art--giftbox i:nth-child(3) {
  left: 50%; top: -18%; width: 7cqw; height: 7cqw; transform: translateX(-50%);
  background: var(--c2);
  -webkit-mask: var(--estrella-mask) center / contain no-repeat;
  mask: var(--estrella-mask) center / contain no-repeat;
  animation: spark-pulse 2.4s ease-in-out infinite;
}
.art--vinyl { width: 62cqw; height: 58cqw; margin-bottom: 3cqw; }
.art--vinyl i:nth-child(1) {
  left: 0; top: 4cqw; width: 50cqw; height: 50cqw; border-radius: 1.5cqw;
  background: linear-gradient(135deg, var(--c3), color-mix(in srgb, var(--c3), var(--c2) 45%));
  box-shadow: 0 4cqw 8cqw -3cqw rgba(0, 0, 0, .5);
}
.art--vinyl i:nth-child(1)::after {
  content: ''; position: absolute; left: 5cqw; bottom: 5cqw; width: 12cqw; height: 12cqw; background: var(--c1);
  -webkit-mask: var(--estrella-mask) center / contain no-repeat;
  mask: var(--estrella-mask) center / contain no-repeat;
}
.art--vinyl i:nth-child(2) {
  right: 0; top: 0; width: 56cqw; height: 56cqw; border-radius: 50%;
  background:
    radial-gradient(circle, var(--c2) 0 15%, #0c0c0c 15.5% 17%, transparent 17.5%),
    repeating-radial-gradient(circle, #141414 0 .7cqw, #262626 .7cqw 1cqw);
  box-shadow: 0 4cqw 9cqw -3cqw rgba(0, 0, 0, .7);
  animation: spin 7s linear infinite;
}
.art--vinyl i:nth-child(3) {
  right: 0; top: 0; width: 56cqw; height: 56cqw; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 8%, rgba(255, 255, 255, .16) 12%, transparent 18% 50%, rgba(255, 255, 255, .1) 60%, transparent 66%);
}
.cover--confetti {
  background:
    radial-gradient(circle at 14% 22%, var(--c2) 0 1.4cqw, transparent 1.5cqw),
    radial-gradient(circle at 86% 16%, var(--c3) 0 1.2cqw, transparent 1.3cqw),
    radial-gradient(circle at 78% 42%, var(--c2) 0 1cqw, transparent 1.1cqw),
    radial-gradient(circle at 20% 70%, var(--c3) 0 1.3cqw, transparent 1.4cqw),
    radial-gradient(circle at 88% 82%, var(--c2) 0 1.5cqw, transparent 1.6cqw),
    radial-gradient(circle at 42% 90%, var(--c3) 0 1cqw, transparent 1.1cqw),
    linear-gradient(180deg, color-mix(in srgb, var(--c2) 22%, var(--c1)), var(--c1) 60%);
}
.art--confetti { width: 64cqw; height: 46cqw; margin-bottom: 2cqw; }
.art--confetti::before, .art--confetti::after {
  content: ''; position: absolute; top: 0; width: 15cqw; height: 18cqw; border-radius: 50% 50% 48% 48%;
  box-shadow: inset -2cqw -2cqw 0 rgba(0, 0, 0, .06);
}
.art--confetti::before { left: 12cqw; background: var(--c2); transform: rotate(-8deg); }
.art--confetti::after { right: 12cqw; top: 3cqw; background: var(--c3); transform: rotate(8deg); }
.art--confetti i:nth-child(1) { left: 2cqw; right: 2cqw; bottom: 0; height: 17cqw; border-radius: 9cqw; background: #fff; box-shadow: 0 3cqw 7cqw -3cqw rgba(60, 80, 110, .35); }
.art--confetti i:nth-child(2) { left: 10cqw; bottom: 7cqw; width: 22cqw; height: 22cqw; border-radius: 50%; background: #fff; }
.art--confetti i:nth-child(3) { right: 12cqw; bottom: 6cqw; width: 28cqw; height: 28cqw; border-radius: 50%; background: #fff; }

/* ---------- Hechos + marquesina (arena: la «hoja» cálida bajo el hero) ---------- */
.facts {
  position: relative;
  padding: 6px 0 calc(60px + var(--sheet));
  background: var(--arena); color: var(--ciruela);
}
/* Kit v2: lo que diseñamos, con los 5 pictogramas de servicios (íconos de interfaz: remates redondos) */
.servicios {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px;
  margin: 0; padding: 34px 0 30px; list-style: none;
  border-bottom: 1px solid var(--line);
}
.servicios li { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--ciruela); }
.servicios img { flex: none; width: 40px; height: 40px; }
.servicios li:last-child { grid-column: 1 / -1; justify-content: center; }
@media (min-width: 900px) {
  .servicios { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 44px 0 36px; }
  .servicios li { flex-direction: column; text-align: center; gap: 12px; font-size: 15.5px; }
  .servicios li:last-child { grid-column: auto; }
  .servicios img { width: 48px; height: 48px; }
}
.facts__list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px;
  margin: 0; padding: 30px 0 0; list-style: none;
}
.facts__list li { display: flex; flex-direction: column; gap: 2px; }
.facts__list li:last-child { grid-column: 1 / -1; }
.facts__list b {
  font-family: var(--ff-display); font-weight: 300; font-size: 2.1rem; line-height: 1.05;
  color: var(--terracota-profunda);
  width: fit-content;
}
.facts__list span { font-size: 13.5px; font-weight: 600; color: var(--ciruela-suave); }
.marquee {
  margin-top: 40px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { display: flex; align-items: center; width: max-content; animation: marquee 60s linear infinite; }
.marquee__track span {
  margin-right: 26px;
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.4rem);
  color: rgba(27, 22, 48, .5); white-space: nowrap;
}
.marquee__track i { margin-right: 26px; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--terracota); }
@media (min-width: 900px) {
  .facts__list { grid-template-columns: repeat(5, minmax(0, 1fr)); text-align: center; }
  .facts__list li { align-items: center; }
  .facts__list li:last-child { grid-column: auto; }
  .facts__list b { font-size: 2.6rem; }
}

/* ---------- Historia (scrollytelling) ---------- */
.story__grid { display: grid; gap: 72px; }
.story__step { display: grid; gap: 30px; }
.story__text { max-width: 34rem; }
.story__num {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-display); font-size: 1.1rem; color: var(--terracota-honda);
}
.story__num::after { content: ''; width: 48px; height: 8px; background: var(--hilo-subraya) center / 100% 100% no-repeat; }
.story__text p { margin: 0; color: var(--ciruela-suave); font-size: 1.06rem; }
.story__scene { position: relative; display: flex; justify-content: center; padding: 10px 0; }
.story__scene::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none;
  width: min(118%, 380px); aspect-ratio: 1; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: var(--arena); transform: translate(-50%, -50%) rotate(-8deg);
}
.mini-phone {
  --mw: 272px;
  position: relative; z-index: 1;
  width: var(--mw); height: calc(var(--mw) * 2.02);
  padding: 9px; border-radius: 46px;
  background: linear-gradient(150deg, #4E4566 0%, #1B1630 22%, #0E0B1A 50%, #2A2342 78%, #5C5370 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 3px #07060c, 0 50px 80px -40px rgba(27, 22, 48, .6);
}
.mini-phone::before {
  content: ''; position: absolute; z-index: 5; left: 50%; top: 20px; width: 84px; height: 24px;
  transform: translateX(-50%); border-radius: 99px; background: #000;
}
.mini-phone__screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 38px; font-size: 13px; line-height: 1.35;
}

/* Escena 1: WhatsApp */
.wa { display: flex; flex-direction: column; background: #0B141A; color: #E9EDEF; }
.wa__top { display: flex; align-items: center; gap: 8px; padding: 52px 12px 10px; background: #1F2C33; }
.wa__back .i { width: 20px; height: 20px; transform: rotate(90deg); color: #AEBAC1; }
.wa__avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--terracota-luz); color: var(--ciruela-noche); font-weight: 600; font-size: 11px;
}
.wa__who b { display: block; font-size: 14px; font-weight: 600; }
.wa__who small { font-size: 11px; color: #8696A0; }
.wa__body {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 12px 10px;
  background-color: #0B141A;
  background-image: radial-gradient(rgba(255, 255, 255, .04) 1px, transparent 1.5px);
  background-size: 16px 16px;
}
.wa__day { align-self: center; padding: 4px 10px; border-radius: 8px; background: #182229; color: #8696A0; font-size: 10.5px; font-weight: 600; }
.wa__typing {
  position: absolute; left: 10px; top: 46px;
  display: flex; gap: 4px; padding: 12px 14px;
  border-radius: 0 12px 12px 12px; background: #202C33;
  opacity: 0;
}
.wa__typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696A0; animation: typing 1s ease-in-out infinite; }
.wa__typing i:nth-child(2) { animation-delay: .15s; }
.wa__typing i:nth-child(3) { animation-delay: .3s; }
.wa__bubble {
  position: relative; max-width: 92%;
  padding: 4px 4px 20px;
  border-radius: 0 12px 12px 12px; background: #202C33;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.wa__bubble::before {
  content: ''; position: absolute; left: -7px; top: 0;
  border-top: 8px solid #202C33; border-left: 8px solid transparent;
}
.wa__preview { overflow: hidden; border-radius: 9px; background: #1A2328; }
.wa__preview-img {
  position: relative; height: 112px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--arena);
  text-align: center;
}
.wa__preview-spark { width: 26px; height: 14px; color: var(--terracota); }
.wa__preview-names { position: relative; z-index: 1; font-family: var(--ff-nombres); font-size: 24px; color: var(--ciruela); }
.wa__preview-sub { position: relative; z-index: 1; font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--terracota-honda); }
.wa__preview-txt { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; }
.wa__preview-txt b { font-size: 12.5px; font-weight: 600; }
.wa__preview-txt span, .wa__preview-txt small { font-size: 11px; color: #8696A0; }
.wa__bubble p { margin: 7px 6px 0; font-size: 12.5px; }
.wa__bubble .wa__link { color: #53BDEB; font-size: 11.5px; word-break: break-all; text-decoration: underline; }
.wa__time { position: absolute; right: 8px; bottom: 4px; display: flex; align-items: center; gap: 2px; font-size: 10px; color: #8696A0; }
.wa__time .i { width: 15px; height: 15px; color: #53BDEB; stroke-width: 2; }
.wa__input {
  display: flex; align-items: center; justify-content: space-between;
  margin: 8px 8px 12px; padding: 6px 6px 6px 16px;
  border-radius: 99px; background: #1F2C33; color: #8696A0; font-size: 12.5px;
}
.wa__input i { width: 30px; height: 30px; border-radius: 50%; background: #00A884; }
.story__scene.is-active .wa__typing { animation: wa-typing 1.5s var(--ease-out) both; }
.story__scene.is-active .wa__bubble { animation: pop-in .7s 1.35s var(--ease-spring) both; }

/* Escena 2: sobre */
.env {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 48px 16px 24px;
  background: var(--marfil);
  color: var(--ciruela);
}
.env__to { margin: 0; font-family: var(--ff-display); font-size: 16px; color: var(--ciruela-suave); }
.env__to b { color: var(--ciruela); font-weight: 500; }
.env__stage { position: relative; width: 220px; height: 148px; margin-top: 84px; perspective: 700px; }
.env__back { position: absolute; inset: 0; border-radius: 8px; background: #E5D3BA; }
.env__card {
  position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; height: 176px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 6px; background: #FFFDF8; text-align: center;
  box-shadow: 0 8px 24px rgba(59, 47, 42, .18);
  transform: translateY(-84px);
}
.env__card small { font-size: 9px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--terracota-honda); }
.env__card b { font-family: var(--ff-nombres); font-weight: 400; font-size: 27px; }
.env__card span { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--ciruela-suave); }
.env__card em { margin-top: 8px; padding: 4px 10px; border-radius: 99px; background: var(--arena); font-size: 10.5px; font-style: normal; font-weight: 600; color: var(--terracota-honda); }
.env__front {
  position: absolute; inset: 0; z-index: 3; border-radius: 8px;
  background:
    linear-gradient(to top right, #F3E6D3 49.6%, transparent 50%) left bottom / 50.4% 100% no-repeat,
    linear-gradient(to top left, #EFE0CB 49.6%, transparent 50%) right bottom / 50.4% 100% no-repeat;
  box-shadow: 0 18px 30px -18px rgba(59, 47, 42, .5);
}
.env__front::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56%;
  background: linear-gradient(180deg, #F6EBDC, #EFDFC8);
  clip-path: polygon(0 100%, 0 20%, 50% 0, 100% 20%, 100% 100%);
  border-radius: 0 0 8px 8px;
}
.env__flap {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 60%;
  background: linear-gradient(180deg, #E9D6BC, #DEC7A7);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transform: rotateX(180deg);
}
.env__seal {
  position: absolute; left: 50%; top: 58%; z-index: 6;
  /* flex (no grid): con grid «A», «&» y «L» quedaban uno debajo del otro */
  display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; white-space: nowrap;
  border-radius: 47% 53% 50% 50%;
  /* el lacre del kit v2 (marca/lacre: cera oro rosa) */
  background: radial-gradient(circle at 35% 30%, #D99A8D, #A9665C 52%, #7E443F);
  box-shadow: 0 3px 4px rgba(42, 20, 24, .28), 0 10px 18px -6px rgba(42, 20, 24, .35), inset 0 0 0 4px rgba(94, 48, 45, .35);
  color: #F4D5C8; font-family: var(--ff-nombres); font-size: 14px;
  transform: translate(-50%, -50%) scale(1.4);
  opacity: 0;
}
.env__seal i { font-size: 11px; margin: 0 1px; }
.env__caption { margin: 18px 0 0; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ciruela-suave); opacity: 0; }
.tap {
  position: absolute; z-index: 8; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%; border: 2px solid rgba(176, 110, 102, .9); background: rgba(176, 110, 102, .18);
  opacity: 0; pointer-events: none;
}
.tap--seal { left: 50%; top: calc(50% + 26px); }
.story__scene.is-active .env__flap { animation: env-flap 3.2s var(--ease-out) both; }
.story__scene.is-active .env__card { animation: env-card 3.2s var(--ease-out) both; }
.story__scene.is-active .env__seal { animation: env-seal 3.2s var(--ease-out) both; }
.story__scene.is-active .env__caption { animation: env-caption 3.2s ease both; }
.story__scene.is-active .tap--seal { animation: tap 3.2s ease-out both; }

/* Escena 3: confirmación */
.rsvp {
  display: flex; flex-direction: column; gap: 10px;
  padding: 58px 18px 20px; text-align: center;
  background: var(--marfil);
  color: var(--ciruela);
}
.rsvp__eyebrow { margin: 0; font-size: 9.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--terracota-honda); }
.rsvp__title { margin: 0; font-family: var(--ff-nombres); font-size: 27px; font-weight: 400; line-height: 1.1; }
.rsvp__guest { padding: 10px; border-radius: 14px; background: #fff; border: 1px dashed rgba(126, 68, 63, .45); }
.rsvp__guest b { display: block; font-family: var(--ff-display); font-weight: 400; font-size: 18px; }
.rsvp__guest small { font-size: 11px; font-weight: 600; color: var(--ino-texto-suave, #5C5370); }
.rsvp__row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 12px; background: #fff; font-size: 12.5px; font-weight: 600; }
.rsvp__stepper { display: flex; align-items: center; gap: 10px; }
.rsvp__stepper i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(43, 37, 34, .18); font-style: normal; }
.rsvp__field { color: var(--ino-texto-suave, #5C5370); font-weight: 600; }
.rsvp__btns { position: relative; display: grid; gap: 8px; margin-top: auto; opacity: 0; }
.rsvp__yes {
  padding: 13px; border-radius: 999px;
  /* «¡No me lo pierdo!»: el botón de la marca */
  background: var(--terracota-profunda); color: #fff; font-weight: 600; font-size: 14.5px;
  box-shadow: var(--sombra-boton);
}
.rsvp__no { padding: 11px; border-radius: 999px; border: 1px solid rgba(43, 37, 34, .2); font-weight: 600; font-size: 13px; }
.rsvp__done {
  position: absolute; left: 18px; right: 18px; bottom: 20px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 94px; padding: 14px;
  border-radius: 20px; background: var(--ciruela); color: var(--marfil);
  font-weight: 600; font-size: 14px;
  box-shadow: 0 18px 30px -16px rgba(27, 22, 48, .6);
}
.rsvp__done .i { width: 22px; height: 22px; color: var(--terracota-luz); stroke-width: 2.4; }
.tap--yes { left: 50%; bottom: 72px; margin-bottom: -27px; margin-top: 0; }
.burst { position: absolute; left: 50%; bottom: 99px; width: 0; height: 0; z-index: 7; pointer-events: none; }
.burst i {
  /* confeti de papel en los colores de la marca (círculos, sin destellos) */
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--c, #B06E66);
  opacity: 0;
}
.burst i:nth-child(1) { --dx: -70px; --dy: -60px; --c: var(--ino-oro-rosa, #B06E66); }
.burst i:nth-child(2) { --dx: 70px; --dy: -64px; --c: var(--ino-salvia, #8FA98B); }
.burst i:nth-child(3) { --dx: -96px; --dy: 4px; --c: var(--ino-lavanda, #A88FD0); }
.burst i:nth-child(4) { --dx: 96px; --dy: 0; --c: var(--ino-oro-rosa-luz, #E3B2A4); }
.burst i:nth-child(5) { --dx: -40px; --dy: -96px; --c: var(--ino-salvia, #8FA98B); }
.burst i:nth-child(6) { --dx: 40px; --dy: -100px; --c: var(--ino-oro-rosa, #B06E66); }
.burst i:nth-child(7) { --dx: -110px; --dy: -40px; --c: var(--ino-lavanda, #A88FD0); }
.burst i:nth-child(8) { --dx: 112px; --dy: -34px; --c: var(--ino-noche, #1B1630); }
.story__scene.is-active .rsvp__btns { animation: rsvp-btns 3s ease both; }
.story__scene.is-active .rsvp__done { animation: rsvp-done 3s var(--ease-spring) both; }
.story__scene.is-active .tap--yes { animation: tap 3s ease-out both; }
.story__scene.is-active .burst i { animation: burst 3s var(--ease-out) both; }

/* Escena 4: panel */
.dash {
  display: flex; flex-direction: column; gap: 10px;
  padding: 56px 12px 14px;
  background: var(--marfil); color: var(--ciruela);
}
.dash__head small { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--terracota-honda); }
.dash__head b { display: block; font-family: var(--ff-display); font-weight: 400; font-size: 20px; line-height: 1.15; }
.dash__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.dash__stat { padding: 10px 4px 8px; border-radius: 12px; background: #fff; text-align: center; }
.dash__stat b { --num: var(--to); counter-reset: n var(--num); display: block; font-family: var(--ff-display); font-weight: 400; font-size: 25px; line-height: 1; }
.dash__stat b::after { content: counter(n); }
.dash__stat small { font-size: 10px; font-weight: 600; color: var(--ino-texto-suave, #5C5370); }
.dash__stat--yes b { color: #17613F; }
.dash__stat--wait b { color: #8A6420; }
.dash__stat--no b { color: #B03A32; }
.dash__bar { height: 8px; border-radius: 8px; background: var(--lino); overflow: hidden; }
.dash__bar i { display: block; height: 100%; width: 74%; border-radius: inherit; background: #3F6E45; }
.dash__list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dash__list li, .board__list li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px; border-radius: 12px; background: #fff; font-size: 12px;
}
.av {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: var(--arena); color: var(--ciruela); font-size: 10px; font-weight: 600;
}
.nm { flex: 1; min-width: 0; font-weight: 600; line-height: 1.25; }
.nm small { display: block; font-size: 10.5px; font-weight: 600; color: var(--ino-texto-suave, #5C5370); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash__list em, .board__list em {
  flex: none; padding: 4px 8px; border-radius: 99px;
  font-size: 10.5px; font-style: normal; font-weight: 600;
}
.ok { background: #DDF3E8; color: #17613F; }
.wait { background: #FBEFD5; color: #7A5412; }
.no { background: #FBE1DE; color: #9E2F28; }
.dash__new { box-shadow: inset 0 0 0 1.5px #7FB07A; }
.dash__toast {
  position: absolute; left: 12px; right: 12px; bottom: 14px;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 16px;
  background: var(--ciruela); color: var(--marfil); font-size: 12px; font-weight: 600;
  box-shadow: 0 16px 30px -12px rgba(27, 22, 48, .55);
}
.dash__toast .i { width: 20px; height: 13px; color: var(--terracota-luz); }
.story__scene.is-active .dash__new { animation: row-in .8s .5s var(--ease-spring) both, row-glow 2.4s 1.2s ease-out both; }
.story__scene.is-active .dash__stat b { animation: count 1.1s .9s var(--ease-out) both; }
.story__scene.is-active .dash__bar i { animation: bar-grow 1.2s .9s var(--ease-out) both; }
.story__scene.is-active .dash__toast { animation: toast-in .7s 1.6s var(--ease-spring) both; }

@media (min-width: 1024px) {
  .story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 72px; margin-top: 24px; }
  .story__step { display: contents; }
  .story__text {
    grid-column: 1; min-height: 78vh;
    display: flex; flex-direction: column; justify-content: center;
  }
  .story__step:nth-child(1) .story__text { grid-row: 1; }
  .story__step:nth-child(2) .story__text { grid-row: 2; }
  .story__step:nth-child(3) .story__text { grid-row: 3; }
  .story__step:nth-child(4) .story__text { grid-row: 4; }
  .story__scene {
    grid-column: 2; grid-row: 1 / span 4;
    position: sticky; top: max(84px, calc(50vh - 318px));
    align-self: start; height: 640px; padding: 0;
    align-items: center;
    opacity: 0; transform: translateY(24px) scale(.97);
    transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
  }
  .story__scene.is-active { opacity: 1; transform: none; }
  .mini-phone { --mw: 300px; }
  /* El paso que no está en pantalla se atenúa sin perder legibilidad (antes opacity .25 = 1,5–1,8:1): el texto
     queda en texto suave (6,7:1) y solo el número y su hilo bajan de opacidad */
  .js .story__text.reveal, .js .story__text.reveal.is-current { opacity: 1; transform: none; }
  .js .story__text.reveal .h3, .js .story__text.reveal .story__num { transition: color .5s var(--ease-out), opacity .5s var(--ease-out); }
  .js .story__text.reveal:not(.is-current) .h3 { color: var(--ciruela-suave); }
  .js .story__text.reveal:not(.is-current) .story__num { opacity: .4; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .story__text.reveal:not(.is-current) .h3 { color: inherit; }
  .js .story__text.reveal:not(.is-current) .story__num { opacity: 1; }
}

/* ---------- Catálogo ---------- */
.catalog__bar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.chips--filter {
  display: flex; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 10px;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 34px), transparent);
  mask: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 34px), transparent);
}
.chips--filter::-webkit-scrollbar { display: none; }
.chips--filter .chip { border-color: rgba(27, 22, 48, .14); background: rgba(255, 255, 255, .6); color: var(--ciruela); }
.chips--filter .chip:hover { border-color: rgba(27, 22, 48, .4); }
.chips--filter .chip[aria-pressed='true'] {
  background: var(--ciruela); color: var(--marfil); border-color: var(--ciruela);
  box-shadow: 0 10px 24px -14px rgba(27, 22, 48, .8);
}
.chips--filter .chip[aria-pressed='true'] .chip__n { background: rgba(251, 246, 242, .16); }
.catalog__qr-hint { display: none; }
.demos {
  display: flex; gap: 14px;
  margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 26px;
  list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.demos::-webkit-scrollbar { display: none; }
.demo {
  --c1: #F4ECDF; --c2: #8B1E2D; --c3: #C8A96A; --c4: #2B2522;
  flex: 0 0 min(80vw, 300px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  padding: 10px; border-radius: 28px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(27, 22, 48, .04), 0 26px 50px -34px rgba(27, 22, 48, .45);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.demo.is-hidden { display: none; }
.demo.is-entering { animation: card-in .55s var(--ease-out) both; }
.demo__stage {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  padding: 22px 0 20px; border-radius: 20px;
  /* papel teñido con el color de la demo (liso, sin brillos) */
  background: color-mix(in srgb, var(--c1) 45%, var(--arena));
}
.phone--mini { --pw: 176px; transition: transform .7s var(--ease-out); }
.demo:hover .phone--mini { transform: translateY(-4px) rotate(-1deg); }
.demo__play {
  position: absolute; left: 50%; bottom: 30px; z-index: 6;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 8px 16px 8px 12px;
  border: 0; border-radius: 99px;
  background: rgba(27, 22, 48, .84); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 13px/1 var(--ff-body); white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(27, 22, 48, .7);
  transform: translateX(-50%);
  cursor: pointer;
  transition: opacity .35s, transform .45s var(--ease-spring), background-color .25s, visibility .35s;
}
.demo__play .i { width: 16px; height: 16px; color: var(--terracota-luz); }
.demo__play:hover { background: var(--ciruela-noche); transform: translateX(-50%) scale(1.05); }
/* visibility: oculto también para el teclado (sin botón invisible enfocable) */
.demo.is-live .demo__play, .demo.is-loading .demo__play { opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 10px); }
.demo__info { display: flex; flex-direction: column; flex: 1; padding: 16px 8px 6px; }
.demo__type { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ciruela-suave); }
.demo__name { margin: 6px 0; font-family: var(--ff-display); font-weight: 400; font-size: 1.5rem; line-height: 1.1; letter-spacing: -.01em; }
.demo__desc { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--ciruela-suave); }
.demo__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.demo__actions .btn:not(.btn--icon) { flex: 1 1 auto; }
.demo__qr { display: none; }
.catalog__more { margin: 18px 0 0; text-align: center; font-size: 15px; color: var(--ciruela-suave); }
.catalog__more a { color: var(--terracota-honda); font-weight: 600; text-decoration-color: var(--terracota); text-underline-offset: 4px; }

@media (min-width: 900px) {
  .chips--filter { flex-wrap: wrap; justify-content: center; overflow: visible; margin: 0; padding: 0; -webkit-mask: none; mask: none; }
  .demos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: 18px;
    margin: 0; padding: 0; overflow: visible;
  }
  .demo:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(27, 22, 48, .04), 0 40px 70px -40px rgba(27, 22, 48, .55); }
  .phone--mini { --pw: 162px; }
  .demo__name { font-size: 1.35rem; }
  .demo__desc { font-size: 13.5px; }
  /* Tipos de 1 o 2 líneas: los nombres quedan alineados en la rejilla */
  .demo__type { min-height: 2.9em; line-height: 1.45; }
}
@media (min-width: 1024px) and (hover: hover) {
  .catalog__qr-hint {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 0; font-size: 13.5px; color: var(--ciruela-suave);
  }
  .catalog__qr-hint .i { width: 18px; height: 18px; }
  .demo__qr {
    display: inline-flex; position: absolute; right: 12px; top: 12px; z-index: 7;
    background: rgba(255, 255, 255, .85); color: var(--ciruela); border-color: rgba(27, 22, 48, .1);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .demo__qr:hover { background: #fff; }
  .demo__info { position: static; }
  .demo { position: relative; }
}

/* ---------- Configurador ---------- */
.config { overflow: clip; }
.config__bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.config__hilo { display: none; right: 0; top: 0; width: 46%; height: 240px; opacity: .55; }
@media (min-width: 1024px) { .config__hilo { display: block; } }
.config__grid { position: relative; display: grid; gap: 44px; }
.cfg { display: grid; gap: 16px; margin-top: 30px; }
.cfg__types { margin: 0; padding: 0; border: 0; min-width: 0; }
.cfg__types legend, .field label, .field > span {
  padding: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: rgba(251, 246, 242, .86);
}
.cfg__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip--radio { position: relative; min-height: 40px; padding: 8px 15px; font-size: 13.5px; }
.chip--radio input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip--radio:has(input:checked) {
  background: var(--marfil); color: var(--ciruela); border-color: var(--marfil);
  box-shadow: 0 0 0 4px rgba(227, 178, 164, .3);
}
.chip--radio:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.field { display: grid; gap: 8px; min-width: 0; }
.field__opt { font-weight: 500; color: rgba(251, 246, 242, .62); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border-radius: 14px; border: 1.5px solid rgba(251, 246, 242, .16);
  background: rgba(251, 246, 242, .05); color: var(--marfil);
  font-size: 16px; font-weight: 500;
  color-scheme: dark;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.field input { min-width: 0; }
.field input[type='date'] { padding-right: 12px; }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
@media (max-width: 419px) {
  .lead-form .field-row { grid-template-columns: minmax(0, 1fr); }
}
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3B2A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field select option { background: var(--ciruela); color: var(--marfil); }
.field input::placeholder, .field textarea::placeholder { color: rgba(251, 246, 242, .45); font-weight: 500; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(251, 246, 242, .32); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--terracota-luz); background-color: rgba(251, 246, 242, .08);
  box-shadow: 0 0 0 4px rgba(227, 178, 164, .22);
}
.field input[aria-invalid='true'] { border-color: var(--terracota-luz-2); box-shadow: 0 0 0 4px rgba(227, 178, 164, .22); }
.field__err { margin: 0; font-size: 13px; font-weight: 600; color: var(--terracota-luz-2); }
.field__err:empty { display: none; }

.config__demo { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.config__stage { position: relative; }
.phone--config { --pw: min(70vw, 286px); }
.phone--config .phone__frame { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 calc(var(--pw) * .012) #07060c, 0 60px 100px -40px rgba(0, 0, 0, .75); }
.config__live {
  position: absolute; left: 50%; top: -16px; z-index: 7; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  padding: 6px 12px; border-radius: 99px; white-space: nowrap;
  background: var(--marfil); color: var(--ciruela);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .6);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: #3F6E45; box-shadow: 0 0 0 0 rgba(30, 158, 99, .6); animation: pulse-dot 1.8s infinite; }
.config__live.is-updating .dot { background: var(--terracota); }
.config__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.config__note { margin: 0; max-width: 36ch; text-align: center; font-size: 13px; color: var(--malva); }

@media (min-width: 1024px) {
  .config__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; }
  .phone--config { --pw: 290px; }
}

/* ---------- Diferenciales (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tile {
  position: relative; overflow: hidden;
  padding: 20px 16px;
  border-radius: 24px; background: #fff;
  border: 1px solid rgba(27, 22, 48, .07);
  box-shadow: 0 20px 40px -34px rgba(27, 22, 48, .45);
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.tile::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--terracota);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .45s;
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -34px rgba(27, 22, 48, .55); }
.tile:hover::after { opacity: 1; }
.tile__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px;
  background: var(--arena);
  color: var(--terracota-profunda);
}
.tile--speed .tile__icon, .tile--access .tile__icon, .tile--voice .tile__icon, .tile--live .tile__icon { background: #fff; }
.tile__icon .i { width: 24px; height: 24px; }
.tile:hover .tile__icon .i { animation: icon-wiggle .7s var(--ease-spring); }
.tile h3 { margin: 14px 0 6px; font-family: var(--ff-display); font-weight: 500; font-size: 1.13rem; line-height: 1.15; letter-spacing: -.005em; }
.tile p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ciruela-suave); }
/* Enlaces dentro de una tarjeta o de una respuesta de la FAQ (p. ej. al generador de frases, §15.2) */
.tile p a, .qa__a p a { color: var(--terracota-honda); font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.tile p a:hover, .qa__a p a:hover { color: var(--ciruela); text-decoration-color: var(--terracota); }
.tile--hero, .tile--wide { grid-column: span 2; }
.tile--passes {
  display: flex; flex-direction: column; gap: 28px;
  padding: 24px 20px 28px;
  background: var(--ciruela);
  color: var(--marfil);
  border-color: transparent;
}
.tile--passes h3 { font-size: 1.6rem; }
.tile--passes p { color: var(--soft-dark); font-size: 15px; max-width: 34ch; }
.tile--passes .tile__icon { background: rgba(251, 246, 242, .08); color: var(--terracota-luz); }
.pass {
  display: flex; align-self: center; width: 100%; max-width: 380px;
  border-radius: 20px; overflow: hidden;
  background: var(--ciruela-2);
  border: 1px solid rgba(227, 178, 164, .38);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: rotate(-3deg);
  transition: transform .8s var(--ease-spring);
}
.tile--passes:hover .pass { transform: rotate(0) scale(1.02); }
.pass__main { flex: 1; min-width: 0; padding: 18px 18px 16px; }
.pass__main small { font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--terracota-luz); }
.pass__main b { display: block; margin: 6px 0 12px; font-family: var(--ff-nombres); font-weight: 300; font-size: 1.7rem; line-height: 1.05; }
.pass__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pass__meta span { padding: 4px 10px; border-radius: 99px; background: rgba(251, 246, 242, .09); font-size: 11.5px; font-weight: 600; }
.pass__stub {
  position: relative; flex: none; width: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px;
  border-left: 2px dashed rgba(227, 178, 164, .4);
}
.pass__stub::before, .pass__stub::after {
  content: ''; position: absolute; left: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--ciruela);
}
.pass__stub::before { top: -9px; }
.pass__stub::after { bottom: -9px; }
.pass__stub small { font-size: 9.5px; font-weight: 600; letter-spacing: .1em; color: rgba(251, 246, 242, .7); }
.pass__qr {
  width: 62px; height: 62px; border-radius: 8px; background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' shape-rendering='crispEdges'%3E%3Cpath fill='%231B1630' d='M1 1h5v5H1zM15 1h5v5h-5zM1 15h5v5H1z'/%3E%3Cpath fill='%23fff' d='M2 2h3v3H2zM16 2h3v3h-3zM2 16h3v3H2z'/%3E%3Cpath fill='%231B1630' d='M3 3h1v1H3zM17 3h1v1h-1zM3 17h1v1H3zM8 1h1v2H8zM10 2h2v1h-2zM9 4h2v2H9zM12 5h1v2h-1zM7 7h3v1H7zM1 8h2v1H1zM4 8h2v2H4zM11 8h3v1h-3zM15 8h1v3h-1zM17 8h3v1h-3zM8 9h2v2H8zM12 10h2v2h-2zM2 11h3v1H2zM17 11h2v2h-2zM7 12h1v3H7zM9 13h3v1H9zM14 13h2v1h-2zM13 15h1v2h-1zM16 15h4v1h-4zM8 16h3v1H8zM15 17h1v3h-1zM18 17h2v1h-2zM9 18h3v2H9zM17 19h3v1h-3z'/%3E%3C/svg%3E");
  background-size: 50px 50px; background-position: center; background-repeat: no-repeat;
}
.tile--speed { background: var(--arena); border-color: transparent; }
.speed { margin-top: 18px; }
.speed__track { height: 10px; border-radius: 99px; background: rgba(27, 22, 48, .1); overflow: hidden; }
.speed__track i { display: block; height: 100%; width: 30%; border-radius: inherit; background: var(--terracota); transform-origin: left; animation: speed-fill 3.2s var(--ease-out) infinite; }
.speed__labels { position: relative; display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--ciruela-suave); }
.speed__labels b { position: absolute; left: 30%; transform: translateX(-50%); color: var(--terracota-honda); font-weight: 600; }

@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; grid-auto-flow: dense; }
  .tile { padding: 26px 24px; }
  .tile h3 { font-size: 1.22rem; }
  .tile p { font-size: 14.5px; }
  .tile--hero { grid-column: span 2; grid-row: span 2; justify-content: space-between; padding: 32px; }
  .tile--hero h3 { font-size: 2rem; }
  .tile--wide { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
  .tile--wide .speed { margin-top: 0; }
}

/* ---------- Panel del anfitrión ---------- */
.host { overflow: clip; }
.host__grid { position: relative; display: grid; gap: 52px; }
.checks { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: 12px; color: rgba(251, 246, 242, .88); font-size: 15.5px; }
.checks .i {
  width: 24px; height: 24px; padding: 4px; margin-top: 1px; flex: none;
  border-radius: 50%; background: rgba(227, 178, 164, .15); color: var(--terracota-luz); stroke-width: 2.2;
}
.host__ctas { margin-top: 32px; }
.host__visual { position: relative; padding-top: 46px; }
.board {
  overflow: hidden; border-radius: 22px;
  background: var(--marfil); color: var(--ciruela);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08);
}
.board__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--arena); font-size: 11px; color: var(--ciruela-suave); }
.board__bar i { width: 10px; height: 10px; border-radius: 50%; background: #D5CBBd; }
.board__bar i:nth-child(1) { background: #E0796A; }
.board__bar i:nth-child(2) { background: #E2B85F; }
.board__bar i:nth-child(3) { background: #7FB07A; }
.board__bar span { flex: 1; max-width: 280px; margin-left: 10px; padding: 4px 12px; border-radius: 99px; background: rgba(255, 255, 255, .75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.board__body { display: grid; gap: 14px; padding: 18px 14px; }
.board__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.board__head small { font-size: 11.5px; font-weight: 600; color: var(--ciruela-suave); }
.board__head b { display: block; font-family: var(--ff-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; }
.board__live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 99px; background: #E3EDDF; color: #3E6A3A; font-size: 11px; font-weight: 600; white-space: nowrap; }
.board__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bstat { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: #fff; }
.bstat small { font-size: 11px; font-weight: 600; color: var(--ciruela-suave); }
.bstat b { font-family: var(--ff-display); font-weight: 400; font-size: 2rem; line-height: 1; }
.bstat span { font-size: 11px; font-weight: 500; color: var(--ciruela-suave); }
.bstat--yes b { color: #17613F; }
.bstat--wait b { color: #8A6420; }
.bstat--no b { color: #B03A32; }
.bstat--ring { flex-direction: row; align-items: center; gap: 10px; }
.ring {
  position: relative; display: grid; place-items: center; flex: none;
  width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(#3F6E45 calc(var(--p) * 1%), var(--lino) 0);
}
.ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.ring b { position: relative; font-family: var(--ff-body); font-size: 12.5px; font-weight: 600; color: var(--ciruela); }
.board__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.board__list li { padding: 9px 10px; font-size: 13px; }
.board__list .av { width: 32px; height: 32px; }
.remind { display: none; align-items: center; gap: 4px; flex: none; padding: 5px 9px; border-radius: 99px; background: #E3F7EC; color: #0B6B37; font-size: 11px; font-weight: 600; }
.remind .i { width: 14px; height: 14px; }
.board__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bbtn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 99px; border: 1px solid rgba(27, 22, 48, .16); font-size: 12.5px; font-weight: 600; }
.bbtn .i { width: 16px; height: 16px; }
.bbtn--coral { background: var(--terracota-profunda); border-color: transparent; color: #fff; }
.host__toast {
  position: absolute; right: 8px; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px 11px 12px; border-radius: 16px;
  background: var(--ciruela-2); color: var(--marfil);
  border: 1px solid rgba(251, 246, 242, .12);
  box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .7);
  font-size: 12.5px; line-height: 1.25;
  animation: bob 6s ease-in-out infinite;
}
.host__toast .i { width: 24px; height: 15px; color: var(--terracota-luz-2); }
.host__toast b { display: block; font-weight: 600; }
.host__toast small { color: var(--malva); }

@media (min-width: 480px) {
  .remind { display: inline-flex; }
}
@media (min-width: 640px) {
  .board__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .board__body { padding: 22px; }
}
@media (min-width: 1024px) {
  .host__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
  .board { transform: perspective(1800px) rotateY(-7deg) rotateX(3deg); transition: transform 1s var(--ease-out); }
  .host__visual:hover .board { transform: perspective(1800px) rotateY(-2deg) rotateX(1deg); }
  .host__toast { right: -20px; top: -6px; }
}

/* ---------- Comparativa ---------- */
.compare__wrap { max-width: 1000px; margin: 0 auto; }
.ctable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.ctable thead { display: none; }
.ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; }
.ctable tr {
  margin-bottom: 12px; padding: 18px 16px 12px;
  border-radius: 22px; background: #fff;
  box-shadow: 0 20px 40px -34px rgba(27, 22, 48, .45);
}
.ctable tbody th { margin: 0 0 8px; font-family: var(--ff-display); font-weight: 500; font-size: 1.2rem; text-align: left; }
.ctable td {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-top: 1px dashed var(--line);
  color: var(--ciruela-suave); line-height: 1.4;
}
.ctable td::before {
  content: attr(data-label); flex: 0 0 88px; padding-top: 2px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ciruela-suave);
}
.ctable td.is-us {
  margin: 6px -8px 0; padding: 12px 10px; border: 0; border-radius: 14px;
  background: var(--ciruela); color: var(--marfil); font-weight: 600;
}
.ctable td.is-us::before { color: var(--terracota-luz); }
.ct { flex: 1; min-width: 0; }
.mk { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; }
.mk .i { width: 14px; height: 14px; stroke-width: 2.6; }
.mk--yes { background: #E3EDDF; color: #3E6A3A; }
.mk--no { background: #FBE1DE; color: #B03A32; }
.mk--mid { background: #F3EAD6; color: #7A5412; }
td.is-us .mk--yes { background: var(--terracota-luz); color: var(--ciruela-noche); }

@media (min-width: 800px) {
  .ctable { display: table; }
  .ctable thead { display: table-header-group; }
  .ctable tbody { display: table-row-group; }
  .ctable tr { display: table-row; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .ctable th, .ctable td { display: table-cell; }
  .ctable thead th {
    padding: 22px 18px; text-align: left; vertical-align: bottom;
    font-family: var(--ff-display); font-weight: 400; font-size: 1.25rem;
  }
  .ctable thead th .i { width: 22px; height: 22px; margin-right: 10px; vertical-align: -4px; color: var(--ciruela-suave); }
  .ctable thead th.is-us { background: var(--ciruela); color: var(--marfil); border-radius: 24px 24px 0 0; }
  .ctable thead th.is-us .i { color: var(--terracota-luz); }
  .ctable tbody th { margin: 0; padding: 18px; border-top: 1px solid var(--line); font-family: var(--ff-body); font-size: 14.5px; font-weight: 600; vertical-align: middle; width: 22%; }
  .ctable td { padding: 18px; border-top: 1px solid var(--line); vertical-align: middle; }
  .ctable td::before { content: none; }
  .ctable td .mk { margin-right: 10px; vertical-align: middle; }
  .ctable td .ct { display: inline-block; max-width: calc(100% - 36px); vertical-align: middle; }
  .ctable td.is-us { margin: 0; border-radius: 0; border-top: 1px solid rgba(251, 246, 242, .08); }
  .ctable tbody tr:last-child td.is-us { border-radius: 0 0 24px 24px; }
  .ctable tbody tr:hover th, .ctable tbody tr:hover td:not(.is-us) { background: rgba(255, 255, 255, .6); }
}

/* ---------- Cómo funciona ---------- */
.steps { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.steps::before {
  /* el hilo que une los pasos (manual: «une los momentos del itinerario») */
  content: ''; position: absolute; left: 27px; top: 30px; bottom: 60px; width: 2px; border-radius: 2px;
  background: var(--terracota);
}
.step { position: relative; min-height: 64px; padding: 6px 0 22px 80px; }
.step__n {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  font-family: var(--ff-display); font-size: 1.55rem; color: var(--ciruela);
  box-shadow: 0 14px 30px -18px rgba(27, 22, 48, .5);
}
.step--last .step__n { background: var(--terracota-profunda); color: #fff; border-color: transparent; }
.step--last .step__n .i { width: 24px; height: 24px; stroke-width: 2.2; }
.step h3 { margin: 10px 0 6px; font-family: var(--ff-display); font-weight: 500; font-size: 1.35rem; line-height: 1.15; }
.step p { margin: 0; color: var(--ciruela-suave); font-size: 15px; }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .steps::before { left: 28px; right: calc((100% - 84px) / 4 - 28px); top: 22px; bottom: auto; width: auto; height: 14px; border-radius: 0; background: var(--hilo-subraya) center / 100% 100% no-repeat; }
  .step { padding: 84px 0 0; }
  .step h3 { margin-top: 0; }
}

/* ---------- Diferencial: modo accesible «abuelos» (paso 3, §14.3) ---------- */
.tile--access { background: var(--arena); border-color: transparent; }
.tile--access .tile__body p b { color: var(--ciruela); font-weight: 600; }
.access { display: flex; justify-content: center; margin-top: 18px; }
.access__card {
  display: grid; justify-items: center; gap: 6px; width: 100%; max-width: 300px; padding: 18px 16px 16px;
  border-radius: 20px; background: #fff; border: 2px solid var(--ciruela); color: var(--ciruela); text-align: center;
  box-shadow: 0 24px 44px -30px rgba(27, 22, 48, .55);
}
.access__card small { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-honda); }
.access__card b { font-family: var(--ff-display); font-weight: 500; font-size: 2rem; line-height: 1.05; }
.access__card > span { font-size: 16px; font-weight: 600; white-space: nowrap; }
@media (min-width: 900px) { .access__card > span { font-size: 14px; } }
.access__btns { display: flex; gap: 8px; width: 100%; margin-top: 8px; }
.access__btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; border-radius: 14px; border: 2px solid var(--ciruela);
  font: 600 15px/1 var(--ff-body); font-style: normal;
}
.access__btn .i { width: 20px; height: 20px; stroke-width: 2; }
.access__btn--on { background: var(--ciruela); color: var(--marfil); }
.access__yes { display: block; width: 100%; margin-top: 4px; padding: 14px; border-radius: 14px; background: var(--terracota-profunda); color: #fff; font: 600 18px/1 var(--ff-body); font-style: normal; }
@media (min-width: 900px) { .access { margin-top: 0; } }

/* ---------- Diferencial: mensaje de voz por pase (fase B, §16.1) ---------- */
.tile--voice { background: var(--arena); border-color: transparent; }
.tile--voice .tile__body p b { color: var(--ciruela); font-weight: 600; }
.vmsg { display: flex; justify-content: center; margin-top: 18px; }
.vmsg__card {
  display: grid; gap: 4px; width: 100%; max-width: 310px; padding: 16px 16px 14px;
  border-radius: 20px; background: var(--ciruela); color: var(--marfil);
  border: 1px solid rgba(227, 178, 164, .3);
  box-shadow: 0 26px 46px -28px rgba(27, 22, 48, .6);
  transform: rotate(2deg); transition: transform .8s var(--ease-spring);
}
.tile--voice:hover .vmsg__card { transform: rotate(0) scale(1.02); }
.vmsg__card small { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--terracota-luz); }
.vmsg__card b { font-family: var(--ff-nombres); font-weight: 300; font-size: 1.6rem; line-height: 1.1; }
.vmsg__player { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: rgba(251, 246, 242, .08); }
.vmsg__play { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--terracota-luz); color: var(--ciruela-noche); }
.vmsg__play .i { width: 18px; height: 18px; margin-left: 2px; }
.vmsg__wave { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 3px; height: 28px; min-width: 0; }
.vmsg__wave i { flex: 0 1 3px; height: 45%; border-radius: 99px; background: var(--terracota-luz); opacity: .45; animation: vmsg-wave 1.2s ease-in-out infinite alternate; }
.vmsg__wave i:nth-child(-n+7) { opacity: 1; }
.vmsg__wave i:nth-child(3n) { height: 78%; animation-delay: -.4s; }
.vmsg__wave i:nth-child(4n+1) { height: 58%; animation-delay: -.8s; }
.vmsg__wave i:nth-child(5n+2) { height: 96%; }
.vmsg__wave i:nth-child(7n) { height: 32%; }
.vmsg__player em { font-style: normal; font-size: 12px; font-weight: 600; color: rgba(251, 246, 242, .8); font-variant-numeric: tabular-nums; }
.vmsg__from { margin-top: 6px; font-size: 12px; font-weight: 500; color: var(--malva); }
@keyframes vmsg-wave { from { transform: scaleY(.62); } to { transform: scaleY(1.12); } }
@media (min-width: 900px) { .vmsg { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .vmsg__wave i { animation: none; } .vmsg__card { transform: none; } }

/* ---------- Diferencial: modo «día del evento» (fase B tanda 2, §16.6) ---------- */
.tile--live { background: var(--arena); border-color: transparent; }
.tile--live .tile__body p b { color: var(--ciruela); font-weight: 600; }
.live { display: flex; justify-content: center; margin-top: 18px; }
.live__card {
  display: grid; gap: 8px; width: 100%; max-width: 310px; padding: 14px;
  border-radius: 20px; background: var(--ciruela); color: var(--marfil);
  border: 1px solid rgba(227, 178, 164, .32);
  box-shadow: 0 26px 46px -28px rgba(27, 22, 48, .6);
  transform: rotate(-2deg); transition: transform .8s var(--ease-spring);
}
.tile--live:hover .live__card { transform: rotate(0) scale(1.02); }
.live .i { width: 16px; height: 16px; }
.live__bar { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--terracota-luz); }
.live__bar span { margin-left: auto; letter-spacing: 0; text-transform: none; color: var(--malva); font-variant-numeric: tabular-nums; }
.live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--terracota-luz); box-shadow: 0 0 0 0 rgba(227, 178, 164, .6); animation: live-pulse 1.8s ease-out infinite; }
.live__now { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(251, 246, 242, .07); }
.live__now small { font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--terracota-luz); }
.live__now b { font-family: var(--ff-nombres); font-weight: 300; font-size: 1.35rem; line-height: 1.1; }
.live__now span { font-size: 12px; color: var(--malva); }
.live__ann { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--terracota-luz); color: var(--ciruela-noche); font-size: 12.5px; font-weight: 600; line-height: 1.25; }
.live__wifi { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(251, 246, 242, .14); font-size: 12.5px; font-weight: 600; }
.live__wifi span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live__wifi em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--terracota-luz); }
.live__home { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border-radius: 12px; background: rgba(143, 169, 139, .2); color: #B9D1B5; font-size: 13px; font-weight: 600; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 7px rgba(227, 178, 164, 0); } 100% { box-shadow: 0 0 0 0 rgba(227, 178, 164, 0); } }
@media (min-width: 900px) { .live { margin-top: 0; } }
@media (prefers-reduced-motion: reduce) { .live__dot { animation: none; } .live__card { transform: none; } }

/* ---------- Save the Date gratis (paso 3, §14.5): la muestra es papel, como el Save the Date real ---------- */
.std { overflow: clip; }
.std__grid { position: relative; display: grid; gap: 44px; }
.std__points { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.std__points li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.5; color: var(--ciruela-suave); }
.std__points b { color: var(--ciruela); }
.std__points .i { flex: none; width: 24px; height: 24px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--terracota-profunda); color: #fff; stroke-width: 2.4; }
.std__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.std__visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.std__visual::before {
  content: ''; position: absolute; z-index: 0; left: 50%; top: 42%;
  width: min(120%, 440px); aspect-ratio: 1; border-radius: 52% 48% 46% 54% / 48% 54% 46% 52%;
  background: var(--arena); transform: translate(-50%, -50%) rotate(8deg);
}
.stdcard {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px;
  width: 100%; max-width: 340px; padding: 26px 22px 18px;
  border-radius: 22px; text-align: center;
  background: #fff; color: var(--ciruela);
  border: 1px solid var(--line);
  box-shadow: 0 40px 70px -40px rgba(27, 22, 48, .55), 0 2px 0 rgba(27, 22, 48, .03);
  transform: rotate(-2deg); transition: transform .8s var(--ease-spring);
}
.std__visual:hover .stdcard { transform: rotate(0) scale(1.02); }
.stdcard__tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: var(--arena); color: var(--terracota-honda); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.stdcard__tag .i { width: 14px; height: 14px; }
.stdcard__names { margin-top: 10px; font-family: var(--ff-nombres); font-weight: 300; font-size: 2.4rem; line-height: 1; letter-spacing: -.01em; }
.stdcard__names em { color: var(--terracota); }
.stdcard__date { margin-top: 6px; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.stdcard__place { font-size: 13px; color: var(--ciruela-suave); }
.stdcard__count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; margin-top: 14px; }
.stdcard__count span { display: grid; gap: 2px; padding: 10px 4px; border-radius: 14px; background: var(--marfil); border: 1px solid var(--line); }
.stdcard__count b { font-family: var(--ff-display); font-weight: 400; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.stdcard__count small { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ciruela-suave); }
.stdcard__soon { margin: 14px 0 0; font-family: var(--ff-nombres); font-size: 1.1rem; color: var(--ciruela); }
.stdcard__soon .i { display: inline; width: 20px; height: 12px; color: var(--terracota); vertical-align: 0; }
.stdcard__acts { display: flex; gap: 8px; width: 100%; margin-top: 10px; }
.stdcard__acts i {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 0;
  min-height: 40px; padding: 0 8px; border-radius: 12px; border: 1px solid rgba(27, 22, 48, .16);
  font: 600 12.5px/1 var(--ff-body); font-style: normal; white-space: nowrap;
}
.stdcard__acts .i { width: 16px; height: 16px; }
/* Crédito con el logo micro (§20.8): mismo marcado que /brand/credito.css */
.stdcard__credit { margin-top: 12px; font-size: 12px; color: var(--ciruela-suave); }
.std__after {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 12px; max-width: 340px; padding: 12px 18px 12px 14px;
  border-radius: 18px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 40px -30px rgba(27, 22, 48, .5); font-size: 14px;
}
.std__after .i { width: 26px; height: 26px; color: var(--terracota); }
.std__after b { display: block; font-family: var(--ff-display); font-weight: 500; font-size: 1.05rem; line-height: 1.15; }
.std__after small { color: var(--ciruela-suave); font-size: 13px; }
@media (min-width: 1000px) {
  .std__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
}

/* ---------- Precios (ciruela) ---------- */
.pricing { overflow: clip; }
.pricing__bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pricing__hilo { left: 0; top: 8px; width: 100%; height: 60px; opacity: .55; }
@media (min-width: 900px) { .pricing__hilo { top: 14px; height: 90px; } }
.pricing .container { position: relative; }
.pricing__controls { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-bottom: 44px; }
.seg {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin: 0; padding: 5px; min-width: 0; max-width: 100%;
  border-radius: 26px; border: 1px solid rgba(251, 246, 242, .14);
  background: rgba(251, 246, 242, .06);
}
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: block; padding: 9px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: .05em;
  color: rgba(251, 246, 242, .76);
  transition: background-color .3s, color .3s;
}
.seg label:hover span { color: var(--marfil); }
.seg input:checked + span { background: var(--marfil); color: var(--ciruela); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14.5px; font-weight: 500; color: rgba(251, 246, 242, .88); }
.switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.switch__ui { position: relative; flex: none; width: 46px; height: 27px; border-radius: 99px; background: rgba(251, 246, 242, .2); transition: background-color .3s; }
.switch__ui::after {
  content: ''; position: absolute; left: 3px; top: 3px; width: 21px; height: 21px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  transition: transform .45s var(--ease-spring);
}
.switch input:checked + .switch__ui { background: var(--terracota-luz); }
.switch input:checked + .switch__ui::after { transform: translateX(19px); }
.switch input:focus-visible + .switch__ui { outline: 3px solid var(--focus); outline-offset: 3px; }
.switch__txt small { color: var(--malva); font-size: 13px; }

.plans { display: grid; gap: 22px; }
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 30px 24px 26px;
  border-radius: 28px;
  background: rgba(251, 246, 242, .045);
  border: 1px solid rgba(251, 246, 242, .12);
  color: var(--marfil);
  transition: transform .6s var(--ease-out), border-color .4s;
}
.plan:hover { border-color: rgba(251, 246, 242, .26); }
/* El recomendado: papel marfil sobre ciruela (se lee como «el elegido» sin brillos) */
.plan--featured {
  background: var(--marfil); color: var(--ciruela);
  border-color: transparent;
  box-shadow: 0 40px 90px -44px rgba(0, 0, 0, .7);
  --focus: var(--terracota);
}
.plan__badge {
  position: absolute; left: 50%; top: -15px; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 15px; border-radius: 99px; white-space: nowrap;
  background: var(--terracota-profunda); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: var(--sombra-boton);
}
.plan__badge .i { width: 18px; height: 11px; }
.plan__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: rgba(251, 246, 242, .08); color: var(--terracota-luz); }
.plan__icon .i { width: 22px; height: 22px; }
.plan--featured .plan__icon { background: var(--arena); color: var(--terracota-profunda); }
.plan__name { margin: 18px 0 2px; font-family: var(--ff-display); font-weight: 400; font-size: 2rem; line-height: 1.05; letter-spacing: -.01em; }
.plan__tag { margin: 0; font-size: 14.5px; color: var(--malva); }
.plan--featured .plan__tag { color: var(--ciruela-suave); }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }
.plan__amount {
  display: inline-block;
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(2.6rem, 2.1rem + 1.8vw, 3.3rem); line-height: 1; letter-spacing: -.025em;
  font-variant-numeric: lining-nums;
}
.plan__amount.is-changing { animation: price-flip .5s var(--ease-out); }
.plan--featured .plan__amount { color: var(--terracota-profunda); }
.plan__code { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--malva); }
.plan--featured .plan__code { color: var(--ciruela-suave); }
.plan__once { margin: 8px 0 0; font-size: 13px; font-weight: 500; color: var(--malva); }
.plan--featured .plan__once { color: var(--ciruela-suave); }
.plan__list {
  flex: 1; display: grid; align-content: start; gap: 11px;
  margin: 22px 0 26px; padding: 20px 0 0; list-style: none;
  border-top: 1px solid rgba(251, 246, 242, .12);
}
.plan--featured .plan__list { border-top-color: var(--line); }
.plan__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.42; color: rgba(251, 246, 242, .88); }
.plan--featured .plan__list li { color: var(--ciruela); }
.plan__list .i { width: 18px; height: 18px; margin-top: 1px; color: var(--terracota-luz); stroke-width: 2.2; }
.plan--featured .plan__list .i { color: var(--terracota-profunda); }
.plan__list .plan__all { font-weight: 600; color: var(--marfil); }
.plan--featured .plan__list .plan__all { color: var(--ciruela); }
/* La tarjeta destacada es clara dentro de la sección noche: su botón es el de acento sobre claro (kit v2:
   marfil sobre oro rosa profundo, 5,48:1), no el oro rosa luz de las superficies oscuras */
.section--dark .plan--featured .btn--primary { --bg: var(--terracota-profunda); --fg: var(--marfil); box-shadow: var(--sombra-boton); }
.section--dark .plan--featured .btn--primary:hover { --bg: var(--terracota-honda); }
.pricing__note { margin: 26px auto 0; max-width: 62ch; text-align: center; font-size: 14px; color: var(--malva); }
/* Nota del Save the Date gratis (§14.5) */
.pricing__note--std { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 12px; color: rgba(251, 246, 242, .82); }
.pricing__note--std .i--spark { flex: none; width: 20px; height: 12px; margin-top: 5px; color: var(--terracota-luz); }
.pricing__note--std b { color: var(--marfil); }
.pricing__note--std a { color: var(--terracota-luz); font-weight: 600; text-underline-offset: 3px; }
.addons-wrap { margin-top: 76px; }
.addons__title { margin: 0 0 24px; text-align: center; text-wrap: balance; font-family: var(--ff-display); font-weight: 300; font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); }
.addons__title em { color: var(--terracota-luz); }
.addons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.addon {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px 13px 13px; border-radius: 18px;
  background: rgba(251, 246, 242, .045); border: 1px solid rgba(251, 246, 242, .1);
  transition: background-color .3s, border-color .3s, transform .5s var(--ease-out);
}
.addon:hover { background: rgba(251, 246, 242, .07); border-color: rgba(227, 178, 164, .45); transform: translateY(-2px); }
.addon__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: rgba(227, 178, 164, .14); color: var(--terracota-luz); }
.addon__icon .i { width: 21px; height: 21px; }
.addon__name { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.addon__price { font-family: var(--ff-display); font-size: 1.15rem; white-space: nowrap; }
.addon__price small { font-family: var(--ff-body); font-size: 12px; color: var(--malva); }
/* Complemento que aún no se vende (Wallet): sin precio, con etiqueta honesta debajo del nombre */
.addon--soon .addon__icon { opacity: .72; }
.addon--soon .addon__name { color: rgba(251, 246, 242, .8); }
.addon__soon {
  display: block; width: fit-content; margin-top: 6px; padding: 4px 9px; border-radius: 99px;
  border: 1px solid rgba(227, 178, 164, .4); background: rgba(227, 178, 164, .1);
  color: var(--terracota-luz); font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.addons__note { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--malva); }
.guarantee {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: 840px; margin: 60px auto 0; padding: 26px 22px;
  border-radius: 26px; text-align: center;
  background: rgba(251, 246, 242, .05);
  border: 1px dashed rgba(227, 178, 164, .45);
}
/* El lacre de la marca sella la garantía */
.guarantee__seal { display: grid; place-items: center; flex: none; width: 76px; height: 76px; }
.guarantee__seal img { width: 76px; height: 76px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.guarantee h3 { margin: 0 0 6px; font-family: var(--ff-display); font-weight: 400; font-size: 1.6rem; }
.guarantee p { margin: 0; font-size: 14.5px; color: rgba(251, 246, 242, .8); }

@media (min-width: 640px) {
  .addons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guarantee { flex-direction: row; text-align: left; padding: 26px 30px; gap: 22px; }
}
@media (min-width: 1000px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .plan--featured { transform: translateY(-14px); padding-top: 38px; padding-bottom: 32px; }
}
/* 4 columnas solo con ancho de sobra: entre 1000 y 1199 px «agradecimiento» chocaba con su precio */
@media (min-width: 1200px) {
  .addons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Aliados ---------- */
.allies__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 30px;
  padding: 34px 22px; border-radius: 32px;
  background: var(--arena);
}
/* El hilo abraza la tarjeta: entra por abajo a la derecha y sube */
.allies__hilo { right: 0; bottom: 0; width: 70%; height: 60%; z-index: -1; opacity: .9; }
.allies__copy .lead { margin-left: 0; }
.allies__copy .h2 em { color: var(--terracota-honda); }
.allies__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.allies__who { position: relative; z-index: 1; display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.allies__who li {
  display: grid; grid-template-columns: 50px 1fr; column-gap: 14px; align-items: center;
  padding: 14px 16px 14px 14px; border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 30px -26px rgba(27, 22, 48, .6);
}
.allies__icon { grid-row: span 2; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; background: var(--ciruela); color: var(--terracota-luz); }
.allies__icon .i { width: 24px; height: 24px; }
.allies__who b { font-size: 15.5px; line-height: 1.3; }
.allies__who small { font-size: 13px; color: var(--ciruela-suave); }
@media (min-width: 1000px) {
  .allies__card { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; padding: 64px; align-items: center; }
}

/* ---------- Preguntas frecuentes ---------- */
.faq__grid { display: grid; gap: 36px; }
.faq__grid .section-head { margin-bottom: 0; }
.faq__grid .section-head .btn { margin-top: 26px; }
.faq__list { display: grid; gap: 10px; }
.qa { border-radius: 20px; background: #fff; border: 1px solid rgba(27, 22, 48, .07); transition: box-shadow .4s; }
.qa.is-open { box-shadow: 0 24px 44px -34px rgba(27, 22, 48, .5); }
.qa h3 { margin: 0; font: inherit; }
.qa__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 18px 18px 20px; border: 0; border-radius: 20px;
  background: none; cursor: pointer; text-align: left;
  font: 600 16px/1.35 var(--ff-body); color: var(--ciruela);
}
.qa__q .i {
  width: 32px; height: 32px; padding: 7px; border-radius: 50%;
  background: var(--arena); color: var(--ciruela);
  transition: transform .45s var(--ease-out), background-color .3s, color .3s;
}
.qa__q:hover .i { background: var(--lino); }
.qa__q[aria-expanded='true'] .i { transform: rotate(180deg); background: var(--terracota-profunda); color: #fff; }
.qa__a p { margin: 0; padding: 0 20px 20px; font-size: 15px; line-height: 1.62; color: var(--ciruela-suave); }
.js .qa__a {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .45s var(--ease-out), visibility 0s linear .45s;
}
.js .qa__a > div { overflow: hidden; }
.js .qa.is-open .qa__a { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .45s var(--ease-out), visibility 0s; }
@media (min-width: 1000px) {
  .faq__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; }
  .faq__grid .section-head { position: sticky; top: 110px; }
}

/* ---------- Contacto (ciruela) ---------- */
.contact { overflow: clip; }
.contact__bg { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.contact__hilo { display: none; left: 0; bottom: 0; width: 48%; height: 320px; opacity: .45; }
@media (min-width: 1024px) { .contact__hilo { display: block; } }
.contact__grid { position: relative; display: grid; gap: 44px; }
/* El lacre de la marca abre la invitación a escribirnos */
.contact__lacre { display: block; width: 64px; height: 64px; margin-bottom: 22px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.contact__copy .h2 { margin-top: 0; }
.contact__copy .lead { margin-left: 0; }
.contact__points { display: grid; gap: 10px; margin: 24px 0 30px; padding: 0; list-style: none; }
.contact__points li { display: flex; align-items: center; gap: 10px; color: rgba(251, 246, 242, .88); }
.contact__points .i { width: 20px; height: 20px; color: var(--terracota-luz); stroke-width: 2.2; }
.contact__panel {
  position: relative;
  padding: 26px 20px; border-radius: 28px;
  background: var(--ciruela-2);
  border: 1px solid rgba(251, 246, 242, .12);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
  color: var(--marfil);
  --terracota-luz: #EDC6BA; /* sobre ciruela-2 el acento de texto sube a terracota luz 2 (5,5:1) */
}
.lead-form { display: grid; gap: 16px; }
.lead-form__title { margin: 0 0 4px; font-family: var(--ff-display); font-weight: 400; font-size: 1.6rem; line-height: 1.15; }
.lead-form__submit { margin-top: 4px; }
.lead-form__submit .spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(27, 22, 48, .25); border-top-color: var(--ciruela-noche); animation: spin .8s linear infinite; }
.lead-form.is-sending .lead-form__submit { pointer-events: none; opacity: .85; }
.lead-form.is-sending .spinner { display: inline-block; }
.lead-form__status { margin: 0; font-size: 14px; font-weight: 500; }
.lead-form__status:empty { display: none; }
.lead-form__status.is-error { padding: 12px 14px; border-radius: 14px; background: rgba(227, 178, 164, .14); color: #F4A497; }
.lead-form__status a { color: var(--terracota-luz); font-weight: 600; }
.lead-form__legal { margin: 0; text-align: center; font-size: 12.5px; color: var(--malva); }
/* Turnstile: contenedor vacío e invisible hasta que Cloudflare pida interacción */
.lead-turnstile { display: flex; justify-content: center; max-width: 100%; overflow: hidden; }
.lead-turnstile:empty { display: none; }
.lead-turnstile > * { max-width: 100%; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-done { display: grid; justify-items: center; gap: 12px; padding: 30px 6px; text-align: center; outline: 0; }
.lead-done[hidden] { display: none; }
.lead-done__icon {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: var(--terracota-luz); color: var(--ciruela-noche);
  animation: pop .8s var(--ease-spring) both;
}
.lead-done__icon .i { width: 34px; height: 34px; stroke-width: 2.2; }
.lead-done__title { margin: 6px 0 0; font-family: var(--ff-display); font-weight: 400; font-size: 2rem; line-height: 1.1; }
.lead-done__txt { margin: 0 0 8px; max-width: 32ch; color: rgba(251, 246, 242, .8); }
@media (min-width: 1000px) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
  .contact__panel { padding: 36px; }
}

/* ---------- Footer (ciruela noche) ---------- */
.footer { position: relative; overflow: hidden; padding: 76px 0 0; background: var(--ciruela-noche); color: rgba(251, 246, 242, .74); border-top: 1px solid var(--line-dark); }
.footer__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; }
.footer__brand { grid-column: 1 / -1; }
/* Logo horizontal claro v2 (I y nombre marfil, hilo oro rosa luz, subtítulo lavanda) */
.footer__brand img { width: 270px; height: auto; aspect-ratio: 1033 / 231; } /* kit v2: horizontal con subtítulo desde 260 px */
/* Frase de cierre de la marca (kit v2): «Diseñamos momentos, creamos emociones» */
.footer__lema { margin: 18px 0 22px; font-family: var(--ff-display); font-weight: 300; font-size: 1.3rem; line-height: 1.35; color: var(--marfil); }
.footer__social { display: flex; flex-wrap: wrap; gap: 8px; }
.footer__social a {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(251, 246, 242, .18); color: var(--marfil);
  transition: background-color .3s, color .3s, transform .4s var(--ease-spring);
}
.footer__social a:hover { background: var(--marfil); color: var(--ciruela-noche); transform: translateY(-3px); }
.footer__social .i { width: 20px; height: 20px; }
.footer__lang { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--malva); }
.footer__col { display: flex; flex-direction: column; gap: 6px; }
.footer__h { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--terracota-luz); }
.footer__col a { padding: 5px 0; font-size: 14.5px; color: rgba(251, 246, 242, .76); text-decoration: none; transition: color .2s; }
.footer__col a:hover { color: var(--marfil); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--terracota-luz); }
.footer__bottom { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; margin-top: 56px; padding: 22px 0 110px; border-top: 1px solid rgba(251, 246, 242, .08); font-size: 13px; }
.footer__bottom p { margin: 0; }
/* Enlaces legales (§18.1): privacidad y términos */
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer__legal a { color: rgba(251, 246, 242, .76); text-decoration: none; transition: color .2s; }
.footer__legal a:hover { color: var(--marfil); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--terracota-luz); }
/* El hilo cruza el pie de borde a borde (manual §09: «acompaña una pieza de un borde al otro») */
.footer__hilo { left: 0; right: 0; bottom: 18px; width: 100%; height: 96px; opacity: .8; }
@media (min-width: 900px) {
  .footer__top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: auto; }
  .footer__bottom { padding-bottom: 140px; }
  .footer__hilo { height: 130px; }
}

/* ---------- WhatsApp flotante ---------- */
.wa-float {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 58px; height: 58px; border-radius: 999px;
  background: #25D366; color: #06301A; text-decoration: none;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 16px 30px -10px rgba(37, 211, 102, .6), 0 4px 12px rgba(0, 0, 0, .25);
  /* visibility: oculto también para el teclado (no queda un botón invisible enfocable) */
  transition: transform .5s var(--ease-spring), opacity .3s, box-shadow .3s, visibility .3s;
}
.wa-float::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: wa-ring 2.8s 2s ease-out infinite;
}
.wa-float .i { width: 28px; height: 28px; }
.wa-float__txt { display: none; }
.wa-float:hover { transform: translateY(-3px) scale(1.03); }
.wa-float.is-hidden { transform: translateY(140%) scale(.8); opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 900px) {
  .wa-float {
    width: auto; padding: 0 22px 0 15px; right: 24px; bottom: 24px;
    transition: transform .5s var(--ease-spring), opacity .3s, box-shadow .3s, visibility .3s, padding .5s var(--ease-out), gap .5s var(--ease-out);
  }
  /* Sobre el hero no aparece (ver initWaFloat en landing.js) */
  .wa-float.is-top { transform: translateY(140%) scale(.8); opacity: 0; visibility: hidden; pointer-events: none; }
  .wa-float__txt {
    display: inline-block; max-width: 190px; overflow: hidden; white-space: nowrap;
    transition: max-width .5s var(--ease-out), opacity .35s;
  }
  /* Al bajar se encoge a un círculo para no tapar contenido; se abre al pasar el cursor */
  .wa-float.is-compact:not(:hover):not(:focus-visible) { padding: 0 15px; gap: 0; }
  .wa-float.is-compact:not(:hover):not(:focus-visible) .wa-float__txt { max-width: 0; opacity: 0; }
}

/* ---------- Diálogo QR ---------- */
.qr-dialog {
  width: min(92vw, 380px); padding: 34px 28px 28px;
  border: 0; border-radius: 28px;
  background: var(--marfil); color: var(--ciruela); text-align: center;
  box-shadow: 0 60px 120px -30px rgba(0, 0, 0, .7);
}
.qr-dialog::backdrop { background: rgba(27, 22, 48, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qr-dialog[open] { animation: dialog-in .5s var(--ease-spring); }
.qr-dialog__close {
  position: absolute; right: 12px; top: 12px;
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: 50%; background: var(--arena); color: var(--ciruela); cursor: pointer;
}
.qr-dialog__close:hover { background: #E8DFD2; }
.qr-dialog__close .i { width: 20px; height: 20px; }
.qr-dialog__title { margin: 12px 0 18px; font-family: var(--ff-display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; }
.qr-dialog__code {
  position: relative; display: grid; place-items: center;
  width: 236px; height: 236px; margin: 0 auto; padding: 14px;
  border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -30px rgba(27, 22, 48, .5);
}
.qr-dialog__code canvas { width: 208px; height: 208px; image-rendering: pixelated; }
.qr-dialog__loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--ciruela-suave); }
.qr-dialog__loading[hidden] { display: none; }
.qr-dialog__hint { margin: 16px 0 6px; font-size: 14px; color: var(--ciruela-suave); }
.qr-dialog__url { margin: 0 0 16px; font: 12px/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--ciruela-suave); word-break: break-all; }

/* ---------- Efectos: confeti de papel al tocar un CTA (círculos en los colores de la marca) ---------- */
.fx { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.fx i {
  position: absolute; left: 0; top: 0;
  width: var(--sz, 10px); height: var(--sz, 10px); border-radius: 50%;
  margin: calc(var(--sz, 10px) / -2) 0 0 calc(var(--sz, 10px) / -2);
  background: var(--c, #B06E66);
  animation: fx-trail .85s var(--ease-out) forwards;
}
.fx i.is-burst { animation: fx-burst .8s var(--ease-out) forwards; }

/* ---------- Revelado al hacer scroll ---------- */
.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Animaciones ---------- */
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
  50% { opacity: var(--o, .9); transform: scale(1) rotate(45deg); }
}
@keyframes spark-spin { to { transform: rotate(360deg); } }
@keyframes spark-pulse {
  0%, 100% { transform: scale(.75) rotate(0deg); opacity: .75; }
  50% { transform: scale(1.1) rotate(90deg); opacity: 1; }
}
/* El hilo se dibuja (subrayado: clip-path; trazos SVG: stroke-dashoffset con pathLength=1) */
@keyframes hilo-dibuja { to { clip-path: inset(-10px -10px -10px -10px); } }
@keyframes drift-a { from { transform: translate(0, 0); } to { transform: translate(70px, 50px); } }
@keyframes drift-b { from { transform: translate(0, 0); } to { transform: translate(-60px, -40px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-ang { to { --ang: 360deg; } }
@keyframes load-dot { 0%, 100% { transform: scale(.5); opacity: .4; } 50% { transform: scale(1); opacity: 1; } }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
@keyframes wa-typing {
  0% { opacity: 0; transform: translateY(8px); }
  15%, 78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes pop-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes env-flap {
  0%, 38% { transform: rotateX(0deg); z-index: 5; }
  54% { z-index: 5; }
  55% { z-index: 1; }
  70%, 100% { transform: rotateX(180deg); z-index: 1; }
}
@keyframes env-card { 0%, 62% { transform: translateY(0); } 100% { transform: translateY(-84px); } }
@keyframes env-seal {
  0%, 26% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  31% { opacity: 1; transform: translate(-50%, -50%) scale(.88); }
  42%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); }
}
@keyframes env-caption { 0%, 30% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes tap {
  0%, 18% { opacity: 0; transform: scale(.4); }
  24% { opacity: 1; transform: scale(.75); }
  36%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes rsvp-btns { 0%, 44% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; transform: scale(.96); } }
@keyframes rsvp-done { 0%, 48% { opacity: 0; transform: translateY(20px) scale(.9); } 66%, 100% { opacity: 1; transform: none; } }
@keyframes burst {
  0%, 26% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0deg); }
  30% { opacity: 1; }
  60%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(140deg); }
}
@keyframes row-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes row-glow {
  0% { box-shadow: inset 0 0 0 1.5px #7FB07A, 0 0 0 0 rgba(127, 176, 122, .5); }
  60% { box-shadow: inset 0 0 0 1.5px #7FB07A, 0 0 0 10px rgba(127, 176, 122, 0); }
  100% { box-shadow: inset 0 0 0 1.5px #7FB07A; }
}
@keyframes count { from { --num: var(--from); } to { --num: var(--to); } }
@keyframes bar-grow { from { width: 70%; } to { width: 74%; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(30px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes icon-wiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg); } 100% { transform: none; } }
@keyframes speed-fill {
  0% { transform: scaleX(0); }
  30%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes price-flip { from { opacity: 0; transform: translateY(-12px); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(78, 122, 74, .55); } 70% { box-shadow: 0 0 0 8px rgba(78, 122, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(78, 122, 74, 0); } }
@keyframes wa-ring { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } }
@keyframes pop { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fx-trail {
  0% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 22px)) scale(.2) rotate(120deg); }
}
@keyframes fx-burst {
  0% { opacity: 1; transform: translate(var(--x), var(--y)) scale(.3) rotate(0deg); }
  100% { opacity: 0; transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) scale(1) rotate(160deg); }
}

/* ---------- Página 404 (/404.html): marfil, el hilo y el lacre de la marca como «0» ---------- */
.nf-page {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  background: var(--marfil);
  color: var(--ciruela);
}
.nf-top { position: relative; z-index: 5; }
.nf-top__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 72px; }
/* kit v2: el micro a 153 px (escalera 150–260) sin encogerse ni deformarse. Por debajo de 480 px el botón «Ver demos»
   de arriba se oculta (el mismo enlace está en el cuerpo) para que quepan el logo y los idiomas */
.nf-top__logo { flex: none; display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.nf-top__logo img { height: 33px; width: auto; max-width: none; aspect-ratio: 1203 / 260; }
@media (max-width: 479px) { .nf-top__end .btn { display: none; } }
.nf-top__end { display: flex; align-items: center; gap: 6px; }
.nf { position: relative; flex: 1; isolation: isolate; padding: 12px 0 64px; overflow: hidden; }
.nf__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.nf__hilo { left: 0; top: 40px; width: 100%; height: 130px; opacity: .9; }
@media (min-width: 900px) { .nf__hilo { top: 70px; height: 190px; } }
.nf__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf__code {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(7rem, 34vw, 14rem); line-height: .92; letter-spacing: -.04em;
  color: var(--ciruela);
  user-select: none;
}
.nf__digit { padding: 0 .05em; animation: nf-float 6.5s ease-in-out infinite; }
.nf__digit--b { animation-delay: -3.2s; }
/* El «0» es el lacre de la marca (marca/lacre) */
.nf__seal { display: grid; place-items: center; width: .74em; height: .74em; margin: 0 .03em; animation: nf-seal 7s ease-in-out infinite; }
.nf__seal img { width: 100%; height: 100%; filter: drop-shadow(0 .06em .08em rgba(42, 20, 24, .3)); }
.nf__eyebrow { margin-top: 26px; }
.nf__title {
  margin: 14px 0 0; max-width: 17ch;
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(2.2rem, 1.35rem + 3.6vw, 4rem); line-height: 1.04; letter-spacing: -.012em; text-wrap: balance;
}
.nf__lead {
  margin: 18px auto 0; max-width: 52ch;
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem); color: var(--ciruela-suave); text-wrap: pretty;
}
.nf__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; margin-top: 30px; }
.nf__ctas .btn { flex: 1 1 100%; }
.nf__links { width: 100%; max-width: 780px; margin-top: 56px; }
.nf__links-title { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terracota-honda); }
.nf__links ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; text-align: left; }
.nf__links a {
  display: flex; align-items: center; gap: 14px;
  min-height: 76px; padding: 14px 18px 14px 14px;
  border-radius: 20px; border: 1px solid var(--line);
  background: #fff;
  color: var(--ciruela); text-decoration: none;
  box-shadow: 0 16px 30px -28px rgba(27, 22, 48, .55);
  transition: border-color .3s, transform .4s var(--ease-spring), box-shadow .3s;
}
.nf__links a:hover { border-color: rgba(176, 110, 102, .5); transform: translateY(-2px); box-shadow: 0 22px 36px -26px rgba(27, 22, 48, .55); }
.nf__links a > span:nth-child(2) { flex: 1; min-width: 0; }
.nf__links b { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.nf__links small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--ciruela-suave); }
.nf__ico { display: grid; place-items: center; flex: 0 0 46px; height: 46px; border-radius: 15px; background: var(--arena); color: var(--terracota-profunda); }
.nf__ico .i { width: 22px; height: 22px; }
.nf__links a:hover .nf__ico .i { animation: icon-wiggle .6s var(--ease-out); }
.nf__go { width: 18px; height: 18px; color: rgba(27, 22, 48, .4); transition: transform .35s var(--ease-out), color .25s; }
.nf__links a:hover .nf__go { transform: translateX(4px); color: var(--terracota); }
.nf__help {
  display: flex; align-items: flex-start; gap: 14px;
  width: 100%; max-width: 780px; margin-top: 14px; padding: 18px 20px;
  border-radius: 20px; border: 1px dashed rgba(176, 110, 102, .5); background: rgba(243, 234, 227, .45);
  text-align: left; font-size: 14.5px; line-height: 1.6; color: var(--ciruela-suave);
}
.nf__help p { margin: 0; }
.nf__help b { color: var(--ciruela); }
.nf__help a { color: var(--terracota-honda); font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.nf__help a:hover { color: var(--ciruela); text-decoration-color: var(--terracota); }
.nf__help-ico { flex: 0 0 auto; margin-top: 1px; color: var(--terracota); }
.nf__help-ico .i { width: 22px; height: 22px; }
.nf__url {
  padding: 1px 7px; border-radius: 6px;
  background: #fff; color: var(--ciruela); border: 1px solid var(--line);
  font: 500 13px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace;
  overflow-wrap: anywhere;
}
.nf-foot { border-top: 1px solid var(--line); color: var(--ciruela-suave); font-size: 13px; }
.nf-foot__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 20px; padding: 20px 0 max(20px, env(safe-area-inset-bottom)); }
.nf-foot p { margin: 0; }
@media (min-width: 600px) {
  .nf__ctas .btn { flex: 0 0 auto; }
  .nf__links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .nf { padding-top: 24px; }
  .nf-top__inner { height: 84px; }
}
@keyframes nf-float { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-.045em) rotate(1deg); } }
@keyframes nf-seal { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-.05em); } }

/* =========================================================================
   Bloque B (§17): Pase Dorado, portadas de los demos nuevos, «Hazla tú» y testimonios
   ========================================================================= */

/* ---------- Franja del código de descuento (reemplaza al anuncio) ---------- */
.refbar {
  position: relative; z-index: 60;
  display: flex; align-items: center;
  background: var(--terracota-profunda);
  color: #fff;
  font-size: 13px; line-height: 1.35;
  --focus: var(--marfil);
}
.refbar__txt { flex: 1; min-width: 0; margin: 0; padding: 9px 4px 9px 16px; text-align: center; text-wrap: balance; }
.refbar .i--spark { display: inline-block; width: 20px; height: 12px; margin-right: 6px; vertical-align: 0; color: #fff; }
.refbar__code {
  padding: 1px 7px; border-radius: 6px;
  background: rgba(255, 255, 255, .14); border: 1px dashed rgba(255, 255, 255, .7);
  font-weight: 600; letter-spacing: .06em;
}
.refbar__from { display: none; }
.refbar__go {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; white-space: nowrap; vertical-align: bottom;
  color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.refbar__go .i { width: 15px; height: 15px; transition: transform .3s var(--ease-out); }
.refbar__go:hover .i { transform: translateX(3px); }
.refbar__close {
  flex: none; display: grid; place-items: center; width: 44px; height: 40px; margin-right: 4px;
  border: 0; border-radius: 12px; background: none; color: #fff; cursor: pointer;
}
.refbar__close:hover { background: rgba(255, 255, 255, .14); }
.refbar__close .i { width: 18px; height: 18px; }
@media (min-width: 600px) {
  .refbar__from { display: inline; }
  .refbar__txt { padding-left: 52px; }
}

/* Nota en precios */
.pricing__note--ref {
  display: flex; align-items: flex-start; justify-content: center; gap: 8px;
  width: fit-content; max-width: 100%; margin: 18px auto 0; padding: 10px 16px; border-radius: 14px;
  background: rgba(227, 178, 164, .12); border: 1px dashed rgba(227, 178, 164, .45);
  color: var(--marfil); text-align: left;
}
.pricing__note--ref .i--spark { flex: none; width: 20px; height: 12px; margin-top: 5px; color: var(--terracota-luz); }
.pricing__note--ref b { color: var(--terracota-luz); letter-spacing: .05em; }

/* «Hazla tú» en precios (§17.4) */
.pricing__self {
  display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px;
  max-width: 840px; margin: 34px auto 0; padding: 22px;
  border-radius: 24px; text-align: center;
  background: rgba(251, 246, 242, .045); border: 1px solid rgba(251, 246, 242, .12);
}
.pricing__self-icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: rgba(227, 178, 164, .14); color: var(--terracota-luz);
}
.pricing__self-icon .i { width: 22px; height: 22px; }
.pricing__self-txt { margin: 0; max-width: 46ch; font-size: 14.5px; color: rgba(251, 246, 242, .82); text-wrap: pretty; }
.pricing__self-txt b { color: var(--marfil); }
.pricing__self-btn { flex: 0 0 auto; }
@media (min-width: 760px) {
  .pricing__self { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: start; align-items: center; gap: 18px; padding: 18px 20px; text-align: left; }
}

/* Código en el formulario */
.lead-code__toggle {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin: -4px 0 -6px; padding: 6px 2px;
  border: 0; background: none; cursor: pointer;
  color: var(--terracota-luz); font: 600 14px/1.2 var(--ff-body);
  text-decoration: underline; text-decoration-color: rgba(227, 178, 164, .45); text-underline-offset: 4px;
}
.lead-code__toggle:hover { text-decoration-color: var(--terracota-luz); }
.lead-code__toggle .i { width: 18px; height: 18px; }
.lead-code input { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.lead-code input::placeholder { text-transform: none; letter-spacing: 0; }
.lead-code__msg { margin: 0; font-size: 13px; font-weight: 600; color: var(--malva); }
.lead-code__msg:empty { display: none; }
.lead-code__msg.is-ok { color: #B9D1B5; }
.lead-code__msg.is-warn { color: #F4A497; }

/* ---------- Portadas de los demos nuevos (§17.1) ---------- */
/* Black Card: boleto dorado con letras oscuras */
.cover--gala .art--ticket { background: linear-gradient(120deg, color-mix(in srgb, var(--c2), #000 8%), color-mix(in srgb, var(--c2), #fff 22%)); }
.cover--gala .art--ticket i:nth-child(1) { color: rgba(17, 24, 39, .72); }
.cover--gala .art--ticket i:nth-child(1)::before { content: 'NOCHE DE GALA'; }
.cover--gala .art--ticket i:nth-child(2) { color: #111827; font-size: 11cqw; }
.cover--gala .art--ticket i:nth-child(2)::before { content: 'BLACK'; }
.cover--gala .art--ticket i:nth-child(3) { border-left-color: rgba(17, 24, 39, .45); }
.cover--gala .art--ticket i:nth-child(3)::after { content: '◆'; color: #111827; }
/* Posada: noche de diciembre con estrellas cálidas en vez de galaxia */
.cover--posada {
  background:
    radial-gradient(1.4px 1.4px at 14% 20%, #FFF6E5 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 82% 14%, #FFF6E5 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 68% 36%, #FFE3A3 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 22% 64%, #FFF6E5 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 70%, #FFE3A3 50%, transparent 51%),
    radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--c3) 45%, transparent), transparent),
    radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--c2) 22%, transparent), transparent),
    var(--c1);
}
/* Día de Muertos: papel picado arriba y dos flores de cempasúchil en lugar de nubes */
.cover--muertos {
  background:
    radial-gradient(circle at 18% 78%, color-mix(in srgb, var(--c2) 30%, transparent) 0 6cqw, transparent 6.2cqw),
    radial-gradient(circle at 84% 86%, color-mix(in srgb, var(--c3) 26%, transparent) 0 5cqw, transparent 5.2cqw),
    linear-gradient(180deg, color-mix(in srgb, var(--c3) 16%, var(--c1)), var(--c1) 55%);
}
.cover--muertos::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14cqw;
  background:
    conic-gradient(from -45deg at 50% 100%, transparent 0 25%, var(--c1) 0 75%, transparent 0) 0 100% / 8cqw 4cqw repeat-x,
    linear-gradient(90deg, var(--c2) 0 33.3%, var(--c3) 0 66.6%, #8E4CC7 0) 0 0 / 24cqw 100%;
  opacity: .92;
}
.cover--muertos .art--confetti i { display: none; }
.cover--muertos .art--confetti::before, .cover--muertos .art--confetti::after {
  top: 6cqw; width: 20cqw; height: 20cqw; border-radius: 50%; transform: none; box-shadow: none;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--c2), #000 28%) 0 18%, transparent 19%),
    repeating-conic-gradient(var(--c2) 0 10deg, color-mix(in srgb, var(--c2), #fff 25%) 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 66%, transparent 67%);
  mask: radial-gradient(circle, #000 66%, transparent 67%);
}
.cover--muertos .art--confetti::before { left: 10cqw; }
.cover--muertos .art--confetti::after { right: 10cqw; top: 12cqw; width: 16cqw; height: 16cqw; }
/* Editorial: telón negro liso y angosto, tipografía de revista */
.cover--editorial .art--curtain::before { display: none; }
.cover--editorial .art--curtain i:nth-child(1), .cover--editorial .art--curtain i:nth-child(2) {
  width: 22%; box-shadow: none;
  background: linear-gradient(90deg, #0E0E0E, #2B2B2B 55%, #121212);
}
.cover--editorial .art--curtain i:nth-child(1) { clip-path: polygon(0 0, 100% 0, 70% 60%, 88% 100%, 0 100%); }
.cover--editorial .art--curtain i:nth-child(2) { clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 30% 60%); }
.cover--editorial .art--curtain i:nth-child(3) { height: 4%; background: #111; filter: none; }
.cover--editorial .cover__title { font-style: normal; font-weight: 300; letter-spacing: -.02em; }
.cover--editorial .cover__eyebrow { color: color-mix(in srgb, var(--c3), #000 30%); letter-spacing: .2em; }

/* ---------- Testimonios (§17.5) ---------- */
.testi__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.testi__card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px 22px; border-radius: 24px;
  background: var(--marfil); border: 1px solid var(--line);
  box-shadow: 0 18px 40px -30px rgba(27, 22, 48, .45);
}
.testi__stars { display: flex; gap: 3px; margin: 0; font-size: 16px; line-height: 1; color: rgba(27, 22, 48, .18); }
.testi__stars .is-on { color: var(--terracota); }
.testi__quote { position: relative; flex: 1; margin: 0; padding-top: 26px; }
.testi__quote::before {
  content: '“'; position: absolute; left: -2px; top: -14px;
  font: 400 64px/1 var(--ff-display); color: var(--terracota);
}
.testi__quote p { margin: 0; font-family: var(--ff-display); font-weight: 300; font-size: 1.12rem; line-height: 1.5; color: var(--ciruela); text-wrap: pretty; }
.testi__who { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.testi__photo, .testi__avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; }
.testi__photo { object-fit: cover; background: var(--arena); }
.testi__avatar { display: grid; place-items: center; background: var(--ciruela); color: var(--terracota-luz); font-weight: 600; font-size: 15px; }
.testi__id { display: grid; min-width: 0; }
.testi__name { font-weight: 600; }
.testi__meta { font-size: 13px; color: var(--ciruela-suave); }
@media (min-width: 760px) {
  .testi__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .testi__list[data-count='1'] { grid-template-columns: minmax(0, 640px); justify-content: center; }
}
@media (min-width: 1100px) {
  .testi__list[data-count='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .tw { animation: none !important; opacity: calc(var(--o, .8) * .7); }
  .marquee__track { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .fx { display: none; }
}