/* Sistema de holasoynatasha.com (Funnel Display + Instrument Serif + Outfit, Nighty para números grandes;
   ciruela, crema, coral, dorado, cobalto y menta), con la identidad de evento en vivo: escenario oscuro,
   pantalla EN VIVO, boleto y cuenta regresiva. */
@font-face { font-family: "Nighty"; font-display: swap; src: url(fuentes/nighty.otf) format("opentype"); }

:root {
  --crema: #FFF6EC; --crema-2: #ECE5DD;
  --noche: #2B1B33; --noche-2: #3B2A46;
  --lila: #BFEFDD; --lila-claro: #FFF6EC;
  --rosa: #FF6B4A; --rosa-osc: #C9472B; --rosa-claro: #FFE1D9;
  --cobalto: #3A4EDB;
  --dorado: #F2B705; --vivo: #FF3B3B;
  --tinta: #2B1B33; --tinta-suave: #6B5A73; --blanco: #FFFFFF;
  --wa: #1FA855;
  --f-display: "Funnel Display", "Outfit", system-ui, sans-serif;
  --f-acento: "Instrument Serif", Georgia, serif;
  --f-texto: "Outfit", system-ui, sans-serif;
  --f-numero: "Nighty", "Instrument Serif", Georgia, serif;
  --r-md: 14px; --r-lg: 26px;
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background-color: var(--blanco); background-image: radial-gradient(rgba(43,27,51,.16) 1.1px, transparent 1.5px); background-size: 32px 32px; background-position: 16px 16px; color: var(--tinta); font-family: var(--f-texto); font-size: 16px; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1; }
p { margin: 0; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
section { padding-block: 96px; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; border-radius: 6px; }

.fr { font-family: var(--f-display); font-weight: 800; letter-spacing: -.04em; }
.pf { font-family: var(--f-acento); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.marca { display: inline-block; background: var(--dorado); color: var(--noche); padding: .02em .18em .08em; rotate: -2deg; box-shadow: .08em .1em 0 rgba(0,0,0,.25); }
.marcatexto { color: var(--tinta); font-weight: 600; padding: 0 .2em; background: linear-gradient(100deg, transparent 0 2%, rgba(242,183,5,.6) 4% 94%, transparent 97%) 0 62%/100% 62% no-repeat; border-radius: .3em .6em .4em .5em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--rosa-osc); }
h2 { font-size: clamp(34px, 4.6vw, 58px); }
h2 .pf { color: var(--rosa-osc); display: block; margin-top: .06em; }
.encabezado { display: flex; flex-direction: column; gap: 16px; max-width: 780px; margin: 0 auto 52px; text-align: center; align-items: center; }
.encabezado p { font-size: 18px; color: var(--tinta-suave); max-width: 58ch; }

/* Grano de papel como en holasoynatasha.com */
.hero::after, .bono::after, .yo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .35; mix-blend-mode: soft-light; }
.cierre::after, .tarjeta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grano); opacity: .16; mix-blend-mode: multiply; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; cursor: pointer; font: 700 14px var(--f-texto); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-radius: 999px; padding: 18px 30px; transition: transform .2s ease, box-shadow .2s ease; white-space: nowrap; }
.btn-cta { background: var(--rosa-osc); color: var(--blanco); }
.btn-cta:hover { transform: translateY(-2px); }
.btn-cta:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; transition: transform .2s ease; }
.btn-cta:hover svg { transform: translateX(4px); }
.btn:disabled { opacity: .75; cursor: wait; transform: none; }
.btn-wa { background: var(--wa); color: var(--blanco); }
.btn-wa:hover { transform: translateY(-2px); }
.btn-wa svg { width: 24px; height: 24px; }

.etiqueta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: var(--vivo); color: var(--blanco); font-weight: 600; font-size: 14px; padding: 9px 18px 9px 14px; border-radius: 999px; }
.etiqueta b { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--blanco); }
.etiqueta b::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--blanco); animation: pulso 1.8s ease-out infinite; }
@keyframes pulso { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Hero: escenario oscuro */
.hero { padding-block: 56px 96px; background: radial-gradient(rgba(255,246,236,.12) 1.4px, transparent 1.6px) 0 0/22px 22px, radial-gradient(120% 80% at 85% 20%, #4A3652 0%, var(--noche) 60%); color: var(--crema); position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.02fr .98fr; gap: 48px; align-items: center; }
.hero-txt { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero h1 { font-size: clamp(42px, 6vw, 76px); }
.hero h1 .l1 { display: block; font-family: var(--f-display); font-weight: 700; letter-spacing: -.03em; font-size: .5em; margin-bottom: .14em; }
.hero h1 .pf { display: block; color: var(--lila); font-size: 1.12em; line-height: .95; }
.hero h1 .l3 { display: block; margin-top: .1em; }
/* En computadora: "invitaciones digitales" en un renglón y "con IA es para ti" en otro */
@media (min-width: 961px) { .hero h1 { font-size: min(5.2vw, 62px); } .hero h1 .pf, .hero h1 .l3 { white-space: nowrap; } }
.bajada { font-size: clamp(17px, 1.6vw, 19px); max-width: 52ch; color: #D9CFE6; }
.bajada strong { color: var(--blanco); font-weight: 600; }

/* Formulario */
.form { background: var(--blanco); color: var(--tinta); border-radius: var(--r-lg); padding: 24px; box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); max-width: 560px; }
.form-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.campo label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.campo input { width: 100%; font: 400 21px/1.2 "Shadows Into Light", var(--f-texto); letter-spacing: .02em; color: #1D3FB8; padding: 12px 16px; min-height: 52px; border-radius: var(--r-md); border: 2px solid var(--lila-claro); background: #FAF8FF; transition: border-color .15s, background .15s; }
.campo input:focus { outline: none; border-color: var(--rosa); background: var(--blanco); }
.campo input.error { border-color: var(--rosa-osc); }
/* lo que la gente escribe se ve como pluma azul; el texto de ejemplo sigue normal */
.campo input::placeholder { font: 400 16px var(--f-texto); letter-spacing: 0; color: #9A8FA3; }
.form .btn { width: 100%; }
.form-nota { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 16px; font-size: 13.5px; color: var(--tinta-suave); }
.form-nota span { display: flex; align-items: center; gap: 6px; }
.form-nota svg { width: 15px; height: 15px; color: var(--rosa-osc); flex: none; }
.mensaje-error { color: var(--rosa-osc); font-size: 14px; font-weight: 500; margin-top: 12px; text-align: center; display: none; }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Horario del webinar y convertidor por país */
.horario { display: flex; flex-direction: column; gap: 10px; max-width: 560px; padding: 16px 18px; border-radius: var(--r-md); background: rgba(255,246,236,.07); border: 1px solid rgba(255,246,236,.14); }
.horario-cdmx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 17px; }
.horario-cdmx svg { width: 20px; height: 20px; color: var(--dorado); flex: none; }
.horario-cdmx b { font-family: var(--f-display); font-weight: 800; letter-spacing: -.02em; color: var(--blanco); }
.horario-cdmx span { font-size: 14px; color: #D9CFE6; }
.horario-pais { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: #D9CFE6; }
.horario-pais select { font: 500 15px var(--f-texto); color: var(--tinta); background: var(--crema); border: 0; border-radius: 999px; padding: 9px 34px 9px 14px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232B1B33' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; max-width: 100%; }
.horario-local { font-size: 15px; color: var(--lila); min-height: 1.4em; }
.horario-local b { color: var(--blanco); font-weight: 600; }
.horario-local:empty { display: none; }
.cierre-txt .horario-local { color: var(--lila); }
.cierre-txt .horario-local b { color: var(--dorado); }
.checklist .cal { display: inline-block; margin-top: 6px; font-weight: 600; color: var(--cobalto); text-decoration: none; }
.checklist .cal:hover { text-decoration: underline; }

/* Escena: pantalla de transmisión */
.escena { position: relative; min-height: 560px; min-width: 0; display: grid; place-items: center; }
.pantalla { width: min(100%, 470px); background: var(--noche-2); border-radius: 22px; padding: 10px; box-shadow: 12px 14px 0 rgba(0,0,0,.28), 0 0 0 1px rgba(255,246,236,.12); rotate: 2deg; position: relative; z-index: 2; }
.pantalla-barra { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
.vivo { display: inline-flex; align-items: center; gap: 7px; background: var(--vivo); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; padding: 4px 10px 4px 8px; border-radius: 6px; }
.vivo b { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: parpadeo 1.2s infinite; }
@keyframes parpadeo { 50% { opacity: .2; } }
.viendo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--lila); font-weight: 500; }
.viendo svg { width: 15px; height: 15px; }
.pantalla-vid { position: relative; aspect-ratio: 4/3.3; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 30% 40%, #FFF6EC 0, transparent 55%), linear-gradient(150deg, var(--lila) 0%, #FFE1D9 100%); }
.pantalla-nat { position: absolute; left: -4%; bottom: 0; width: 78%; height: auto; }
.pantalla-inv { position: absolute; right: 5%; top: 9%; width: 30%; rotate: 6deg; filter: drop-shadow(0 14px 18px rgba(28,18,48,.35)); animation: flota 6s ease-in-out infinite; }
.pantalla-pie { display: flex; align-items: center; gap: 12px; padding: 12px 6px 4px; }
.pie-titulo { font-size: 13px; font-weight: 600; color: var(--crema); white-space: nowrap; }
.pie-barra { flex: 1; height: 5px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
.pie-barra i { display: block; height: 100%; width: 42%; background: var(--rosa); border-radius: 4px; }
.chat { position: absolute; left: -4%; bottom: 78px; z-index: 3; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.msj { background: rgba(255,255,255,.92); color: var(--tinta); font-size: 13px; padding: 8px 14px; border-radius: 16px 16px 16px 4px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); animation: aparece 9s ease-in-out infinite; opacity: 0; white-space: nowrap; }
.msj b { display: block; font-size: 11px; color: var(--rosa-osc); }
.m1 { animation-delay: 0s; } .m2 { animation-delay: 1.2s; margin-left: 18px; } .m3 { animation-delay: 2.4s; }
@keyframes aparece { 0% { opacity: 0; transform: translateY(10px); } 8%, 80% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-6px); } }
.boleto { position: absolute; right: -2%; top: 0; z-index: 4; rotate: 7deg; display: flex; background: var(--dorado); color: var(--noche); border-radius: 14px; box-shadow: 0 18px 30px -14px rgba(0,0,0,.6); animation: flota 5.5s ease-in-out infinite; animation-delay: -2s;
  -webkit-mask: radial-gradient(circle 9px at 74px 0, #0000 98%, #000) top/100% 51% no-repeat, radial-gradient(circle 9px at 74px 100%, #0000 98%, #000) bottom/100% 51% no-repeat;
          mask: radial-gradient(circle 9px at 74px 0, #0000 98%, #000) top/100% 51% no-repeat, radial-gradient(circle 9px at 74px 100%, #0000 98%, #000) bottom/100% 51% no-repeat; }
.boleto-dia { width: 74px; text-align: center; padding: 12px 0; line-height: 1; border-right: 2px dashed rgba(28,18,48,.35); }
.boleto-dia small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.boleto-dia b { display: block; font-family: var(--f-numero); font-weight: 400; font-size: 40px; margin: 4px 0 2px; }
.boleto-info { padding: 10px 18px 10px 14px; display: flex; flex-direction: column; justify-content: center; line-height: 1.2; }
.boleto-info small { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.boleto-info b { font-family: var(--f-display); font-weight: 800; font-size: 18px; margin: 2px 0; }
.boleto-info span { font-size: 12.5px; font-weight: 500; }
.pill { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; padding: 9px 16px 9px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); animation: flota 5s ease-in-out infinite; }
.pill i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); color: var(--rosa-osc); }
.pill svg { width: 16px; height: 16px; }
.p1 { right: 0; bottom: 18px; background: var(--rosa); color: var(--blanco); animation-delay: -1.6s; }

/* Cinta */
.cinta { background: var(--dorado); color: var(--noche); overflow: hidden; padding-block: 14px; rotate: 1.4deg; margin: -22px -20px 0; position: relative; z-index: 5; }
.cinta-track { display: flex; width: max-content; animation: cinta 30s linear infinite; }
.cinta span { font-family: var(--f-display); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; padding-inline: 20px; display: flex; align-items: center; gap: 40px; white-space: nowrap; }
.cinta span::after { content: "✦"; color: var(--rosa-osc); font-size: .9em; }
@keyframes cinta { to { transform: translateX(-50%); } }

/* Por qué ahora */
.porque-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tarjeta { position: relative; overflow: hidden; border-radius: var(--r-lg); padding: 28px 26px; display: flex; flex-direction: column; gap: 14px; min-width: 0; box-shadow: 0 18px 40px -26px rgba(28,18,48,.55); transition: transform .2s ease, box-shadow .2s ease; }
.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -24px rgba(28,18,48,.6); }
.tarjeta .num { font-family: var(--f-display); font-weight: 800; font-size: 15px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--noche); color: var(--crema); }
.tarjeta h3 { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.08; }
.tarjeta p { font-size: 15.5px; }
.t-a { background: var(--lila); }
.t-b { background: var(--rosa-claro); }
.t-c { background: var(--dorado); }
.t-d { background: var(--blanco); border: 1px solid var(--lila-claro); }

.pasos-sec { background: var(--lila-claro); }

/* Los 3 pasos: scrollytelling. El escenario se queda fijo y cambia de escena según el paso que se lee */
.pasos-sec { background: var(--lila-claro); overflow: visible; padding-bottom: 48px; }
.scrolly { height: 240vh; position: relative; }
.scrolly-pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.escenario { position: relative; height: min(580px, calc(100vh - 48px)); }
.esc { scale: var(--k, 1); }
.esc { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
.esc.activa { opacity: 1; transform: none; }
/* centrado absoluto: si la escena es más alta que el escenario, se encoge alrededor de su centro en vez de desbordarse hacia abajo */
.esc .tel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.esc-etq { position: absolute; top: 0; left: 50%; translate: -50% 0; background: var(--noche); color: var(--crema); font-size: 13px; font-weight: 600; padding: 6px 16px; border-radius: 999px; white-space: nowrap; z-index: 4; }
.esc .ia-chat, .esc .ed { position: absolute; left: 50%; top: 50%; translate: -50% -50%; max-width: none; border-radius: 18px; scale: 1.45; box-shadow: 8px 10px 0 rgba(43,27,51,.14); }
.pasos-txt { position: relative; height: 320px; }
.pasos-puntos { display: flex; gap: 8px; margin-bottom: 18px; }
.pasos-puntos i { width: 28px; height: 6px; border-radius: 4px; background: rgba(28,18,48,.15); transition: background .3s, width .3s; }
.pasos-puntos i.activo { background: var(--rosa-osc); width: 48px; }
.paso-t { position: absolute; left: 0; right: 0; top: 24px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: translateY(24px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.paso-t.activo { opacity: 1; transform: none; pointer-events: auto; }
.paso-num { font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--rosa-osc); }
.paso-t h3 { font-family: var(--f-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; }
.paso-t p { color: var(--tinta-suave); font-size: 18px; max-width: 40ch; }
/* paso 3: celular con la invitación terminada que hace scroll sola */
.tel { width: 250px; height: 520px; background: var(--noche); border-radius: 42px; padding: 10px; box-shadow: 12px 14px 0 rgba(43,27,51,.18); rotate: -3deg; position: relative; }
.tel::before { content: ""; position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 74px; height: 20px; border-radius: 12px; background: var(--noche); z-index: 2; }
.tel-pant { width: 100%; height: 100%; border-radius: 33px; overflow: hidden; background: #FFF8F6; }
.inv-larga { height: 1100px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; color: #5B3A4A; animation: inv-scroll 13s ease-in-out infinite; }
@keyframes inv-scroll { 0%, 12% { transform: translateY(0); } 50%, 62% { transform: translateY(-600px); } 95%, 100% { transform: translateY(0); } }
.il-portada { width: 100%; padding: 46px 18px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: linear-gradient(#FDE3EA, #FFF8F6); }
.il-foto { width: 150px; height: 180px; border-radius: 75px 75px 10px 10px; border: 3px solid #E9C27A; background: url(img/cel-xv.webp) 50% 16% / 260% auto no-repeat; margin-bottom: 8px; }
.il-portada small { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; }
.il-portada b { font-family: var(--f-acento); font-style: italic; font-weight: 500; font-size: 40px; line-height: 1; color: #B4577A; }
.il-portada span { font-family: var(--f-acento); font-style: italic; font-size: 18px; }
.il-portada em { font-style: normal; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
.il-frase { font-family: var(--f-acento); font-style: italic; font-size: 14px; line-height: 1.4; padding: 0 26px; }
.il-cuenta { display: flex; gap: 6px; }
.il-cuenta span { width: 50px; background: #FDE3EA; border-radius: 10px; padding: 7px 0 5px; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; line-height: 1.2; }
.il-cuenta b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 17px; color: var(--tinta); }
.il-bloque { width: 84%; background: var(--blanco); border: 1px solid #F6D9E1; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.il-bloque small { font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: #C9973F; font-weight: 600; }
.il-bloque b { font-family: var(--f-acento); font-style: italic; font-weight: 500; font-size: 19px; color: #B4577A; }
.il-bloque span { font-size: 11px; }
.il-mapa { display: block; width: 100%; height: 60px; margin-top: 6px; border-radius: 10px; background: repeating-linear-gradient(45deg, #ffffff99 0 6px, transparent 6px 14px), #F6D9E1; position: relative; }
.il-mapa::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; translate: -50% -70%; background: #B4577A; border-radius: 50% 50% 50% 0; rotate: -45deg; }
.il-input { display: block; width: 100%; height: 22px; border-radius: 7px; background: #FFF8F6; border: 1px solid #F6D9E1; margin-top: 4px; }
.il-btn { margin-top: 8px; font-family: var(--f-texto) !important; font-style: normal !important; font-size: 11px !important; font-weight: 600 !important; background: #B4577A; color: #fff !important; padding: 7px 16px; border-radius: 99px; }
.il-fin { font-family: var(--f-acento); font-style: italic; font-size: 22px; color: #B4577A; }
.precio-tag { position: absolute; right: 10%; top: 22%; z-index: 3; background: var(--dorado); color: var(--noche); font-family: var(--f-display); font-weight: 800; font-size: 16px; padding: 10px 16px; border-radius: 14px; rotate: 8deg; box-shadow: 0 12px 24px -10px rgba(28,18,48,.5); }

/* paso 1: conversación animada con la IA (ciclo de 11s) */
.ia-chat { position: absolute; left: 50%; top: 50px; translate: -50% 0; width: min(272px, 88%); background: var(--blanco); border-radius: 18px 18px 0 0; padding: 0 12px 14px; height: 294px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 -10px 30px -12px rgba(28,18,48,.35); overflow: hidden; }
.ia-barra { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; padding: 9px 0 7px; border-bottom: 1px solid var(--lila-claro); margin: 0 -12px; padding-inline: 12px; }
.ia-logo { width: 15px; height: 15px; color: var(--noche); flex: none; }
.ia-resp { display: flex; gap: 6px; align-items: flex-start; }
.ia-avatar { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--noche); display: grid; place-items: center; margin-top: 1px; }
.ia-avatar .ia-logo { width: 10px; height: 10px; color: var(--blanco); }
.ia-msj { font-size: 11px; line-height: 1.35; padding: 7px 10px; border-radius: 12px; max-width: 88%; opacity: 0; animation: ia-ciclo 12s infinite; }
.ia-yo { align-self: flex-end; background: var(--lila); border-bottom-right-radius: 4px; animation-name: ia-yo; }
.ia-resp { align-self: flex-start; background: #F4F1F8; border-bottom-left-radius: 4px; animation-name: ia-resp; }
.ia-escribe { align-self: flex-start; display: flex; gap: 4px; background: #F4F1F8; padding: 8px 10px; border-radius: 12px; opacity: 0; animation: ia-escribe 12s infinite; position: absolute; top: 112px; left: 12px; }
.ia-escribe i { width: 5px; height: 5px; border-radius: 50%; background: var(--tinta-suave); animation: ia-punto 1s infinite; }
.ia-escribe i:nth-child(2) { animation-delay: .15s; } .ia-escribe i:nth-child(3) { animation-delay: .3s; }
.ia-mock { align-self: flex-start; width: 118px; background: #FFF8F6; border: 1px solid var(--rosa-claro); border-radius: 12px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; opacity: 0; transform-origin: top left; animation: ia-mock 12s infinite; }
.ia-mock-arco { width: 50px; height: 44px; border-radius: 29px 29px 6px 6px; background: radial-gradient(circle at 70% 30%, #F2B70555 0 12%, transparent 13%), linear-gradient(160deg, #F9D7DF, #E9A7B8); }
.ia-mock small { font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.ia-mock b { font-family: var(--f-acento); font-style: italic; font-weight: 500; font-size: 17px; line-height: 1; color: #B4577A; }
.ia-mock-linea { width: 34px; height: 2px; background: var(--dorado); }
.ia-mock-btn { font-size: 6.5px; font-weight: 600; background: #E9A7B8; color: #fff; padding: 3px 8px; border-radius: 99px; }
@keyframes ia-yo { 0% { opacity: 0; transform: translateY(8px); } 3%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ia-escribe { 0%, 5% { opacity: 0; } 7%, 15% { opacity: 1; } 17%, 100% { opacity: 0; } }
@keyframes ia-resp { 0%, 16% { opacity: 0; transform: translateY(8px); } 19%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ia-mock { 0%, 22% { opacity: 0; transform: scale(.85); } 27%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ia-punto { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

/* paso 2: editor de sitios animado (ciclo de 12s): imagen, título más grande, contador */
.ed { position: absolute; left: 50%; top: 48px; translate: -50% 0; width: 300px; max-width: 94%; height: 292px; background: var(--blanco); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 30px -12px rgba(28,18,48,.4); overflow: hidden; font-size: 10px; }
.ed-barra { position: absolute; inset: 0 0 auto; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 8px; border-bottom: 1px solid var(--lila-claro); font-weight: 600; font-size: 10.5px; }
.ed-barra span { display: flex; gap: 3px; }
.ed-barra span i { width: 7px; height: 7px; border-radius: 50%; background: var(--lila-claro); }
.ed-barra b { margin-left: auto; background: var(--noche); color: var(--blanco); font-weight: 600; font-size: 9.5px; padding: 3px 9px; border-radius: 99px; }
.ed-lado { position: absolute; left: 0; top: 30px; bottom: 0; width: 58px; background: #FAF8FF; border-right: 1px solid var(--lila-claro); display: flex; flex-direction: column; gap: 8px; padding: 10px 7px; }
.ed-tool { height: 42px; border-radius: 9px; background: var(--blanco); border: 1px solid var(--lila-claro); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 8px; font-weight: 600; color: var(--tinta-suave); }
.ed-tool svg { width: 15px; height: 15px; color: var(--tinta); }
.ed-lienzo { position: absolute; left: 58px; right: 0; top: 30px; bottom: 0; background: #FFFBF6; text-align: center; }
.ed-arco { position: absolute; left: 50%; top: 12px; translate: -50% 0; width: 70px; height: 78px; border-radius: 35px 35px 6px 6px; border: 1.5px dashed #CFC3B8; overflow: hidden; }
.ed-foto { position: absolute; inset: 0; background: url(img/cel-xv.webp) 50% 16% / 260% auto no-repeat; opacity: 0; animation: ed-foto 12s infinite; }
.ed-sub { position: absolute; top: 96px; left: 0; right: 0; font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-suave); }
.ed-titulo { position: absolute; top: 110px; left: 50%; translate: -50% 0; font-family: var(--f-acento); font-style: italic; font-size: 18px; line-height: 1.1; color: #B4577A; padding: 0 4px; border-radius: 3px; animation: ed-titulo 12s infinite; }
.ed-chip { position: absolute; top: 92px; right: 6px; background: var(--rosa-osc); color: var(--blanco); font-size: 8px; font-weight: 600; padding: 2px 6px; border-radius: 4px; opacity: 0; animation: ed-chip 12s infinite; }
.ed-linea { position: absolute; top: 146px; left: 50%; translate: -50% 0; width: 32px; height: 2px; background: var(--dorado); }
.ed-cuenta { position: absolute; top: 156px; left: 50%; translate: -50% 0; display: flex; gap: 4px; }
.ed-cuenta span { width: 30px; background: var(--rosa-claro); border-radius: 6px; padding: 4px 0 3px; font-size: 6px; text-transform: uppercase; color: var(--tinta-suave); line-height: 1.1; opacity: 0; animation: ed-cuenta 12s infinite; }
.ed-cuenta span:nth-child(2) { animation-delay: .08s; } .ed-cuenta span:nth-child(3) { animation-delay: .16s; } .ed-cuenta span:nth-child(4) { animation-delay: .24s; }
.ed-cuenta b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 11px; color: var(--tinta); }
.ed-btn { position: absolute; top: 200px; left: 50%; translate: -50% 0; font-size: 7px; font-weight: 600; background: #E9A7B8; color: var(--blanco); padding: 4px 10px; border-radius: 99px; white-space: nowrap; }
.ed-cursor { position: absolute; width: 20px; height: 20px; color: var(--noche); filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); z-index: 3; animation: ed-cursor 12s ease-in-out infinite; }
.ed-fantasma { position: absolute; width: 34px; height: 34px; margin: -14px 0 0 -14px; border-radius: 8px; background: var(--lila); display: grid; place-items: center; opacity: 0; z-index: 2; box-shadow: 0 8px 16px -6px rgba(28,18,48,.45); }
.ed-fantasma svg { width: 16px; height: 16px; color: var(--noche); }
.f-img { animation: ed-cursor 12s ease-in-out infinite, f-img 12s infinite; }
.f-cnt { animation: ed-cursor 12s ease-in-out infinite, f-cnt 12s infinite; }
@keyframes ed-cursor {
  0%, 6% { left: 40px; top: 72px; } 20%, 26% { left: 180px; top: 88px; } 34%, 50% { left: 196px; top: 150px; }
  58%, 62% { left: 40px; top: 172px; } 74%, 88% { left: 186px; top: 196px; } 100% { left: 40px; top: 72px; } }
@keyframes f-img { 0%, 6% { opacity: 0; } 8%, 19% { opacity: .95; } 22%, 100% { opacity: 0; } }
@keyframes f-cnt { 0%, 62% { opacity: 0; } 64%, 73% { opacity: .95; } 76%, 100% { opacity: 0; } }
@keyframes ed-foto { 0%, 21% { opacity: 0; } 25%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ed-titulo { 0%, 33% { box-shadow: none; transform: scale(1); } 36% { box-shadow: 0 0 0 1.5px var(--rosa-osc); transform: scale(1); } 46%, 56% { box-shadow: 0 0 0 1.5px var(--rosa-osc); transform: scale(1.5); } 60%, 92% { box-shadow: none; transform: scale(1.5); } 97%, 100% { transform: scale(1); } }
@keyframes ed-chip { 0%, 38% { opacity: 0; } 41%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes ed-cuenta { 0%, 74% { opacity: 0; transform: scale(.6); } 78%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }

/* Para quién */
.lista { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; list-style: none; }
.lista li { display: flex; gap: 14px; align-items: flex-start; background: var(--blanco); border-radius: 18px; padding: 20px 22px; font-size: 16.5px; font-weight: 500; border: 1px solid var(--crema-2); }
.lista li i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--rosa); color: var(--blanco); display: grid; place-items: center; margin-top: 1px; }
.lista li svg { width: 16px; height: 16px; }

/* Sobre mí */
.yo { background: var(--noche); color: var(--crema); overflow: hidden; position: relative; }
.yo .wrap { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.foto-marco { position: relative; z-index: 0; justify-self: center; width: min(340px, 100%); margin: 0; }
.foto-marco img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center 30%; border-radius: 200px 200px 24px 24px; }
.foto-marco::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: 200px 200px 24px 24px; background: var(--rosa); z-index: -1; }
.foto-marco figcaption { position: absolute; right: 4%; top: calc(70% - 11px); width: max-content; z-index: 2; white-space: nowrap; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); color: var(--tinta); font-family: var(--f-texto); font-weight: 600; font-size: 15px; line-height: 1.35; padding: 23px 16px 12px; border-radius: 18px; text-align: center; animation: burbuja 4s ease-in-out infinite; }
/* La burbuja y su colita son UNA sola forma (clip-path calculado en JS), así no se nota unión entre las dos */
@keyframes burbuja { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.yo-txt { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.yo .kicker { color: var(--rosa); }
.yo h2 .pf { color: var(--lila); }
.yo p { font-size: 18px; max-width: 56ch; color: #D9CFE6; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
.stat { background: var(--noche-2); border: 1px solid rgba(255,246,236,.12); border-radius: var(--r-md); padding: 16px 14px; min-width: 0; }
.stat b { display: block; font-family: var(--f-numero); font-weight: 400; font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--dorado); }
.stat:nth-child(2) b { color: var(--lila); } .stat:nth-child(3) b { color: var(--rosa); }
.stat span { font-size: 13px; color: var(--lila); line-height: 1.3; display: block; margin-top: 6px; }

/* Bono: escenario oscuro con una caja de regalo misteriosa que se sacude y brilla */
.bono { background: radial-gradient(60% 70% at 25% 50%, #4A3652 0%, var(--noche) 70%); color: var(--crema); position: relative; overflow: hidden; }
.bono .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
.destellos i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--dorado); box-shadow: 0 0 10px 2px rgba(242,183,5,.7); animation: titila 2.8s ease-in-out infinite; }
.destellos i:nth-child(1) { left: 8%; top: 18%; } .destellos i:nth-child(2) { left: 22%; top: 82%; animation-delay: -.6s; }
.destellos i:nth-child(3) { left: 38%; top: 12%; animation-delay: -1.2s; background: var(--rosa); box-shadow: 0 0 10px 2px rgba(255,107,74,.7); }
.destellos i:nth-child(4) { left: 46%; top: 70%; animation-delay: -1.8s; } .destellos i:nth-child(5) { left: 62%; top: 20%; animation-delay: -.3s; background: var(--lila); box-shadow: 0 0 10px 2px rgba(191,239,221,.7); }
.destellos i:nth-child(6) { left: 74%; top: 86%; animation-delay: -2.1s; } .destellos i:nth-child(7) { left: 88%; top: 30%; animation-delay: -.9s; background: var(--rosa); box-shadow: 0 0 10px 2px rgba(255,107,74,.7); }
.destellos i:nth-child(8) { left: 94%; top: 64%; animation-delay: -1.5s; } .destellos i:nth-child(9) { left: 14%; top: 50%; animation-delay: -2.4s; background: var(--lila); box-shadow: 0 0 10px 2px rgba(191,239,221,.7); }
.destellos i:nth-child(10) { left: 54%; top: 46%; animation-delay: -1s; }
@keyframes titila { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.3); } }
.bono-vis { position: relative; height: 420px; display: grid; place-items: center; }
.rayos { position: absolute; width: 520px; height: 520px; max-width: 120%; border-radius: 50%; background: repeating-conic-gradient(rgba(242,183,5,.22) 0 8deg, transparent 8deg 22deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); animation: gira 26s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.regalo-caja { position: relative; width: 220px; height: 210px; scale: 1.3; animation: sacude 3.2s ease-in-out infinite; transform-origin: 50% 100%; z-index: 2; }
.cuerpo { position: absolute; left: 10px; right: 10px; bottom: 0; height: 150px; border-radius: 10px 10px 16px 16px; background: linear-gradient(90deg, transparent 43%, var(--dorado) 43% 57%, transparent 57%), linear-gradient(160deg, var(--rosa) 0%, var(--rosa-osc) 100%); box-shadow: inset -18px 0 0 rgba(28,18,48,.14); }
.tapa { position: absolute; left: 0; right: 0; top: 30px; height: 46px; border-radius: 10px; background: linear-gradient(90deg, transparent 42%, var(--dorado) 42% 58%, transparent 58%), linear-gradient(160deg, #FF8A70, var(--rosa)); box-shadow: 0 8px 0 rgba(28,18,48,.18); z-index: 2; animation: tapa 3.2s ease-in-out infinite; }
.mono { position: absolute; left: 50%; top: -34px; translate: -50% 0; width: 90px; height: 40px; }
.mono i { position: absolute; bottom: 0; width: 46px; height: 38px; border: 10px solid var(--dorado); border-radius: 50% 50% 8px 50%; }
.mono i:first-child { left: 0; rotate: -20deg; }
.mono i:last-child { right: 0; rotate: 20deg; border-radius: 50% 50% 50% 8px; }
.sombra-caja { position: absolute; bottom: 64px; width: 280px; height: 26px; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.55), transparent 70%); }
@keyframes sacude { 0%, 60%, 100% { transform: rotate(0); } 64% { transform: rotate(-6deg); } 68% { transform: rotate(5deg); } 72% { transform: rotate(-4deg); } 76% { transform: rotate(3deg); } 80% { transform: rotate(0); } }
@keyframes tapa { 0%, 62%, 100% { transform: translateY(0) rotate(0); } 70% { transform: translateY(-26px) rotate(-5deg); } 78% { transform: translateY(-8px) rotate(2deg); } 84% { transform: translateY(0); } }
.misterio { position: absolute; z-index: 3; font-family: var(--f-display); font-weight: 800; color: var(--dorado); text-shadow: 0 0 18px rgba(242,183,5,.6); animation: flota 4s ease-in-out infinite; }
.m-a { font-size: 64px; left: 14%; top: 14%; rotate: -14deg; }
.m-b { font-size: 44px; right: 16%; top: 22%; rotate: 12deg; color: var(--rosa); text-shadow: 0 0 18px rgba(255,107,74,.6); animation-delay: -1.3s; }
.m-c { font-size: 36px; right: 22%; bottom: 22%; rotate: -6deg; color: var(--lila); text-shadow: 0 0 18px rgba(191,239,221,.6); animation-delay: -2.6s; }
.cupon-tag { position: absolute; z-index: 4; left: 58%; top: 52%; rotate: 10deg; display: flex; flex-direction: column; align-items: center; gap: 2px; background: var(--crema); color: var(--noche); padding: 10px 18px; border-radius: 10px; box-shadow: 8px 10px 0 rgba(0,0,0,.25); border: 2px dashed var(--rosa-osc); animation: flota 4.5s ease-in-out infinite; animation-delay: -1s; }
.cupon-tag small { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.cupon-tag b { font-family: var(--f-numero); font-weight: 400; font-size: 40px; line-height: 1; color: var(--rosa-osc); }
.bono-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; min-width: 0; }
.bono .kicker { color: var(--dorado); }
.bono h2 .pf { color: var(--dorado); }
.bono-txt p { font-size: 18px; color: #D9CFE6; max-width: 46ch; }
.bono-txt p strong { background: var(--dorado); color: var(--noche); padding: 0 .3em; border-radius: 6px; font-weight: 600; white-space: nowrap; }
.comparar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 460px; }
.cmp { position: relative; border-radius: 16px; padding: 16px 36px 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.cmp b { font-family: var(--f-display); font-weight: 800; font-size: 18px; }
.cmp span { font-size: 14px; }
.cmp i { position: absolute; right: 12px; top: 12px; font-style: normal; font-size: 18px; }
.cmp.si { background: var(--dorado); color: var(--noche); box-shadow: 0 0 0 4px rgba(242,183,5,.25), 0 16px 30px -12px rgba(242,183,5,.5); }
.cmp.no { background: rgba(255,255,255,.06); border: 1px dashed rgba(191,239,221,.35); color: #9C90AE; }
.cmp.no span { text-decoration: line-through; }
.btn-dorado { background: var(--dorado); color: var(--noche); box-shadow: 0 6px 0 #9C7400; }
.btn-dorado:hover { box-shadow: 0 8px 0 #9C7400; }

/* Preguntas frecuentes */
.faq-lista { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--blanco); border: 1px solid var(--crema-2); border-radius: 18px; box-shadow: 0 14px 34px -26px rgba(43,27,51,.35); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-family: var(--f-display); font-weight: 800; font-size: 19px; letter-spacing: -.02em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--crema); color: var(--rosa-osc); font: 600 22px/1 var(--f-texto); transition: rotate .25s ease, background .25s ease; }
.faq-item[open] summary::after { rotate: 45deg; background: var(--dorado); color: var(--noche); }
.faq-item summary:focus-visible { outline: 3px solid var(--rosa); outline-offset: -3px; border-radius: 18px; }
.faq-resp { padding: 0 22px 20px; display: flex; flex-direction: column; gap: 12px; color: var(--tinta-suave); font-size: 16.5px; }
.faq-resp b { color: var(--tinta); }
.faq-pais { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; }
.faq-pais select { font: 500 15px var(--f-texto); color: var(--tinta); background: var(--crema); border: 1px solid var(--crema-2); border-radius: 999px; padding: 9px 34px 9px 14px; appearance: none; -webkit-appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232B1B33' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; max-width: 100%; }
.faq-local { color: var(--cobalto); font-weight: 500; }
.faq-local b { color: var(--tinta); }
.faq-local:empty { display: none; }

/* Cierre */
.cierre { background: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.6px) 0 0/20px 20px, var(--cobalto); color: var(--crema); position: relative; }
.cierre-caja { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.cierre-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.cierre-caja .kicker { color: var(--lila); }
.cierre-caja h2 { font-size: clamp(36px, 5vw, 62px); }
.cierre-caja h2 .pf { color: var(--dorado); }
.cierre-caja p { font-size: 18px; max-width: 44ch; }
.cierre-caja .btn-cta { background: var(--noche); box-shadow: 0 6px 0 rgba(28,18,48,.35); }
.form-cierre { width: 100%; rotate: 2deg; box-shadow: 0 30px 50px -24px rgba(28,18,48,.6); }
.form-cierre .form-campos { grid-template-columns: 1fr; }
.form-cierre .btn-cta { background: var(--rosa-osc); box-shadow: 0 6px 0 var(--noche); }

footer { background: var(--noche); color: var(--crema); padding: 28px 20px; text-align: center; font-size: 15px; font-weight: 500; }
footer .sep { color: var(--rosa); margin: 0 12px; }
footer small { display: block; margin-top: 6px; opacity: .6; font-size: 13px; }

/* Barra fija en móvil */
.barra-movil { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--crema) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--crema-2); transform: translateY(120%); transition: transform .25s ease; }
.barra-movil.visible { transform: none; }
.barra-movil .btn { width: 100%; padding: 15px; box-shadow: 0 4px 0 var(--noche); }

/* Gracias */
.gracias { min-height: 100vh; display: grid; place-items: center; padding: 48px 16px; position: relative; overflow: hidden; background: radial-gradient(rgba(191,239,221,.14) 1.4px, transparent 1.6px) 0 0/22px 22px, radial-gradient(120% 80% at 50% 0%, #3B2766 0%, var(--noche) 60%); }
.gracias-caja { position: relative; z-index: 2; background: var(--blanco); border-radius: 32px; max-width: 580px; width: 100%; padding: 44px 36px 36px; text-align: center; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.gracias-caja .etiqueta { align-self: center; background: var(--noche); }
.gracias-caja .etiqueta b, .gracias-caja .etiqueta b::after { background: #2EE07A; }
.progreso { width: 100%; height: 12px; border-radius: 99px; background: var(--lila-claro); overflow: hidden; }
.progreso div { height: 100%; width: 90%; border-radius: 99px; background: repeating-linear-gradient(45deg, var(--rosa) 0 10px, #FF8A70 10px 20px); }
.gracias-caja h1 { font-size: clamp(34px, 6vw, 50px); }
.gracias-caja h1 .pf { display: block; color: var(--rosa-osc); }
.gracias-caja .texto { font-size: 17px; color: var(--tinta-suave); }
.gracias-caja .texto strong { color: var(--tinta); }
.gracias-caja .btn { width: 100%; font-size: 16px; letter-spacing: .06em; padding: 19px 20px; white-space: normal; }
.checklist { width: 100%; text-align: left; display: grid; gap: 10px; margin-top: 8px; }
.checklist div { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--tinta-suave); background: #FAF8FF; border-radius: var(--r-md); padding: 12px 14px; }
.checklist i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 600; }
.checklist svg { width: 14px; height: 14px; }
.checklist b { color: var(--tinta); }
.ok i { background: #2EE07A; color: var(--noche); }
.pend i { background: var(--lila); color: var(--noche); }

/* ===== Animaciones de entrada =====
   1) Al cargar: el hero entra en secuencia (etiqueta, título línea por línea, texto, formulario, escena).
   2) Al hacer scroll: cada bloque se revela con animaciones ligadas al scroll (animation-timeline: view()),
      sin JavaScript. En navegadores sin soporte todo se ve normal, sin animación.
   Se animan translate/opacity/filter (no transform) para no pisar los hovers ni las rotaciones. */
@keyframes entra { from { opacity: 0; translate: 0 28px; filter: blur(8px); } }
@keyframes entra-linea { from { opacity: 0; translate: 0 .5em; filter: blur(10px); } }
@keyframes entra-escena { from { opacity: 0; translate: 40px 30px; scale: .92; filter: blur(6px); } }
.hero-txt > * { animation: entra .8s cubic-bezier(.2,.8,.2,1) both; }
.hero-txt > .etiqueta { animation-delay: .1s; }
.hero h1 { animation: none; }
.hero h1 > span { display: block; animation: entra-linea .9s cubic-bezier(.2,.8,.2,1) both; }
.hero h1 .l1 { animation-delay: .25s; } .hero h1 .pf { animation-delay: .4s; } .hero h1 .l3 { animation-delay: .55s; }
.hero-txt > .bajada { animation-delay: .75s; }
.hero-txt > .horario { animation-delay: .85s; }
.hero-txt > .form { animation-delay: 1s; }
.escena { animation: entra-escena 1.1s cubic-bezier(.2,.8,.2,1) .5s both; }
.cinta { animation: entra .8s ease 1.1s both; }

@keyframes revela { from { opacity: 0; translate: 0 48px; filter: blur(6px); } }
@keyframes revela-izq { from { opacity: 0; translate: -40px 0; } }
@keyframes revela-pop { from { opacity: 0; scale: .85; translate: 0 30px; } }
@supports (animation-timeline: view()) {
  .encabezado > *, .tarjeta, .lista li, .faq-item, .yo-txt > *, .stat, .bono-txt > *, .cierre-txt > *, .form-cierre {
    animation: revela linear both; animation-timeline: view(); animation-range: entry 0% entry 70%;
  }
  .encabezado > :nth-child(2) { animation-range: entry 10% entry 80%; }
  .encabezado > :nth-child(3) { animation-range: entry 20% entry 90%; }
  .tarjeta:nth-child(2) { animation-range: entry 8% entry 78%; }
  .tarjeta:nth-child(3) { animation-range: entry 16% entry 86%; }
  .tarjeta:nth-child(4) { animation-range: entry 24% entry 94%; }
  .lista li { animation-name: revela-izq; }
  .lista li:nth-child(even), .faq-item:nth-child(even) { animation-range: entry 10% entry 80%; }
  .stat:nth-child(2) { animation-range: entry 10% entry 80%; } .stat:nth-child(3) { animation-range: entry 20% entry 90%; }
  .foto-marco, .bono-vis { animation: revela-pop linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  .form-cierre { animation-range: entry 10% entry 85%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .msj, .ia-msj, .ia-mock { opacity: 1; }
  .ia-escribe { display: none; }
  .ed-foto, .ed-cuenta span { opacity: 1; }
  .ed-fantasma, .ed-chip { display: none; }
  .destellos { display: none; }
  .ed-cursor { left: 186px; top: 196px; }
  .esc { transition: none; }
}
@media (max-width: 1020px) {
  .porque-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .hero .wrap, .yo .wrap, .bono .wrap { grid-template-columns: 1fr; }
  .bono .wrap { gap: 8px; }
  .bono-vis { height: 340px; }
  .regalo-caja { scale: 1; }
  .sombra-caja { bottom: 52px; width: 220px; }
  .bono-txt { align-items: center; text-align: center; }
  .comparar { margin: 0 auto; }
  .escena { min-height: 520px; max-width: 560px; margin: 0 auto; width: 100%; }
  .lista { grid-template-columns: 1fr; max-width: 620px; }
  .scrolly-pin { grid-template-columns: 1fr; gap: 0; align-content: center; height: 100vh; padding-bottom: 40px; }
  .escenario { height: min(470px, 56vh); }
  .esc .ia-chat, .esc .ed { scale: 1.08; }
  .tel { scale: .7; }
  .precio-tag { top: 18%; right: 4%; font-size: 14px; }
  .pasos-txt { height: auto; min-height: 220px; text-align: center; }
  .pasos-puntos { justify-content: center; margin: 6px 0 10px; }
  .paso-t { top: 22px; align-items: center; }
  .paso-t h3 { font-size: 26px; }
  .paso-t p { font-size: 16px; }
  .cierre-caja { grid-template-columns: 1fr; text-align: center; }
  .cierre-txt { align-items: center; }
  .cierre-caja p { margin: 0 auto; }
  .form-cierre { rotate: 0deg; text-align: left; margin: 0 auto; }
  .barra-movil { display: block; }
}
@media (max-width: 620px) {
  section { padding-block: 72px; }
  .wrap { padding: 0 16px; }
  .hero { padding-block: 28px 72px; }
  .hero h1 { font-size: 44px; }
  .form { padding: 20px 16px; }
  .form-campos { grid-template-columns: 1fr; }
  .btn { font-size: 16px; padding: 16px 22px; }
  .escena { min-height: 440px; }
  .pantalla { width: 94%; }
  .chat { left: 0; bottom: 74px; }
  .m3 { display: none; }
  .msj { font-size: 12px; padding: 6px 12px; }
  .boleto { top: -6px; right: -4px; }
  .boleto-dia b { font-size: 28px; }
  .boleto-info b { font-size: 15px; }
  .p1 { display: none; }
  .porque-grid { grid-template-columns: 1fr; }
  .encabezado { margin-bottom: 36px; }
  .encabezado p { font-size: 16px; }
  .lista li { font-size: 15.5px; padding: 16px 18px; }
  .faq-item summary { font-size: 17px; padding: 18px; }
  .faq-resp { padding: 0 18px 18px; font-size: 15.5px; }
  .yo p { font-size: 16px; }
  .foto-marco { width: 80%; }
  .foto-marco figcaption { top: calc(70% - 11px); font-size: 12.5px; padding: 21px 12px 10px; }
  .stat { padding: 14px 9px; }
  .stat b { font-size: clamp(18px, 5.2vw, 26px); }
  .cierre-caja h2 { font-size: 34px; }
  .cierre-caja p { font-size: 16px; }
  .gracias-caja { padding: 36px 20px 24px; }
  .gracias-caja h1 { font-size: 32px; }
}