/* ==========================================================================
   CRÉALO · Página de ventas — Angela Donoso Design System
   Mobile-first. Tokens heredados de /tokens (subset local, self-contained).
   ========================================================================== */

/* ---------- Webfonts (subset woff2) ---------- */
@font-face{font-family:"San de More";src:url("../fonts/SanDeMore-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"San de More";src:url("../fonts/SanDeMore-MediumItalic.woff2") format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Amoretti";src:url("../fonts/Amoretti.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"American Typewriter";src:url("../fonts/AmericanTypewriter.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"American Typewriter";src:url("../fonts/AmericanTypewriter-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Poppins (self-hosted) — testimonios y la lista "Vas a tener respondido" */
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-400-latinext.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-600-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-600-latinext.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-700-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";src:url("../fonts/Poppins-700-latinext.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
:root{
  /* Paleta oficial de marca — cinco colores (ver ../../../tokens/colors.css) */
  --ad-aguamarina:#5db2b4; --ad-amarillo:#f9b911; --ad-naranja:#d65507;
  --ad-magenta:#b72776;    --ad-rosa:#fec9d5;

  /* Derivados: mismo tono, distinta luminosidad */
  --ad-magenta-700:#8e1c5b; --ad-magenta-800:#6b1244; --ad-magenta-900:#4c0c31;
  --ad-rosa-soft:#fed9e2;   --ad-rosa-tint:#fdeaef;

  /* Alias históricos */
  --ad-gold:var(--ad-amarillo); --ad-orange:var(--ad-naranja); --ad-fuchsia:var(--ad-magenta);
  --ad-plum:var(--ad-magenta-700); --ad-wine:var(--ad-magenta-800); --ad-wine-deep:var(--ad-magenta-900);
  --ad-teal:var(--ad-aguamarina); --ad-blush:var(--ad-rosa);
  --ad-blush-soft:var(--ad-rosa-soft); --ad-pink-tint:var(--ad-rosa-tint);

  /* Neutros (no son colores de marca) */
  --ad-cream-deep:#efe7db; --ad-white:#fff; --ad-ink:#2a1a20; --ad-ink-soft:#6a555c;

  --ad-gradient-sunset:linear-gradient(120deg,#f9b911 0%,#d65507 46%,#b72776 100%);
  --ad-gradient-sunset-diag:linear-gradient(135deg,#f9b911 0%,#d65507 44%,#b72776 100%);
  --ad-gradient-wine:linear-gradient(160deg,#8e1c5b 0%,#6b1244 55%,#4c0c31 100%);

  /* semantic */
  --color-bg:var(--ad-white); --color-text:var(--ad-ink); --color-text-muted:var(--ad-ink-soft);
  --color-line:var(--ad-rosa-tint); --color-primary:var(--ad-magenta);
  /* Sobre oscuro: todo el texto en blanco (nada de rosa pastel sobre fondo) */
  --color-text-on-dark:#fff; --color-text-on-dark-soft:rgba(255,255,255,.94);
  --color-accent-on-dark:#fff;

  /* Barras de marca: cabecera y pie en magenta degradado */
  --ad-gradient-brand:linear-gradient(115deg,var(--ad-magenta-800) 0%,var(--ad-magenta) 58%,var(--ad-naranja) 132%);

  /* type */
  --font-script:"Amoretti","Brush Script MT",cursive;
  --font-serif:"San de More","Cormorant Garamond",Georgia,serif;
  --font-slab:"American Typewriter","Courier New",monospace;
  --font-body:"Poppins","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-poppins:var(--font-body);

  /* fluid type scale — la jerarquía del documento */
  --t-eyebrow:clamp(11px,2.9vw,13.5px);
  --t-micro:clamp(13px,3.2vw,14.5px);
  --t-btn:clamp(15px,4vw,18px);
  --t-small:clamp(14px,3.4vw,15px);
  --t-body:clamp(16px,4.1vw,18px);
  --t-lead:clamp(18px,4.6vw,21px);
  --t-deck:clamp(21px,5.4vw,30px);
  --t-h3:clamp(20px,5vw,26px);
  --t-h2:clamp(30px,7.6vw,54px);
  --t-h1:clamp(40px,11.5vw,88px);
  --t-mega:clamp(48px,15vw,120px);

  /* space */
  --gutter:clamp(20px,5.6vw,40px);
  /* separación TOTAL entre dos secciones: cada una aporta la mitad.
     Antes cada sección ponía el valor entero arriba y abajo, así que entre
     dos secciones se acumulaban 264px de aire en desktop. */
  --section-pad:clamp(56px,9.5vw,116px);
  --container:1180px; --measure:660px;
  --nav-h:clamp(62px,14vw,78px);

  /* effects */
  --radius-md:14px; --radius-lg:22px; --radius-xl:32px; --radius-pill:999px;
  --shadow-sm:0 2px 8px rgba(76,12,49,.06);
  --shadow-md:0 10px 30px rgba(76,12,49,.10);
  --shadow-lg:0 24px 60px rgba(76,12,49,.16);
  --shadow-glow:0 16px 40px rgba(183,39,118,.30);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:420ms;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
section[id]{scroll-margin-top:clamp(64px,14vw,88px)}
body{
  margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-weight:400;font-size:var(--t-body);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4{font-family:var(--font-serif);font-weight:500;line-height:1.08;margin:0 0 .5em;text-wrap:balance}
p{margin:0 0 1.1em;text-wrap:pretty}
strong,b{font-weight:700}
a{color:var(--color-primary);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)}
a:hover{color:var(--ad-wine)}
::selection{background:var(--ad-rosa);color:var(--ad-magenta-900)}
:focus-visible{outline:2px solid var(--ad-fuchsia);outline-offset:3px;border-radius:4px}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:calc(var(--measure) + var(--gutter)*2)}
.section{position:relative;padding-block:calc(var(--section-pad)/2)}
.section--tight{padding-block:calc(var(--section-pad)*.36)}
/* el último bloque de una sección no arrastra su margen al aire de abajo */
.section .wrap>:last-child,
.section .wrap>:last-child>:last-child{margin-bottom:0}
.stack>*+*{margin-top:clamp(14px,3.4vw,20px)}
.center{text-align:center}

/* ---------- Roles tipográficos ---------- */
.eyebrow{
  font-family:var(--font-slab);font-weight:700;font-size:var(--t-eyebrow);letter-spacing:.22em;
  text-transform:uppercase;color:var(--ad-fuchsia);line-height:1.5;margin:0 0 1.25em;
  display:block;
}
.eyebrow--muted{color:var(--ad-ink-soft)}
.eyebrow--light{color:var(--color-text-on-dark)}
.h1{font-size:var(--t-h1);letter-spacing:-.015em}
.h2{font-size:var(--t-h2);letter-spacing:-.01em}
.h3{font-family:var(--font-serif);font-size:var(--t-h3);letter-spacing:-.005em;line-height:1.2;margin:0 0 .5em}
.deck{font-family:var(--font-serif);font-size:var(--t-deck);line-height:1.28;font-weight:500;letter-spacing:-.005em}
.lead{font-size:var(--t-lead);line-height:1.6}
.small{font-size:var(--t-small);color:var(--color-text-muted)}
.micro{font-size:var(--t-micro);color:var(--color-text-muted);line-height:1.6}
.note{font-family:var(--font-serif);font-style:italic;font-size:var(--t-lead);color:var(--ad-wine)}
.script{font-family:var(--font-script);line-height:1.15;font-size:clamp(34px,9vw,64px);color:var(--ad-wine)}
.muted{color:var(--color-text-muted)}
.gradient-text{
  background:var(--ad-gradient-sunset-diag);background-size:220% 220%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 14s var(--ease-soft) infinite;
}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.serif-it{font-family:var(--font-serif);font-style:italic}

/* ---------- Fondos de gradiente en video ---------- */
.gradient-bg{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.gradient-bg video,.gradient-bg .poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* bloom sobre blanco: se desvanece por arriba y por abajo, nunca es un bloque de color */
.gradient-bg--bloom{
  opacity:.9;max-height:1100px;   /* en secciones muy largas el bloom vive arriba, no tiñe todo */
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 26%,rgba(0,0,0,.85) 66%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.85) 26%,rgba(0,0,0,.85) 66%,rgba(0,0,0,0) 100%);
}
.gradient-bg--soft{opacity:.6}
.gradient-bg--hero{
  inset:18% 0 0;opacity:.62;
  -webkit-mask-image:radial-gradient(120% 62% at 50% 58%,#000 10%,rgba(0,0,0,.6) 44%,rgba(0,0,0,0) 80%);
          mask-image:radial-gradient(120% 62% at 50% 58%,#000 10%,rgba(0,0,0,.6) 44%,rgba(0,0,0,0) 80%);
}
.section>.wrap,.section>.bleed,.hero>.wrap{position:relative;z-index:1}

/* ---------- Botones ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.25em 2.5em;border-radius:var(--radius-pill);
  font-family:var(--font-slab);font-weight:700;font-size:var(--t-btn);letter-spacing:.13em;text-transform:uppercase;
  line-height:1.15;text-align:center;overflow:hidden;isolation:isolate;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),
             filter var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.btn__arrow{transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .btn__arrow{transform:translateX(4px)}
.btn--primary{
  color:#fff;background:linear-gradient(120deg,var(--ad-magenta-800) 0%,var(--ad-magenta) 62%,var(--ad-naranja) 128%);
  background-size:180% 100%;box-shadow:var(--shadow-glow);
}
.btn--primary:hover{color:#fff;transform:translateY(-2px);filter:brightness(1.06);background-position:100% 0}
.btn--primary:active{transform:translateY(0) scale(.98)}
.btn--ghost{color:#fff;border:1.5px solid rgba(255,255,255,.9);background:rgba(255,255,255,.06)}
.btn--ghost:hover{color:var(--ad-wine);background:#fff;transform:translateY(-2px)}
.btn--outline{color:var(--ad-wine);border:1.5px solid rgba(108,15,70,.28)}
.btn--outline:hover{color:#fff;background:var(--ad-wine);border-color:var(--ad-wine);transform:translateY(-2px)}
.btn--block{display:flex;width:100%}
.btn--sm{padding:1em 1.8em;font-size:13px}
.cta-group{display:flex;flex-direction:column;align-items:center;gap:.9em}
@media(min-width:560px){.btn--block{width:auto;display:inline-flex}}
/* móvil: botones todavía más grandes y fáciles de tocar */
@media(max-width:899px){
  .btn{padding:1.3em 1.9em;font-size:clamp(15px,4.4vw,19px);letter-spacing:.1em}
  .btn--block{padding-inline:1.4em}
  .sticky-cta .btn{padding:1.15em 1.2em;font-size:clamp(13px,3.8vw,15px);letter-spacing:.08em}
}

/* pulso suave del CTA principal */
.btn--primary::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  box-shadow:0 0 0 0 rgba(183,39,118,.45);animation:pulse 3.4s var(--ease-soft) infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(183,39,118,.38)}70%{box-shadow:0 0 0 18px rgba(183,39,118,0)}100%{box-shadow:0 0 0 0 rgba(183,39,118,0)}}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem var(--gutter);
  /* fondo magenta siempre: el logo crema necesita contraste */
  background:var(--ad-gradient-brand);
  box-shadow:0 1px 0 rgba(76,12,49,.14);
  transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.nav.is-stuck{box-shadow:0 8px 26px rgba(76,12,49,.22)}
.nav.is-hidden{transform:translateY(-105%)}
.nav__mark{display:flex;align-items:center;gap:clamp(.5rem,2vw,.85rem);min-width:0}
.nav__logo{height:clamp(24px,4.6vw,40px);width:auto;flex:0 0 auto}
.nav .btn{
  padding:.95em 1.6em;font-size:clamp(11px,1.4vw,13px);letter-spacing:.12em;
  color:var(--ad-magenta-800);background:#fff;box-shadow:0 8px 22px rgba(40,6,26,.24);
}
.nav .btn:hover{color:var(--ad-magenta-800);background:#fff;filter:brightness(1)}
.nav .btn::after{display:none}
/* móvil: sin cabecera. La página arranca directo en el hero. */
@media(max-width:899px){
  :root{--nav-h:0px}
  .nav{display:none}
  section[id]{scroll-margin-top:16px}
}

/* barra de progreso */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:70;transform-origin:0 50%;transform:scaleX(0);
  background:var(--ad-gradient-sunset);will-change:transform}

/* ---------- HERO ----------
   Regla dura: la sección 1 completa (claim + video + premio + botón) tiene que
   caber en la primera pantalla, sin cortes, en móvil y en desktop.
   Por eso todo el hero se dimensiona con --hk, una unidad que toma el MENOR
   entre el ancho y el alto disponibles: en pantallas bajitas encoge sola.      */
.hero{
  position:relative;overflow:hidden;text-align:center;
  --hk:min(100vw,42vh);
  --hgap:clamp(8px,calc(var(--hk)*.030),22px);
  --vslh:clamp(104px,22vh,250px);
  min-height:100svh;display:flex;align-items:center;
  padding-top:calc(var(--nav-h) + clamp(4px,1.4vh,22px));
  padding-bottom:clamp(12px,3vh,44px);
}
.hero__wrap{width:100%}
.hero__grid{display:flex;flex-direction:column;gap:var(--hgap)}

/* móvil: los dos contenedores desaparecen para poder intercalar el orden real */
@media(max-width:979px){
  .hero__copy,.hero__aside{display:contents}
  .hero__eyebrow{order:1}
  .hero__title{order:2}
  .hero__deck{order:3}
  .hero .vsl{order:4}
  .hero__body{order:5}
  .hero__prize{order:6}
  .hero__cta{order:7}
}

.hero__eyebrow{
  margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.35em .8em;
  font-family:var(--font-slab);font-weight:700;font-size:clamp(10px,calc(var(--hk)*.032),14px);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ad-fuchsia);line-height:1.35;
}
@media(min-width:520px){.hero__eyebrow{letter-spacing:.18em}}
.hero__live{
  display:inline-flex;align-items:center;gap:.6em;color:var(--ad-naranja);
  padding:.45em .9em;border-radius:var(--radius-pill);
  background:rgba(214,85,7,.09);border:1px solid rgba(214,85,7,.22);
}
.hero__live i{
  width:.5em;height:.5em;border-radius:50%;background:var(--ad-naranja);
  animation:live-dot 2.4s var(--ease-soft) infinite;
}
@keyframes live-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(214,85,7,.45)}70%{opacity:.55;box-shadow:0 0 0 .5em rgba(214,85,7,0)}}

.hero__title{
  font-family:var(--font-serif);font-weight:500;line-height:1.02;letter-spacing:-.02em;
  font-size:clamp(30px,calc(var(--hk)*.136),86px);margin:0;text-wrap:balance;
}
/* "Créalo" del titular en Amoretti: la cursiva pide más cuerpo y aire para
   que la 'C' y los descendentes no se corten con el background-clip:text */
.hero__word{
  font-family:var(--font-script);font-size:1.18em;letter-spacing:.005em;
  display:inline-block;padding:.06em .1em .12em;margin:-.06em -.1em -.12em;
  line-height:1;
}
.hero__deck{
  font-family:var(--font-serif);font-weight:500;line-height:1.24;letter-spacing:-.005em;
  font-size:clamp(15px,calc(var(--hk)*.05),30px);margin:0 auto;max-width:34ch;text-wrap:pretty;
}
.hero__body{
  font-size:clamp(12.5px,calc(var(--hk)*.037),17.5px);line-height:1.55;
  margin:0 auto;max-width:50ch;color:#5a444b;text-wrap:pretty;
}

/* tarjeta del premio: el gancho de valor, siempre junto al video */
.hero__prize{
  text-align:left;border-radius:var(--radius-lg);
  padding:clamp(13px,calc(var(--hk)*.042),26px);
  background:rgba(255,255,255,.74);border:1px solid rgba(252,202,213,.9);
  box-shadow:var(--shadow-sm);backdrop-filter:blur(8px);
}
.hero__prize-lead{
  margin:0;line-height:1.45;text-wrap:pretty;
  font-size:clamp(11.5px,calc(var(--hk)*.0335),15.5px);
}

.hero__cta{display:flex;flex-direction:column;align-items:center;gap:.55em}
.hero__btn{
  width:100%;padding:clamp(1.1em,calc(var(--hk)*.046),1.4em) 1.7em;
  font-size:clamp(14px,calc(var(--hk)*.04),18px);
}
.hero__note{
  margin:0;font-family:var(--font-serif);font-style:italic;color:var(--ad-wine);
  font-size:clamp(12px,calc(var(--hk)*.035),19px);line-height:1.35;
}

/* MÓVIL · el titular en una sola línea y el resto del copy un punto más grande.
   Va aquí, después de la tipografía base del hero, para poder pisarla.
   El divisor 7.75 es el ancho que ocupa "Bienvenida a Créalo" medido en
   múltiplos de su propio font-size (7.48 medido + margen): así el titular
   nunca parte en dos, ni siquiera si Amoretti tarda en cargar. */
/* MÓVIL · la escala deja de depender de la altura de la pantalla.
   Antes todo se medía contra 42vh, y en un navegador con barras eso son
   ~294px en vez de 390: por eso el texto salía pequeño aunque sobrara
   espacio. Aquí manda el ancho, que es estable, y el hero crece lo que
   necesite — no pasa nada si el botón queda algo más abajo. */
@media(max-width:979px){
  .hero{
    --hk:100vw;
    --hgap:clamp(12px,3.4vw,26px);
    padding-bottom:clamp(20px,5vw,40px);
  }
  .hero__title{
    white-space:nowrap;
    font-size:min(clamp(30px,calc(var(--hk)*.136),86px),calc((100vw - var(--gutter)*2) / 7.75));
  }
  .hero__eyebrow{font-size:clamp(11px,3.3vw,15px)}
  .hero__deck{font-size:clamp(19px,6.4vw,30px);max-width:26ch}
  .hero__body{font-size:clamp(16px,4.7vw,20px);line-height:1.6}
  .hero__prize{padding:clamp(15px,4.2vw,24px) clamp(16px,4.4vw,26px)}
  .hero__prize-lead{font-size:clamp(15px,4.3vw,18.5px);line-height:1.5}
  .hero__note{font-size:clamp(15px,4.2vw,19px)}
  .hero__btn{font-size:clamp(16px,4.6vw,20px);padding:1.15em 1.5em}
}

/* pantallas bajitas: solo en escritorio, donde el hero sí debe caber entero.
   En móvil ya no aplica — ahí manda el ancho y se permite hacer scroll. */
@media(max-height:700px) and (min-width:980px){
  .hero{--hgap:clamp(6px,calc(var(--hk)*.030),22px);--vslh:clamp(96px,20vh,250px)}
  .hero__eyebrow{font-size:clamp(8.5px,calc(var(--hk)*.029),12.5px)}
  .hero__deck{font-size:clamp(13.5px,calc(var(--hk)*.05),30px)}
  .hero__body{font-size:clamp(11.5px,calc(var(--hk)*.037),17.5px);line-height:1.5}
  .hero__prize{padding:clamp(11px,calc(var(--hk)*.042),26px)}
  .hero__prize-lead{font-size:clamp(10.5px,calc(var(--hk)*.0335),15.5px);line-height:1.42}
  .hero__note{font-size:clamp(11px,calc(var(--hk)*.035),19px)}
}

/* teléfonos muy chicos (320px): solo el rótulo, que es lo único que apretaba */
@media(max-width:359px){
  .hero__eyebrow{letter-spacing:.1em}
  .hero__live{padding:.4em .7em}
}

/* tablet: el bloque del premio no se estira de lado a lado */
@media(min-width:640px) and (max-width:979px){
  .hero__prize,.hero__body{max-width:60ch;margin-inline:auto}
  .hero .vsl{width:min(100%,calc(var(--vslh)*1.7778),620px)}
  .hero__btn{max-width:28em}
}

/* desktop: copy a la izquierda, video + premio a la derecha */
@media(min-width:980px){
  .hero{
    --hk:min(50vw,64vh);
    --vslh:clamp(170px,33vh,400px);
    text-align:left;padding-top:calc(var(--nav-h) + clamp(14px,3vh,44px));
  }
  .hero__grid{
    display:grid;grid-template-columns:1.04fr .96fr;
    gap:clamp(34px,4.2vw,74px);align-items:center;
  }
  .hero__copy,.hero__aside{display:flex;flex-direction:column;gap:var(--hgap);min-width:0}
  .hero__eyebrow{justify-content:flex-start}
  .hero__deck,.hero__body{margin-inline:0}
  .hero__deck{max-width:24ch}
  .hero__cta{flex-direction:row;align-items:center;justify-content:flex-start;gap:clamp(14px,1.6vw,26px);flex-wrap:wrap}
  .hero__btn{width:auto;max-width:none}
}

/* marco del VSL */
.vsl{position:relative}
.hero .vsl{width:min(100%,calc(var(--vslh)*1.7778));margin-inline:auto}
.vsl__frame{
  position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;
  background:#1a0d14;box-shadow:var(--shadow-lg);isolation:isolate;
}
.vsl__frame video,.vsl__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.vsl__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62}
.vsl__play{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;
  color:#fff;background:linear-gradient(180deg,rgba(76,12,49,.15),rgba(76,12,49,.55));
  transition:opacity var(--dur-base) var(--ease-out);
}
.vsl__play i{
  display:grid;place-items:center;width:clamp(58px,14vw,78px);aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:var(--shadow-glow);
  transition:transform var(--dur-base) var(--ease-out);
}
.vsl__play i svg{width:38%;fill:var(--ad-wine);margin-left:8%}
.vsl__play:hover i{transform:scale(1.07)}
.vsl__play span{font-family:var(--font-slab);font-weight:700;font-size:var(--t-eyebrow);letter-spacing:.22em;text-transform:uppercase}
.vsl.is-playing .vsl__play,.vsl.is-playing .vsl__poster{opacity:0;pointer-events:none}

/* En móvil el video se va a sangre: su altura la manda el ancho disponible,
   así que salir de los márgenes es lo único que lo hace crecer de verdad.
   Va aquí, después de la regla base, para poder pisarla. */
@media(max-width:979px){
  .hero .vsl{width:calc(100% + var(--gutter)*2);margin-inline:calc(var(--gutter) * -1)}
  .hero .vsl__frame{border-radius:0}
}

/* ---------- Imágenes ---------- */
.media{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--ad-pink-tint)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.media--tall{aspect-ratio:3/4}
.media--wide{aspect-ratio:16/9}
.media--sq{aspect-ratio:1/1}
.media--43{aspect-ratio:4/3}
.media--round{border-radius:var(--radius-xl)}
.media__cap{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,4vw,26px);
  color:#fff;background:linear-gradient(180deg,rgba(76,12,49,0),rgba(76,12,49,.72));
  font-family:var(--font-slab);font-weight:700;font-size:var(--t-eyebrow);letter-spacing:.2em;text-transform:uppercase;
}
/* aparición suave de la foto al cargar (solo si hay JS) */
.js .media img,.js .band img{opacity:0;transition:opacity .8s var(--ease-out)}
.js .media img.is-loaded,.js .band img.is-loaded{opacity:1}

/* mockup de producto: va sobre el fondo, sin tarjeta ni recorte */
.mockup{margin:0}
.mockup img{width:100%;height:auto}

/* banda full-bleed */
.bleed{position:relative;width:100vw;margin-left:50%;transform:translateX(-50%);overflow:hidden}
.band{position:relative;height:clamp(390px,62vw,620px);overflow:hidden}
.band img{position:absolute;inset:0;width:100%;height:118%;top:-9%;object-fit:cover;object-position:center 42%}
.band__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(76,12,49,.05) 0%,rgba(76,12,49,.55) 100%)}
.band__inner{position:absolute;inset:0;display:flex;align-items:flex-end;padding:clamp(24px,7vw,64px)}
.band__inner .wrap{width:100%}

/* ---------- Split editorial ---------- */
.split{display:grid;gap:clamp(28px,6vw,56px);align-items:center}
@media(min-width:860px){
  .split{grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,80px)}
  .split--40{grid-template-columns:.85fr 1.15fr}
  .split--60{grid-template-columns:1.15fr .85fr}
  .split--rev>.split__media{order:2}
  /* la foto estira hasta la altura del texto: nada de huecos a un lado */
  .split--fill{align-items:stretch}
  .split--fill>.split__media,.split--fill .media{height:100%}
  .split--fill .media{aspect-ratio:auto;min-height:100%}
}

/* ---------- Listas ---------- */
.tick-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(12px,3vw,16px)}
/* el bullet va absoluto: si fuera grid/flex, cada <strong> del texto
   se convertiría en un item más y rompería la alineación */
.tick-list li{position:relative;padding-left:2.2em;line-height:1.55}
.tick-list li::before{
  content:"";position:absolute;left:0;top:.22em;width:1.35em;height:1.35em;border-radius:50%;
  background:var(--ad-gradient-sunset-diag);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/72% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/72% no-repeat;
}
.tick-list--x li::before{
  background:rgba(106,85,92,.55);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/></svg>") center/66% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/></svg>") center/66% no-repeat;
}
.tick-list--light li::before{background:var(--color-accent-on-dark)}

/* lista numerada editorial (qué vas a crear) — Poppins semibold */
.answers-lead{font-family:var(--font-poppins);font-weight:700;font-size:clamp(19px,4.8vw,24px);line-height:1.45}
.answers{list-style:none;margin:0;padding:0;counter-reset:a}
.answers li{
  counter-increment:a;position:relative;padding:clamp(16px,4vw,22px) 0 clamp(16px,4vw,22px) clamp(44px,11vw,64px);
  border-bottom:1px solid var(--color-line);line-height:1.55;
  font-family:var(--font-poppins);font-weight:600;font-size:clamp(16px,4vw,19px);
}
.answers li:first-child{border-top:1px solid var(--color-line)}
.answers li::before{
  content:counter(a,decimal-leading-zero);position:absolute;left:0;top:clamp(18px,4.4vw,25px);
  font-family:var(--font-slab);font-weight:700;font-size:var(--t-eyebrow);letter-spacing:.16em;
  background:var(--ad-gradient-sunset-diag);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Imagínate: la vida después del reto ---------- */
.outcomes{
  list-style:none;margin:0;padding:0;counter-reset:o;
  display:grid;gap:clamp(14px,3.2vw,22px);
}
.outcomes li{
  counter-increment:o;position:relative;
  padding:clamp(20px,4.6vw,28px) clamp(20px,4.6vw,28px) clamp(20px,4.6vw,28px) clamp(52px,12vw,66px);
  border-radius:var(--radius-md);line-height:1.55;
  background:linear-gradient(180deg,#fff,#fffafb);border:1px solid var(--color-line);
  box-shadow:var(--shadow-sm);
}
.outcomes li::before{
  content:counter(o,decimal-leading-zero);position:absolute;
  left:clamp(20px,4.6vw,28px);top:clamp(21px,4.8vw,30px);
  font-family:var(--font-slab);font-weight:700;font-size:var(--t-eyebrow);letter-spacing:.16em;
  background:var(--ad-gradient-sunset-diag);-webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(min-width:860px){.outcomes{grid-template-columns:1fr 1fr}}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--color-line);border-radius:var(--radius-lg);
  padding:clamp(22px,5.4vw,34px);box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card-grid{display:grid;gap:clamp(14px,3.6vw,22px)}
@media(min-width:760px){.card-grid--3{grid-template-columns:repeat(3,1fr)}.card-grid--2{grid-template-columns:repeat(2,1fr)}}

.card--gradient{
  position:relative;overflow:hidden;color:#fff;border:0;
  background:var(--ad-gradient-wine);box-shadow:var(--shadow-md);
}
/* la pieza fuerte del premio ocupa la fila entera */
@media(min-width:760px){.card--wide{grid-column:1/-1}}

/* la promesa: tarjetas en columna, con la barra de marca al costado */
.promise .card{
  border-left:3px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             var(--ad-gradient-sunset-diag) border-box;
}
.card--gradient .h3,.card--gradient strong{color:#fff}
.card--gradient .eyebrow{color:var(--color-text-on-dark)}

/* herramientas IA */
.tool{position:relative;overflow:hidden}
/* el mockup de la herramienta encabeza la ficha */
.tool__shot{
  margin:calc(clamp(22px,5.4vw,34px) * -1) calc(clamp(22px,5.4vw,34px) * -1) clamp(14px,3vw,20px);
  background:linear-gradient(180deg,var(--ad-rosa-tint),#fff);
  padding:clamp(14px,3.4vw,22px) clamp(14px,3.4vw,22px) 0;
}
.tool__shot img{width:100%;height:auto;display:block}
.tool__num{
  font-family:var(--font-serif);font-size:clamp(40px,11vw,60px);line-height:1;
  background:var(--ad-gradient-sunset-diag);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:.25em;display:block;
}

/* ---------- Sesiones (sticky en desktop) ---------- */
.sessions{display:grid;gap:clamp(28px,7vw,40px)}
.session{position:relative}
.session__media{position:relative}
/* en móvil el número queda debajo de la foto: necesita aire, no pegarse a ella */
.session__num{
  display:block;margin:clamp(24px,6vw,34px) 0 .12em;
  font-family:var(--font-serif);font-size:clamp(46px,12vw,76px);line-height:.9;
  background:var(--ad-gradient-sunset-diag);-webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(min-width:860px){
  .session__num{margin-top:0}
  .session{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,64px);align-items:center}
  .session:nth-child(even) .session__media{order:2}
  .sessions{gap:clamp(56px,9vw,110px)}
}

/* ---------- Testimonios ---------- */
/* Testimonios en Poppins (desktop y móvil) para que se lean mejor */
.proof{position:relative;overflow:hidden}
.proof__inner{position:relative;z-index:1;color:#fff;text-align:center;font-family:var(--font-poppins)}
.proof__name{
  font-family:var(--font-poppins);font-weight:600;font-size:clamp(12px,3vw,14px);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--color-text-on-dark);margin-bottom:1.5em;display:block;
}
.proof__tag{
  display:inline-block;margin-left:.6em;padding:.42em .9em;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.55);
  letter-spacing:.12em;font-size:.94em;color:#fff;white-space:nowrap;
}
.proof__stat{
  font-family:var(--font-poppins);font-weight:600;font-size:clamp(24px,5.9vw,40px);line-height:1.24;
  color:#fff;margin:0 auto .7em;max-width:20ch;letter-spacing:-.01em;
}
.proof__quote{
  font-family:var(--font-poppins);font-style:normal;font-weight:400;
  font-size:clamp(16px,4vw,20px);line-height:1.62;
  color:var(--color-text-on-dark-soft);max-width:52ch;margin:0 auto;
}
/* La cifra de Marta va en 2 líneas como máximo. El divisor 15.6 es el ancho
   que ocupa la frase entera en múltiplos de su font-size (28.3), partido en
   dos y con holgura para que el corte caiga en un espacio. */
.proof--with-video .proof__stat{
  max-width:none;
  font-size:min(clamp(24px,5.9vw,40px),calc((100vw - var(--gutter)*2) / 15.6));
}

/* el video del testimonio: en móvil bajo la cita, en escritorio a la derecha */
.proof__video{display:flex;justify-content:center;margin-top:clamp(26px,6vw,40px);--vh:clamp(320px,62vw,440px)}
.proof__video .vcard__frame{box-shadow:var(--shadow-lg)}

@media(min-width:900px){
  .proof--with-video .proof__inner{
    max-width:var(--container);
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(40px,5vw,80px);align-items:center;text-align:left;
  }
  .proof--with-video .proof__name{grid-column:1;grid-row:1;margin-bottom:1.1em}
  /* en 2 columnas la cifra se mide contra su columna, no contra la pantalla */
  .proof--with-video .proof__stat{
    grid-column:1;grid-row:2;margin-inline:0;
    max-width:none;font-size:clamp(26px,3.2vw,38px);
  }
  .proof--with-video .proof__quote{grid-column:1;grid-row:3;margin-inline:0;max-width:46ch}
  .proof--with-video .proof__video{
    grid-column:2;grid-row:1/4;margin-top:0;align-self:center;
    --vh:clamp(400px,44vw,540px);
  }
}

.proof--light .proof__inner{color:var(--ad-ink)}
.proof--light .proof__stat{color:var(--ad-wine)}
.proof--light .proof__name{color:var(--ad-fuchsia)}
.proof--light .proof__quote{color:var(--ad-ink-soft)}
.proof--light .proof__tag{background:rgba(183,39,118,.08);border-color:rgba(183,39,118,.22);color:var(--ad-wine)}

/* ---------- Carrusel continuo (testimonios) ----------
   La cinta lleva el contenido duplicado: se desplaza media pista y vuelve
   a empezar, así el bucle no tiene costura. El JS mide el ancho real y
   ajusta --dur para que todos los carruseles vayan a la misma velocidad. */
.marquee{
  position:relative;overflow:hidden;
  margin-top:clamp(30px,7vw,52px);
  padding-block:clamp(6px,1.6vw,12px);
  --gap:clamp(12px,2.2vw,20px);
  --dur:60s;
}
/* difuminado en los bordes: las tarjetas entran y salen, no se cortan en seco */
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:clamp(28px,7vw,120px);z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--color-bg),rgba(255,255,255,0));
}
.marquee::after{right:0;transform:scaleX(-1)}
.marquee__track{
  display:flex;align-items:flex-start;gap:var(--gap);width:max-content;
  animation:marquee-ltr var(--dur) linear infinite;
  will-change:transform;
}
/* de izquierda a derecha: las tarjetas entran por el borde izquierdo */
@keyframes marquee-ltr{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
/* el cursor encima (o un dedo, o un video sonando) congela la cinta */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-touched .marquee__track,
.marquee.is-offscreen .marquee__track,
.marquee.is-paused .marquee__track{animation-play-state:paused}
.marquee__track>*{flex:0 0 auto}

/* sin JS o con movimiento reducido: carrusel manual, nunca un bloque roto */
.marquee--static{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.marquee--static .marquee__track{animation:none;width:auto}
.marquee--static .marquee__track>*{scroll-snap-align:center}
@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee__track{animation:none}
}

/* ---------- Tarjetas de video ----------
   Altura común y ancho según la proporción real del clip (--ar):
   los verticales de móvil y los apaisados de Zoom conviven sin recortes. */
.marquee--videos{--vh:clamp(280px,52vw,420px)}
.vcard{margin:0;width:calc(var(--vh) * var(--ar,.5625))}
.vcard__frame{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--ad-magenta-900);box-shadow:var(--shadow-md);isolation:isolate;
  line-height:0;height:var(--vh);
}
.vcard__poster,.vcard__frame video{width:100%;height:100%;display:block;object-fit:cover}
.vcard__frame video{background:#000}
.vcard__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,rgba(76,12,49,.10),rgba(76,12,49,.52));
  transition:opacity var(--dur-base) var(--ease-out);
}
.vcard__play i{
  display:grid;place-items:center;width:clamp(52px,11vw,68px);aspect-ratio:1;border-radius:50%;
  background:rgba(255,255,255,.94);box-shadow:var(--shadow-glow);
  transition:transform var(--dur-base) var(--ease-out);
}
.vcard__play i svg{width:38%;fill:var(--ad-wine);margin-left:8%}
.vcard__play:hover i{transform:scale(1.08)}
.vcard.is-playing .vcard__play,.vcard.is-playing picture{display:none}
.vcard__cap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.3em .6em;
  margin:clamp(10px,2.4vw,14px) .2em 0;
  font-family:var(--font-poppins);font-size:var(--t-small);color:var(--ad-ink-soft);
}
.vcard__cap b{font-weight:600;color:var(--ad-wine);font-size:1.08em}
.vcard__cap span{
  font-family:var(--font-slab);font-weight:700;font-size:.82em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ad-fuchsia);
}

/* ---------- Cinta de logos (sobre qué corren las herramientas) ---------- */
.marquee--logos{
  --gap:clamp(38px,7vw,80px);
  margin-top:clamp(26px,5vw,40px);
  padding-block:clamp(10px,2.4vw,18px);
}
.logo-chip{
  display:flex;align-items:center;gap:.6em;
  color:var(--ad-ink-soft);opacity:.75;
  transition:opacity var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.logo-chip:hover{opacity:1;color:var(--ad-wine)}
.logo-chip svg{
  width:clamp(24px,5vw,30px);height:auto;flex:0 0 auto;fill:currentColor;
}
.logo-chip span{
  font-family:var(--font-slab);font-weight:700;
  font-size:clamp(15px,3.6vw,19px);letter-spacing:.06em;white-space:nowrap;
}

/* ---------- Tarjetas de mensajes (pantallazos) ----------
   Todas del mismo tamaño y encuadradas por arriba, que es donde empieza
   la conversación. El mensaje completo se lee en el visor. */
.marquee--shots{--sw:clamp(190px,46vw,250px);--sh:clamp(290px,66vw,370px)}
/* las tarjetas no tienen todas el mismo alto: se centran en la cinta */
.marquee--shots .marquee__track{align-items:center}
.shot{
  margin:0;width:var(--sw);
  border-radius:var(--radius-md);overflow:hidden;background:#fff;
  border:1px solid var(--color-line);box-shadow:var(--shadow-sm);cursor:zoom-in;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.shot:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
/* El pantallazo entra SIEMPRE completo de lado a lado: la altura es la que
   toque y solo se recorta por abajo si se pasa de --sh. Con height fija, las
   capturas anchas se recortaban por los lados y el texto quedaba cortado. */
.shot img{
  width:100%;height:auto;max-height:var(--sh);
  object-fit:cover;object-position:top center;display:block;
}

/* visor a pantalla completa del pantallazo */
.lightbox{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  padding:clamp(14px,4vw,40px);background:rgba(48,8,30,.92);
  opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:88vh;width:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}
.lightbox__close{
  position:absolute;top:clamp(10px,3vw,24px);right:clamp(10px,3vw,24px);
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--ad-wine);font-size:22px;line-height:1;
}

/* ---------- Espejo (pain points) ---------- */
.mirror{display:grid;gap:clamp(10px,2.6vw,14px);margin:clamp(22px,4.5vw,32px) 0 0;padding:0}
.mirror li{
  list-style:none;padding:clamp(18px,4.6vw,26px);border-radius:var(--radius-md);
  background:linear-gradient(180deg,#fff,#fffafb);border:1px solid var(--color-line);
  line-height:1.55;box-shadow:var(--shadow-sm);
  transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.mirror li:hover{transform:translateX(4px);border-color:rgba(183,39,118,.3)}
/* la lista vive dentro del split, en una sola columna junto a la foto:
   así el retrato y el texto tienen alturas parecidas y no queda un vacío al lado */
@media(min-width:860px){.mirror:not(.split__body .mirror){grid-template-columns:1fr 1fr}}

/* ---------- Precios ---------- */
/* el mockup de cada camino, arriba de su tarjeta.
   Los dos originales no tienen la misma proporción: la caja fija con
   object-fit:contain los deja ópticamente del mismo tamaño. */
.plan__mockup{
  margin:0 0 clamp(18px,4vw,26px);
  aspect-ratio:2.3/1;display:grid;place-items:center;
}
.plan__mockup img{width:100%;height:100%;object-fit:contain}

.plans{display:grid;gap:clamp(20px,5vw,28px);align-items:start}
@media(min-width:900px){.plans{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,36px)}}
.plan{
  position:relative;background:#fff;border-radius:var(--radius-xl);padding:clamp(26px,6vw,40px);
  border:1px solid var(--color-line);box-shadow:var(--shadow-md);
}
/* marco destacado: gradiente en el borde vía padding-box/border-box
   (nada de ::before con z-index negativo — se comería el fondo blanco) */
.plan--vip{
  border:2.5px solid transparent;box-shadow:var(--shadow-lg);
  background:linear-gradient(#fff,#fff) padding-box,
             var(--ad-gradient-sunset-diag) border-box;
}
.plan__label{
  font-family:var(--font-slab);font-weight:700;font-size:clamp(22px,5.6vw,32px);letter-spacing:.1em;text-transform:uppercase;
  line-height:1.15;color:var(--ad-wine);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5em;margin-bottom:.9em;
}
.plan__spots{
  display:inline-flex;align-items:center;gap:.55em;padding:.4em .8em;border-radius:var(--radius-pill);
  background:var(--ad-gradient-sunset-diag);color:#fff;letter-spacing:.1em;font-size:.62em;
  line-height:1.2;
}
.plan__spots::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#fff;animation:blink 2s var(--ease-soft) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.plan__items{list-style:none;margin:0 0 clamp(20px,5vw,26px);padding:0;display:grid;gap:.75em}
.plan__items li{position:relative;padding-left:1.95em;font-size:var(--t-small);line-height:1.5}
.plan__items li::before{
  content:"";position:absolute;left:0;top:.24em;width:1.2em;height:1.2em;border-radius:50%;background:var(--ad-gradient-sunset-diag);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/70% no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 6L9 17l-5-5' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/70% no-repeat;
}
.plan__items .cost{color:var(--ad-ink-soft);white-space:nowrap}
.plan__total{font-size:var(--t-small);color:var(--ad-ink-soft);margin:0 0 .3em;text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--ad-naranja)}
.plan__price{font-family:var(--font-serif);font-size:clamp(38px,10vw,58px);line-height:1;color:var(--ad-wine);margin:0 0 .6em}
.plan__price sup{font-size:.34em;vertical-align:.9em;letter-spacing:.12em;font-family:var(--font-slab);font-weight:700;margin-left:.3em}
.plan__foot{font-size:var(--t-small);margin:1em 0 0;color:var(--ad-ink-soft)}
/* aviso temporal mientras el checkout no tiene enlace */
.checkout-note{
  margin:.9em 0 0;font-size:var(--t-small);line-height:1.45;color:var(--ad-wine);
  padding:.8em 1em;border-radius:var(--radius-md);background:var(--ad-rosa-tint);
  opacity:0;transform:translateY(-4px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.checkout-note.is-visible{opacity:1;transform:none}
.plan__foot strong{color:var(--ad-wine)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--color-line)}
.faq__item{border-bottom:1px solid var(--color-line)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.2em;
  padding:clamp(20px,4.6vw,26px) 0;text-align:left;
  font-family:var(--font-serif);font-size:var(--t-h3);line-height:1.25;color:var(--ad-ink);
  transition:color var(--dur-base) var(--ease-out);
}
.faq__q:hover{color:var(--ad-fuchsia)}
.faq__q i{
  flex:0 0 auto;width:1.15em;height:1.15em;margin-top:.18em;position:relative;
  transition:transform var(--dur-base) var(--ease-out);
}
.faq__q i::before,.faq__q i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ad-fuchsia);border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq__q i::before{width:100%;height:1.5px}
.faq__q i::after{width:1.5px;height:100%;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.faq__item.is-open .faq__q i::after{opacity:0;transform:translate(-50%,-50%) rotate(90deg)}
.faq__a{overflow:hidden;height:0;transition:height var(--dur-slow) var(--ease-out)}
.faq__a>div{padding-bottom:clamp(18px,4.4vw,26px);max-width:62ch}
.faq__a p:last-child{margin-bottom:0}

/* ---------- Cierre ---------- */
.deadline{
  margin:clamp(26px,6vw,40px) 0 0;padding:clamp(20px,5vw,30px) clamp(22px,5.4vw,34px);
  border-radius:var(--radius-lg);text-align:center;
  border:1.5px solid transparent;
  background:linear-gradient(180deg,#fff,#fffafb) padding-box,
             var(--ad-gradient-sunset-diag) border-box;
  box-shadow:var(--shadow-sm);
}
.deadline__main{
  margin:0;font-family:var(--font-serif);font-weight:500;line-height:1.25;
  font-size:var(--t-h3);color:var(--ad-wine);text-wrap:balance;
}
.deadline__sub{
  margin:.6em 0 0;font-family:var(--font-slab);font-weight:700;font-size:var(--t-eyebrow);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ad-fuchsia);
}

.signature{display:grid;gap:.2em;justify-items:center;text-align:center}
.tagline{
  font-family:var(--font-slab);font-weight:700;font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;
  color:var(--ad-fuchsia);
}
/* pie: misma barra magenta que la cabecera, para que el logo crema contraste */
.footer{
  padding:clamp(38px,8vw,60px) 0 calc(clamp(38px,8vw,60px) + env(safe-area-inset-bottom));
  border-top:0;text-align:center;
  background:var(--ad-gradient-brand);color:#fff;
}
.footer__logo{
  height:clamp(38px,9vw,60px);width:auto;margin:0 auto clamp(14px,3.4vw,22px);
}
.footer .micro{color:rgba(255,255,255,.92)}
.footer a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.footer a:hover{color:rgba(255,255,255,.78)}
/* en móvil el CTA fijo tapa el pie: le dejamos aire */
@media(max-width:899px){.footer{padding-bottom:calc(clamp(38px,8vw,60px) + 76px + env(safe-area-inset-bottom))}}

/* ---------- CTA sticky móvil ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:55;padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 -1px 0 rgba(108,15,70,.08);
  transform:translateY(120%);transition:transform var(--dur-slow) var(--ease-out);
}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta__row{display:flex;align-items:center;gap:.9rem;max-width:var(--container);margin-inline:auto}
.sticky-cta__price{flex:0 0 auto;line-height:1.15}
.sticky-cta__price b{display:block;font-family:var(--font-serif);font-size:19px;color:var(--ad-wine)}
.sticky-cta__price span{font-family:var(--font-slab);font-weight:700;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ad-ink-soft)}
.sticky-cta .btn{flex:1 1 auto}
@media(min-width:900px){.sticky-cta{display:none}}

/* ---------- Divisor orquídea ---------- */
.rule{display:flex;align-items:center;gap:1.2em;color:var(--color-line)}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:currentColor}
.rule i{width:6px;height:6px;border-radius:50%;background:var(--ad-gradient-sunset-diag)}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);
  transition-delay:calc(var(--i,0)*90ms);
}
[data-reveal].is-in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-32px)}
[data-reveal="right"]{transform:translateX(32px)}
[data-reveal="scale"]{transform:scale(.94)}

/* revelado de imagen con máscara.
   OJO: el clip-path va en el hijo, nunca en el elemento observado —
   un elemento recortado a 0 nunca "intersecta" y el observer no dispararía. */
[data-reveal="mask"]{opacity:1;transform:none}
[data-reveal="mask"] .media{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.1s var(--ease-out);transition-delay:calc(var(--i,0)*90ms);
}
[data-reveal="mask"].is-in .media{clip-path:inset(0 0 0 0)}
[data-reveal="mask"] .media img{transform:scale(1.12);transition:transform 1.4s var(--ease-out),opacity .8s var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}
[data-reveal="mask"].is-in .media img{transform:scale(1)}

/* parallax */
[data-parallax]{will-change:transform}

/* entrada del hero */
.hero [data-hero]{opacity:0;transform:translateY(30px)}
.hero.is-ready [data-hero]{
  opacity:1;transform:none;
  transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);
  transition-delay:calc(var(--i,0)*110ms + 120ms);
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-reveal],[data-reveal="mask"] .media,.hero [data-hero]{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-parallax]{transform:none!important}
}