/* landing.css — la página pública de Invitamía: el Apple de las fiestas.
   ─────────────────────────────────────────────────────────────────────────────
   Leo, 26-sep-2026 (con Rodrigo): "la página tiene un diseño espectacular, pero es muy
   tecnológico y no es tan boda, eventos, tan cálido… que sea blanco y muy colorido con ese tipo
   de letra… que sea Apple, pero súper colorido. Un Apple de web de eventos, literalmente… que se
   vea feliz, animaciones, fotos, colores cálidos, los verdes". Y: "no cualquier sitio hecho en
   Canva, realmente algo difícil, brutalmente moderno, poderoso".

   Antes (23-sep) era negra, como la página del iPhone 18 Pro. Ahora es la de apple.com en claro
   (iphone-duo: blanco, gris perla, titulares enormes, mosaicos redondeados, teléfonos en abanico,
   galería que avanza sola, píldoras con "+") y el brillo de los logos de sus keynotes. Se imitó el
   LENGUAJE, medido; nada de su código, sus textos ni sus imágenes. La especificación: app/DISENO.md.

     · Fondo blanco, secciones alternas en perla. Titulares en Inter 600 con tracking negativo.
     · El párrafo en gris con las frases importantes en --texto y 600: el recurso de Apple.
     · Una palabra por titular en .degradado (naranja → rosa → morado → azul).
     · Los nueve colores de la fiesta, cada uno en vivo (relleno), tinta (texto) y tinte (fondo).
     · Fotos: TODAS las de las invitaciones de ejemplo, que llegan de /api/publico. Aquí no se
       escribe ninguna dirección de foto.
     · Lo que se mueve (manchas de luz, teléfonos, sobre, franjas) se apaga con
       prefers-reduced-motion, al final de esta hoja.

   ⚠️ Los colores viven SOLO en :root (pruebas/casos/landing.js truena si aparece uno suelto en una
   regla). Y nada de estilos en línea: la CSP es style-src 'self'. Para variar un color por
   tarjeta se usan clases que apuntan a variables de aquí.
   ───────────────────────────────────────────────────────────────────────────── */

/* ⚠️ D36 · VA PRIMERO Y NO SE BORRA. */
[hidden] { display: none !important; }

/* El color de las manchas del explorador cambia con la píldora abierta: registrada, la variable
   se puede animar (sin esto, el degradado salta de un color a otro). */
@property --luz-explorador {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

:root {
  color-scheme: light;

  /* ── la base: Apple, en claro. Contraste medido el 26-sep-2026 (WCAG):
       --texto          s/ blanco 16.8 · s/ perla 15.5 · s/ cualquier tinte 14.8 o más
       --texto-2        s/ blanco 5.1 · s/ perla 4.7. NO va sobre un tinte (morado 4.45).
       --texto-2-tinte  el gris del párrafo SOBRE UN TINTE: 5.9 o más en los nueve.
       --texto-3        s/ blanco 3.6: SOLO marcadores y lo tachado de las maquetas.
       --enlace         s/ blanco 5.6 · s/ perla 5.1
       blanco s/ --azul 4.7 · s/ --azul-hover 5.3 (el #0077ed de apple.com da 4.3: no pasa). */
  --fondo:          #ffffff;
  --fondo-0:        rgba(255, 255, 255, 0);   /* el mismo blanco, sin nada: a lo que se difumina la franja del teléfono */
  --perla:          #f5f5f7;
  --perla-2:        #e8e8ed;
  --texto:          #1d1d1f;
  --texto-2:        #6e6e73;
  --texto-2-tinte:  #5b5b60;
  --texto-3:        #86868b;
  --gris-sobre-negro: #a1a1a6;   /* SOLO sobre --texto (la tarjeta del plan Personalizado): 6.5 */
  --linea:          rgba(0, 0, 0, .08);
  --linea-2:        rgba(0, 0, 0, .14);
  --azul:           #0071e3;
  --azul-hover:     #0068d6;
  --enlace:         #0066cc;
  --blanco:         #ffffff;
  --seleccion:      #b4d5fe;          /* --texto encima: 11.7 */

  /* ── los nueve colores de la fiesta (DISENO.md). Tinta sobre blanco / su tinte / perla:
       rosa 5.9/5.3/5.4 · coral 5.7/5.2/5.2 · naranja 5.5/5.1/5.1 · amarillo 5.9/5.6/5.4 ·
       verde 5.4/5.0/5.0 · menta 5.6/5.1/5.2 · cielo 5.8/5.2/5.3 · azul 6.5/5.8/6.0 ·
       morado 6.6/5.8/6.1. El VIVO nunca es texto chico: rellenos, íconos, puntos y brillos.
       --texto sobre cada vivo (el número o el símbolo dentro de un círculo de color):
       amarillo 11.1 · cielo 8.9 · menta 7.9 · naranja 7.7 · verde 7.6 · coral 6.0 · rosa 4.6 ·
       azul 4.2 · morado 4.1 (esos dos, solo símbolos, que piden 3:1). */
  --rosa-vivo:     #ff2d55;  --rosa-tinta:     #c8102e;  --rosa-tinte:     #fff0f3;
  --coral-vivo:    #ff6b4a;  --coral-tinta:    #b93a1c;  --coral-tinte:    #fff2ee;
  --naranja-vivo:  #ff9500;  --naranja-tinta:  #b64400;  --naranja-tinte:  #fff5e8;
  --amarillo-vivo: #ffcc00;  --amarillo-tinta: #8a5a00;  --amarillo-tinte: #fff9db;
  --verde-vivo:    #34c759;  --verde-tinta:    #1f7a36;  --verde-tinte:    #ebfaef;
  --menta-vivo:    #00c7be;  --menta-tinta:    #0a7470;  --menta-tinte:    #e5f8f7;
  --cielo-vivo:    #5ac8fa;  --cielo-tinta:    #006c9e;  --cielo-tinte:    #e8f6fe;
  --azul-vivo:     #007aff;  --azul-tinta:     #0058c7;  --azul-tinte:     #eaf2ff;
  --morado-vivo:   #af52de;  --morado-tinta:   #8a2fb8;  --morado-tinte:   #f6edfc;
  --azul-tinte-2:  #dde9ff;          /* el botón teñido al pasar encima: azul tinta encima 5.3 */

  /* ── el brillo de keynote. En texto va SOLO en titulares de 40 px o más, que piden 3:1, y
       cada parada lo cumple sobre blanco y sobre perla:
         #f45d01 3.3 / 3.0 · rosa 3.7 / 3.4 · morado 4.1 / 3.8 · azul 4.0 / 3.7.
       El naranja vivo (#ff9500) daba 2.2: por eso el de texto arranca en un naranja más hondo. */
  --degradado-naranja: #f45d01;
  --degradado:        linear-gradient(90deg, var(--degradado-naranja), var(--rosa-vivo) 36%, var(--morado-vivo) 68%, var(--azul-vivo));
  --degradado-borde:  linear-gradient(120deg, var(--amarillo-vivo), var(--naranja-vivo) 22%, var(--rosa-vivo) 46%, var(--morado-vivo) 72%, var(--azul-vivo));
  --degradado-icono:  linear-gradient(135deg, var(--naranja-vivo), var(--rosa-vivo) 48%, var(--morado-vivo));
  --degradado-onda:   linear-gradient(0deg, var(--rosa-vivo), var(--naranja-vivo) 60%, var(--amarillo-vivo));

  /* ── las luces: los vivos, transparentes. En su punto más fuerte, sobre blanco o perla,
       --texto sigue en 8.6 o más: por eso lo que va encima de una luz va en --texto.
       Medido en la captura, contra el fondo de verdad (26-sep, 390 y 1440 px): el párrafo de la
       portada en --texto-2-tinte 6.5 o más · el de las cifras 5.2 · el de las láminas 6.2 · los
       avisos junto a los teléfonos 5.6 · el cierre, en --texto, 10.3 (en gris daba 3.1). */
  --luz-amarillo: rgba(255, 204, 0, .5);
  --luz-naranja:  rgba(255, 149, 0, .45);
  --luz-coral:    rgba(255, 107, 74, .4);
  --luz-rosa:     rgba(255, 45, 85, .4);
  --luz-morado:   rgba(175, 82, 222, .4);
  --luz-azul:     rgba(0, 122, 255, .35);
  --luz-cielo:    rgba(90, 200, 250, .45);
  --luz-menta:    rgba(0, 199, 190, .4);
  --luz-verde:    rgba(52, 199, 89, .4);

  /* ── vidrio, velos y sombras */
  --vidrio:          rgba(255, 255, 255, .72);    /* la barra de arriba y la de abajo */
  --vidrio-fuerte:   rgba(255, 255, 255, .88);    /* encima, el gris va en --texto-2-tinte: 5.1 aun
                                                     con una foto negra debajo (--texto-2 daba 3.8) */
  --vidrio-perla:    rgba(232, 232, 237, .78);    /* los puntitos y la pausa de la galería */
  --vidrio-foto:     rgba(255, 255, 255, .2);     /* las cajitas de la cuenta, encima de la foto */
  --oscurecer:       rgba(0, 0, 0, .05);
  --azul-anillo:     rgba(0, 113, 227, .2);
  --punto:           rgba(0, 0, 0, .28);
  --punto-activo:    rgba(0, 0, 0, .14);
  --sombra-suave:    0 2px 6px rgba(0, 0, 0, .04), 0 10px 28px rgba(0, 0, 0, .06);
  --sombra-tarjeta:  0 18px 40px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .04);
  --sombra-flota:    0 30px 70px rgba(0, 0, 0, .14), 0 6px 16px rgba(0, 0, 0, .06);
  --sombra-elegido:  0 3px 10px rgba(0, 0, 0, .12);
  /* La del teléfono del formulario en el celular: corta, que no se salga de su franja (la grande, --sombra-tel, bajaba
     140 px y dejaba una mancha gris encima de la pregunta al bajar; 28-sep-2026). */
  --sombra-tel-chica: 0 12px 24px -10px rgba(29, 29, 31, .38), 0 2px 6px rgba(29, 29, 31, .12);
  --sombra-tel:      0 50px 90px rgba(29, 29, 31, .22), 0 12px 28px rgba(29, 29, 31, .14);
  --sombra-foto:     0 22px 44px rgba(0, 0, 0, .18);
  /* Texto claro encima de una foto: el velo llega a .76 abajo, donde va el texto. Con la foto
     más clara posible (blanca), el blanco encima queda en 4.7 o más donde empieza el texto
     chico, y la sombra lo separa aun más. */
  --sobre-foto:      #ffffff;
  --sobre-foto-2:    rgba(255, 255, 255, .92);
  --velo-foto:       linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .38) 64%, rgba(0, 0, 0, .76) 100%);
  --sombra-texto-foto: 0 1px 14px rgba(0, 0, 0, .45);
  /* En las tarjetas de ejemplo el texto ocupa casi la mitad de abajo (en el teléfono son de
     170 px): el velo empieza antes y llega a .84. */
  --velo-tarjeta:    linear-gradient(180deg, rgba(0, 0, 0, .24) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, .1) 32%, rgba(0, 0, 0, .56) 56%, rgba(0, 0, 0, .86) 100%);

  /* ── el teléfono (maqueta): marco de titanio claro, bisel negro, isla */
  --tel-metal:  linear-gradient(150deg, #fbfbfd 0%, #d4d6db 24%, #f3f4f6 50%, #b3b7bf 100%);
  --tel-bisel:  #0b0b0c;
  --tel-isla:   #000000;
  --tel-vacio:  linear-gradient(160deg, var(--amarillo-tinte), var(--rosa-tinte) 42%, var(--morado-tinte) 72%, var(--cielo-tinte));
  --tel-brillo: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .22) 48%, rgba(255, 255, 255, 0) 58%);

  /* ── el papel de las maquetas de invitación (la estética de la INVITACIÓN, no la de la
       plataforma: ahí manda la fiesta del cliente). Sobre papel: tinta 14.0 · tinta-2 5.1 ·
       oro 5.2 (el oro de la invitación, #9a7b4f, da 3.7: aquí va uno más hondo porque escribe
       los títulos chicos). Las iniciales del lacre, --sobre-letra, 5.5 en el centro del sello. */
  --papel:        #fbf8f2;
  --papel-tinta:  #2b2723;
  --papel-tinta-2:#6f6a62;
  --papel-oro:    #80643c;
  --papel-linea:  rgba(43, 39, 35, .14);
  --sobre-papel:  #fffdf9;
  --sobre-pliegue:#f4eee4;
  --sobre-lados:  linear-gradient(90deg, #f3ebdf, #fbf6ee 45%, #fbf6ee 55%, #f3ebdf);
  --sobre-abajo:  linear-gradient(180deg, #efe6d7, #fffdf9 38%);
  --sobre-forro:  linear-gradient(160deg, var(--amarillo-vivo), var(--naranja-vivo));
  --sombra-sobre: rgba(120, 60, 40, .28);
  --sobre-solapa: linear-gradient(170deg, var(--coral-vivo), var(--rosa-vivo));
  --sobre-sello:  radial-gradient(circle at 32% 28%, #ffe7a3, #f0b545 50%, #b9801d);
  --sobre-letra:  #5c3a05;
  --mapa-fondo:   #eef4ea;
  --mapa-calle:   #ffffff;
  --mapa-parque:  #d8efd5;

  /* ── íconos dibujados aquí (no cargan nada de fuera) */
  --palomita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231d1d1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icono-abrir: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 11L11 5M6 5h5v5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icono-pausa: linear-gradient(90deg, #1d1d1f 0 36%, transparent 36% 64%, #1d1d1f 64%);
  --mascara-orilla: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

  /* ── tipografía y movimiento: los mismos del panel (app.css) */
  --fuente:  'Inter', 'SF Pro Display', 'SF Pro Text', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Cormorant Garamond', Georgia, serif;
  --script:  'Pinyon Script', 'Snell Roundhand', cursive;
  --curva:   cubic-bezier(.4, 0, .6, 1);
  --suave:   cubic-bezier(.22, .61, .36, 1);

  /* ── el ritmo */
  --radio:        28px;
  --radio-lista:  18px;
  --radio-campo:  12px;
  --ancho:        980px;
  --ancho-2:      1200px;
  --gutter:       20px;
}

* { box-sizing: border-box; }
/* Lo que se sale de lado se RECORTA, no solo se esconde: con overflow-x: hidden la página seguía midiendo lo que se salía
   y en el celular se arrastraba de lado. "clip" en la raíz (a la ventana le llega hidden) y en el cuerpo (recorta sin
   volverse una caja que se desplaza: la barra pegajosa sigue pegándose). El hidden se queda para el navegador sin clip. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 68px; overflow-x: clip; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--fuente); font-size: 17px; font-weight: 400; line-height: 1.47;
  letter-spacing: -0.012em;
  overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';   /* la 'a' y la 'l' de Inter que más se parecen a SF */
}
img { max-width: 100%; display: block; }
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; }
strong, b { font-weight: 600; }
::selection { background: var(--seleccion); color: var(--texto); }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 8px; }
main { display: block; }

.envoltura   { max-width: var(--ancho);   margin: 0 auto; padding-inline: var(--gutter); }
.envoltura-2 { max-width: var(--ancho-2); margin: 0 auto; padding-inline: var(--gutter); }

/* "Ir al contenido": invisible hasta que llega el teclado. */
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 980px;
          background: var(--texto); color: var(--blanco); font-size: 15px; transition: top .2s var(--curva); }
.saltar:focus { top: 12px; text-decoration: none; }

/* ═══════════════════════════════════ la cabecera fija: el descuento y la barra de arriba, pegados siempre (Rod, 1-oct-2026:
   *"el descuento tiene que quedarse pegado siempre"*). La que se pega es la cabecera entera, no cada una. */
.cabecera { position: sticky; top: 0; z-index: 60; }
/* Con el descuento a la vista, la cabecera es más alta: los saltos a una sección (#precios) se paran debajo de ella. */
html.con-promo { scroll-padding-top: 112px; }
@media (max-width: 733px) { html.con-promo { scroll-padding-top: 124px; } }

/* ═══════════════════════════════════ la barra de arriba (la de apple.com, en blanco) */
.barra {
  position: relative;
  background: var(--vidrio); border-bottom: 1px solid var(--linea);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.barra-dentro { max-width: var(--ancho-2); height: 52px; margin: 0 auto; padding-inline: var(--gutter);
                display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* El logotipo del dueño (marca/invitamia-1080.png): INVITAMIA en Montserrat SemiBold, en
   mayúsculas y con espaciado de .19em. MEDIDO contra el PNG. En el HTML va "Invitamia" y el CSS
   lo sube. */
.marca {
  font-family: 'Montserrat', var(--fuente); font-size: 15px; font-weight: 600; line-height: 1;
  letter-spacing: .19em; text-transform: uppercase; color: var(--texto); white-space: nowrap;
}
.marca:hover { text-decoration: none; }
.barra-links { display: none; gap: 30px; list-style: none; margin: 0; padding: 0; }
.barra-links a, .barra-entrar { font-size: 14px; color: var(--texto); opacity: .82; transition: opacity .3s var(--curva); }
.barra-links a:hover, .barra-entrar:hover { opacity: 1; text-decoration: none; }
.barra-acciones { display: flex; gap: 16px; align-items: center; }
/* En menos de 360 px no cabía: marca, "Entrar" y "Crea tu invitación" medían 341 en un iPhone SE de 320, y la página
   entera se podía arrastrar de lado (revisar_ancho.mjs, 28-sep-2026). Se le quita aire a la barra, no a la marca: su
   espaciado ES el logotipo. */
@media (max-width: 359px) {
  .barra-dentro { padding-inline: 16px; gap: 10px; }
  .barra-acciones { gap: 12px; }
  .barra .boton.chico { font-size: 13px; padding-inline: 12px; }
}

/* ═══════════════════════════════════ botones en píldora */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font: 400 17px/1.18 var(--fuente); letter-spacing: -0.012em;
  padding: 12px 22px; border-radius: 980px; border: 0;
  background: var(--azul); color: var(--blanco); cursor: pointer; text-align: center; white-space: nowrap;
  transition: background-color .3s var(--curva), transform .2s var(--curva), color .3s var(--curva);
}
.boton:hover { background: var(--azul-hover); text-decoration: none; }
.boton:active { transform: scale(.97); }
.boton.chico { font-size: 14px; padding: 8px 15px; }
.boton.grande { padding: 16px 30px; }
/* El teñido: azul tinta sobre su tinte (5.8; al pasar encima, 5.3). */
.boton.tenido { background: var(--azul-tinte); color: var(--azul-tinta); }
.boton.tenido:hover { background: var(--azul-tinte-2); }
.boton[aria-disabled="true"], .boton:disabled { background: var(--perla-2); color: var(--texto-2-tinte); cursor: default; }

/* El enlace con flecha: "Más información ›" */
.enlace-flecha { font-size: 19px; color: var(--enlace); display: inline-flex; gap: .25em; align-items: center; }
.enlace-flecha::after { content: '›'; font-size: 1.15em; line-height: 1; transition: transform .3s var(--curva); }
.enlace-flecha:hover::after { transform: translateX(3px); }

/* ═══════════════════════════════════ tipografía de sección */
.eyebrow { font-size: 17px; font-weight: 600; color: var(--texto); margin: 0 0 10px; letter-spacing: -0.01em; }
/* El antetítulo en la tinta de la sección: el color sin gritar. */
.e-naranja { color: var(--naranja-tinta); }
.e-morado  { color: var(--morado-tinta); }
.e-rosa    { color: var(--rosa-tinta); }
.e-verde   { color: var(--verde-tinta); }
.e-azul    { color: var(--azul-tinta); }
.e-coral   { color: var(--coral-tinta); }
.titular {
  font-size: clamp(46px, 8.2vw, 96px); font-weight: 600; line-height: 1.03; letter-spacing: -0.034em;
  color: var(--texto); margin: 0; text-wrap: balance;
}
.titulo {
  font-size: clamp(34px, 5.4vw, 64px); font-weight: 600; line-height: 1.06; letter-spacing: -0.03em;
  color: var(--texto); margin: 0; text-wrap: balance;
}
.subtitulo { font-size: clamp(26px, 3.2vw, 36px); font-weight: 600; line-height: 1.12; letter-spacing: -0.024em;
             color: var(--texto); margin: 0; text-wrap: balance; }
/* El párrafo gris con las frases en --texto metidas en medio: el recurso más de Apple. */
.cuerpo {
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 400; line-height: 1.43; letter-spacing: -0.012em;
  color: var(--texto-2); margin: 20px 0 0; max-width: 40em; text-wrap: pretty;
}
.cuerpo strong { color: var(--texto); font-weight: 600; }
.centro { text-align: center; }
.centro .cuerpo { margin-inline: auto; }
/* El brillo de keynote: una palabra por titular. Medido arriba, en :root. */
.degradado {
  background: var(--degradado); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-bottom: .06em;   /* la "g" y la "y" no se cortan */
}

/* Lo que se asoma de más (la luz del explorador) se recorta en la orilla de la sección: si no,
   la página entera se hace más ancha que el teléfono y se puede deslizar de lado. */
.seccion { padding: 88px 0; position: relative; overflow-x: hidden; overflow-x: clip; }
.seccion.gris { background: var(--perla); }
/* Dos secciones blancas seguidas (Ejemplos y Tu panel) sumaban los dos rellenos: 176 px de blanco en el celular, el doble
   que entre las demás, donde el cambio de fondo ya las separa (visto en el celular, 29-sep-2026). La segunda no lleva. */
.seccion:not(.gris) + .seccion:not(.gris) { padding-top: 0; }

/* ═══════════════════════════════════ las manchas de luz (keynote)
   Degradados de los vivos que flotan despacio detrás de la portada y del cierre. Cada una
   escoge su color con una clase; el color vive en :root. */
.luces { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.luz {
  position: absolute; width: 58vmax; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at center, var(--luz-c) 0%, transparent 66%);
  transform: translate(-50%, -50%);
  animation: flotar 14s var(--curva) infinite alternate; will-change: transform;
}
@keyframes flotar {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(calc(-50% + var(--dx, 6%)), calc(-50% + var(--dy, -5%))) scale(1.14); }
}

/* ═══════════════════════════════════ la portada */
.portada { position: relative; overflow: hidden; text-align: center; padding: 52px 0 0; }
.portada .luz-1 { --luz-c: var(--luz-amarillo); left: 12%; top: 58%; --dx: 8%;  --dy: -6%; }
.portada .luz-2 { --luz-c: var(--luz-rosa);     left: 50%; top: 70%; --dx: -5%; --dy: 5%;  animation-duration: 17s; }
.portada .luz-3 { --luz-c: var(--luz-morado);   left: 88%; top: 60%; --dx: -7%; --dy: -4%; animation-duration: 15s; }
.portada .luz-4 { --luz-c: var(--luz-cielo);    left: 30%; top: 96%; --dx: 6%;  --dy: -8%; animation-duration: 19s; }
.portada .luz-5 { --luz-c: var(--luz-menta);    left: 76%; top: 100%; --dx: -4%; --dy: -7%; animation-duration: 16s; }
.portada-texto { position: relative; z-index: 2; }
.portada .eyebrow { font-size: clamp(19px, 2.2vw, 24px); margin-bottom: 6px; }
.portada .titular { max-width: 11.5ch; margin-inline: auto; }
/* Encima de las luces el gris va más hondo: --texto-2 bajaba a 4.4 cuando una luz se acercaba
   al párrafo (medido en la captura, no a ojo); --texto-2-tinte queda en 5.8 o más. */
.portada .cuerpo { margin-inline: auto; max-width: 34em; color: var(--texto-2-tinte); }
.portada-precio { margin: 22px 0 0; font-size: 17px; color: var(--texto); }
.portada-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }

/* ── el abanico de teléfonos: portadas de invitaciones DE VERDAD */
.abanico { position: relative; z-index: 1; height: clamp(360px, 44vw, 600px); margin: 40px auto 0; max-width: 1180px; }
.tel {
  --ancho: clamp(172px, 19.5vw, 272px);
  display: block; width: var(--ancho); aspect-ratio: 9 / 19.2; container-type: inline-size;
  color: var(--sobre-foto); text-decoration: none;
}
.tel:hover { text-decoration: none; }
.abanico .tel {
  position: absolute; left: 50%; top: 0; margin-left: calc(var(--ancho) / -2);
  transform: translateX(var(--x, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transform-origin: 50% 100%;
  /* "backwards" y no "both": con "both", la llegada ya terminada se quedaba encima del transform
     y el teléfono saltaba al pasar el ratón en vez de asomarse despacio. */
  animation: tel-llega 1.2s var(--suave) backwards; animation-delay: var(--espera, 0s);
  transition: transform .6s var(--suave);
}
.abanico .pos-centro { --x: 0%;    --r: 0deg;   --s: 1;   z-index: 5; --espera: .05s; }
.abanico .pos-izq    { --x: -66%;  --r: -8deg;  --s: .9;  z-index: 4; --espera: .2s; }
.abanico .pos-der    { --x: 66%;   --r: 8deg;   --s: .9;  z-index: 4; --espera: .2s; }
.abanico .pos-izq-2  { --x: -124%; --r: -15deg; --s: .8;  z-index: 3; --espera: .35s; }
.abanico .pos-der-2  { --x: 124%;  --r: 15deg;  --s: .8;  z-index: 3; --espera: .35s; }
/* Con menos de cinco ejemplos, tres teléfonos; con uno, solo el del centro. */
.abanico:not(.cinco) .pos-izq-2, .abanico:not(.cinco) .pos-der-2 { display: none; }
.abanico.uno .pos-izq, .abanico.uno .pos-der { display: none; }
/* Al pasar encima, el teléfono se asoma un poco más. */
.abanico .tel[href]:hover { --s: 1.03; z-index: 6; }
.abanico .pos-izq[href]:hover, .abanico .pos-der[href]:hover { --s: .94; }
.abanico .pos-izq-2[href]:hover, .abanico .pos-der-2[href]:hover { --s: .84; }
@keyframes tel-llega {
  from { opacity: 0; transform: translateX(0) translateY(22%) rotate(0deg) scale(.82); }
}

.tel-cuerpo {
  display: block; width: 100%; height: 100%; padding: 1.7cqi; border-radius: 15cqi;
  background: var(--tel-metal); box-shadow: var(--sombra-tel);
  animation: tel-flota 6s ease-in-out infinite alternate; position: relative;
}
.pos-izq .tel-cuerpo, .pos-der-2 .tel-cuerpo { animation-delay: -2s; }
.pos-der .tel-cuerpo, .pos-izq-2 .tel-cuerpo { animation-delay: -4s; }
@keyframes tel-flota { to { transform: translateY(-1.8%); } }
/* el reflejo del cristal */
.tel-cuerpo::after { content: ''; position: absolute; inset: 1.7cqi; border-radius: 13.3cqi;
                     background: var(--tel-brillo); pointer-events: none; z-index: 4; }
.tel-pantalla {
  position: relative; display: block; width: 100%; height: 100%; overflow: hidden;
  border: 2.6cqi solid var(--tel-bisel); border-radius: 13.3cqi; background: var(--tel-vacio);
}
/* la isla */
.tel-pantalla::before { content: ''; position: absolute; top: 2.6cqi; left: 50%; z-index: 5;
                        width: 29cqi; height: 8.4cqi; margin-left: -14.5cqi; border-radius: 99px; background: var(--tel-isla); }
.tel-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: foto-llega .9s var(--suave) both; }
@keyframes foto-llega { from { opacity: 0; transform: scale(1.06); } }
.tel-hora { position: absolute; top: 3.8cqi; left: 9cqi; z-index: 5; font-size: 4.8cqi; font-weight: 600;
            letter-spacing: 0; color: var(--sobre-foto); text-shadow: var(--sombra-texto-foto); }
.tel-hora.oscura, .tel:not(.listo) .tel-hora { color: var(--papel-tinta); text-shadow: none; }
.tel-portada {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; padding: 0 7cqi 15cqi; text-align: center; background: var(--velo-foto);
}
.tel:not(.listo) .tel-portada { background: none; }
.tel-tipo { font-size: 4cqi; font-weight: 600; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
            color: var(--sobre-foto-2); text-shadow: var(--sombra-texto-foto); }
.tel-nombre { font-family: var(--script); font-size: 15cqi; line-height: 1.08; margin-top: 2.4cqi; letter-spacing: 0;
              color: var(--sobre-foto); text-shadow: var(--sombra-texto-foto); text-wrap: balance; }
.tel-fecha { margin-top: 3.2cqi; font-size: 4.6cqi; font-weight: 500; letter-spacing: .24em; text-indent: .24em;
             color: var(--sobre-foto-2); text-shadow: var(--sombra-texto-foto); font-variant-numeric: tabular-nums; }
/* la raya de abajo del teléfono */
.tel-portada::after { content: ''; position: absolute; bottom: 3.4cqi; left: 50%; width: 34cqi; height: 1.3cqi;
                      margin-left: -17cqi; border-radius: 99px; background: var(--sobre-foto-2); }

/* ── los avisos que flotan junto a los teléfonos (solo en pantalla ancha: en el teléfono
   taparían las portadas) */
.chip { display: none; }
.chip-icono { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--chip-vivo); }
.ci-verde { --chip-vivo: var(--verde-vivo); }
.ci-naranja { --chip-vivo: var(--naranja-vivo); }
/* la palomita y el reloj: --texto sobre verde vivo 7.6, sobre naranja vivo 7.7 */
.chip-icono svg { width: 20px; height: 20px; fill: none; stroke: var(--texto); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chip-texto { display: grid; line-height: 1.25; }
.chip-texto b { font-size: 15px; letter-spacing: -0.01em; }
.chip-texto span { font-size: 13px; color: var(--texto-2-tinte); }
@keyframes chip-llega { from { opacity: 0; transform: translateY(16px) scale(.94); } }
@keyframes chip-flota { to { transform: translateY(-8px); } }


/* ═══════════════════════════════════ lo más destacado: la galería que avanza sola
   Como "Mira lo más destacado" de apple.com: tarjetas grandes de radio 28, puntitos en una
   píldora y un botón de pausa. Cada lámina, en el tinte de su color, con dos luces y su escena. */
.galeria-cabeza { margin-bottom: 30px; }
.galeria {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 0 max(var(--gutter), calc((100vw - var(--ancho-2)) / 2 + var(--gutter))) 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.galeria::-webkit-scrollbar { display: none; }
.lamina {
  position: relative; flex: 0 0 86vw; height: min(600px, 138vw); scroll-snap-align: center;
  border-radius: var(--radio); overflow: hidden; padding: 26px 24px;
  display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px;
  background: var(--lamina-luces), var(--lamina-tinte);
}
.lamina-texto h3 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; line-height: 1.08; letter-spacing: -0.026em;
             margin: 0; max-width: 15ch; color: var(--texto); text-wrap: balance; }
.lamina-texto p { font-size: clamp(16px, 1.5vw, 19px); margin: 10px 0 0; max-width: 26em; color: var(--texto-2-tinte); }
.lamina-dibujo { display: grid; place-items: center; min-height: 0; font-size: 13px; position: relative; }
.l-coral    { --lamina-tinte: var(--coral-tinte);
              --lamina-luces: radial-gradient(55% 60% at 90% 90%, var(--luz-rosa), transparent 70%), radial-gradient(45% 50% at 8% 100%, var(--luz-amarillo), transparent 70%); }
.l-morado   { --lamina-tinte: var(--morado-tinte);
              --lamina-luces: radial-gradient(55% 60% at 88% 88%, var(--luz-azul), transparent 70%), radial-gradient(45% 55% at 10% 96%, var(--luz-rosa), transparent 70%); }
.l-verde    { --lamina-tinte: var(--verde-tinte);
              --lamina-luces: radial-gradient(55% 60% at 90% 90%, var(--luz-menta), transparent 70%), radial-gradient(45% 50% at 8% 100%, var(--luz-amarillo), transparent 70%); }
.l-amarillo { --lamina-tinte: var(--amarillo-tinte);
              --lamina-luces: radial-gradient(55% 60% at 90% 92%, var(--luz-naranja), transparent 70%), radial-gradient(45% 50% at 6% 100%, var(--luz-verde), transparent 70%); }
.l-cielo    { --lamina-tinte: var(--cielo-tinte);
              --lamina-luces: radial-gradient(55% 60% at 90% 90%, var(--luz-morado), transparent 70%), radial-gradient(45% 50% at 8% 100%, var(--luz-rosa), transparent 70%); }

.control-galeria { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 26px; }
.puntos { display: flex; gap: 12px; align-items: center; padding: 18px 22px; border-radius: 980px;
          background: var(--vidrio-perla); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.punto { width: 8px; height: 8px; border-radius: 980px; border: 0; padding: 0; cursor: pointer; position: relative; overflow: hidden;
         background: var(--punto); transition: width .5s var(--curva), background .3s var(--curva); }
.punto.activo { width: 48px; background: var(--punto-activo); }
/* La barra que se llena en el punto activo: cuánto falta para la siguiente lámina. */
.punto.activo::after { content: ''; position: absolute; inset: 0; background: var(--texto); border-radius: inherit;
                       transform-origin: left; animation: llenar 5s linear forwards; }
.galeria-quieta .punto.activo::after { animation-play-state: paused; }
/* Con la galería en pausa (o fuera de la pantalla), las escenas también se quedan quietas. */
.galeria-quieta .lamina-dibujo *, .galeria-quieta .lamina-dibujo *::before, .galeria-quieta .lamina-dibujo *::after { animation-play-state: paused; }
@keyframes llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pausa { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
         background: var(--vidrio-perla); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
         transition: background .3s var(--curva); }
.pausa:hover { background: var(--perla-2); }
.pausa::before { content: ''; width: 13px; height: 15px; background: var(--icono-pausa); }
.pausa.parada::before { background: var(--texto); clip-path: polygon(8% 0, 100% 50%, 8% 100%); margin-left: 3px; }

/* ── escena 1: el sobre que se abre y deja salir la invitación
   Todo se mide contra el ancho del sobre (es su propio contenedor): así sirve igual grande, en la
   galería, que chico, dentro del teléfono del explorador. Siete segundos: se abre la solapa, se
   va el sello, sube la invitación, se queda, baja y se cierra. */
.sobre { position: relative; width: 20em; aspect-ratio: 1.42; container-type: inline-size;
         perspective: 700px; margin-top: 34%; }
/* el forro: se asoma por la muesca del frente cuando la solapa está abierta */
.sobre-fondo { position: absolute; left: 3%; right: 3%; top: 0; bottom: 40%; border-radius: 3cqi 3cqi 0 0; background: var(--sobre-forro); }
.sobre-carta {
  position: absolute; left: 11%; right: 11%; top: 6%; height: 88%; z-index: 2; overflow: hidden;
  border-radius: 2.6cqi; background: var(--tel-vacio); box-shadow: 0 1cqi 5cqi var(--linea-2);
  animation: carta-sube 7s var(--suave) infinite;
}
.sobre-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sobre-carta-texto { position: absolute; inset: 0 0 auto; height: 58%; display: flex; flex-direction: column;
                     justify-content: flex-end; align-items: center; padding-bottom: 4cqi; text-align: center;
                     background: var(--velo-foto); color: var(--sobre-foto); }
.sobre-carta-tipo { font-size: 3.4cqi; font-weight: 600; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
                    text-shadow: var(--sombra-texto-foto); }
.sobre-carta-nombre { font-family: var(--script); font-size: 10cqi; line-height: 1.1; letter-spacing: 0;
                      text-shadow: var(--sombra-texto-foto); }
/* el frente: las solapas de los lados y la de abajo, que dejan una V arriba. Por la V se ve el
   forro y, adentro, la invitación; cerrado, la tapa la solapa de arriba. */
.sobre-frente { position: absolute; inset: 0; z-index: 3; border-radius: 3cqi; background: var(--sobre-lados);
                clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%); }
.sobre-frente::after { content: ''; position: absolute; inset: 0; background: var(--sobre-abajo);
                       clip-path: polygon(0 100%, 50% 46%, 100% 100%); }
/* la sombra del sobre va aparte: el frente lleva clip-path y la recortaría */
.sobre::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -2%; height: 30%; z-index: 0; border-radius: 50%;
                background: var(--sombra-sobre); filter: blur(2.4cqi); }
.sobre-solapa { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 4; border-radius: 3cqi 3cqi 0 0;
                background: var(--sobre-solapa); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0;
                animation: solapa-abre 7s var(--suave) infinite; }
.sobre-sello { position: absolute; left: 50%; top: 60%; z-index: 5; width: 19%; aspect-ratio: 1; margin: -9.5% 0 0 -9.5%;
               border-radius: 50%; display: grid; place-items: center; background: var(--sobre-sello);
               box-shadow: 0 1cqi 3cqi var(--linea-2); color: var(--sobre-letra);
               font-family: var(--script); font-size: 5.4cqi; line-height: 1; white-space: nowrap; letter-spacing: 0;
               animation: sello-sale 7s var(--suave) infinite; }
@keyframes solapa-abre {
  0%, 12%   { transform: rotateX(0deg); z-index: 4; }
  24%       { transform: rotateX(180deg); z-index: 4; }
  24.5%, 84% { transform: rotateX(180deg); z-index: 1; }
  84.5%     { transform: rotateX(180deg); z-index: 4; }
  96%, 100% { transform: rotateX(0deg); z-index: 4; }
}
@keyframes sello-sale {
  0%, 10%  { opacity: 1; transform: scale(1); }
  16%, 90% { opacity: 0; transform: scale(.6); }
  97%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes carta-sube {
  0%, 26%  { transform: translateY(0); }
  46%, 70% { transform: translateY(-62%); }
  84%, 100% { transform: translateY(0); }
}

/* ── escena 2: el reproductor */
.repro { width: 22em; max-width: 100%; background: var(--blanco); border-radius: 1.8em; padding: 1.3em 1.4em 1.1em;
         box-shadow: var(--sombra-flota); }
.repro-arriba { display: flex; align-items: center; gap: .9em; }
.repro-portada { width: 4.2em; height: 4.2em; border-radius: .9em; overflow: hidden; flex: none; background: var(--tel-vacio); }
.repro-portada img { width: 100%; height: 100%; object-fit: cover; }
.repro-textos { flex: 1; min-width: 0; display: grid; }
.repro-textos b { font-size: 1.3em; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repro-textos span { font-size: 1.05em; color: var(--texto-2); }
.ondas { display: flex; align-items: flex-end; gap: .22em; height: 1.8em; flex: none; }
.ondas i { width: .3em; height: 100%; border-radius: 99px; background: var(--degradado-onda); transform-origin: 50% 100%;
           animation: onda .9s ease-in-out infinite alternate; }
.ondas i:nth-child(2) { animation-delay: -.3s; animation-duration: .7s; }
.ondas i:nth-child(3) { animation-delay: -.6s; animation-duration: 1.1s; }
.ondas i:nth-child(4) { animation-delay: -.15s; animation-duration: .8s; }
.ondas i:nth-child(5) { animation-delay: -.45s; animation-duration: 1s; }
@keyframes onda { from { transform: scaleY(.22); } to { transform: scaleY(1); } }
.repro-barra { display: block; height: .38em; border-radius: 99px; background: var(--perla-2); margin-top: 1.3em; overflow: hidden; }
.repro-avance { display: block; height: 100%; background: var(--degradado); border-radius: inherit; transform-origin: left;
                transform: scaleX(.36); animation: avance 14s linear infinite; }
@keyframes avance { from { transform: scaleX(.3); } to { transform: scaleX(.62); } }
.repro-tiempos { display: flex; justify-content: space-between; font-size: 1em; color: var(--texto-2); margin-top: .45em;
                 font-variant-numeric: tabular-nums; }
.repro-botones { display: flex; justify-content: center; align-items: center; gap: 2.2em; margin-top: .5em; }
.repro-botones svg { width: 1.9em; height: 1.9em; fill: var(--texto); stroke: var(--texto); stroke-width: 1.6;
                     stroke-linecap: round; stroke-linejoin: round; }
.repro-pausa { width: 4em; height: 4em; border-radius: 50%; background: var(--texto); display: grid; place-items: center; }
.repro-pausa svg { width: 1.8em; height: 1.8em; fill: var(--blanco); stroke: none; }

/* ── escena 3: la familia confirma */
.rsvp { position: relative; width: 20em; max-width: 100%; background: var(--papel); color: var(--papel-tinta);
        border-radius: 1.8em; padding: 1.6em 1.5em 1.3em; text-align: center; box-shadow: var(--sombra-flota); }
.rsvp p { margin: 0; }
.rsvp-para { font-size: .85em; font-weight: 600; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--papel-tinta-2); }
.rsvp-familia { font-family: var(--serif); font-size: 2em; font-weight: 600; line-height: 1.1; margin-top: .25em !important; letter-spacing: 0; }
.rsvp-lugares { font-family: var(--serif); font-style: italic; font-size: 1.3em; color: var(--papel-tinta-2); margin-top: .1em !important; letter-spacing: 0; }
.rsvp-botones { position: relative; display: flex; gap: .6em; justify-content: center; margin-top: 1.1em; }
.rsvp-si, .rsvp-no { display: inline-flex; align-items: center; gap: .35em; border-radius: 99px; padding: .75em 1.1em;
                     font-size: 1.05em; font-weight: 600; white-space: nowrap; }
/* --texto sobre verde vivo: 7.6 */
.rsvp-si { background: var(--verde-vivo); color: var(--texto); animation: si-late 3.6s var(--suave) infinite; }
.rsvp-si svg { width: 1.2em; height: 1.2em; fill: none; stroke: var(--texto); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.rsvp-no { background: var(--perla); color: var(--texto-2); }
.rsvp-toque { position: absolute; left: 22%; top: 50%; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%;
              background: var(--luz-verde); animation: toque 3.6s var(--suave) infinite; pointer-events: none; }
.rsvp-cuantos { display: flex; justify-content: space-between; align-items: center; margin-top: 1em; padding-top: .9em;
                border-top: 1px solid var(--papel-linea); font-size: 1.05em; }
.rsvp-contador { display: inline-flex; align-items: center; gap: .7em; background: var(--blanco); border-radius: 99px; padding: .3em .8em; }
.rsvp-contador i { font-style: normal; color: var(--papel-tinta-2); }
.rsvp-contador b { font-size: 1.15em; font-variant-numeric: tabular-nums; }
@keyframes si-late { 0%, 30% { transform: scale(1); } 36% { transform: scale(.94); } 44%, 100% { transform: scale(1); } }
@keyframes toque {
  0%, 28% { opacity: 0; transform: scale(.4); }
  34% { opacity: 1; transform: scale(.7); }
  60%, 100% { opacity: 0; transform: scale(2.4); }
}

/* ── escena 4: quién va */
.quienva { position: relative; width: 24em; max-width: 100%; background: var(--blanco); border-radius: 1.8em; padding: 1.4em;
           box-shadow: var(--sombra-flota); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2em; align-items: center; }
.dona { position: relative; width: 9em; }
.dona svg { display: block; width: 100%; height: auto; }
.dona circle { fill: none; stroke-width: 13; }
.dona-fondo  { stroke: var(--perla-2); }
.dona-van    { stroke: var(--verde-vivo); }
.dona-faltan { stroke: var(--amarillo-vivo); }
.dona-no     { stroke: var(--rosa-vivo); }
.dona-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; margin: 0; line-height: 1; }
.dona-centro b { font-size: 2.4em; letter-spacing: -0.03em; }
.dona-centro span { font-size: 1em; color: var(--texto-2); margin-top: .2em; }
.quienva-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .7em; font-size: 1.1em; }
.quienva-lista li { display: flex; align-items: center; gap: .55em; }
.quienva-lista b { margin-left: auto; font-variant-numeric: tabular-nums; }
.quienva-lista i { width: .7em; height: .7em; border-radius: 50%; flex: none; }
.q-van i    { background: var(--verde-vivo); }
.q-faltan i { background: var(--amarillo-vivo); }
.q-no i     { background: var(--rosa-vivo); }
.quienva-aviso { grid-column: 1 / -1; margin: 0; display: flex; gap: .7em; align-items: center; padding: .75em .9em;
                 border-radius: 1em; background: var(--verde-tinte); font-size: 1.02em; color: var(--texto);
                 animation: aviso-entra 5s var(--suave) infinite; }
.quienva-ini { width: 2.3em; height: 2.3em; border-radius: 50%; flex: none; display: grid; place-items: center;
               background: var(--verde-vivo); color: var(--texto); font-weight: 600; font-size: .95em; }
@keyframes aviso-entra {
  0%, 8%   { opacity: 0; transform: translateY(.8em) scale(.97); }
  16%, 84% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(-.4em); }
}

/* ── escena 5: el cambio de hora */
.cambio { position: relative; width: 23em; max-width: 100%; background: var(--blanco); border-radius: 1.8em; padding: 1.3em 1.4em 1.4em;
          box-shadow: var(--sombra-flota); }
.cambio p { margin: 0; }
.cambio-cabeza { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5em !important;
                 font-size: .95em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.cambio-listo { background: var(--verde-tinte); color: var(--verde-tinta); border-radius: 99px; padding: .35em .75em;
                letter-spacing: 0; text-transform: none; font-size: 1.02em; }
.cambio-fila { display: flex; justify-content: space-between; align-items: center; gap: 1em; padding: .9em 0; border-top: 1px solid var(--linea); }
.cambio-que { display: grid; min-width: 0; }
.cambio-que b { font-size: 1.18em; letter-spacing: -0.015em; }
.cambio-que span { font-size: 1em; color: var(--texto-2); }
.cambio-hora { display: flex; gap: .5em; align-items: baseline; flex: none; }
.cambio-hora s { color: var(--texto-3); font-size: 1.1em; }
.cambio-hora b { font-size: 1.7em; letter-spacing: -0.03em; color: var(--rosa-tinta); font-variant-numeric: tabular-nums;
                 animation: hora-nueva 4.5s var(--suave) infinite; display: inline-block; }
.cambio-hora b.igual { color: var(--texto); animation: none; }
.cambio-aviso { margin-top: .6em !important; padding: .75em .9em; border-radius: 1em; background: var(--cielo-tinte);
                color: var(--cielo-tinta); font-size: 1.02em; font-weight: 600; }
.chispa { position: absolute; width: 1.5em; aspect-ratio: 1; background: var(--amarillo-vivo);
          clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
          animation: chispa 2.6s ease-in-out infinite; }
.ch-1 { top: -.7em; right: 2.2em; }
.ch-2 { top: 3.6em; right: -.7em; width: 1.1em; background: var(--rosa-vivo); animation-delay: -.9s; }
.ch-3 { bottom: -.6em; left: 2.6em; width: 1.2em; background: var(--morado-vivo); animation-delay: -1.7s; }
@keyframes chispa { 0%, 100% { transform: scale(.4) rotate(0deg); opacity: .3; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }
@keyframes hora-nueva {
  0%, 18% { transform: scale(1); }
  24% { transform: scale(1.18); }
  32%, 100% { transform: scale(1); }
}

/* ═══════════════════════════════════ el explorador (las píldoras con + de Apple)
   A la izquierda las secciones, cada una en su color; a la derecha el teléfono que enseña la que
   está abierta, con una luz detrás del mismo color. */
.explorador-cabeza { max-width: 820px; }
.explorador { display: grid; gap: 36px; align-items: center; margin-top: 44px; }
.temas { display: grid; gap: 10px; justify-items: start; }
.tema { --t-tinte: var(--perla); --t-tinta: var(--texto); --t-vivo: var(--texto-3);
        border-radius: 28px; background: var(--blanco); max-width: 100%; box-shadow: var(--sombra-suave);
        transition: background-color .35s var(--curva); }
.t-rosa    { --t-tinte: var(--rosa-tinte);    --t-tinta: var(--rosa-tinta);    --t-vivo: var(--rosa-vivo); }
.t-morado  { --t-tinte: var(--morado-tinte);  --t-tinta: var(--morado-tinta);  --t-vivo: var(--morado-vivo); }
.t-naranja { --t-tinte: var(--naranja-tinte); --t-tinta: var(--naranja-tinta); --t-vivo: var(--naranja-vivo); }
.t-azul    { --t-tinte: var(--azul-tinte);    --t-tinta: var(--azul-tinta);    --t-vivo: var(--azul-vivo); }
.t-verde   { --t-tinte: var(--verde-tinte);   --t-tinta: var(--verde-tinta);   --t-vivo: var(--verde-vivo); }
.t-cielo   { --t-tinte: var(--cielo-tinte);   --t-tinta: var(--cielo-tinta);   --t-vivo: var(--cielo-vivo); }
.t-coral   { --t-tinte: var(--coral-tinte);   --t-tinta: var(--coral-tinta);   --t-vivo: var(--coral-vivo); }
.tema[open] { background: var(--t-tinte); }
.tema summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px 14px 14px; font-size: 17px; font-weight: 600; color: var(--texto); border-radius: 28px;
}
.tema summary::-webkit-details-marker { display: none; }
/* El "+": tinta sobre su tinte cerrado; --texto sobre el vivo abierto (4.1 o más: es símbolo). */
.tema summary::before {
  content: '+'; width: 30px; height: 30px; border-radius: 50%; display: grid; place-content: center; flex: none;
  font-size: 21px; font-weight: 400; line-height: 1; background: var(--t-tinte); color: var(--t-tinta);
  transition: transform .35s var(--curva), background-color .35s var(--curva), color .35s var(--curva);
}
.tema[open] summary::before { transform: rotate(45deg); background: var(--t-vivo); color: var(--texto); }
.tema p { margin: 0; padding: 0 26px 20px 56px; font-size: 17px; color: var(--texto-2-tinte); max-width: 30em; }
.tema p strong { color: var(--texto); }

.explorador-visual { position: relative; display: grid; place-items: center; padding: 20px 0;
                     --luz-explorador: var(--luz-rosa); transition: --luz-explorador .7s var(--curva); }
.explorador-visual[data-color="morado"]  { --luz-explorador: var(--luz-morado); }
.explorador-visual[data-color="naranja"] { --luz-explorador: var(--luz-naranja); }
.explorador-visual[data-color="azul"]    { --luz-explorador: var(--luz-azul); }
.explorador-visual[data-color="verde"]   { --luz-explorador: var(--luz-verde); }
.explorador-visual[data-color="cielo"]   { --luz-explorador: var(--luz-cielo); }
.explorador-visual[data-color="coral"]   { --luz-explorador: var(--luz-coral); }
.explorador-luz { position: absolute; width: min(620px, 130%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
                  background: radial-gradient(circle at center, var(--luz-explorador) 0%, transparent 62%); }
.tel-grande { --ancho: clamp(236px, 64vw, 300px); position: relative; }
.tel-pantalla.papel { background: var(--papel); color: var(--papel-tinta); }
.pantalla-tema {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16cqi 9cqi 12cqi; text-align: center; opacity: 0; transform: scale(1.03); visibility: hidden;
  transition: opacity .5s var(--curva), transform .6s var(--suave), visibility 0s linear .6s;
}
.pantalla-tema.activa { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.pantalla-tema p { margin: 0; }
.pantalla-tema .sobre { width: 74cqi; margin-top: 0; }
.pantalla-tema .sobre .sobre-solapa, .pantalla-tema .sobre .sobre-sello { animation: none; }
.pantalla-tema.activa .sobre-sello { animation: sello-late 2.6s var(--suave) infinite; }
@keyframes sello-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.papel-para { margin-top: 9cqi !important; font-size: 3.6cqi; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; color: var(--papel-tinta-2); }
.papel-nombre { font-family: var(--script); font-size: 13cqi; line-height: 1.1; margin-top: 2cqi !important; letter-spacing: 0; }
.papel-boton { margin-top: 7cqi !important; padding: 3.6cqi 7cqi; border: 1px solid var(--papel-linea); font-size: 3.6cqi;
               font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--papel-tinta); }
.papel-boton.lleno { background: var(--papel-tinta); color: var(--papel); border-color: var(--papel-tinta); border-radius: 99px; letter-spacing: .14em; }
.papel-titulo { font-size: 3.6cqi; font-weight: 600; letter-spacing: .32em; text-indent: .32em; text-transform: uppercase;
                color: var(--papel-oro); margin-bottom: 6cqi !important; }
.papel-nota { font-family: var(--serif); font-style: italic; font-size: 5.6cqi; line-height: 1.35; color: var(--papel-tinta-2); letter-spacing: 0; }
.papel-grande { font-family: var(--serif); font-size: 14cqi; font-weight: 500; line-height: 1; margin: 3cqi 0 4cqi !important; letter-spacing: 0; }
.papel-lugar { font-family: var(--serif); font-size: 8cqi; font-weight: 600; margin-top: 5cqi !important; letter-spacing: 0; }
/* la pantalla con la portada de fondo (la canción y la cuenta) */
.pantalla-tema.con-foto { justify-content: flex-end; padding-bottom: 14cqi; color: var(--sobre-foto); background: var(--tel-vacio); }
.pantalla-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pantalla-tema.con-foto::before { content: ''; position: absolute; inset: 0; background: var(--velo-foto); }
.pantalla-portada { position: relative; z-index: 1; width: 100%; }
.pantalla-tipo { font-size: 3.8cqi; font-weight: 600; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
                 text-shadow: var(--sombra-texto-foto); }
.pantalla-nombre { font-family: var(--script); font-size: 15cqi; line-height: 1.08; letter-spacing: 0; margin-top: 2cqi !important;
                   text-shadow: var(--sombra-texto-foto); }
.sonando { position: relative; z-index: 1; margin-top: 7cqi; width: 100%; display: flex; align-items: center; gap: 3.6cqi;
           padding: 3.4cqi 3.8cqi; border-radius: 99px; background: var(--vidrio-fuerte); color: var(--texto);
           -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-align: left; font-size: 3.6cqi; }
.sonando .ondas { font-size: 3.6cqi; }
.sonando-texto { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.sonando-texto b { font-size: 4.2cqi; }
.sonando-texto span { color: var(--texto-2-tinte); }
.sonando-boton { width: 10cqi; height: 10cqi; border-radius: 50%; display: grid; place-items: center; background: var(--texto); flex: none; }
.sonando-boton svg { width: 6cqi; height: 6cqi; fill: var(--blanco); stroke: var(--blanco); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.sonando-boton svg .onda { fill: none; }
.cuenta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.4cqi; margin-top: 3.4cqi; }
.cuenta p { display: grid; gap: .6cqi; padding: 3cqi 0 2.6cqi; border-radius: 4cqi; background: var(--vidrio-foto);
            -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cuenta b { font-size: 8.6cqi; font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cuenta span { font-size: 3.2cqi; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
/* el itinerario, con un punto de cada color */
.papel-itinerario { list-style: none; margin: 0; padding: 0 0 0 2cqi; width: 100%; text-align: left; position: relative; }
.papel-itinerario::before { content: ''; position: absolute; left: 3.5cqi; top: 4cqi; bottom: 4cqi; width: 1px; background: var(--papel-linea); }
.papel-itinerario li { position: relative; display: grid; grid-template-columns: 17cqi 1fr; align-items: baseline;
                       padding: 3.2cqi 0 3.2cqi 7cqi; }
.papel-itinerario li::before { content: ''; position: absolute; left: .4cqi; top: 50%; width: 3.2cqi; height: 3.2cqi; margin-top: -1.6cqi;
                               border-radius: 50%; background: var(--rosa-vivo); }
.papel-itinerario li:nth-child(2)::before { background: var(--naranja-vivo); }
.papel-itinerario li:nth-child(3)::before { background: var(--verde-vivo); }
.papel-itinerario li:nth-child(4)::before { background: var(--azul-vivo); }
.papel-itinerario li:nth-child(5)::before { background: var(--morado-vivo); }
.papel-itinerario b { font-family: var(--serif); font-size: 6.4cqi; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0; }
.papel-itinerario span { font-size: 4.2cqi; }
/* el mapa: calles, un parque, la ruta y el pin que brinca */
.mapa { position: relative; width: 100%; aspect-ratio: 1.25; border-radius: 5cqi; overflow: hidden; background:
          linear-gradient(90deg, transparent 30%, var(--mapa-calle) 30% 34%, transparent 34%),
          linear-gradient(0deg, transparent 55%, var(--mapa-calle) 55% 60%, transparent 60%),
          linear-gradient(35deg, transparent 62%, var(--mapa-calle) 62% 65%, transparent 65%),
          radial-gradient(28% 34% at 78% 24%, var(--mapa-parque) 98%, transparent 100%),
          var(--mapa-fondo); }
.mapa-ruta { position: absolute; left: 14%; top: 66%; width: 58%; height: 1.4cqi; border-radius: 99px; transform-origin: left center;
             transform: rotate(-32deg); background: repeating-linear-gradient(90deg, var(--azul-vivo) 0 4cqi, transparent 4cqi 6.5cqi); }
.mapa-pin { position: absolute; left: 62%; top: 22%; width: 11cqi; height: 11cqi; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
            background: var(--rosa-vivo); box-shadow: 0 1.5cqi 3cqi var(--linea-2); animation: pin-brinca 1.8s var(--suave) infinite; }
.mapa-pin::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4cqi; height: 4cqi; margin: -2cqi 0 0 -2cqi;
                   border-radius: 50%; background: var(--blanco); }
@keyframes pin-brinca { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2.4cqi; } }
.vestimenta { width: 62cqi; height: auto; fill: none; stroke: var(--papel-tinta); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.papel-tienda { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 3cqi; margin-top: 4cqi;
                padding: 4.4cqi 4.6cqi; border-radius: 4.6cqi; background: var(--blanco); text-align: left; box-shadow: 0 .6cqi 2cqi var(--linea); }
.papel-tienda > span { display: grid; }
.papel-tienda b { font-size: 4.6cqi; }
.papel-tienda span span { font-size: 3.8cqi; color: var(--papel-tinta-2); }
.papel-copiar { flex: none; padding: 2cqi 3.6cqi; border-radius: 99px; background: var(--rosa-tinte); color: var(--rosa-tinta);
                font-size: 3.8cqi; font-weight: 600; }

/* ═══════════════════════════════════ los ejemplos: franjas, selector y rejilla */
.franjas { margin-top: 52px; display: grid; gap: 14px; }
.franja { overflow: hidden; -webkit-mask-image: var(--mascara-orilla); mask-image: var(--mascara-orilla); }
.franja-pista { display: flex; gap: 14px; padding-right: 14px; width: max-content; will-change: transform; }
/* Quien pidió menos movimiento: la franja no corre, se desliza con el dedo. */
.franja.quieta { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none;
                 padding-inline: var(--gutter); }
.franja.quieta::-webkit-scrollbar { display: none; }
.franja-item { position: relative; flex: none; display: block; width: clamp(124px, 12.5vw, 180px); aspect-ratio: 4 / 5;
               border-radius: 20px; overflow: hidden; background: var(--tel-vacio); color: var(--sobre-foto);
               transition: transform .5s var(--suave); }
.franja-item:hover { transform: scale(1.04); text-decoration: none; }
.franja-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.franja-item::after { content: ''; position: absolute; inset: 0; background: var(--velo-foto); }
.franja-nombre { position: absolute; left: 8px; right: 8px; bottom: 10px; z-index: 1; text-align: center;
                 font-family: var(--script); font-size: clamp(20px, 1.9vw, 26px); line-height: 1.05; letter-spacing: 0;
                 text-shadow: var(--sombra-texto-foto); }

/* El selector: el segmentado de Apple, con cuántas hay de cada tipo. Lo elegido, en amarillo
   vivo con letra --texto (11.1), como en el panel. */
.filtro-caja { display: flex; justify-content: center; margin-top: 48px; }
.filtro { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; }
.filtro button {
  display: inline-flex; align-items: center; gap: 8px; font: 400 15px/1 var(--fuente); letter-spacing: -0.01em;
  color: var(--texto); background: var(--perla); border: 0; cursor: pointer; border-radius: 980px;
  padding: 10px 12px 10px 16px; white-space: nowrap;
  transition: background-color .3s var(--curva), box-shadow .3s var(--curva);
}
.filtro button:hover { background: var(--perla-2); }
.filtro button[aria-pressed="true"] { background: var(--amarillo-vivo); font-weight: 600; box-shadow: var(--sombra-elegido); }
/* el número: --texto-2 sobre blanco, 5.1 */
.filtro .cuantas { min-width: 24px; padding: 4px 7px; border-radius: 99px; background: var(--blanco); color: var(--texto-2);
                   font-size: 13px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.filtro button[aria-pressed="true"] .cuantas { color: var(--texto); }
.filtro-texto { margin: 16px 0 0; min-height: 1.4em; text-align: center; font-size: 15px; color: var(--texto-2); }

.rejilla { --columnas: 2; --hueco: 12px; list-style: none; margin: 28px 0 0; padding: 0;
           display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hueco); }
/* Flex y no grid: la última fila, si va incompleta, queda al centro (con 3 ejemplos no queda un
   hueco a la derecha). */
.ej { position: relative; min-width: 0; flex: 0 0 calc((100% - (var(--columnas) - 1) * var(--hueco)) / var(--columnas)); }
.ej-esperando { aspect-ratio: 4 / 5; border-radius: var(--radio);
                background: linear-gradient(100deg, var(--perla) 30%, var(--perla-2) 50%, var(--perla) 70%) 0 0 / 300% 100%;
                animation: esperando 1.4s linear infinite; }
@keyframes esperando { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ej-enlace {
  position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: var(--tel-vacio); color: var(--sobre-foto); box-shadow: var(--sombra-suave);
  transition: transform .5s var(--suave), box-shadow .5s var(--suave);
}
.ej-enlace:hover { transform: translateY(-4px) scale(1.012); box-shadow: var(--sombra-flota); text-decoration: none; }
.ej-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;
           transition: transform 1.2s var(--suave); }
.ej-enlace:hover .ej-foto { transform: scale(1.06); }
.ej-enlace::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--velo-tarjeta); }
/* El diseño, como etiqueta de color: tinta sobre su tinte (5.1 o más). */
.ej-diseno { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 99px; font-size: 13px; font-weight: 600;
             line-height: 1.1; letter-spacing: -0.005em; background: var(--d-tinte); color: var(--d-tinta); max-width: calc(100% - 64px);
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-clasico   { --d-tinte: var(--amarillo-tinte); --d-tinta: var(--amarillo-tinta); }
.d-editorial { --d-tinte: var(--coral-tinte);    --d-tinta: var(--coral-tinta); }
.d-aurora    { --d-tinte: var(--morado-tinte);   --d-tinta: var(--morado-tinta); }
.d-cine      { --d-tinte: var(--azul-tinte);     --d-tinta: var(--azul-tinta); }
.d-minimal   { --d-tinte: var(--cielo-tinte);    --d-tinta: var(--cielo-tinta); }
.d-deco      { --d-tinte: var(--naranja-tinte);  --d-tinta: var(--naranja-tinta); }
.d-fiesta    { --d-tinte: var(--rosa-tinte);     --d-tinta: var(--rosa-tinta); }
.d-polaroid  { --d-tinte: var(--naranja-tinte);  --d-tinta: var(--naranja-tinta); }
.d-botanico  { --d-tinte: var(--verde-tinte);    --d-tinta: var(--verde-tinta); }
.d-acuarela  { --d-tinte: var(--rosa-tinte);     --d-tinta: var(--rosa-tinta); }
.d-otro      { --d-tinte: var(--verde-tinte);    --d-tinta: var(--verde-tinta); }
.ej-abrir { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
            background: var(--vidrio-fuerte); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
            transition: transform .4s var(--suave); }
.ej-abrir::before { content: ''; width: 13px; height: 13px; background: var(--texto);
                    -webkit-mask: var(--icono-abrir) center / contain no-repeat; mask: var(--icono-abrir) center / contain no-repeat; }
.ej-enlace:hover .ej-abrir { transform: scale(1.1) rotate(8deg); }
.ej-texto { position: absolute; left: 0; right: 0; bottom: 0; display: grid; padding: 14px 14px 16px; text-shadow: var(--sombra-texto-foto); }
.ej-tipo { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sobre-foto-2); }
.ej-titulo { font-family: var(--script); font-size: clamp(27px, 7.4vw, 44px); line-height: 1.12; letter-spacing: 0; margin: 2px 0 1px;
             color: var(--sobre-foto); overflow-wrap: anywhere; }
.ej-fecha { font-size: 13px; color: var(--sobre-foto-2); }
/* En el teléfono, la fecha corta ("15 may 2027"): la larga partía la tarjeta en dos renglones. */
.ej-fecha .larga { display: none; }
.mas-caja { display: flex; justify-content: center; margin-top: 36px; }
.mas-caja:has(> [hidden]) { margin-top: 0; }
.ejemplos-vacio { margin: 30px auto 0; max-width: 520px; text-align: center; padding: 34px 26px; border-radius: var(--radio);
                  background: var(--rosa-tinte); }
.ejemplos-vacio p { margin: 0 0 18px; font-size: 19px; color: var(--texto); }

/* ═══════════════════════════════════ cómo funciona: 4 pasos, cada número en su color */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
.paso { position: relative; background: var(--blanco); border-radius: var(--radio); padding: 28px 26px 30px; box-shadow: var(--sombra-suave);
        transition: opacity 1s var(--suave), transform .5s var(--suave); }
.paso:hover { transform: translateY(-3px); transition-delay: 0s; }
.p-azul    { --p-tinte: var(--azul-tinte);    --p-tinta: var(--azul-tinta); }
.p-morado  { --p-tinte: var(--morado-tinte);  --p-tinta: var(--morado-tinta); }
.p-naranja { --p-tinte: var(--naranja-tinte); --p-tinta: var(--naranja-tinta); }
.p-verde   { --p-tinte: var(--verde-tinte);   --p-tinta: var(--verde-tinta); }
/* '.paso .paso-n' y no '.paso-n' a secas: '.paso p' le ganaba y el número salía de 17 px. */
.paso .paso-n { font-size: 64px; font-weight: 600; line-height: 1; letter-spacing: -0.045em; margin: 0 0 14px; color: var(--p-tinta); }
.paso-icono { position: absolute; top: 26px; right: 24px; width: 52px; height: 52px; padding: 13px; border-radius: 50%;
              background: var(--p-tinte); fill: none; stroke: var(--p-tinta); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.paso h3 { font-size: 22px; font-weight: 600; margin: 0 0 6px; color: var(--texto); letter-spacing: -0.02em; }
.paso p { margin: 0; font-size: 17px; color: var(--texto-2); }

/* ═══════════════════════════════════ el panel (vista de ejemplo) */
.panel-demo { display: grid; gap: 50px; align-items: center; }
/* A 320 px (un iPhone SE) la tarjeta se salía 19 px por la derecha: el nombre largo no se parte (va con "…") y
   la rejilla no se encogía por debajo de él. Sus columnas pueden encogerse; el nombre se corta con "…". */
.panel-demo > * { min-width: 0; }
@media (max-width: 360px) { .tablero { padding: 18px; } }
.tablero { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 26px;
           max-width: 480px; width: 100%; margin: 0 auto; box-shadow: var(--sombra-flota); }
.tablero-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.tablero-cabeza b { font-size: 19px; }
.tablero-cabeza span { font-size: 13px; color: var(--texto-2); }
.tablero-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.tablero-cifras div { border-radius: 18px; padding: 16px 8px; text-align: center; }
.tablero-cifras b { display: block; font-size: 32px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.tablero-cifras span { font-size: 13px; color: var(--texto); }
.tablero-cifras div:nth-child(1) { background: var(--verde-tinte); }
.tablero-cifras div:nth-child(1) b { color: var(--verde-tinta); }
.tablero-cifras div:nth-child(2) { background: var(--amarillo-tinte); }
.tablero-cifras div:nth-child(2) b { color: var(--amarillo-tinta); }
.tablero-cifras div:nth-child(3) { background: var(--rosa-tinte); }
.tablero-cifras div:nth-child(3) b { color: var(--rosa-tinta); }
.tablero-fila { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--linea); }
/* Las iniciales: tinta sobre su tinte (5.8 o más). */
.ini { width: 38px; height: 38px; border-radius: 50%; display: grid; place-content: center; flex: none;
       font-size: 13px; font-weight: 600; background: var(--azul-tinte); color: var(--azul-tinta); }
.tablero-fila:nth-of-type(4) .ini { background: var(--naranja-tinte); color: var(--naranja-tinta); }
.tablero-fila:nth-of-type(5) .ini { background: var(--morado-tinte); color: var(--morado-tinta); }
.quien { flex: 1; min-width: 0; }
.quien b { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quien span { font-size: 13px; color: var(--texto-2); }
.estado { font-size: 13px; font-weight: 600; padding: 6px 11px; border-radius: 980px; white-space: nowrap; }
.estado.si  { background: var(--verde-tinte);    color: var(--verde-tinta); }
.estado.no  { background: var(--rosa-tinte);     color: var(--rosa-tinta); }
.estado.pen { background: var(--amarillo-tinte); color: var(--amarillo-tinta); }

/* ═══════════════════════════════════ lo que haces desde el panel: cada tarjeta en su tinte
   Una tarjeta por cosa que el panel hace HOY. La de las mesas va ancha, con su plano dibujado. */
.funciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
/* La transición lleva la opacidad: la tarjeta también entra con .aparece. */
.funcion { background: var(--f-tinte); border-radius: var(--radio); padding: 28px 26px 30px; position: relative;
           transition: opacity 1s var(--suave), transform .6s var(--suave); }
/* Al pasar el ratón, sin el retraso escalonado de .aparece. */
.funcion:hover { transform: scale(1.015); transition-delay: 0s; }
.f-morado   { --f-tinte: var(--morado-tinte);   --f-tinta: var(--morado-tinta);   --f-vivo: var(--morado-vivo);   --f-glifo: var(--blanco); }
.f-naranja  { --f-tinte: var(--naranja-tinte);  --f-tinta: var(--naranja-tinta);  --f-vivo: var(--naranja-vivo);  --f-glifo: var(--texto); }
.f-azul     { --f-tinte: var(--azul-tinte);     --f-tinta: var(--azul-tinta);     --f-vivo: var(--azul-vivo);     --f-glifo: var(--blanco); }
.f-rosa     { --f-tinte: var(--rosa-tinte);     --f-tinta: var(--rosa-tinta);     --f-vivo: var(--rosa-vivo);     --f-glifo: var(--blanco); }
.f-cielo    { --f-tinte: var(--cielo-tinte);    --f-tinta: var(--cielo-tinta);    --f-vivo: var(--cielo-vivo);    --f-glifo: var(--texto); }
.f-verde    { --f-tinte: var(--verde-tinte);    --f-tinta: var(--verde-tinta);    --f-vivo: var(--verde-vivo);    --f-glifo: var(--texto); }
.f-amarillo { --f-tinte: var(--amarillo-tinte); --f-tinta: var(--amarillo-tinta); --f-vivo: var(--amarillo-vivo); --f-glifo: var(--texto); }
.f-claro    { --f-tinte: var(--perla);          --f-tinta: var(--texto);          --f-vivo: var(--texto);         --f-glifo: var(--blanco); }
/* Coral y menta, para las páginas de cada celebración (2-oct-2026): sin su clase, la tarjeta salía sin fondo. */
.f-coral    { --f-tinte: var(--coral-tinte);    --f-tinta: var(--coral-tinta);    --f-vivo: var(--coral-vivo);    --f-glifo: var(--texto); }
.f-menta    { --f-tinte: var(--menta-tinte);    --f-tinta: var(--menta-tinta);    --f-vivo: var(--menta-vivo);    --f-glifo: var(--texto); }
.funcion h3 { font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: -0.02em; color: var(--texto); margin: 0 0 8px; }
.funcion p { margin: 0; font-size: 17px; color: var(--texto-2-tinte); }
.funcion p strong { color: var(--texto); }
/* El ícono en su cuadrito de color, como los de las apps del iPhone. */
.funcion-icono { width: 50px; height: 50px; padding: 12px; margin-bottom: 18px; border-radius: 14px; display: block;
                 background: var(--f-vivo); fill: none; stroke: var(--f-glifo); stroke-width: 1.8;
                 stroke-linecap: round; stroke-linejoin: round; }
.f-claro .funcion-icono { background: var(--degradado-icono); }
/* "Solo en…": lo que no traen todos los paquetes. Lo llena landing.js desde el servidor.
   Tinta de su tarjeta sobre blanco: 5.4 o más. */
.funcion .funcion-paquete { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; margin: 0 0 10px;
                            padding: 5px 11px; border-radius: 99px; background: var(--blanco); color: var(--f-tinta); }
.funcion.ancha { display: grid; gap: 26px; align-items: center; }
/* El plano de ejemplo: el mismo lenguaje que el plano del panel (mesas con sus sillas). */
.mini-plano { width: 100%; max-width: 460px; height: auto; margin: 0 auto; display: block; }
.mini-plano .mp-mesa circle:not(.mp-silla), .mini-plano .mp-mesa rect { fill: var(--blanco); stroke: var(--morado-vivo); stroke-width: 1.5; }
.mini-plano .mp-silla { fill: var(--morado-tinta); opacity: .7; }
.mini-plano .mp-silla.vacia { fill: none; stroke: var(--texto-2-tinte); stroke-width: 1.2; stroke-dasharray: 2 2; opacity: 1; }
.mini-plano .mp-pista { fill: var(--azul-tinte); stroke: var(--azul-vivo); stroke-width: 1.5; stroke-dasharray: 4 4; }
.mini-plano .mp-honor { fill: var(--amarillo-tinte); stroke: var(--amarillo-vivo); stroke-width: 1.5; }
.mini-plano .mp-barra { fill: var(--naranja-tinte); stroke: var(--naranja-vivo); stroke-width: 1.5; }
.mini-plano .mp-texto { fill: var(--texto-2-tinte); font-size: 12px; font-weight: 600; text-anchor: middle; letter-spacing: 0; }
.mini-plano .mp-texto.chico { font-size: 9.5px; }

/* ═══════════════════════════════════ precios */
/* ═══ el "descuento de otoño" (Rod, 29-sep-2026): una barra arriba de todo y su línea en los precios. --texto sobre el
   tinte amarillo, 16; el enlace, 5.4. */
.promo-barra { display: block; padding: 9px var(--gutter); text-align: center; font-size: 14px; line-height: 1.35;
               color: var(--texto); background: var(--amarillo-tinte); text-decoration: none; }
.promo-barra b { color: var(--enlace); font-weight: 600; white-space: nowrap; }
.promo-barra:hover { text-decoration: none; }
.promo-barra:hover b { text-decoration: underline; }
/* En el celular va pegada siempre: más compacta, para que no se coma la pantalla. */
@media (max-width: 733px) { .promo-barra { padding: 7px var(--gutter); font-size: 13px; line-height: 1.3; } }
.promo-precios { display: inline-block; margin: 20px auto 0; padding: 8px 16px; border-radius: 980px; font-size: 15px; font-weight: 600;
                 line-height: 1.35; color: var(--texto); background: var(--amarillo-tinte); }

.precios-carrusel { position: relative; }
.precios { position: relative; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 960px; margin: 0 auto; }
.plan { background: var(--blanco); border-radius: var(--radio); padding: 40px 32px; display: flex; flex-direction: column;
        position: relative; box-shadow: var(--sombra-suave); border: 2px solid transparent; }
/* El de arriba lleva un filo con el brillo de keynote. */
.plan.destacado { background: linear-gradient(var(--blanco), var(--blanco)) padding-box, var(--degradado-borde) border-box;
                  box-shadow: var(--sombra-tarjeta); }
.plan h3 { font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.02em; }
.plan-precio { font-size: 56px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; margin: 18px 0 6px;
               font-variant-numeric: tabular-nums; }
.plan.destacado .plan-precio { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent;
                               padding-bottom: .04em; }
.plan-precio small { font-size: 17px; font-weight: 600; color: var(--texto-2); margin-left: 6px; letter-spacing: 0; }
.plan-moneda { font-size: 15px; color: var(--texto-2); margin: 0 0 26px; }
/* align-content: start: la lista llena la tarjeta (el botón queda abajo, parejo en las tres) pero sus renglones van arriba.
   Sin él, el Premium (tres renglones) los repartía con huecos de 100 px para igualar la altura de los otros. */
.plan ul { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; flex: 1; align-content: start; }
.plan li { display: flex; gap: 10px; font-size: 17px; }
/* La palomita: --texto sobre verde vivo, 7.6. */
.plan li::before { content: ''; width: 22px; height: 22px; border-radius: 50%; flex: none; margin-top: 1px;
                   background: var(--palomita) center / 100% no-repeat, var(--verde-vivo); }
.plan .boton { width: 100%; }
.plan-extra { margin: -14px 0 24px; font-size: 15px; line-height: 1.4; color: var(--texto-2); }

/* ═══════════════════════════════════ el plan Personalizado (Leo, 30-sep-2026): el cuarto, abajo de los tres
   Oscuro a propósito, como las tarjetas "Pro" de apple.com: no se compra en la página, se pide por WhatsApp, y tiene que
   verse distinto a los tres de arriba. Sobre --texto (#1d1d1f): --blanco 16.8 · el gris claro 6.5 · el amarillo vivo 11.1;
   la palomita, la misma de los planes (--texto sobre verde vivo, 7.6); el botón, el azul de siempre. */
.personalizado { max-width: 960px; margin-inline: auto; padding: 44px 40px; border-radius: var(--radio); background: var(--texto);
                 color: var(--blanco); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 56px;
                 align-items: center; box-shadow: var(--sombra-tarjeta); }
.personalizado-marca { margin: 0 0 8px; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--amarillo-vivo); }
.personalizado h3 { margin: 0; font-size: clamp(30px, 4vw, 40px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.personalizado-lema { margin: 12px 0 0; font-size: 19px; line-height: 1.4; color: var(--gris-sobre-negro); text-wrap: pretty; }
.personalizado-precio { margin: 24px 0 0; font-size: 48px; font-weight: 600; letter-spacing: -0.035em; line-height: 1;
                        font-variant-numeric: tabular-nums; }
.personalizado-desde { display: block; margin-bottom: 6px; font-size: 17px; letter-spacing: 0; color: var(--gris-sobre-negro); }
.personalizado-precio small { margin-left: 6px; font-size: 17px; letter-spacing: 0; color: var(--gris-sobre-negro); }
.personalizado ul { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.personalizado li { display: flex; gap: 10px; font-size: 17px; line-height: 1.35; text-wrap: pretty; }   /* sin una palabra sola abajo */
.personalizado li::before { content: ''; width: 22px; height: 22px; border-radius: 50%; flex: none;
                            background: var(--palomita) center / 100% no-repeat, var(--verde-vivo); }
.personalizado-boton { width: 100%; }
.personalizado-boton svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
@media (max-width: 59.99rem) {
  .personalizado { grid-template-columns: minmax(0, 1fr); padding: 32px 24px; gap: 24px; }
  .personalizado-precio { font-size: 44px; }
}

/* ═══════════════════════════════════ el aviso de privacidad (privacidad.html): texto largo, cómodo de leer */
.legal { padding-block: 96px 80px; }
.legal h1 { margin: 0 0 8px; font-size: clamp(34px, 6vw, 48px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.08; }
.legal-fecha { margin: 0 0 32px; font-size: 15px; color: var(--texto-2); }
.legal h2 { margin: 36px 0 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.legal p, .legal li { font-size: 17px; line-height: 1.55; }
.legal p { margin: 0 0 12px; }
.legal ul { display: grid; gap: 8px; margin: 0 0 12px; padding-left: 1.2em; }
.legal a { color: var(--enlace); }
.legal-volver { margin-top: 40px; }
.crear-privacidad { margin-top: 10px; font-size: 14px; }
.crear-privacidad a { color: var(--enlace); }
.plan-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
/* "Popular": azul tinta sobre su tinte, 5.9. El descuento: verde tinta sobre el suyo, 5.0. */
.plan-marca { flex: none; padding: 4px 10px; border-radius: 980px; font-size: 13px; font-weight: 600; background: var(--azul-tinte); color: var(--azul-tinta); }
.plan-antes { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 17px; color: var(--texto-2); }
.plan-antes s { text-decoration-thickness: 1.5px; }
.plan-descuento { padding: 2px 8px; border-radius: 980px; font-size: 13px; font-weight: 700; background: var(--verde-tinte); color: var(--verde-tinta); }

/* En la compu caben los tres; flechas y puntos, solo cuando hay que deslizar (el celular: landing.js → carruselPrecios). */
.precios-flecha, .precios-puntos { display: none; }
@media (max-width: 59.99rem) {
  /* Las orillas miden media pantalla menos media tarjeta: así CUALQUIER tarjeta se puede centrar, también la primera y la
     última. Con la orilla del ancho del margen, la última se pegaba a la derecha: sin el Premium, el Ideal (el que se enseña
     primero) quedaba descentrado (visto en producción, 30-sep-2026). En vw, no en %: el % de la columna es de la caja SIN
     orillas, y la cuenta daba vueltas. */
  .precios { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(76vw, 360px); gap: 14px; max-width: none;
             margin: 0 calc(-1 * var(--gutter)); padding: 10px calc((100vw - min(76vw, 360px)) / 2) 20px; overflow-x: auto;
             overscroll-behavior-x: contain;
             scroll-snap-type: x mandatory; scrollbar-width: none; }
  .precios::-webkit-scrollbar { display: none; }
  .plan { scroll-snap-align: center; padding: 32px 24px; }
  .precios-flecha { display: grid; place-items: center; position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px;
                    border: 0; border-radius: 50%; cursor: pointer; font: 400 30px/1 var(--fuente); color: var(--texto);
                    background: var(--vidrio-fuerte); box-shadow: var(--sombra-flota);
                    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
                    transition: opacity .25s var(--curva); }
  .precios-atras { left: -8px; }
  .precios-adelante { right: -8px; }
  .precios-atras::before { content: '‹'; margin-top: -3px; }
  .precios-adelante::before { content: '›'; margin-top: -3px; }
  .precios-flecha:disabled { opacity: 0; pointer-events: none; }
  .precios-puntos { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
  .precios-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--linea-2); transition: background-color .3s var(--curva), transform .3s var(--curva); }
  .precios-punto.activo { background: var(--texto); transform: scale(1.25); }
}

/* ═══════════════════════════════════ preguntas: una lista agrupada, como los ajustes del iPhone */
.preguntas { max-width: 820px; margin: 0 auto; background: var(--perla); border-radius: var(--radio); padding: 4px 26px; }
.pregunta + .pregunta { border-top: 1px solid var(--linea); }
.pregunta summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
                    padding: 24px 0; font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: -0.02em; color: var(--texto); }
.pregunta summary::-webkit-details-marker { display: none; }
/* El "+" en un circulito blanco, en la tinta de su color (5.0 o más); abierta, la × va en
   --texto sobre el vivo (4.1 o más: es símbolo). */
.pregunta summary::after { content: '+'; width: 32px; height: 32px; border-radius: 50%; display: grid; place-content: center; flex: none;
                           font-size: 22px; font-weight: 400; line-height: 1; background: var(--blanco); color: var(--q-tinta);
                           box-shadow: var(--sombra-suave);
                           transition: transform .3s var(--curva), background-color .3s var(--curva), color .3s var(--curva); }
.pregunta:nth-child(1) { --q-vivo: var(--rosa-vivo);    --q-tinta: var(--rosa-tinta); }
.pregunta:nth-child(2) { --q-vivo: var(--naranja-vivo); --q-tinta: var(--naranja-tinta); }
.pregunta:nth-child(3) { --q-vivo: var(--verde-vivo);   --q-tinta: var(--verde-tinta); }
.pregunta:nth-child(4) { --q-vivo: var(--azul-vivo);    --q-tinta: var(--azul-tinta); }
.pregunta:nth-child(5) { --q-vivo: var(--morado-vivo);  --q-tinta: var(--morado-tinta); }
.pregunta[open] summary::after { transform: rotate(45deg); background: var(--q-vivo); color: var(--texto); }
.pregunta p { margin: 0 0 24px; font-size: 17px; color: var(--texto-2); max-width: 40em; }

/* ═══════════════════════════════════ el video de "cómo funciona" (nace escondido: landing.js, ponerVideo) */
.video-caja { max-width: 920px; margin-inline: auto; border-radius: var(--radio); overflow: hidden; background: var(--perla); box-shadow: var(--sombra-tarjeta); }
.video-como { display: block; width: 100%; aspect-ratio: 16 / 9; background: var(--perla); }

/* La trampa para robots: fuera de la vista de una persona, no del DOM. Recortada a nada EN SU LUGAR, no mandada a -9999 px:
   así nunca queda nada fuera de la pantalla (revisar_ancho la marcaba "nunca se ve" en cada tamaño, 29-sep-2026). */
.trampa { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden;
          clip-path: inset(50%); white-space: nowrap; }

/* ═══════════════════════════════════ el cierre: la fiesta */
.cierre { position: relative; overflow: hidden; text-align: center; padding: 130px 0 140px; background: var(--fondo); }
.cierre .envoltura { position: relative; z-index: 2; }
.cierre .luz-1 { --luz-c: var(--luz-rosa);     left: 18%; top: 30%; }
.cierre .luz-2 { --luz-c: var(--luz-amarillo); left: 82%; top: 36%; --dx: -6%; animation-duration: 16s; }
.cierre .luz-3 { --luz-c: var(--luz-morado);   left: 60%; top: 92%; --dy: -7%; animation-duration: 18s; }
.cierre .luz-4 { --luz-c: var(--luz-menta);    left: 30%; top: 100%; --dx: 5%; animation-duration: 15s; }
.cierre .titular { max-width: 12ch; margin-inline: auto; }
/* En el cierre las luces pasan por DETRÁS del párrafo: ahí todo el texto va en --texto (10.3 en
   el punto más rosa; el gris daba 3.1). */
.cierre .cuerpo { color: var(--texto); }
.cierre .portada-botones { margin-top: 32px; }
.al-centro { margin-inline: auto; }
/* Los papelitos que caen. Cada <i> mide lo que la sección y baja entero: el papelito es su
   ::before, pegado abajo, así que recorre la sección de arriba abajo. */
.papelitos { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.papelitos i { position: absolute; top: 0; left: var(--px, 50%); width: 12px; height: 100%;
               transform: translateY(-100%); animation: caer var(--pt, 10s) linear infinite; animation-delay: var(--pd, 0s); }
.papelitos i::before { content: ''; position: absolute; left: 0; bottom: 0; width: var(--pw, 10px); height: var(--ph, 14px);
                       border-radius: var(--pr, 2px); background: var(--pc, var(--rosa-vivo));
                       animation: girar var(--pg, 2.6s) linear infinite; }
@keyframes caer { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes girar { from { transform: rotate(0deg) translateX(0); } 50% { transform: rotate(180deg) translateX(8px); } to { transform: rotate(360deg) translateX(0); } }
.papelitos i:nth-child(1)  { --px: 6%;  --pc: var(--rosa-vivo);     --pt: 11s; --pd: -2s; }
.papelitos i:nth-child(2)  { --px: 13%; --pc: var(--amarillo-vivo); --pt: 9s;  --pd: -6s; --pr: 50%; --pw: 9px; --ph: 9px; }
.papelitos i:nth-child(3)  { --px: 21%; --pc: var(--azul-vivo);     --pt: 12s; --pd: -1s; --pw: 7px; --ph: 16px; }
.papelitos i:nth-child(4)  { --px: 28%; --pc: var(--verde-vivo);    --pt: 10s; --pd: -8s; }
.papelitos i:nth-child(5)  { --px: 35%; --pc: var(--morado-vivo);   --pt: 13s; --pd: -4s; --pr: 50%; --pw: 8px; --ph: 8px; }
.papelitos i:nth-child(6)  { --px: 42%; --pc: var(--naranja-vivo);  --pt: 9.5s; --pd: -3s; --pw: 12px; --ph: 7px; }
.papelitos i:nth-child(7)  { --px: 49%; --pc: var(--menta-vivo);    --pt: 11.5s; --pd: -9s; }
.papelitos i:nth-child(8)  { --px: 56%; --pc: var(--rosa-vivo);     --pt: 10.5s; --pd: -5s; --pr: 50%; --pw: 9px; --ph: 9px; }
.papelitos i:nth-child(9)  { --px: 63%; --pc: var(--cielo-vivo);    --pt: 12.5s; --pd: -7s; --pw: 7px; --ph: 15px; }
.papelitos i:nth-child(10) { --px: 70%; --pc: var(--amarillo-vivo); --pt: 9s;  --pd: -2.5s; }
.papelitos i:nth-child(11) { --px: 77%; --pc: var(--coral-vivo);    --pt: 11s; --pd: -10s; --pr: 50%; --pw: 8px; --ph: 8px; }
.papelitos i:nth-child(12) { --px: 84%; --pc: var(--morado-vivo);   --pt: 13.5s; --pd: -6.5s; --pw: 12px; --ph: 7px; }
.papelitos i:nth-child(13) { --px: 91%; --pc: var(--verde-vivo);    --pt: 10s; --pd: -1.5s; }
.papelitos i:nth-child(14) { --px: 96%; --pc: var(--azul-vivo);     --pt: 12s; --pd: -8.5s; --pr: 50%; --pw: 9px; --ph: 9px; }
.papelitos i:nth-child(15) { --px: 3%;  --pc: var(--naranja-vivo);  --pt: 12s; --pd: -11s; --pw: 7px; --ph: 15px; }
.papelitos i:nth-child(16) { --px: 60%; --pc: var(--rosa-vivo);     --pt: 14s; --pd: -12s; --pw: 12px; --ph: 7px; }

/* ═══════════════════════════════════ pie */
.pie { background: var(--perla); padding: 30px 0 110px; font-size: 13px; color: var(--texto-2); }
.pie-fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center;
            padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.pie-links { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.pie-links a { color: var(--texto); font-size: 13px; }
.pie small { display: block; margin-top: 16px; font-size: 13px; }

/* ═══════════════════════════════════ la barra de abajo en teléfono (la de "Comprar" de Apple) */
.barra-abajo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  background: var(--vidrio-fuerte); border-top: 1px solid var(--linea);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  transform: translateY(110%); transition: transform .45s var(--curva);
}
.barra-abajo.visible { transform: none; }
.barra-abajo p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--texto); }
.barra-abajo p strong { font-size: 15px; }

/* ═══════════════════════════════════ aparecer al bajar: sube y se aclara */
.aparece > * { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--suave), transform 1s var(--suave); }
.aparece.visible > * { opacity: 1; transform: none; }
.aparece.visible > *:nth-child(2) { transition-delay: .08s; }
.aparece.visible > *:nth-child(3) { transition-delay: .16s; }
.aparece.visible > *:nth-child(4) { transition-delay: .24s; }
.aparece.visible > *:nth-child(n+5) { transition-delay: .32s; }

/* El teléfono del explorador crece un poco mientras entra en pantalla: el zoom de Apple. Solo
   donde el navegador sabe ligar la animación al scroll; donde no, se queda quieto. */
@supports (animation-timeline: view()) {
  .tel-grande { animation: acercar linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  @keyframes acercar { from { transform: scale(.88) translateY(40px); } to { transform: none; } }
}

/* ═══════════════════════════════════ tableta y computadora
   El teléfono es el caso normal. Esto es el añadido, no al revés. */
@media (min-width: 600px) {
  .rejilla { --columnas: 3; --hueco: 18px; }
  .ej-titulo { font-size: clamp(30px, 4.2vw, 44px); }
  .ej-fecha .larga { display: inline; }
  .ej-fecha .corta { display: none; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 734px) {
  .panel-demo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; }
  .explorador { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funcion.ancha { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 34px; }
  /* Con dos columnas quedan 7 sueltas: la última va ancha para no dejar un hueco. */
  .funcion:last-child { grid-column: span 2; }
  .barra-abajo { display: none; }
  .portada { padding-top: 60px; }
  .seccion { padding: 120px 0; }
  .lamina { flex-basis: min(920px, 84vw); height: auto; aspect-ratio: 16 / 10; padding: clamp(30px, 4vw, 52px);
            grid-template-rows: none; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px; align-items: start; }
  .lamina-dibujo { height: 100%; font-size: clamp(12px, 1.35vw, 16px); }
  .lamina-texto { padding-top: 6px; }
  .preguntas { padding: 4px 32px; }
}
@media (min-width: 1068px) {
  :root { --gutter: 32px; }
  .barra-links { display: flex; }
  .funciones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .funcion:last-child { grid-column: auto; }
  .funcion { min-height: 250px; }
  .rejilla { --columnas: 4; --hueco: 20px; }
  .ej-titulo { font-size: clamp(34px, 2.9vw, 44px); }
  .ej-texto { padding: 18px 18px 20px; }
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .explorador { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .seccion { padding: 140px 0; }
}
/* Los avisos junto a los teléfonos, desde 1200 px: antes se encimaban a los teléfonos de las
   orillas. Se miden desde el centro, no desde la orilla, para no irse lejos en pantallas enormes. */
@media (min-width: 1200px) {
  .chip { position: absolute; z-index: 7; display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px 12px;
          border-radius: 22px; background: var(--vidrio-fuerte); box-shadow: var(--sombra-flota); text-align: left;
          -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
          animation: chip-llega .9s var(--suave) backwards, chip-flota 5s ease-in-out infinite alternate; }
  .chip-izq { right: calc(50% + 330px); top: 22%; animation-delay: 1.1s, 0s; }
  .chip-der { left: calc(50% + 350px); top: 50%; animation-delay: 1.35s, -2.5s; }
}
@media (max-width: 733px) {
  .barra-dentro { height: 50px; }
  .eyebrow { font-size: 17px; }
  .portada-botones .boton { width: 100%; max-width: 340px; }
  .abanico { margin-top: 40px; }
  .tema p { padding-left: 26px; }
  /* en teléfono, el teléfono del explorador va ARRIBA de las píldoras */
  .explorador-visual { order: -1; }
  .filtro { gap: 6px; }
  .filtro button { font-size: 15px; padding: 9px 9px 9px 13px; gap: 6px; }
  .filtro .cuantas { min-width: 22px; padding: 3px 6px; }
}

/* ═══════════════════════════════════ "Crea tu invitación": el formulario como una app (crear.js)
   Llamada del 28-sep-2026: una pregunta a la vez, en grande, como una app; al escoger cada estilo la invitación se
   abre en el teléfono (la página de verdad, /muestra, escalada); al final, confeti. Pantalla completa en el celular
   y en la compu; en la compu, el teléfono al lado, siempre; en el celular, arriba de las opciones de estilo y color.
   Contraste: la pregunta en --texto (16.8) · la nota en --texto-2 (5.1) · el aviso en rosa tinta sobre su tinte
   (5.3) · cada tipo de fiesta, --texto sobre su tinte (14.8 o más) · el "saltar" en --enlace (5.6). */
html.crear-abierto { overflow: hidden; }
.crear {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--fondo); color: var(--texto); overflow: hidden;
}
.crear[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.crear::backdrop { background: var(--fondo); }
.crear-arriba {
  display: flex; align-items: center; gap: 14px; width: 100%; max-width: var(--ancho-2); margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) var(--gutter) 10px;
}
.crear-icono {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--perla); color: var(--texto);
  transition: background-color .25s var(--curva);
}
.crear-icono:hover { background: var(--perla-2); }
.crear-icono.oculto { visibility: hidden; }
.crear-icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* El avance: un <meter> (un ancho variable sin estilos en línea), con el brillo de keynote. */
.crear-avance {
  flex: 1; min-width: 0; height: 6px; border: 0; border-radius: 980px; overflow: hidden;
  -webkit-appearance: none; appearance: none; background: var(--perla-2);
}
.crear-avance::-webkit-meter-bar { height: 6px; border: 0; border-radius: 980px; background: var(--perla-2); }
.crear-avance::-webkit-meter-optimum-value { border-radius: 980px; background: var(--degradado); transition: width .5s var(--suave); }
.crear-avance::-moz-meter-bar { border-radius: 980px; background: var(--degradado); }

.crear-cuerpo {
  /* Lo de abajo: el mismo aire aquí y en los botones pegados (.crear-acciones), para que se peguen a la orilla. */
  --crear-abajo: max(16px, env(safe-area-inset-bottom));
  position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; align-content: start; justify-items: center;
  padding: 8px var(--gutter) var(--crear-abajo);
}
.crear-pasos { width: min(34rem, 100%); display: grid; gap: 16px; align-content: start; padding-top: min(6vh, 48px); }
.crear-paso { display: grid; gap: 14px; }
.crear-eyebrow { margin: 0; font-size: 17px; font-weight: 600; color: var(--morado-tinta); }
.crear-pregunta { margin: 0; font-size: clamp(32px, 5.4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -.03em; }
.crear-campo {
  width: 100%; min-width: 0; padding: 16px 18px; border: 2px solid transparent; border-radius: 14px;
  font: 400 22px/1.25 var(--fuente); letter-spacing: -.012em; color: var(--texto); background: var(--perla);
  transition: border-color .2s var(--curva), background-color .2s var(--curva), box-shadow .2s var(--curva);
}
.crear-campo::placeholder { color: var(--texto-3); }
.crear-campo:focus { outline: none; border-color: var(--azul); background: var(--fondo); box-shadow: 0 0 0 4px var(--azul-anillo); }
.crear-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
/* El WhatsApp con su lada: la bandera y el código a la izquierda, del mismo alto que el campo. */
.crear-tel-fila { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.crear-lada { width: auto; padding-inline: 12px 10px; cursor: pointer; }
/* A 320 px la lada (126 px) dejaba el número cortado: "55 1234 56…" (visto el 29-sep-2026). Un poco más chicos, cabe entero. */
@media (max-width: 22.5rem) {
  .crear-tel-fila .crear-campo { font-size: 18px; padding-inline: 14px; }
  .crear-tel-fila .crear-lada { padding-inline: 10px 6px; }
}
.crear-etiqueta { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }   /* su texto va en un <span>: un renglón */
.crear-etiqueta i { font-style: normal; font-weight: 400; color: var(--texto-2); }
.crear-nota { margin: 0; font-size: 15px; color: var(--texto-2); }
.crear-nota-arriba { margin-top: -4px; }
.crear-texto { margin: 0; font-size: 19px; line-height: 1.42; color: var(--texto-2); }
/* Los botones del final, en el mismo lugar en todos los pasos: "Continuar" y, si la pregunta se puede saltar, el
   "Todavía no…" DEBAJO (antes iba arriba del botón, dentro de su paso, y el botón principal cambiaba de altura). Se pegan
   abajo al bajar: con diez estilos, "Continuar" quedaba al final de la lista, a 1,900 px (visto en el celular, 28-sep). Lo
   que pasa por debajo se difumina. Lo pegajoso respeta el relleno de su caja: por eso el bottom negativo. */
.crear-acciones {
  position: sticky; bottom: calc(-1 * var(--crear-abajo)); z-index: 1;
  display: grid; justify-items: start; gap: 2px; margin-top: 4px; padding: 12px 0 var(--crear-abajo);
  background: linear-gradient(var(--fondo-0), var(--fondo) 12px);
}
.crear-saltar {
  justify-self: start; padding: 10px 0; border: 0; background: none; cursor: pointer;
  font: 400 17px/1.3 var(--fuente); color: var(--enlace);
}
.crear-saltar:hover { text-decoration: underline; }
.crear-seguir { min-width: 12rem; }
.crear-aviso { margin: 0; padding: 12px 16px; border-radius: 14px; font-size: 15px; background: var(--rosa-tinte); color: var(--rosa-tinta); }

/* Las opciones: tarjetas redondas; lo elegido, con el anillo azul (como las de configurar un iPhone). */
.crear-opciones { display: grid; gap: 10px; }
.crear-opcion {
  position: relative; border: 0; border-radius: var(--radio-lista); padding: 18px 20px; cursor: pointer; text-align: left;
  font: 600 19px/1.2 var(--fuente); letter-spacing: -.015em; color: var(--texto); background: var(--perla);
  box-shadow: inset 0 0 0 2px transparent;
  transition: box-shadow .25s var(--curva), background-color .25s var(--curva), transform .2s var(--curva);
}
.crear-opcion:hover { background: var(--perla-2); }
.crear-opcion[aria-pressed="true"] { background: var(--fondo); box-shadow: inset 0 0 0 2px var(--azul), var(--sombra-elegido); }
.crear-tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crear-tipo { min-height: 92px; display: flex; align-items: flex-end; padding-top: 40px; }
.crear-tipo::before { content: ''; position: absolute; left: 20px; top: 18px; width: 16px; height: 16px; border-radius: 50%; background: var(--c-vivo, var(--azul-vivo)); }
.crear-tipo.t-boda       { --c-vivo: var(--rosa-vivo);     background: var(--rosa-tinte); }
.crear-tipo.t-xv         { --c-vivo: var(--morado-vivo);   background: var(--morado-tinte); }
.crear-tipo.t-bautizo    { --c-vivo: var(--cielo-vivo);    background: var(--cielo-tinte); }
.crear-tipo.t-babyshower { --c-vivo: var(--amarillo-vivo); background: var(--amarillo-tinte); }
.crear-tipo.t-cumpleanos { --c-vivo: var(--naranja-vivo);  background: var(--naranja-tinte); }
.crear-tipo.t-otro       { --c-vivo: var(--verde-vivo);    background: var(--verde-tinte); }
.crear-tipo[aria-pressed="true"] { background: var(--fondo); }
.crear-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.crear-chip { padding: 12px 6px; text-align: center; font-size: 16px; border-radius: 980px; }
.crear-disenos { grid-template-columns: minmax(0, 1fr); }
/* align-content: start: con diez diseños en dos columnas, la tarjeta que su vecina estira separaba el título de su texto
   (la rejilla repartía el alto entre sus dos renglones). 28-sep-2026. */
.crear-diseno { display: grid; gap: 4px; align-content: start; }
.crear-diseno-nombre { font-size: 19px; }
.crear-diseno-detalle { font-size: 15px; font-weight: 400; line-height: 1.35; letter-spacing: -.01em; color: var(--texto-2); }
.crear-paletas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crear-paleta { display: grid; justify-items: center; gap: 8px; padding: 14px 6px 12px; text-align: center; }
.crear-paleta-muestra { width: 64px; height: 28px; }
.crear-paleta-muestra circle { stroke: var(--linea-2); stroke-width: 1; }   /* el papel, casi blanco, se pierde sin orilla */
.crear-paleta-nombre { font-size: 13px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.crear-propios summary { cursor: pointer; padding: 8px 0; font-size: 17px; color: var(--enlace); list-style: none; }
.crear-propios summary::-webkit-details-marker { display: none; }
.crear-propios summary::after { content: ' ›'; }
.crear-propios[open] summary::after { content: ' ˅'; }
.crear-tres { display: grid; gap: 10px; margin: 6px 0 10px; }
.crear-color { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; background: var(--perla); cursor: pointer; }
.crear-color input { flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.crear-color input::-webkit-color-swatch-wrapper { padding: 0; }
.crear-color input::-webkit-color-swatch { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--linea-2); }
.crear-color input::-moz-color-swatch { border: 0; border-radius: 50%; }
.crear-color span { display: grid; font-size: 14px; line-height: 1.3; color: var(--texto-2); }
.crear-color b { font-size: 16px; color: var(--texto); }

/* El final: la ruedita mientras se arma, y la fiesta. */
.crear-armando { display: grid; justify-items: start; gap: 14px; padding-top: 12px; }
.crear-rueda { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--perla-2); border-top-color: var(--azul); animation: girar .9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
#crearFelicidades, #crearError { display: grid; gap: 16px; justify-items: start; }
.crear-final .crear-pregunta { font-size: clamp(40px, 7vw, 64px); }
.crear-confeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
.crear-confeti.activo { display: block; }

/* El teléfono: la invitación de verdad, a 390 px, escalada dentro de la maqueta. En el celular, arriba de las
   opciones de estilo y color, pegado arriba mientras se baja; en la compu, al lado, siempre. */
/* En el celular es una franja de orilla a orilla (lo que se baja pasa POR DEBAJO), con un difuminado abajo. Del ancho del
   teléfono, al bajar por los diez diseños se veían las tarjetas a los dos lados de él, encimadas (28-sep-2026, noche). Y se
   pega 8 px más arriba: lo pegajoso respeta el relleno de .crear-cuerpo, y en esa rayita se asomaban las tarjetas. */
.crear-telefono { display: none; order: -1; position: sticky; top: -8px; z-index: 1; padding: 12px var(--gutter) 14px;
                  justify-self: stretch; margin-inline: calc(-1 * var(--gutter)); background: var(--fondo); }
.crear-telefono::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 16px; pointer-events: none;
                         background: linear-gradient(var(--fondo), var(--fondo-0)); }
.crear.con-telefono .crear-telefono { display: block; }
.crear-tel-marco { position: relative; overflow: hidden; width: fit-content; margin-inline: auto; padding: 6px; border-radius: 34px;
                   background: var(--tel-bisel); box-shadow: var(--sombra-tel); }
/* Las esquinas de la pantalla, pintadas ENCIMA con el color del bisel. El marco escalado es su propia capa y Chrome no
   siempre lo recorta con las esquinas redondas (ni con overflow ni con clip-path): al cambiar los colores quedaba un
   rectángulo blanco en las dos esquinas de abajo (visto en la compu, 28-sep-2026). Esto no depende de recortar nada. */
.crear-tel-marco::after { content: ''; position: absolute; inset: 6px; z-index: 2; pointer-events: none;
                          border-radius: 28px; box-shadow: 0 0 0 24px var(--tel-bisel); }
.crear-tel-pantalla { position: relative; overflow: hidden; width: 164px; height: 355px; border-radius: 28px; background: var(--tel-vacio);
                      clip-path: inset(0 round 28px); }   /* el marco escalado es su propia capa: overflow no recorta sus esquinas, clip-path sí */
.crear-marco {
  position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0;
  transform: scale(.42); transform-origin: 0 0; opacity: 0; transition: opacity .35s var(--curva);
  /* redondo él mismo, en SU escala (el radio de la pantalla entre la escala): su capa no respeta el recorte de arriba */
  border-radius: 67px; clip-path: inset(0 round 67px);
}
.crear.muestra-lista .crear-marco { opacity: 1; }
@media (max-width: 420px) {
  .crear-par { grid-template-columns: minmax(0, 1fr); }
  .crear-chips { gap: 8px; }
  .crear-chip { padding: 12px 2px; }
}
/* En el celular (parado o acostado, todo lo angosto): los botones a lo ancho, como los de la landing, y el "Todavía no…"
   al centro, debajo. Y "¿Qué celebras?" en una columna, cada fiesta en un renglón con su punto al lado: en dos columnas
   las palabras se partían ("Un / cumpleaños", "Otra / celebración") y cada fila medía distinto. Las seis caben sin bajar. */
@media (max-width: 37.5rem) {
  .crear-acciones { justify-items: stretch; }
  .crear-seguir { width: 100%; min-width: 0; }
  .crear-saltar { justify-self: center; }
  .crear-tipos { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .crear-tipo { min-height: 58px; align-items: center; gap: 12px; padding: 14px 18px; }
  .crear-tipo::before { position: static; flex: none; width: 14px; height: 14px; }
}
/* En el iPhone, el día y la hora vacíos se aplastaban y el texto iba al centro: que midan y se alineen como los demás. */
@supports (-webkit-touch-callout: none) {
  .crear-campo[type="date"], .crear-campo[type="time"] { -webkit-appearance: none; appearance: none; min-height: 64px; }
  .crear-campo::-webkit-date-and-time-value { text-align: left; }
}
/* En un celular bajito y parado (un iPhone SE), al final ("¡Felicidades!") el teléfono no va: con él, "Ver mi invitación"
   quedaba debajo de la orilla (a 756 px en una pantalla de 640) y había que buscarlo. Ese botón abre la misma invitación,
   completa. (28-sep-2026, noche) */
@media (max-height: 44rem) and (orientation: portrait) and (max-width: 59.99rem) {
  .crear.con-telefono[data-paso="listo"] .crear-telefono { display: none; }
}
@media (max-width: 59.99rem) {
  .crear-tel-marco { box-shadow: var(--sombra-tel-chica); }
}
/* En un celular bajito (un iPhone SE), el teléfono más chico: si no, las opciones de abajo casi no se ven. */
@media (max-height: 44rem) and (max-width: 59.99rem) {
  .crear-tel-pantalla { width: 132px; height: 286px; border-radius: 22px; clip-path: inset(0 round 22px); }
  .crear-tel-marco { border-radius: 28px; }
  .crear-tel-marco::after { border-radius: 22px; }
  .crear-marco { transform: scale(.3385); border-radius: 65px; clip-path: inset(0 round 65px); }
}
/* Y parado en uno de 640 o 667 de alto, más chico todavía: con la franja de 324 px y "Continuar" pegado abajo, a las
   opciones les quedaban 186 px (una tarjeta). Así, unas 230. */
@media (max-height: 42rem) and (orientation: portrait) and (max-width: 59.99rem) {
  .crear-tel-pantalla { width: 112px; height: 242px; border-radius: 19px; clip-path: inset(0 round 19px); }
  .crear-tel-marco { border-radius: 25px; }
  .crear-tel-marco::after { border-radius: 19px; }
  .crear-marco { transform: scale(.2872); }
}
/* El celular acostado (ancho y bajito): el teléfono va AL LADO, como en la compu. Arriba, en 390 px de alto, la franja
   medía lo mismo que todo el hueco: la pregunta y las opciones quedaban debajo de ella y no se veían nunca (28-sep-2026). */
@media (orientation: landscape) and (max-height: 32rem) and (max-width: 59.99rem) {
  /* Con poco relleno abajo: al llegar al final, lo pegajoso sube con su caja, y con 28 px el teléfono se metía 2 px
     debajo del encabezado. */
  .crear-cuerpo { grid-template-columns: minmax(0, 34rem) auto; justify-content: center; align-items: start; column-gap: 32px;
                  --crear-abajo: max(12px, env(safe-area-inset-bottom)); }
  .crear-pasos { padding-top: 16px; }
  .crear-telefono { order: 0; top: 8px; margin: 8px 0 0; padding: 0; background: none; }
  .crear-telefono::after { display: none; }
}
/* Más bajito todavía (un Android de 360 px de alto, un iPhone SE de lado): el teléfono, más chico, para que quepa ENTERO
   entre el encabezado y la orilla de abajo. El marco se redondea en su propia escala (el radio entre la escala: 65 px). */
@media (orientation: landscape) and (max-height: 24rem) and (max-width: 59.99rem) {
  .crear-tel-pantalla { width: 112px; height: 242px; border-radius: 19px; clip-path: inset(0 round 19px); }
  .crear-tel-marco { border-radius: 25px; }
  .crear-tel-marco::after { border-radius: 19px; }
  .crear-marco { transform: scale(.2872); }
}
@media (orientation: landscape) and (max-height: 21rem) and (max-width: 59.99rem) {
  .crear-tel-pantalla { width: 96px; height: 208px; border-radius: 16px; clip-path: inset(0 round 16px); }
  .crear-tel-marco { border-radius: 22px; }
  .crear-tel-marco::after { border-radius: 16px; }
  .crear-marco { transform: scale(.2462); }
}
@media (min-width: 60rem) {
  .crear-cuerpo { grid-template-columns: minmax(0, 34rem) auto; justify-content: center; align-items: start; column-gap: 80px; }
  .crear-pasos { padding-top: 9vh; }
  .crear-telefono, .crear.con-telefono .crear-telefono { display: block; order: 0; top: 16px; margin: 16px 0 0; padding: 0; background: none; }
  .crear-telefono::after { display: none; }
  .crear-tel-marco { padding: 9px; border-radius: 56px; }
  .crear-tel-marco::after { inset: 9px; border-radius: 47px; }
  .crear-tel-pantalla { width: 312px; height: 675px; border-radius: 47px; clip-path: inset(0 round 47px); }
  .crear-marco { transform: scale(.8); border-radius: 59px; clip-path: inset(0 round 59px); }
  .crear-disenos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crear-paletas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════ el botón de WhatsApp, en todas las páginas (28-sep-2026)
   Verde tinta sobre el vidrio (5.4 sobre blanco). En el celular, arriba de la barra de abajo. */
.wa-flotante {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 65;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px; border-radius: 980px;
  background: var(--vidrio-fuerte); color: var(--verde-tinta); box-shadow: var(--sombra-flota);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font-size: 15px; font-weight: 600; transition: transform .25s var(--curva);
}
.wa-flotante:hover { transform: scale(1.04); text-decoration: none; }
.wa-flotante svg { width: 28px; height: 28px; fill: currentColor; }
.wa-flotante-texto { display: none; color: var(--texto); }
@media (min-width: 734px) {
  .wa-flotante { bottom: calc(24px + env(safe-area-inset-bottom)); right: 24px; padding: 10px 18px 10px 12px; }
  .wa-flotante-texto { display: inline; }
}

/* ═══════════════════════════════════ todo lo que trae (2-oct-2026): mosaicos chicos por grupo, con el plan de cada cosa.
   Los arma el servidor (piezas/funciones_landing.js) con los colores de las tarjetas del panel (.f-<color>). */
.todo-grupo + .todo-grupo { margin-top: 56px; }
.todo-grupo-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 18px; }
.todo-grupo-cabeza h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--texto); }
.todo-grupo-cabeza p { margin: 0; font-size: 17px; color: var(--texto-2); }
.todo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.todo-item { background: var(--f-tinte); border-radius: 18px; padding: 16px 16px 18px; min-width: 0; }
.todo-icono { display: block; width: 36px; height: 36px; padding: 8px; margin-bottom: 12px; border-radius: 10px;
              background: var(--f-vivo); fill: none; stroke: var(--f-glifo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.f-claro .todo-icono { background: var(--degradado-icono); }
.todo-item .todo-plan { display: inline-block; margin: 0 0 8px; padding: 2px 9px; border-radius: 980px; font-size: 13px; font-weight: 600;
                        line-height: 1.5; background: var(--blanco); color: var(--f-tinta); }
.todo-item h4 { margin: 0 0 4px; font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--texto);
                overflow-wrap: anywhere; }
.todo-item p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--texto-2-tinte); }
.todo:empty { display: none; }
@media (min-width: 734px) {
  .todo-lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .todo-item { padding: 20px 20px 22px; }
}
@media (min-width: 1068px) { .todo-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ═══════════════════════════════════ la página de cada celebración (/invitaciones-digitales/boda…, 2-oct-2026)
   Lo de la landing (piezas/paginas_tipo.js usa sus mismas clases), más la miga de pan arriba del título. Sin teléfonos
   abajo de la portada: los ejemplos de esa celebración van justo después. */
.tipo-portada { padding-bottom: 88px; }
.migas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0 0 18px;
         font-size: 13px; color: var(--texto-2-tinte); }
.migas a { color: var(--enlace); }
.pie-tipos { margin-top: 18px; }
.pie-tipos:empty { display: none; }
.pie-tipos span[aria-current] { color: var(--texto-2); }

/* ═══════════════════════════════════ la música (1-oct-2026): el botón para quitarla, abajo a la izquierda
   El espejo del de "¿Dudas?" (misma altura, mismo vidrio), para que no se encimen. Solo existe si hay canción.
   Solo el ícono (la bocina), también en la compu: con su texto, a 1440 tapaba la tarjeta de "Familia Ruiz Alcántara,
   confirmó 4 lugares" de la portada (visto en Chrome, 2-oct-2026). Lo que hace lo dicen su aria-label y su title. */
.musica-boton {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 65;
  display: inline-flex; align-items: center; gap: 8px; padding: 12px; border: 0; border-radius: 980px;
  background: var(--vidrio-fuerte); color: var(--texto); box-shadow: var(--sombra-flota); cursor: pointer;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  font: inherit; font-size: 15px; font-weight: 600; transition: transform .25s var(--curva);
}
.musica-boton:hover { transform: scale(1.04); }
.musica-boton svg { width: 28px; height: 28px; flex: none; }
.musica-bocina { fill: currentColor; }
.musica-onda, .musica-cruz { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.musica-onda { display: none; }
.musica-boton.suena .musica-onda { display: inline; animation: musica-latir 1.6s ease-in-out infinite; }
.musica-boton.suena .musica-onda + .musica-onda { animation-delay: .25s; }
.musica-boton.suena .musica-cruz { display: none; }
@keyframes musica-latir { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.musica-boton-texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pie-credito { margin-top: 6px; }
@media (min-width: 734px) {
  .musica-boton { bottom: calc(24px + env(safe-area-inset-bottom)); left: 24px; padding: 10px; }
}
/* En el teléfono, los dos flotantes van hasta abajo mientras no está la barra de "Crea la tuya", y suben con ella cuando
   sale (barraAbajo() pone .con-barra). Antes iban siempre a 86 px (arriba de donde sale la barra): en la portada, a 375
   de ancho tapaban las puntas de "Ver ejemplos", y a 320 las de "Crea tu invitación" (visto en Chrome, 2-oct-2026).
   Con `translate` y no `transform`: el :hover de cada uno usa transform (scale) y uno le borraría al otro. */
@media (max-width: 733px) {
  .wa-flotante, .musica-boton { transition: transform .25s var(--curva), translate .45s var(--curva); }
  body.con-barra .wa-flotante, body.con-barra .musica-boton { translate: 0 -70px; }
}

/* ═══════════════════════════════════ separaciones
   Clases y no style="": la CSP es style-src 'self' y un estilo en línea se bloquea. */
.arriba-60 { margin-top: 60px; }
.arriba-44 { margin-top: 44px; }
.arriba-50 { margin-top: 50px; }
.arriba-22 { margin-top: 22px; }

/* ═══════════════════════════════════ NADA se mueve si la persona pidió que no
   Va al final para ganarle a todo. Una animación que marea no es un detalle de gusto. Lo que se
   mueve se queda en su pose más clara: el sobre ABIERTO con la invitación afuera, los
   teléfonos en su abanico, los papelitos repartidos. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .aparece > * { opacity: 1; transform: none; }
  .sobre-solapa { transform: rotateX(180deg); z-index: 1; }
  .sobre-sello { opacity: 0; }
  .sobre-carta { transform: translateY(-62%); }
  .pantalla-tema .sobre .sobre-solapa { transform: none; z-index: 4; }
  .pantalla-tema .sobre .sobre-sello { opacity: 1; }
  .ondas i:nth-child(1) { transform: scaleY(.5); }
  .ondas i:nth-child(2) { transform: scaleY(.9); }
  .ondas i:nth-child(3) { transform: scaleY(.35); }
  .ondas i:nth-child(4) { transform: scaleY(.75); }
  .ondas i:nth-child(5) { transform: scaleY(.55); }
  .rsvp-toque { opacity: 0; }
  .luz { transform: translate(-50%, -50%); }
  .papelitos i { transform: translateY(var(--quieto, -50%)); }
  .papelitos i:nth-child(3n)   { --quieto: -6%; }
  .papelitos i:nth-child(3n+1) { --quieto: -88%; }
  .papelitos i:nth-child(3n+2) { --quieto: -14%; }
  .punto.activo::after { transform: scaleX(1); }
  .tel-grande { transform: none; }
}