/* ═══════════════════════════════════════════════
   Lanza tu Sitio Web — Masterclass
   Tokens tomados del diseño de Figma
   ═══════════════════════════════════════════════ */
:root{
  --lima-1:#C6FB4B; --lima-2:#C9FF4C; --lima-3:#CFFA42;
  /* rojo del botón, muestreado de la referencia: #E24137 arriba → #C42C20 abajo */
  --rojo-1:#E24137; --rojo-2:#C42C20;
  --morado:#673DE6; --morado-2:#8861FF; --morado-3:#8E6BF9; --morado-4:#6A38FF;
  --gris:#B5B5B5; --gris-h1:#959596; --gris-input:#E3E3E3; --negro:#000; --blanco:#fff;
  --max:1180px;
  --r:999px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--blanco); color:var(--negro);
  font:400 17px/1.55 Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 24px}
.wrap--sm{max-width:900px}
.mt{margin-top:2.2rem}

/* En Figma la negrita es Inter Bold (700). Sin esto, <b> hereda 'bolder'
   y sobre una base de 700 se va a 900, ensanchando el texto y rompiendo
   los cortes de línea del diseño. */
b, strong{font-weight:700}

/* ───────── barra superior ───────── */
.topbar{
  position:relative; z-index:0;   /* franja de fondo: debe quedar DEBAJO de su propio texto */
  background:linear-gradient(90deg,var(--lima-1),var(--lima-2),var(--lima-3));
}
.topbar-in{
  max-width:var(--max); margin:0 auto; padding:12px 24px;
  display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap;
}
.topbar-txt{margin:0; font-size:16px}
.topbar-txt strong{font-size:22px; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.btn-topbar{
  background:linear-gradient(90deg,var(--morado),var(--morado-2));
  color:#fff; text-decoration:none; font-weight:700; font-size:15px;
  padding:11px 22px; border-radius:var(--r); white-space:nowrap;
  transition:transform .2s, filter .2s;
}
.btn-topbar:hover{transform:translateY(-1px); filter:brightness(1.08)}

/* ───────── hero ───────── */
/* fondo compuesto desde las capas reales del Figma
   (elipses difuminadas + rejilla en soft-light) */
/* el fondo cubre hero + la sección siguiente: en Figma las formas
   llegan hasta y=1423 y el hero solo mide 992 */
.top-wrap{position:relative}   /* sin fondo propio: el de Figma va en ::before, por detrás */
.hero{position:relative; padding:64px 0 72px}
/* elipses que en Figma van en modo SCREEN, encima de la foto */
.hero-frente{
  position:absolute; top:0; left:0; width:100%; height:auto;
  mix-blend-mode:screen; pointer-events:none; z-index:2;
}
.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
}
.logo{display:flex; align-items:center; gap:12px; margin-bottom:28px}
.logo-mark{
  width:56px; height:56px; border-radius:16px; flex:0 0 auto;
  box-shadow:0 1px 21px rgba(103,61,230,.66);
}
.logo-txt{display:flex; flex-direction:column; line-height:1.1}
.logo-txt em{font-style:italic; font-weight:600; font-size:20px; color:var(--gris)}
.logo-txt strong{
  font-weight:800; font-size:24px;
  background:linear-gradient(90deg,var(--morado-4),var(--morado-3),#B39EF3);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
/* H1 — pesos y colores exactos del Figma:
   regular → bold negro → bold gris #959596 → bold degradado morado */
.h1{
  margin:0 0 20px; font-size:clamp(29px,3.35vw,45px); line-height:1.04;
  font-weight:700; letter-spacing:-.018em; text-wrap:wrap;   /* 'balance' reequilibra las líneas y rompe los cortes del Figma */
}
.h1 .reg{font-weight:400}
.h1 .gris{color:var(--gris-h1)}
.h1 .grad,.h2 .grad{
  background:linear-gradient(90deg,#673DE6,#B69EFF);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.h2 .muted,.h3 .muted{color:var(--gris)}
.hero-sub{margin:0 0 28px; font-size:19px; color:#333; max-width:36ch}

/* formulario */
.form{max-width:420px}
.form input{
  width:100%; margin-bottom:14px; padding:18px 22px;
  border:0; border-radius:var(--r); background:var(--gris-input);
  font:400 16px Inter,sans-serif; color:var(--negro);
}
.form input::placeholder{color:#8b8b8b}
.form input:focus{outline:2px solid var(--morado); outline-offset:2px}
.btn-lime{
  width:100%; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:19px 26px; border-radius:var(--r);
  background:linear-gradient(180deg,var(--rojo-1),var(--rojo-2));
  font:800 18px Inter,sans-serif; color:#fff; text-decoration:none;
  box-shadow:0 14px 19px rgba(0,0,0,.27);
  transition:transform .2s, box-shadow .2s;
}
.btn-lime:hover{transform:translateY(-2px); box-shadow:0 18px 26px rgba(0,0,0,.3)}
.btn-lime:disabled{opacity:.6; cursor:wait; transform:none}
.btn-lime--link{max-width:420px; margin:14px auto 0}
.btn-arrow{width:20px; height:20px; flex:0 0 auto}
.form-note{margin:12px 0 0; text-align:center; font-size:14px; color:#666}
.form-error{margin:10px 0 0; text-align:center; font-size:14px; color:#D9264A; min-height:1.2em}

/* foto hero — sin fondo, la imagen ya viene recortada */
.hero-foto{position:relative}
.hero-foto img{width:100%}

/* badges: en el Figma los tres terminan alineados a la derecha,
   apilados al 59% / 64.8% / 70.6% del alto de la foto */
.badges{
  position:absolute; top:59%; right:16.5%;
  display:flex; flex-direction:column; align-items:flex-end; gap:13px;
}
.badge{
  padding:8px 22px; border-radius:var(--r);
  background:linear-gradient(90deg,#414141,var(--morado));
  color:#fff; font-size:clamp(13px,1.3vw,19px); font-weight:400;
  line-height:1.35; white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}

/* ───────── secciones ───────── */
.sec{padding:86px 0}
.sec--center{text-align:center}
.h2{margin:0 0 18px; font-size:clamp(26px,2.9vw,45px); line-height:1.18; font-weight:800; letter-spacing:-.02em}
.h2--left{text-align:left}
.h3{margin:26px 0 0; font-size:clamp(22px,2.2vw,34px); line-height:1.25; font-weight:800; color:var(--gris)}
.h3 b{color:var(--negro)}
.negro{color:var(--negro)}
.blanco{color:#fff}
.p{margin:0 0 16px; font-size:18px; line-height:1.65; color:#333}
.p-sm{margin:0; font-size:16px; color:#666}
.p-lg{margin:26px auto 0; max-width:760px; font-size:clamp(19px,2vw,28px); line-height:1.45; color:#333}
.mega{
  margin:0; font-weight:900; letter-spacing:-.045em; line-height:.88;
  font-size:clamp(64px,15vw,210px);
}
.dos-col{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.dos-col--rev .img-r{order:2}
.img-r{border-radius:24px; width:100%}
.img-full{border-radius:24px; margin:34px auto 0; width:100%}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:12px; margin:22px 0}
.chips--center{justify-content:center}
.chip{
  padding:9px 22px; border-radius:var(--r);
  background:var(--morado); color:#fff; font-weight:700; font-size:16px;
}
.bloque-morado{
  aspect-ratio:1/1; border-radius:32px; width:100%;
  background:linear-gradient(150deg,var(--morado-3),var(--morado));
  box-shadow:0 26px 60px -20px rgba(103,61,230,.5);
}


/* listas */
.lista{list-style:none; margin:24px 0 0; padding:0}
.lista li{
  position:relative; padding:0 0 0 34px; margin-bottom:18px;
  font-size:18px; line-height:1.55; color:#333;
}
.lista li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg,var(--morado-4),var(--morado-3));
}

.cta-final{padding-bottom:100px}
.pie{padding:30px 24px; text-align:center; font-size:14px; color:#8b8b8b; border-top:1px solid #eee}

/* ───────── móvil ───────── */

@media (max-width:520px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .topbar-in{gap:10px; padding:10px 18px}
  .topbar-txt{font-size:14px}
  .topbar-txt strong{font-size:19px}
  .btn-topbar{font-size:14px; padding:9px 18px}
  .p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important; animation:none!important}
}

/* ═══ colores y pesos exactos por tramo (leídos del Figma) ═══ */
.h2 .reg,.h1 .reg{font-weight:400}
.gris-b5{color:var(--gris)}
.lima{color:#C9FF4C}
.morado-1{color:#865FFF}
.morado-2{color:#8B65FF}
.grad-ia{
  font-weight:500;
  background:linear-gradient(90deg,#AE93FF,#4A18E2);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.grad-90{
  font-weight:700;
  background:linear-gradient(90deg,#7344FF,#E1D7FF);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ═══ sección morada como TARJETA redondeada (como en el Figma) ═══ */
.sec--beneficios .wrap{max-width:none; padding:0}   /* la tarjeta (1420) es más
   ancha que .wrap (1132): sin esto no cabe, margin:auto no puede centrarla y
   se desborda hacia la derecha. */
.tarjeta-morada{
  position:relative; overflow:hidden;
  border-radius:52px; padding:64px 48px 56px; text-align:center;
  background:linear-gradient(115deg,#6A38FF 0%,#7C52FC 45%,#9F86FF 100%);
  box-shadow:0 40px 90px -30px rgba(103,61,230,.55);
}
.tarjeta-morada .h2{position:relative; z-index:1}
.p-mini{
  position:relative; z-index:1;
  margin:0 auto; max-width:640px; font-size:15px; line-height:1.5;
  color:rgba(255,255,255,.86);
}
.tarjeta-morada .mt{margin-top:2.6rem}

/* 5 tarjetas blancas en una fila */
.cards{
  position:relative; z-index:1;
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.cards li{
  background:#fff; border-radius:20px; padding:14px;
  display:flex; flex-direction:column; gap:12px; text-align:left;
}
.card-img{display:block; width:100%; aspect-ratio:16/11; border-radius:12px; background:#C4C4C4}
.cards p{margin:0; font-size:13px; line-height:1.35; font-weight:700; color:var(--negro)}
.cards .g{color:var(--gris)}

/* listas con viñeta redonda pequeña, como el diseño */
.lista--bullet li{padding-left:24px}
.lista--bullet li::before{
  width:6px; height:6px; top:.62em; left:6px; background:var(--negro);
}
.chispa{
  display:inline-block; margin-right:6px; color:#8E6BF9; font-size:.85em;
  transform:translateY(-.05em);
}

@media (max-width:1024px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .tarjeta-morada{padding:52px 32px 46px; border-radius:40px}
}
@media (max-width:640px){
  .cards{grid-template-columns:repeat(2,1fr); gap:12px}
  .tarjeta-morada{padding:40px 20px 34px; border-radius:30px}
  .cards p{font-size:12px}
}

/* chevron decorativo del Figma */
.chevron{
  position:absolute; right:2%; top:-4%;
  width:38%; height:78%; pointer-events:none; z-index:0;
}
@media (max-width:640px){ .chevron{display:none} }

/* ═══════════════════════════════════════════════════════
   HERO PROPORCIONAL (escritorio)
   Posiciones y tamaños tomados 1:1 del frame de Figma
   (1728×992). Todo en % y vw para que coincida con el
   fondo a cualquier ancho de pantalla.
   ═══════════════════════════════════════════════════════ */
@media (min-width:901px){
  .hero{
    position:relative; aspect-ratio:1728/992; padding:0;
    max-width:none; width:100%;
    /* La franja del contador ocupaba y=0..78 del lienzo (4.5139vw). Al quitarla
       quedaba ese hueco encima del logo, así que el hero sube justo esa altura.
       Sube entero —fondo, foto y textos— de modo que ninguna coordenada del
       diseño cambia; solo se recorta por arriba lo que tapaba la franja. */
    margin-top:-2.6042vw;   /* 45px: lo justo para que la etiqueta MASTERCLASS respire arriba */
  }
  .hero > *{position:absolute; margin:0}

  .hero > .logo     { left:19.91%; top:18.75%; width:12.62%; height:auto }

  /* 33.5% en vez del 31.25% del Figma: con la promesa nueva, más corta, a
     540px «más» se quedaba colgando solo en una cuarta línea. A 579px entra
     en tres líneas limpias. */
  .hero > .h1       { left:19.91%; top:28.93%; width:33.5%;
                      font-size:2.604vw; line-height:.9244; letter-spacing:-.07em }

  /* sube de 57.46% a 49.09%: el titular pasó de 5 líneas a 3 y se quedaba un
     hueco enorme en medio del mensaje. Así conserva los 75px de separación
     que tenía en el diseño y la holgura que sobra queda antes del formulario,
     donde se lee como separación entre el mensaje y la acción. */
  .hero > .hero-sub { left:19.91%; top:57.46%; width:25.75%;
                      font-size:1.483vw; line-height:.9244; letter-spacing:-.07em; color:#000 }

  /* sube de 65.52% a 57.16%: al acortarse el titular, el subtítulo subió y
     quedaban 116px muertos hasta el formulario. Así recupera los 33px de
     separación del diseño; lo que sobra queda al pie del hero, donde no
     se nota porque a esa altura manda la foto. */
  .hero > .form     { left:19.91%; top:65.52%; width:21.35%; max-width:none }
  .hero .form input { height:3.704vw; padding:0 1.85vw; margin-bottom:.463vw;
                      font-size:.984vw; border-radius:999px }
  .hero .btn-lime   { height:3.646vw; padding:0; gap:.7vw;
                      font-size:1.389vw; margin-top:.463vw }
  .hero .btn-arrow  { width:1.273vw; height:1.273vw }
  .hero .form-note  { font-size:.81vw; margin-top:.984vw }
  .hero .form-error { font-size:.81vw; margin-top:.4vw }

  /* Foto nueva: cuerpo entero con el portátil, proporción 0.667 (la anterior
     era 0.747) y con 19% de aire transparente por arriba. Se agranda y se sube
     para que la cabeza quede a la misma altura que antes y el encuadre llegue
     al borde inferior del hero. El aire de arriba es transparente, así que
     salirse por arriba no tapa nada. */
  .hero > .hero-foto{ left:51.2%; top:-6.05%; width:40.5% }
  .hero .badge      { font-size:1.447vw; padding:.46vw 1.27vw }
  .hero .badges     { gap:.75vw }
}

/* El hero es un lienzo de proporción fija (1728×992): las posiciones van en %
   y las tipografías en vw. Limitar su ancho rompía esa relación — la caja se
   quedaba en 1900px mientras las letras seguían creciendo con el viewport, y
   en pantallas anchas el H1 se desbordaba sobre el subtítulo y el formulario.
   Sin tope, todo escala igual y las proporciones del Figma se mantienen. */


/* ═══ FONDO exportado de Figma (1728×1600, sin texto ni foto) ═══
   Las formas moradas nacen dentro del hero pero su difuminado sigue vivo
   hasta y≈1530, más allá del alto de .top-wrap (1535). Por eso va en un
   ::before con z-index:-1 en vez de en el background del contenedor:
   así puede sobrepasar la caja y desvanecerse sin cortarse en seco.
   Solo en escritorio: es un lienzo fijo de 1728px con las posiciones del
   diseño; en móvil el Figma tiene otro frame (440px) y este no aplica. */
@media (min-width:901px){
  .top-wrap::before{
    content:""; position:absolute; left:0; top:0;
    width:100%; height:98.380vw;              /* 1700/1728 */
    background:url("img/hero-fondo.webp?v=1788307585") no-repeat top center;
    background-size:100% auto;
    z-index:-1; pointer-events:none;
  }
  .hero{background:none}
}
/* badges exactos del Figma, en sus coordenadas (Hero 1728×992) */
@media (min-width:901px){
  .hero .badges{display:none}
  .hero > .pill{position:absolute; border-radius:999px; background:none; padding:0; border:0}  /* recorte del render: hay que devolverle la forma de píldora */
  .hero > .pill--1{ left:70.25%; top:61.49%; width:8.10%; height:4.132% }   /* Speaker            x=1214 y=610 140 */
  .hero > .pill--2{ left:66.49%; top:66.94%; width:11.86%; height:4.132% }  /* Melissa Arria      x=1149 y=664 205 */
  .hero > .pill--3{ left:61.40%; top:72.38%; width:16.96%; height:4.132% }  /* Creadora contenido x=1061 y=718 293 */
  .hero .hero-foto .badges{display:none}
}



/* ═══ barra superior dentro del hero, como en Figma (y=0..78 de 992) ═══ */


/* ═══ BARRA SUPERIOR ═══
   La franja lima que iba de y=0 a 78 se quitó a petición: el contador y el
   botón se quedan donde estaban, ahora sobre el fondo del hero. En móvil la
   franja venía pintada dentro de hero-movil.webp y se borró de la imagen. */
@media (min-width:901px){
  /* Frame 12 del Figma: x=561..1167, centrado en la página (centro 864 = 1728/2).
     Al ir centrado como fila, un contador más largo crece hacia ambos lados
     sin invadir el botón. */
  .hero > .tb-fila{
    left:50%; transform:translateX(-50%);
    top:.984vw; height:2.546vw;                     /* y=17..61 */
    width:auto; display:flex; align-items:center; white-space:nowrap;
  }
  .hero > .tb-fila > *{position:static; margin:0}
  .tb-fila .tb-label{
    margin-right:.6366vw;                           /* hueco 778→789 */
    font-size:1.3889vw; font-weight:400; letter-spacing:-.07em; line-height:1; color:#000;
  }
  .tb-fila .tb-reloj{
    /* baseline: «24» y el reloj alineados por abajo; «DÍAS» cuelga debajo */
    display:flex; align-items:baseline; gap:.55vw;
    margin-right:.7523vw;                           /* hueco 932→945 */
    font-size:1.9387vw; font-weight:700; letter-spacing:-.07em; line-height:1;
    color:#000; font-variant-numeric:tabular-nums;
    min-width:8.275vw; text-align:center;           /* hueco de 143px como en Figma;
                                                       cifras tabulares para que no baile cada segundo */
  }
  .tb-fila .btn-topbar{
    width:12.847vw; height:2.546vw;                 /* 222×44 */
    display:flex; align-items:center; justify-content:center; padding:0;
    font-size:1.0185vw; letter-spacing:-.068em; border-radius:1.273vw;
    background:linear-gradient(90deg,#673DE6,#8861FF);
  }
}




/* ═══ SECCIÓN "QUIERO TENER UNA WEB" — coordenadas exactas del Figma ═══
   Base 1728px. El texto va posicionado sobre el fondo que baja del hero. */
@media (min-width:901px){
  .top-wrap{height:88.83vw}                 /* hasta y=1535, donde arranca la sección siguiente */
  .sec--center.pregunta{
    position:absolute; left:0; top:0; width:100%; height:100%;
    padding:0; margin:0; text-align:center;
  }
  .pregunta .wrap{
    max-width:none; width:100%; padding:0; margin:0;
  }
  .pregunta .h2{
    position:absolute; left:27.083%; top:68.46vw; width:45.775%;
    margin:0; font-size:3.0064vw; line-height:.9245; letter-spacing:-.0745em;
    font-weight:700; color:#000;
    /* Figma declara -.07em, pero su Inter es un poco más estrecho que el de
       Google Fonts: con -.0745em los anchos renderizados coinciden (476px
       antes del globo, 670px la 2ª línea) y el globo deja de invadir «Web». */
  }
  .pregunta .h2 b{font-weight:700}
  /* el ícono va en flujo horizontal pero sin estirar la altura de línea:
     un hueco del ancho justo, con la imagen absoluta dentro. */
  .pregunta .globo{
    display:inline-block; position:relative;
    width:2.547vw; height:0; vertical-align:baseline;   /* 44px de hueco: el círculo mide 64 y necesita 3px de aire a cada lado */
  }
  .pregunta .globo img{
    position:absolute; left:-.463vw; top:-3.0151vw;   /* círculo centrado en el hueco: equivale al viejo top:50% + translateY(-81.4%),
       pero puesto en 'top' para dejar libre 'transform' (lo usa la animación de entrada) */
    width:3.704vw; height:auto; max-width:none;        /* 64px; sin max-width lo capa la regla global img */
  }   /* <b> heredaría 'bolder' → 900 y desbordaría a 3 líneas */
  .pregunta .h2 .reg{font-weight:400}
  .pregunta .p-sm{
    position:absolute; left:28.993%; top:75.35vw; width:42.014%;
    margin:0; font-size:1.4834vw; line-height:.9245; letter-spacing:-.07em;
    font-weight:400; color:#000;
  }
}


/* ═══ ORDEN DE CAPAS DENTRO DEL HERO (como en Figma) ═══ */
@media (min-width:901px){
  .hero > .tb-fila{z-index:3}                                  /* encima de la franja */
  .hero > .hero-foto{z-index:1}
  .hero > .pill{z-index:2}                                    /* los pills van sobre la foto */
  .hero > .logo, .hero > .h1, .hero > .hero-sub, .hero > .form{z-index:2}
}


/* ═══ "¡PERO ESO SE ACABÓ!" + IA — medidas exactas del Figma ═══
   Titular: 210.44px, Inter Bold 700, lh .9244, ls -.07em, «se acabó!» en #C9FF4C.
   Párrafo: 51px, base 400, «una página web profesional utilizando» en 700 y
   «Inteligencia Artificial» en Inter Medium 500 con degradado #AE93FF→#4A18E2.
   La estrella es la del Figma (Ellipse 7, 62px) recortada del render. */
@media (min-width:901px){
  .seacabo .mega{
    font-size:12.178vw; line-height:.92444; letter-spacing:-.07em; font-weight:700;
  }
  .p-ia{
    max-width:71.53vw; margin:2.2vw auto 0;   /* 1236px sobre base 1728 */
    font-size:2.9514vw; line-height:1.0392; letter-spacing:-.07em;
    font-weight:400; color:#000;
  }
  .p-ia b{font-weight:700}
  .br-mov{display:none}   /* saltos que solo existen en el diseño móvil */
  /* Inter Medium de Google Fonts es algo más ancho que el de Figma:
     con -.081em «Inteligencia Artificial» mide los 401px del diseño. */
  .p-ia .grad-ia{
    letter-spacing:-.081em;
    /* En Figma el degradado se calcula sobre la caja completa del párrafo
       (x=246..1482), no sobre la palabra: por eso «Inteligencia» ya arranca
       oscura. Reproduzco esa caja con background-size/position. */
    background-size:71.528vw 100%;          /* 1236px */
    background-position:-39.93vw center;    /* la palabra empieza en x=936 */
    background-repeat:no-repeat;
    padding-right:.29vw; margin-right:-.29vw;
  }
  /* mismo truco que el globo: hueco en el flujo, imagen absoluta,
     para que la estrella no estire la altura de línea */
  .p-ia .estrella{
    display:inline-block; position:relative;
    width:5.035vw; height:0; vertical-align:baseline;
  }
  .p-ia .estrella img{
    position:absolute; left:.723vw; top:-2.951vw;   /* el círculo va 6px por encima de la caja de línea, como en Figma;
       antes era top:50% + translateY(-50% - 1.157vw): mismo resultado, pero 'transform' queda libre para la animación */
    width:3.588vw; height:auto; max-width:none;
  }
}



/* ═══ "Y no, no vas a pasar 90 minutos escuchando teoría" ═══
   Figma 1322:26 → 51px, «Y no, no vas a pasar» en 400 y el resto en 700,
   todo negro (no morado). 1322:29 → «Vamos a construirla» 25.6px, 400,
   negro y a solo 13px del titular. */
.h2--teoria b{font-weight:700; color:#000}
/* «90 minutos»: degradado #7344FF→#E1D7FF (peso 700).
   Figma lo calcula sobre la caja entera del titular (677px), no sobre las dos
   palabras: por eso solo recorre del 1.5% al 38% del degradado y se mantiene
   morado. Si se aplica a la palabra sola llega hasta el casi-blanco final.
   El padding/margin compensa el letter-spacing negativo, que recorta la caja
   3.5px y dejaba la «s» de «minutos» cortada. */
.grad-90m{
  background:linear-gradient(90deg,#7344FF,#E1D7FF);
  background-size:39.178vw 100%;
  background-position:-.579vw center;
  background-repeat:no-repeat;
  padding-right:.29vw; margin-right:-.29vw;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.p-construir{color:#000}
@media (min-width:901px){
  .h2--teoria{
    max-width:39.18vw; margin:0 auto;              /* 677px */
    font-size:2.9514vw; line-height:1.0392; letter-spacing:-.07em;
    font-weight:400; color:#000;
  }
  .p-construir{
    margin:.752vw auto 0;                          /* 13px bajo el titular */
    font-size:1.4834vw; line-height:.9245; letter-spacing:-.07em;
    font-weight:400; color:#000;
  }
}


/* ═══ "NO ES QUE TENER UNA PÁGINA WEB SEA COSTOSÍSIMO" ═══
   Base 1728. Columna de texto 540px en x=333, bloque morado 500×467 en x=903.
   Ojo con los colores: en Figma cada tramo lleva DOS rellenos apilados y manda
   el de arriba — por eso «No es que» es #959596 (no #B5B5B5) y «sea
   costosísimo» lleva degradado #673DE6→#B69EFF, no negro. */
.gris-95{color:#959596}
.h3--costoso{color:#959596}
.h3--costoso b{color:#000; font-weight:700}
.grad-costo{
  background:linear-gradient(90deg,#673DE6,#B69EFF);
  padding-right:.29vw; margin-right:-.29vw;   /* el letter-spacing negativo recortaba la última letra */
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@media (min-width:901px){
  .dos-col--costoso{
    grid-template-columns:31.25vw 28.935vw;   /* 540 + 500 */
    gap:1.736vw;                              /* 30px */
    justify-content:center; align-items:start;
    max-width:none;
  }
  .h2--costoso{
    margin:0; font-size:2.6056vw; line-height:.92444; letter-spacing:-.07em;
    font-weight:700; color:#000;
  }
  .p--costoso{
    width:29.514vw;                           /* 510px */
    margin:2.083vw 0 0;                       /* 36px bajo el titular */
    font-size:1.4834vw; line-height:1.01427; letter-spacing:-.07em;
    font-weight:400; color:#000;
  }
  .sec--costoso .chips{margin:2.083vw 0 0; gap:.272vw}
  .sec--costoso .chip{
    width:7.465vw; height:2.199vw;            /* 129×38 */
    padding:0; display:flex; align-items:center; justify-content:center;
    border-radius:2.130vw;                    /* 36.8 */
    background:#673DE6; color:#fff;
    font-size:1.3585vw; font-weight:700; letter-spacing:-.07em; line-height:1;
  }
  .h3--costoso{
    margin:2.546vw 0 0;                       /* 44px bajo los chips */
    font-size:2.6056vw; line-height:.92444; letter-spacing:-.07em; font-weight:700;
  }
  .sec--costoso .bloque-morado{
    width:28.935vw; height:27.025vw;          /* 500×467 */
    aspect-ratio:auto; border-radius:1.968vw; /* 34 */
    background:#8E6BF9;
    box-shadow:0 1.794vw 3.229vw rgba(0,0,0,.48);   /* 0 31px 55.8px */
  }
}


/* ═══ CONTENEDORES PROPORCIONALES ═══
   Las tipografías del diseño van en vw (lienzo base 1728). Si los contenedores
   quedan topados en píxeles fijos, en pantallas anchas la letra crece pero la
   caja no: el texto se parte en más líneas y se desalinea todo. Por eso a
   partir de 901px los anchos también se expresan en vw. */
@media (min-width:901px){
  :root{--max:68.287vw}          /* 1180px */
  .wrap{padding:0 1.389vw}       /* 24px */
  .wrap--sm{max-width:52.083vw}  /* 900px */
  /* el ritmo vertical crece igual, pero nunca baja de los 86px del diseño */
  .sec{padding:max(86px, 4.977vw) 0}
}


/* ═══ TARJETA "DALE TU NEGOCIO PRESENCIA EN INTERNET" ═══
   Frame 16 del Figma: 1420×806, radio 101, degradado y sombra propios.
   El trazo blanco es el Vector 1307:473 (790×672) recortado por la tarjeta;
   va al 18% de opacidad, que es la del grupo en Figma. */
.sec--beneficios .wrap{max-width:none; padding:0}   /* la tarjeta (1420) es más
   ancha que .wrap (1132): sin esto no cabe, margin:auto no puede centrarla y
   se desborda hacia la derecha. */
.tarjeta-morada{
  position:relative; overflow:hidden;
  width:82.176vw; height:46.644vw;            /* 1420×806 */
  margin:0 auto; border-radius:5.845vw;       /* 101 */
  background:linear-gradient(52deg,#673DE6 43.98%,#9774FF 78.09%,#B399FF 93.41%);
  box-shadow:0 1.794vw 3.229vw rgba(0,0,0,.48);
}
.tarjeta-morada .trazo{
  position:absolute; left:51.338%; top:-33.375%;
  width:55.634%; height:auto; opacity:.18; pointer-events:none;
}
.tarjeta-morada > *:not(.trazo){position:absolute; margin:0}
.tm-titulo{
  left:13.169%; width:73.662%;                /* x=341 → 187 dentro de la tarjeta */
  top:15.261%;                                /* y=123 dentro de la tarjeta */
  font-size:2.6056vw; line-height:.92444; letter-spacing:-.07em;
  font-weight:700; color:#fff; text-align:center;
}
.tm-titulo--2{top:40.695%}                    /* y=328 */
.tm-sub{
  left:22.254%; width:55.423%;                /* x=470, 787 ancho */
  top:22.333%;                                /* y=180 */
  font-size:1.4834vw; line-height:.92444; letter-spacing:-.07em;
  font-weight:400; color:#fff; text-align:center;
}
.tarjetas-blancas{
  left:5.141%; top:53.598%;                   /* x=227, y=432 */
  width:89.648%;                              /* 1273 */
  display:flex; gap:.839vw;                   /* ~14.5px */
  list-style:none; padding:0;
}
.tarjetas-blancas .tb{
  width:14.063vw; height:14.525vw;            /* 243×251 */
  padding:1.331vw 1.273vw;                    /* 23 arriba, 22 a los lados */
  border-radius:1.727vw;                      /* 29.85 */
  background:#fff; box-sizing:border-box;
}
.tarjetas-blancas .tb-img{
  display:block; width:11.169vw; height:6.597vw;   /* 193×114 */
  border-radius:.868vw;                            /* 15 */
  background:#BCBBBB;
}
.tarjetas-blancas p{
  margin:.81vw 0 0;                                /* 14px */
  font-size:1.3143vw; line-height:.92444; letter-spacing:-.07em;
  font-weight:700; color:#000;
}
.tarjetas-blancas .tb--5 p{font-size:1.2226vw}     /* 21.127px */
.tarjetas-blancas b{font-weight:700; color:#000}




/* ═══ "Y NO, NO VAS A PASAR 90 MINUTOS…" — maqueta del navegador ═══
   Figma: ventana 1272×824 (1323:77) = barra de título de 59px + video de 764px.
   La barra la dibujo en CSS porque la imagen exportada solo trae el contenido. */
@media (min-width:901px){
  .sec--teoria .wrap{max-width:none; padding:0}   /* la ventana mide 1272 y no
     cabe en .wrap--sm (900): sin esto se recorta y se descentra */
  .h2--teoria{max-width:39.178vw}                 /* 677px */

  .navegador{
    width:73.611vw;                               /* 1272 */
    margin:3.935vw auto 0;                        /* 68px bajo «Vamos a construirla» */
    border-radius:1.147vw;                        /* 19.82 */
    overflow:hidden; background:#fff;
    box-shadow:0 4.301vw 8.602vw rgba(0,0,0,.57); /* 0 74.3px 148.7px */
    /* la imagen trae la barra oscura y sus puntos: la sombra y el radio
       los sigue poniendo el CSS para no cargar el PNG con transparencias */
    line-height:0;
  }
  .navegador img{width:100%; height:auto; display:block}
  .nav-barra{
    height:3.414vw;                               /* 59 */
    display:flex; align-items:center; gap:.579vw; /* hueco de 10px entre puntos */
    padding-left:1.273vw;                         /* 22 */
    background:linear-gradient(90deg,rgba(48,48,52,.86),rgba(32,32,36,.92));
  }
  .nav-punto{width:.868vw; height:.868vw; border-radius:50%; display:block}  /* 15 */
  .nav-img{display:block; width:100%; height:auto}

  .p--teoria{
    width:43.056vw;                               /* 744 */
    margin:4.225vw auto 0;                        /* 73px */
    font-size:1.4834vw; line-height:1.01427; letter-spacing:-.07em;
    font-weight:400; color:#000; text-align:center;
  }
  .chips--teoria{
    margin:1.447vw 0 0;                           /* 25px */
    gap:.868vw;                                   /* 15px */
  }
  .chips--teoria .chip{
    height:2.199vw;                               /* 38 */
    padding:0 1.389vw;                            /* 24 */
    border-radius:2.130vw; background:#673DE6; color:#fff;
    font-size:1.3585vw; font-weight:700; letter-spacing:-.07em;
    display:flex; align-items:center;
  }
}
.nav-punto--r{background:linear-gradient(180deg,#FF6B60,#F9503F)}
.nav-punto--a{background:linear-gradient(180deg,#FFD23F,#F6B52C)}
.nav-punto--v{background:linear-gradient(180deg,#3FD858,#26BD3C)}



/* ═══ "ES PARA TI SI…" y BIO — medidas exactas del Figma ═══
   Base 1728. Columna izquierda en x=341, bloque/columna derecha en x=917.
   Los dos titulares comparten estilo: 45.024px, Inter Bold, lh .92444, ls -.07em. */
.morado-865{color:#865FFF}
.morado-8b{color:#8B65FF; font-weight:700}
.grad-melissa{
  background:linear-gradient(90deg,#673DE6,#9D99FF);
  background-size:27.083vw 100%; background-position:0 center; background-repeat:no-repeat;
  padding-right:.29vw; margin-right:-.29vw;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@media (min-width:901px){
  .sec--parati .wrap, .sec--bio .wrap{max-width:none; padding:0}

  .rejilla{display:grid; width:62.269vw; margin-left:19.734vw}   /* 341..1417 */
  .rejilla--parati{grid-template-columns:30.903vw 28.935vw; gap:2.431vw; align-items:start}
  .rejilla--bio{grid-template-columns:30.266vw 28.935vw; gap:3.067vw; align-items:start}

  .tit-sec{
    margin:0; font-size:2.6056vw; line-height:.92444; letter-spacing:-.07em;
    font-weight:700; color:#000; text-align:left;
  }

  /* lista: el texto arranca en x=365, 24px a la derecha del titular, y entre
     ítem e ítem el Figma deja una línea vacía completa (25.279px). */
  .lista-parati{
    margin:3.241vw 0 0 1.389vw; padding-left:1.62vw;   /* 56px arriba, 24 + viñeta */
    width:29.514vw;                                    /* 510 */
    list-style:disc; color:#000;
    font-size:1.6255vw; line-height:.90;               /* 28.088 / 25.279 */
    letter-spacing:-.06em; font-weight:400;            /* misma corrección de ancho
       que en la bio: con -.06em los ítems cortan donde el diseño */
  }
  .lista-parati li + li{margin-top:1.463vw}            /* la línea en blanco */
  .lista-parati::marker,.lista-parati li::marker{color:#000}

  .sec--parati .bloque-morado{
    width:28.935vw; height:27.025vw; aspect-ratio:auto;
    border-radius:1.968vw; background:#8E6BF9;
    box-shadow:0 1.794vw 3.229vw rgba(0,0,0,.48);
  }

  /* ── bio ── */
  .foto-bio{
    width:30.266vw; height:40.567vw;                   /* 523×701 */
    object-fit:cover; border-radius:2.836vw;           /* 49 */
    box-shadow:0 1.794vw 3.229vw rgba(0,0,0,.48);
  }
  .col-bio{padding-top:3.183vw}                        /* el titular empieza 55px bajo la foto */
  .txt-bio{
    width:28.472vw;                                    /* 492 */
    margin:1.6782vw 0 0;                               /* 29px = una línea, como en Figma */
    font-size:1.4834vw; line-height:1.13130;           /* 29 / 25.635 */
    letter-spacing:-.06em; font-weight:400; color:#000;
    /* Figma declara -.07em, pero su Inter es más ancho: con -.06em los cortes
       de línea caen donde el diseño («…fundadora de / Boost Academy»). */
  }
  .col-bio .tit-sec + .txt-bio{margin-top:2.083vw}
  .txt-bio b{font-weight:700}

  .nota-cta{
    width:15.162vw;                                    /* 262 */
    margin:2.083vw 0 0; text-align:center;   /* 36px bajo el texto */
    font-size:.8281vw; line-height:.92444; letter-spacing:-.07em;
    font-weight:400; color:#000;
  }
  .btn-lanzar{
    display:flex; align-items:center; justify-content:center; gap:1.1vw;
    width:21.354vw; height:3.646vw;                    /* 369×63 */
    margin-top:.521vw; border-radius:3.196vw;          /* 9px bajo la nota; radio 55.22 */
    background:linear-gradient(180deg,var(--rojo-1),var(--rojo-2));
    box-shadow:0 .802vw 1.1vw rgba(0,0,0,.27);
    color:#fff; text-decoration:none;
    font-size:1.3828vw; font-weight:700; letter-spacing:-.07em;
  }
  .btn-lanzar img{width:1.273vw; height:auto}
  .btn-lanzar:hover{filter:brightness(1.04); transform:translateY(-1px)}
}



/* ══════════════════════════════════════════════════════════════════════
   MÓVIL — lienzo proporcional del Figma «Página de Captura 1 - Mobile»
   (440×9612). Todo va en múltiplos de --u, que vale 1px del diseño.
   Nada de este bloque toca el escritorio: vive entero bajo 900px.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){
  :root{--u:calc(min(100vw, 640px) / 440)}

  body{overflow-x:hidden}
  .sec{padding:0}
  .wrap,.wrap--sm{max-width:none; padding:0; width:100%}

  /* ---------- HERO ----------
     Lienzo 440×950. La imagen trae el fondo, la barra lima (sin su texto,
     que va vivo), el logo y la foto. Todo lo demás se dibuja en HTML para
     que sea nítido, funcional y quepa el campo de WhatsApp. */
  .top-wrap{height:auto}
  .top-wrap::before{display:none}
  .hero{
    position:relative; overflow:hidden; background:#fff;
    height:calc(950 * var(--u)); padding:0; max-width:none; width:100%;
    background:url("img/hero-movil.webp?v=1788307585") no-repeat top center;
    background-size:100% auto;
    border-radius:0 0 calc(75 * var(--u)) calc(75 * var(--u));
    /* mismo caso: la franja ocupaba las primeras 54u de la imagen */
    margin-top:calc(-72 * var(--u));
  }
  .hero > *{position:absolute; margin:0}
  /* ya vienen dentro de la imagen */
  .hero > .logo, .hero > .hero-foto, .hero > .pill{display:none}
  /* barra superior: solo el texto; el fondo lo pone la propia imagen */
  .hero > .tb-fila{left:calc(90 * var(--u)); top:calc(12 * var(--u)); width:auto;
    display:flex; align-items:baseline; z-index:3; white-space:nowrap}
  .tb-fila .tb-label{margin:0 calc(8 * var(--u)) 0 0; font-size:calc(16.77 * var(--u));
    font-weight:400; line-height:1; letter-spacing:-.07em; color:#000}
  .tb-fila .tb-reloj{margin:0; min-width:calc(100 * var(--u)); text-align:left;
    font-size:calc(23.46 * var(--u)); font-weight:700; line-height:1; letter-spacing:-.07em;
    color:#000; font-variant-numeric:tabular-nums}
  .tb-fila .btn-topbar{display:none}

  /* El titular va sobre la foto: sombra negra pegada a cada letra, sin velos
     ni bandas. La primera parte pasa a blanco para que despegue del pelo. */
  /* 390u en vez de 366: con la promesa nueva «más» se quedaba solo en una
     cuarta línea. Ensanchando 24u entra en tres, y se recentra bajando el
     left a 25u (25 + 390 = 415, con los mismos 25u de aire a cada lado). */
  .hero > .h1{left:calc(25 * var(--u)); top:calc(402 * var(--u)); width:calc(390 * var(--u));
    /* 29u en vez de 30.43: con la promesa larga, a 30.43 el titular se iba a
       6 líneas y se comía el subtítulo. A 29 entra en 5 y el bloque se queda
       donde se pidió, por debajo de la cara. Es un 5% más pequeño. */
    font-size:calc(29 * var(--u)); line-height:.9244; letter-spacing:-.07em;
    font-weight:700; text-align:center; color:#fff; z-index:2;
    text-shadow:0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.55),
                0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.35);}
  .hero > .h1 .reg,
  .hero > .h1 b{color:#fff}
  /* El gris del diseño (#959596) se pensó para fondo claro. Aquí el titular va
     sobre la foto y ese tono se pierde, sobre todo ahora que el tramo gris es
     el más largo de la frase. Un gris muy claro mantiene la jerarquía —se ve
     secundario frente al blanco— pero sí se lee. */
  .hero > .h1 .gris{color:#E4E3E9}
  /* sobre la foto oscura el extremo morado del degradado se apagaba:
     en móvil arranca mucho más claro */
  .hero > .h1 .grad{
    /* Plano en vez de degradado: al repartirse por líneas quedaba desigual
       («clientes» más oscuro que «atraer»). Un morado claro y parejo se lee
       mejor sobre la foto y es lo que se pidió. */
    background-image:none; -webkit-text-fill-color:#CDBCFF; color:#CDBCFF;
  }
  /* sube de 572u a 518u: el titular pasó de 4 líneas a 3 y quedaba un hueco
     de 84u en medio del mensaje. Igual que en escritorio, la holgura que
     sobra se deja antes del formulario. */
  .hero > .hero-sub{left:calc(63 * var(--u)); top:calc(563 * var(--u)); width:calc(314 * var(--u));
    font-size:calc(15.31 * var(--u)); line-height:.9247; letter-spacing:-.07em;
    font-weight:400; text-align:center; color:#fff; z-index:2;
    text-shadow:0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.55),
                0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.35);}

  /* mismo caso que en escritorio: 585u en vez de 627u para recuperar los
     39u de separación del diseño respecto al subtítulo */
  .hero > .form{left:calc(46 * var(--u)); top:calc(613 * var(--u)); width:calc(365 * var(--u));
    max-width:none; z-index:2}
  .hero .form input{width:100%; height:calc(47 * var(--u)); margin:0 0 calc(6 * var(--u));
    padding:0 calc(27 * var(--u)); border:0; background:#E3E3E3;
    border-radius:calc(40.5 * var(--u)); font-size:calc(12.71 * var(--u));
    letter-spacing:-.07em; color:#000}
  .hero .form input::placeholder{color:#000; opacity:1}
  .hero .btn-lime{width:100%; height:calc(46 * var(--u)); margin:calc(6 * var(--u)) 0 0;
    padding:0; gap:calc(8 * var(--u)); border-radius:calc(40.5 * var(--u));
    background:linear-gradient(180deg,var(--rojo-1),var(--rojo-2));
    box-shadow:0 calc(6 * var(--u)) calc(13.7 * var(--u)) rgba(0,0,0,.27);
    font-size:calc(17.51 * var(--u)); font-weight:700; letter-spacing:-.07em; color:#fff}
  .hero .btn-lime .btn-arrow{width:calc(16 * var(--u)); height:auto}
  .hero .form-note{margin:calc(11 * var(--u)) 0 0; font-size:calc(10.49 * var(--u));
    line-height:.9247; letter-spacing:-.07em; text-align:center; color:#000}

  /* badges en fila, abajo del todo */
  .hero > .badges{
    display:flex; flex-direction:row;      /* el estilo base los apila en columna */
    right:auto; left:calc(20 * var(--u));
    top:calc(872 * var(--u)); width:calc(400 * var(--u));
    justify-content:space-between; align-items:center; gap:0; z-index:3}
  .hero .badges .badge{position:static; display:flex; align-items:center; justify-content:center;
    height:calc(30 * var(--u)); padding:0 calc(14 * var(--u));
    border-radius:calc(25 * var(--u)); color:#fff; font-weight:400;
    font-size:calc(14.5 * var(--u)); letter-spacing:-.05em; line-height:1;
    background:linear-gradient(90deg,rgba(65,65,65,.62),rgba(103,61,230,.62))}

  /* ---------- PREGUNTA ---------- */
  .sec--center.pregunta{position:static; height:auto; padding:0; margin:0}
  .pregunta .wrap{width:100%}
  .pregunta .h2{position:static; width:calc(339 * var(--u)); margin:calc(144 * var(--u)) auto 0;
    font-size:calc(45.64 * var(--u)); line-height:.9244; letter-spacing:-.09em;   /* ajuste de
      ancho: con el -.07em declarado, el Inter de Google parte en 5 líneas y el diseño tiene 4 */
    font-weight:700; color:#000; text-align:center}
  .pregunta .globo{display:inline-block; position:relative; width:calc(56 * var(--u));
    height:0; vertical-align:baseline}
  .pregunta .globo img{position:absolute; left:calc(3 * var(--u)); top:calc(-37 * var(--u));
    width:calc(50 * var(--u));   /* -37u = -50% de los 50u de alto - 12u; en 'top' para no ocupar 'transform' */
    height:auto; max-width:none}
  .pregunta .p-sm{position:static; width:calc(307 * var(--u)); margin:calc(22 * var(--u)) auto 0;
    font-size:calc(22.09 * var(--u)); line-height:1.0294; letter-spacing:-.07em;
    font-weight:400; color:#000; text-align:center}

  /* ---------- NO ES COSTOSO ---------- */
  .dos-col--costoso{display:block; margin:calc(156 * var(--u)) 0 0}
  .h2--costoso{width:calc(324 * var(--u)); margin:0 auto; text-align:center;
    font-size:calc(36.74 * var(--u)); line-height:.9244; letter-spacing:-.07em; font-weight:700}
  .p--costoso{width:calc(352 * var(--u)); margin:calc(22 * var(--u)) auto 0; text-align:center;
    font-size:calc(19.23 * var(--u)); line-height:1.3005; letter-spacing:-.07em;
    font-weight:400; color:#000}
  .sec--costoso .chips{width:calc(363 * var(--u)); margin:calc(22 * var(--u)) auto 0;
    display:flex; justify-content:space-between; gap:0; flex-wrap:nowrap}
  .sec--costoso .chip{width:calc(88 * var(--u)); height:calc(26 * var(--u)); padding:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:calc(25.2 * var(--u)); background:#673DE6; color:#fff;
    font-size:calc(16.08 * var(--u)); font-weight:700; letter-spacing:-.07em; line-height:1}
  .h3--costoso{width:calc(347 * var(--u)); margin:calc(22 * var(--u)) auto 0; text-align:center;
    font-size:calc(36 * var(--u)); line-height:.9444; letter-spacing:-.07em; font-weight:700}
  .sec--costoso .bloque-morado{width:calc(363 * var(--u)); height:calc(339 * var(--u));
    aspect-ratio:auto; margin:calc(36 * var(--u)) auto 0;
    border-radius:calc(24.7 * var(--u)); background:#8E6BF9;
    box-shadow:0 calc(20 * var(--u)) calc(40.5 * var(--u)) rgba(0,0,0,.48)}

  /* ---------- ¡PERO ESO SE ACABÓ! ---------- */
  .seacabo .wrap{width:100%}
  .seacabo .mega{width:calc(355 * var(--u)); margin:calc(207 * var(--u)) auto 0;
    font-size:calc(72.04 * var(--u)); line-height:.9245; letter-spacing:-.07em;
    font-weight:700; text-align:center}
  .p-ia{width:calc(439 * var(--u)); max-width:none; margin:calc(183 * var(--u)) auto 0;
    font-size:calc(40.48 * var(--u)); line-height:.9810; letter-spacing:-.07em;
    font-weight:400; color:#000; text-align:center}
  .p-ia .grad-ia{letter-spacing:-.07em; background-size:calc(439 * var(--u)) 100%;
    background-position:0 center}
  .p-ia .estrella{display:inline-block; position:relative; width:calc(60 * var(--u));
    height:0; vertical-align:baseline}
  .p-ia .estrella img{position:absolute; left:calc(4 * var(--u)); top:calc(-35 * var(--u));
    width:calc(42 * var(--u));   /* -35u = -50% de los 42u de alto - 14u */
    height:auto; max-width:none}

  /* ---------- TARJETA MORADA ---------- */
  .sec--beneficios .wrap{width:100%}
  .tarjeta-morada{width:calc(397 * var(--u)); height:calc(2231 * var(--u));
    margin:calc(107 * var(--u)) auto 0; border-radius:calc(70 * var(--u));
    background:linear-gradient(52deg,#673DE6 43.98%,#9774FF 78.09%,#B399FF 93.41%);
    box-shadow:0 calc(20 * var(--u)) calc(55.8 * var(--u)) rgba(0,0,0,.48)}
  .tarjeta-morada .trazo{left:calc(-126 * var(--u)); top:calc(1597 * var(--u));
    width:calc(790 * var(--u)); height:auto; opacity:.18}
  .tm-titulo{left:calc(44 * var(--u)); top:calc(114 * var(--u)); width:calc(309 * var(--u));
    font-size:calc(45.02 * var(--u)); line-height:.9244; letter-spacing:-.07em;
    font-weight:700; color:#fff; text-align:center}
  .tm-sub{left:calc(18 * var(--u)); top:calc(274 * var(--u)); width:calc(361 * var(--u));
    font-size:calc(25.63 * var(--u)); line-height:.9244; letter-spacing:-.07em;
    font-weight:400; color:#fff; text-align:center}
  .tm-titulo--2{left:calc(56 * var(--u)); top:calc(417 * var(--u)); width:calc(286 * var(--u))}
  .tarjetas-blancas{left:calc(63 * var(--u)); top:calc(549 * var(--u)); width:calc(271 * var(--u));
    display:flex; flex-direction:column; gap:calc(24 * var(--u)); padding:0; margin:0}
  .tarjetas-blancas .tb{width:calc(271 * var(--u)); height:calc(280 * var(--u));
    padding:calc(26 * var(--u)) calc(25 * var(--u)); border-radius:calc(33.3 * var(--u));
    background:#fff; box-sizing:border-box}
  .tarjetas-blancas .tb-img{width:calc(215 * var(--u)); height:calc(127 * var(--u));
    border-radius:calc(16.7 * var(--u)); object-fit:cover; background:none; display:block}
  .tarjetas-blancas p{margin:calc(12 * var(--u)) 0 0; font-size:calc(25.33 * var(--u));
    line-height:.9242; letter-spacing:-.07em; font-weight:700; color:#000}
  .tarjetas-blancas .tb--5 p{font-size:calc(23.56 * var(--u))}

  /* ---------- VAS A APRENDER ---------- */
  .sec--aprender{overflow-x:clip}   /* la imagen mide 532 sobre 440, igual que en Figma */
  .sec--aprender .wrap{width:100%; display:flex; flex-direction:column}
  .sec--aprender .dos-col > div:not(.img-r){display:contents}
  .sec--aprender .h2--left{order:1; width:calc(341 * var(--u));
    margin:calc(78 * var(--u)) 0 0 calc(49 * var(--u));
    text-align:center;
    font-size:calc(45.02 * var(--u)); line-height:.9244; letter-spacing:-.07em; font-weight:700}
  .sec--aprender .img-r{order:2; width:calc(532 * var(--u)); max-width:none;
    margin:calc(36 * var(--u)) 0 0 calc(15 * var(--u)); border-radius:0}   /* x=15, no centrada */
  .sec--aprender .lista{order:3; width:calc(351 * var(--u));
    margin:calc(-16 * var(--u)) 0 0 calc(51 * var(--u));
    padding-left:calc(22 * var(--u)); list-style:disc;
    font-size:calc(19 * var(--u)); line-height:1; letter-spacing:-.07em; font-weight:400; color:#000}
  .sec--aprender .lista li{margin:0; padding:0; display:list-item;
    font-size:calc(19 * var(--u)); line-height:1; letter-spacing:-.07em}
  .sec--aprender .lista li::before{content:none}
  .sec--aprender .lista li::marker{color:#000}
  .sec--aprender .lista li + li{margin-top:calc(19 * var(--u))}   /* la línea en blanco del Figma */
  .sec--aprender .dos-col{display:flex; flex-direction:column; gap:0; align-items:flex-start}
  /* en móvil el titular no lleva salto manual: el Figma lo parte solo en 3 líneas */
  .sec--aprender .h2--left .br-desk{display:none}   /* el salto es solo de escritorio */

  /* ---------- NO ES TEORÍA ---------- */
  /* la ventana del navegador mide 658 sobre un lienzo de 440: en Figma también
     se sale del marco y queda recortada. Aquí la recorto igual. */
  .sec--teoria{overflow-x:clip}
  .sec--teoria .wrap{width:100%}
  .h2--teoria{width:calc(367 * var(--u)); max-width:none;
    margin:calc(97 * var(--u)) auto 0 calc(43 * var(--u));
    font-size:calc(45 * var(--u)); line-height:1; letter-spacing:-.08em;   /* 3 líneas, como el diseño */
    font-weight:400; text-align:center}
  .grad-90m{background-size:calc(367 * var(--u)) 100%; background-position:0 center}
  .p-construir{width:calc(226 * var(--u)); margin:calc(14 * var(--u)) auto 0 calc(114 * var(--u));
    font-size:calc(22 * var(--u)); line-height:1.0773; letter-spacing:-.07em;
    font-weight:400; color:#000; text-align:center}
  .navegador{width:calc(658 * var(--u)); margin:calc(36 * var(--u)) 0 0 calc(43 * var(--u));
    border-radius:calc(10.2 * var(--u)); overflow:hidden; background:#fff; line-height:0;
    box-shadow:0 calc(38 * var(--u)) calc(76.9 * var(--u)) rgba(0,0,0,.57)}
  .navegador img{width:100%; height:auto; display:block}
  .nav-barra{height:calc(31 * var(--u)); display:flex; align-items:center;
    gap:calc(4.5 * var(--u)); padding-left:calc(12 * var(--u));
    background:linear-gradient(90deg,rgba(48,48,52,.86),rgba(32,32,36,.92))}
  .nav-punto{width:calc(8 * var(--u)); height:calc(8 * var(--u))}
  .p--teoria{width:calc(348 * var(--u)); margin:calc(36 * var(--u)) auto 0 calc(53 * var(--u));
    font-size:calc(22 * var(--u)); line-height:1; letter-spacing:-.07em;
    font-weight:400; color:#000; text-align:center}
  .chips--teoria{width:calc(356 * var(--u)); margin:calc(24 * var(--u)) auto 0 calc(49 * var(--u));
    display:flex; justify-content:space-between; gap:0}
  .chips--teoria .chip{height:calc(23 * var(--u)); padding:0 calc(14 * var(--u));
    border-radius:calc(22 * var(--u)); background:#673DE6; color:#fff;
    font-size:calc(14.04 * var(--u)); font-weight:700; letter-spacing:-.07em;
    display:flex; align-items:center}

  /* ---------- ES PARA TI SI ---------- */
  .sec--parati .wrap{width:100%}
  .rejilla--parati{display:flex; flex-direction:column; width:100%; margin:0}
  .rejilla--parati > div:not(.bloque-morado){display:contents}   /* si no, el bloque
     morado también se vuelve «contents» y desaparece */
  .sec--parati .tit-sec{order:1; width:calc(341 * var(--u));
    margin:calc(171 * var(--u)) auto 0 calc(50 * var(--u));
    text-align:center; font-size:calc(45 * var(--u)); line-height:1;
    letter-spacing:-.07em; font-weight:700}
  .sec--parati .bloque-morado{order:2; width:calc(373 * var(--u)); height:calc(348 * var(--u));
    aspect-ratio:auto; margin:calc(36 * var(--u)) auto 0;
    border-radius:calc(25.3 * var(--u)); background:#8E6BF9;
    box-shadow:0 calc(20 * var(--u)) calc(41.6 * var(--u)) rgba(0,0,0,.48)}
  .lista-parati{order:3; width:calc(322 * var(--u)); margin:calc(36 * var(--u)) auto 0;
    padding-left:calc(20 * var(--u)); font-size:calc(19 * var(--u)); line-height:1;
    letter-spacing:-.06em; font-weight:400; color:#000; list-style:disc}
  .lista-parati li{margin:0; padding:0; font-size:calc(19 * var(--u));
    line-height:1; letter-spacing:-.06em}
  .lista-parati li + li{margin-top:calc(19 * var(--u))}

  /* ---------- BIO ---------- */
  .sec--bio .wrap{width:100%}
  .rejilla--bio{display:flex; flex-direction:column; width:100%; margin:0}
  .foto-bio{width:calc(367 * var(--u)); height:calc(492 * var(--u)); object-fit:cover;
    margin:calc(171 * var(--u)) auto 0 calc(34 * var(--u)); border-radius:calc(34.4 * var(--u));
    box-shadow:0 calc(20 * var(--u)) calc(39.2 * var(--u)) rgba(0,0,0,.48); order:1}
  .col-bio{order:2; width:calc(367 * var(--u)); margin:0 auto 0 calc(34 * var(--u)); padding:0}
  .sec--bio .tit-sec{width:100%; margin:calc(70 * var(--u)) 0 0; text-align:left;
    font-size:calc(45.02 * var(--u)); line-height:.9244; letter-spacing:-.07em; font-weight:700}
  .grad-melissa{background-size:calc(367 * var(--u)) 100%; background-position:0 center}
  .txt-bio{width:100%; margin:calc(22 * var(--u)) 0 0; font-size:calc(22 * var(--u));
    line-height:1; letter-spacing:-.06em; font-weight:400; color:#000}
  .col-bio .tit-sec + .txt-bio{margin-top:calc(36 * var(--u))}
  .nota-cta{width:calc(262 * var(--u)); margin:calc(45 * var(--u)) 0 0; text-align:center;
    font-size:calc(14.31 * var(--u)); line-height:.9245; letter-spacing:-.07em;
    font-weight:400; color:#000}
  .btn-lanzar{width:calc(369 * var(--u)); height:calc(63 * var(--u));
    margin:calc(9 * var(--u)) 0 0; gap:calc(22 * var(--u));
    border-radius:calc(55.2 * var(--u)); display:flex; align-items:center; justify-content:center;
    background:linear-gradient(180deg,var(--rojo-1),var(--rojo-2));
    box-shadow:0 calc(8 * var(--u)) calc(18.6 * var(--u)) rgba(0,0,0,.27);
    color:#fff; text-decoration:none; font-size:calc(23.89 * var(--u));
    font-weight:700; letter-spacing:-.07em}
  .btn-lanzar img{width:calc(22 * var(--u)); height:auto}

  .pie{margin-top:calc(60 * var(--u)); padding:calc(24 * var(--u)) 0}
}


/* ═══ CONTADOR: días como número grande con «DÍAS» debajo ═══ */
.cd-dias{display:inline-flex; flex-direction:column; align-items:center; line-height:1}
/* en una columna flex, la línea base del bloque es la de su primer hijo: el número */
.cd-dias b{font-weight:700; line-height:1}   /* interlineado normal: así su línea base coincide con la del reloj */
.cd-dias i{font-style:normal; font-weight:700; letter-spacing:.02em; line-height:1; opacity:.85}
.cd-hora{line-height:1}
@media (min-width:901px){
  .cd-dias b{font-size:1.9387vw}      /* mismo cuerpo que el reloj */
  .cd-dias i{font-size:.68vw; margin-top:-.12vw}
  .tb-fila .tb-reloj{min-width:0}     /* el hueco fijo ya no aplica con dos bloques */
}
@media (max-width:900px){
  .tb-fila .tb-reloj{display:flex; align-items:baseline; gap:calc(6 * var(--u)); min-width:0}
  .cd-dias b{font-size:calc(23.46 * var(--u))}
  .cd-dias i{font-size:calc(8 * var(--u)); margin-top:calc(-1.5 * var(--u))}
}


/* ═══ Foto del laptop en la sección "No es costoso" ═══
   El PNG (612×579) trae la sombra incluida: la tarjeta opaca son 499×466 en
   la posición 56,25. Coloco la imagen desplazada para que esa tarjeta caiga
   justo en la caja del diseño (500×467) y la sombra sobresalga por fuera. */
.bloque-foto{background:none !important; box-shadow:none !important; position:relative}
.bloque-foto img{position:absolute; max-width:none; height:auto}
@media (min-width:901px){
  /* misma caja de 500×467 en las dos secciones, así que mismo desplazamiento */
  .sec--costoso .bloque-foto,
  .sec--parati  .bloque-foto{border-radius:0}
  .sec--costoso .bloque-foto img,
  .sec--parati  .bloque-foto img{left:-3.247vw; top:-1.450vw; width:35.486vw}
}
@media (max-width:900px){
  .sec--costoso,.sec--parati{overflow-x:clip}   /* la sombra se sale unos px del lienzo */
  .sec--costoso .bloque-foto,
  .sec--parati  .bloque-foto{border-radius:0; overflow:visible}
  .sec--costoso .bloque-foto img{            /* caja de 363 */
    left:calc(-40.74 * var(--u)); top:calc(-18.19 * var(--u));
    width:calc(445.2 * var(--u));
  }
  .sec--parati .bloque-foto img{             /* caja de 373 */
    left:calc(-41.86 * var(--u)); top:calc(-18.69 * var(--u));
    width:calc(457.5 * var(--u));
  }
}


/* ═══ Teléfono con selector de país ═══
   Van en una sola fila (país + número) para no añadir un renglón entero
   al formulario y respetar el ritmo del diseño.
   El <select> nativo mostraría el texto completo del país y se cortaría, así
   que va invisible encima y lo que se ve es una etiqueta compacta con la
   bandera y la lada. Al desplegarlo sí aparecen los nombres completos. */
.fila-tel{display:flex; gap:2%; align-items:stretch}
.tel-pais-caja{
  position:relative; flex:0 0 34%; min-width:0;
  display:flex; align-items:center; background:var(--gris-input); border-radius:999px;
}
.tel-pais-caja::after{                       /* flecha */
  content:""; position:absolute; right:12%; top:50%; width:.55em; height:.55em;
  border-right:2px solid #000; border-bottom:2px solid #000;
  transform:translateY(-70%) rotate(45deg); pointer-events:none;
}
.tel-pais-vista{
  pointer-events:none; white-space:nowrap; color:#000; line-height:1;

}
.fila-tel .tel-pais{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; border:0; background:none; cursor:pointer;
  font-family:inherit; -webkit-appearance:none; appearance:none;
}
.fila-tel .tel-num{flex:1 1 auto; min-width:0; margin-bottom:0 !important}
@media (min-width:901px){
  .hero .fila-tel{margin-bottom:.463vw}
  .hero .tel-pais-caja{height:3.704vw; padding-left:1.35vw}
  .hero .tel-pais-vista{font-size:1.02vw}
  .hero .fila-tel .tel-num{height:3.704vw; padding:0 1.85vw; font-size:.984vw}
}
@media (max-width:900px){
  .hero .fila-tel{margin-bottom:calc(6 * var(--u))}
  .hero .tel-pais-caja{height:calc(47 * var(--u)); padding-left:calc(18 * var(--u))}
  .hero .tel-pais-vista{font-size:calc(13 * var(--u))}
  .hero .fila-tel .tel-num{
    height:calc(47 * var(--u)); padding:0 calc(20 * var(--u));
    font-size:calc(12.71 * var(--u)); border-radius:calc(40.5 * var(--u));
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA
   Portadas de los tres widgets de Elementor (secciones A, B y C) al
   maquetado fijo de esta landing. Solo animación: ni una medida, ni
   un color, ni un salto de línea cambian.

   Todo el estado inicial cuelga de .an-on, clase que únicamente pone
   el JS. Si el JS no corre —o el sistema pide menos movimiento— nada
   se oculta y la página se ve exactamente igual que antes.
   ═══════════════════════════════════════════════════════════════════ */

@property --an-wipe{ syntax:'<percentage>'; inherits:false; initial-value:0%; }

/* palabra suelta: el JS envuelve cada una y le numera el --an-i */
.an-w{ display:inline-block; will-change:transform,opacity,filter }

@keyframes anWordIn{
  from{opacity:0; transform:translateY(.55em); filter:blur(10px)}
  to  {opacity:1; transform:none;              filter:blur(0)}
}
@keyframes anIconIn{
  0%  {opacity:0; transform:rotate(-150deg) scale(.15)}
  55% {opacity:1; transform:rotate(6deg)    scale(1.18)}
  78% {           transform:rotate(-19deg)  scale(.955)}
  100%{opacity:1; transform:none}
}
@keyframes anIdle{
  0%,100%{ transform:rotate(0deg)   translateY(0) }
  50%    { transform:rotate(3.5deg) translateY(-.05em) }
}
@keyframes anHalo{ 0%{opacity:.9; scale:.55} 100%{opacity:0; scale:2.1} }

/* ── A · «Quiero tener una Web…» ─────────────────────────────────── */
.pregunta.an-on .an-w,
.pregunta.an-on .an-sub,
.pregunta.an-on .globo img{ opacity:0 }

.pregunta.an-on.is-in .an-w{
  animation:anWordIn 760ms cubic-bezier(.16,1,.3,1) calc(var(--an-i) * 46ms) both;
}
.pregunta.an-on.is-in .an-sub{
  animation:anWordIn 620ms cubic-bezier(.16,1,.3,1) 820ms both;
}
.pregunta.an-on .globo img{ will-change:transform,opacity }
.pregunta.an-on.is-in .globo img{
  animation:anIconIn 900ms cubic-bezier(.16,1,.3,1) 340ms both,
            anIdle   5s   ease-in-out               1240ms infinite;
}
/* el aro que sale disparado detrás del globo */
.pregunta.an-on .globo::after{
  content:''; position:absolute; border-radius:50%; opacity:0;
  border:.09vw solid rgba(0,0,0,.45); pointer-events:none;
}
.pregunta.an-on.is-in .globo::after{
  animation:anHalo 900ms cubic-bezier(.16,1,.3,1) 600ms both;
}

/* ── B · «¡Pero eso se acabó!» ───────────────────────────────────── */
@keyframes anSlam{
  0%  {opacity:0; transform:translateY(-.26em) scale(1.32); filter:blur(14px)}
  60% {opacity:1}
  80% {           transform:translateY(.018em) scale(.986); filter:blur(0)}
  100%{opacity:1; transform:none;                           filter:blur(0)}
}
@keyframes anWipe{
  0%  {--an-wipe:0%;   opacity:1; transform:translateY(.10em)}
  100%{--an-wipe:116%; opacity:1; transform:translateY(0)}
}
@keyframes anRecoil{
  0%  {transform:none}
  28% {transform:translateY(.012em) scale(1.014)}
  100%{transform:none}
}

.mega.an-on .an-w,
.mega.an-on .lima{ opacity:0 }

.mega.an-on.is-in .an-w{
  animation:anSlam 620ms cubic-bezier(.2,.9,.2,1) calc(var(--an-i) * 90ms) both;
}
/* «se acabó!» se revela con un barrido de rotulador, de izquierda a derecha */
.mega.an-on .lima{
  display:inline-block; --an-wipe:0%;
  -webkit-mask-image:linear-gradient(90deg,#000 var(--an-wipe),transparent calc(var(--an-wipe) + 14%));
          mask-image:linear-gradient(90deg,#000 var(--an-wipe),transparent calc(var(--an-wipe) + 14%));
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;   mask-size:100% 100%;
  will-change:--an-wipe,transform,opacity;
}
.mega.an-on.is-in .lima{
  animation:anWipe 780ms cubic-bezier(.16,1,.3,1) 640ms both;
}
.mega.an-on.is-in{
  animation:anRecoil 320ms cubic-bezier(.2,.9,.2,1) 1300ms both;
}

/* ── C · «Durante esta Masterclass…» ─────────────────────────────── */
@keyframes anLineIn{
  from{transform:translateY(calc(100% + var(--an-bleed)))}
  to  {transform:translateY(0)}
}
@keyframes anSparkIn{
  0%  {opacity:0; transform:rotate(-70deg) scale(0)}
  55% {opacity:1; transform:rotate(14deg)  scale(1.24)}
  78% {           transform:rotate(-5deg)  scale(.96)}
  100%{opacity:1; transform:none}
}
@keyframes anTwinkle{ 0%,100%{transform:rotate(0deg)} 50%{transform:rotate(-8deg)} }
@keyframes anIgnite{
  0%  {opacity:0; transform:scale(.94); filter:saturate(2.4) brightness(1.55)}
  100%{opacity:1; transform:none;       filter:none}
}

/* cada línea sube desde debajo de su propio recorte.
   El grid es imprescindible: entre hermanos en flujo normal los
   márgenes negativos de .an-ln colapsarían y descuadrarían el
   interlineado. El relleno vertical da aire para que el recorte no
   se coma la estrella, que asoma por encima de la caja de línea. */
.p-ia.an-on{ display:grid; --an-bleed:.62em }
.p-ia.an-on .an-ln{
  display:block; overflow:hidden;
  padding:var(--an-bleed) 0; margin:calc(var(--an-bleed) * -1) 0;
}
.p-ia.an-on .an-in{
  display:block; will-change:transform;
  transform:translateY(calc(100% + var(--an-bleed)));
}
.p-ia.an-on.is-in .an-in{
  animation:anLineIn 880ms cubic-bezier(.16,1,.3,1) calc(var(--an-i) * 130ms) both;
}

.p-ia.an-on .estrella img,
.p-ia.an-on .grad-ia{ opacity:0 }

.p-ia.an-on .estrella img{ will-change:transform,opacity }
.p-ia.an-on.is-in .estrella img{
  animation:anSparkIn 700ms cubic-bezier(.2,.9,.2,1) 1020ms both,
            anTwinkle 6s   ease-in-out               1720ms infinite;
}
.p-ia.an-on .estrella::after{
  content:''; position:absolute; border-radius:50%; opacity:0;
  border:.09vw solid rgba(174,147,255,.75); pointer-events:none;
}
.p-ia.an-on.is-in .estrella::after{
  animation:anHalo 620ms cubic-bezier(.16,1,.3,1) 1180ms both;
}
/* el degradado «se enciende»: entra sobresaturado y baja a su color */
.p-ia.an-on .grad-ia{ display:inline-block; will-change:transform,opacity,filter }
.p-ia.an-on.is-in .grad-ia{
  animation:anIgnite 620ms cubic-bezier(.16,1,.3,1) 1240ms both;
}

/* ── geometría de los dos aros, calcada de la de cada imagen ─────── */
@media (min-width:901px){
  .pregunta.an-on .globo::after{ left:-.463vw; top:-3.0151vw; width:3.704vw; height:3.704vw }
  .p-ia.an-on  .estrella::after{ left:.723vw;  top:-2.951vw;  width:3.588vw; height:3.588vw }
}
@media (max-width:900px){
  .pregunta.an-on .globo::after{
    left:calc(3 * var(--u)); top:calc(-37 * var(--u));
    width:calc(50 * var(--u)); height:calc(50 * var(--u)); border-width:calc(2 * var(--u));
  }
  .p-ia.an-on .estrella::after{
    left:calc(4 * var(--u)); top:calc(-35 * var(--u));
    width:calc(42 * var(--u)); height:calc(42 * var(--u)); border-width:calc(2 * var(--u));
  }
}

/* red de seguridad: si el sistema pide menos movimiento, la regla
   global de más arriba mata las animaciones, así que aquí hay que
   devolver la visibilidad a mano (el JS ya no debería llegar). */
@media (prefers-reduced-motion:reduce){
  .an-on .an-w, .an-on .an-sub, .an-on .an-in,
  .an-on .globo img, .an-on .estrella img,
  .an-on .lima, .an-on .grad-ia{ opacity:1 !important; transform:none !important }
  .an-on .lima{ -webkit-mask-image:none; mask-image:none }
}



/* ═══ ETIQUETA «MASTERCLASS» ═══
   Mismo tratamiento que las píldoras del lado derecho: degradado gris→morado
   translúcido, texto blanco y forma de cápsula. Va como hija directa de .hero,
   así que hereda el position:absolute del lienzo y se coloca por coordenadas
   igual que el resto del diseño. */
.pill-mc{
  display:flex; align-items:center; justify-content:center;
  width:fit-content; border-radius:999px;
  background:linear-gradient(90deg,rgba(65,65,65,.62),rgba(103,61,230,.62));
  color:#fff; font-weight:700; line-height:1; white-space:nowrap;
  letter-spacing:.08em;
}
@media (min-width:901px){
  /* encima del logo: entre el logo (y=186) y el titular (y=287) no cabe nada,
     van pegados en el diseño */
  .hero > .pill-mc{
    /* En móvil va sobre la foto y el 62% de opacidad del diseño funciona. Aquí
       el fondo es lila claro y ese mismo 62% la dejaba lavada frente a las
       píldoras de la derecha, así que va con el color macizo del Figma. */
    background:linear-gradient(90deg,#414141,#673DE6);
    left:19.91%; top:12.097%;                /* alineada con el logo y el titular */
    height:2.315vw; padding:0 1.446vw;       /* 40 de alto, 25 a los lados */
    font-size:1.042vw;                       /* 18px */
    z-index:2;
  }
}
@media (max-width:900px){
  /* La cara y el cuello llegan hasta 348u y el titular arranca en 380u, así
     que solo hay una franja limpia de suéter entre medias: 352..380. La
     etiqueta se ajusta a ella para no montarse sobre su cara. */
  .hero > .pill-mc{
    left:50%; transform:translateX(-50%);
    top:calc(373 * var(--u));
    height:calc(26 * var(--u)); padding:0 calc(15 * var(--u));
    border-radius:calc(22 * var(--u));
    font-size:calc(12.5 * var(--u));
    z-index:3;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   CUENTA ATRÁS
   Franja a todo lo ancho, pero delgada. Va delante de .top-wrap, en
   flujo normal y con z-index por encima: el hero sube 45px (escritorio)
   o 72u (móvil) por su margen negativo, así que se mete por debajo y la
   franja tapa justo el trozo vacío del lienzo. La página solo crece la
   altura de la franja y el hero se ve igual por debajo de ella.
   ═══════════════════════════════════════════════════════════════════ */
.cuenta{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:center;
  width:100%; margin:0;
  color:#000; line-height:1; white-space:nowrap;
}
.cuenta .cuenta-txt{margin:0; font-weight:400}
.cuenta .cuenta-txt b{font-weight:700}
.cuenta .cuenta-reloj{
  margin:0; display:flex; align-items:baseline;
  font-weight:700; font-variant-numeric:tabular-nums;   /* que no baile cada segundo */
}

@media (min-width:901px){
  .cuenta{
    height:clamp(42px, 2.66vw, 58px); gap:.7vw;
    /* el degradado muere en alpha 0, igual que en el diseño original: la
       franja se desvanece hacia la derecha en vez de cortarse en seco */
    background:linear-gradient(90deg,#C6FB4B 0%,#C8FD4C 52%,rgba(201,255,76,0) 100%);
  }
  .cuenta .cuenta-txt  { font-size:clamp(14px, 1.02vw, 21px) }
  .cuenta .cuenta-reloj{ font-size:clamp(19px, 1.42vw, 29px); gap:.4vw }
  .cuenta .cd-dias b   { font-size:clamp(19px, 1.42vw, 29px) }
  .cuenta .cd-dias i   { font-size:clamp(7px, .5vw, 10px); margin-top:-.06vw }
}
@media (max-width:900px){
  /* a 440 de ancho un degradado que se desvanece dejaría media franja
     lavada, así que aquí va llena */
  .cuenta{
    height:calc(40 * var(--u)); gap:calc(8 * var(--u));
    background:linear-gradient(90deg,#C6FB4B,#C9FF4C 60%,#CFFA42);
  }
  .cuenta .cuenta-txt  { font-size:calc(13.5 * var(--u)) }
  .cuenta .cuenta-reloj{ font-size:calc(19 * var(--u)); gap:calc(5 * var(--u)) }
  .cuenta .cd-dias b   { font-size:calc(19 * var(--u)) }
  .cuenta .cd-dias i   { font-size:calc(6.5 * var(--u)); margin-top:calc(-1 * var(--u)) }
}


/* ═══ BOTÓN FLOTANTE ═══
   Aparece cuando el formulario del hero se pierde de vista y acompaña a la
   persona el resto de la página. Al pulsarlo sube al formulario.
   No se muestra nunca mientras el formulario está a la vista: taparía justo
   lo que queremos que rellenen. */
.cta-flotante{
  position:fixed; left:50%; bottom:0; z-index:60;
  transform:translate(-50%, 120%);
  display:flex; align-items:center; justify-content:center;
  width:min(92vw, 520px); margin-bottom:16px;
  padding:16px 28px; border-radius:999px;
  background:linear-gradient(180deg,var(--rojo-1),var(--rojo-2));
  color:#fff; text-decoration:none; text-align:center;
  font-weight:800; font-size:17px; letter-spacing:.02em;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .35s;
  opacity:0; pointer-events:none;
}
.cta-flotante.visible{ transform:translate(-50%, 0); opacity:1; pointer-events:auto }
.cta-flotante:active{ filter:brightness(.94) }

@media (max-width:900px){
  .cta-flotante{
    width:calc(365 * var(--u)); padding:calc(15 * var(--u)) 0;
    margin-bottom:calc(14 * var(--u)); border-radius:calc(40.5 * var(--u));
    font-size:calc(16 * var(--u));
  }
}
@media (prefers-reduced-motion:reduce){
  .cta-flotante{ transition:none }
}

/* La flecha es un PNG negro, pensado para el botón lima. Sobre el rojo hay que
   pasarla a blanco: brightness(0) la vuelve negra sólida e invert(1) la pone
   blanca, conservando la transparencia del contorno. */
.btn-lime .btn-arrow,
.btn-lanzar img{ filter:brightness(0) invert(1) }

/* La foto de la bio ahora es un recorte con fondo transparente. Dentro del
   marco redondeado se vería flotando sobre blanco y la sombra quedaría suelta,
   así que el propio marco lleva el fondo. */
.foto-bio{
  background:linear-gradient(160deg,#EFE9FF 0%,#F7F4FF 48%,#E4D9FF 100%);
  object-position:center 18%;   /* al recortar, prioriza cabeza y torso */
}