/* ======================================================
   BLIXTOR — /empieza  ·  v3 "Cartel"
   Página de presentación de marca personal (tráfico de TikTok).
   Depende SOLO de css/variables.css (tokens + reset + .btn).
   No usa layout.css ni animations.css.

   La idea: contraste tipográfico extremo. Un chip de 11px contra un muro
   de 3 líneas en Archivo 800. Debajo del pliegue la página deja de ser una
   columna de 640px repetida siete veces y alterna cuatro medidas, para que
   el ritmo venga de la anchura y de la escala, no de bandas de color.
   El magenta se gasta en UN solo objeto por pantalla: el botón de WhatsApp.
   ====================================================== */

/* ================  Fuentes  ================
   Tres archivos. Se declaran aquí en vez de cargar css/fonts.css porque ese
   archivo tiene nueve @font-face con nueve URLs distintas y esta página
   tiraba de seis (213 KB).

   Los .woff2 nombrados por peso (inter-400/500/600/700) son EL MISMO archivo
   duplicado: son fuentes variables. Verificado midiendo anchos por peso en
   Chrome — Inter tiene eje wght 100-900 y Space Grotesk 300-700. Por eso se
   declara un RANGO en vez de un peso suelto: el navegador baja un solo
   archivo por familia e interpola toda la escala. Dos peticiones, todos los
   pesos, sin negrita sintética.  font-src 'self' se respeta. */
@font-face{
  font-family:'Inter';
  font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../assets/fonts/inter-400.woff2) format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../assets/fonts/space-grotesk-700.woff2) format('woff2');
}
/* Archivo 800 es ESTÁTICA (no tiene eje wght) y cuesta 14 KB. Solo toca tres
   elementos, todos >=28px: el h1 y las dos declaraciones. A tamaño de UI se
   empasta, así que nunca se usa en botones, chip, h3 ni rótulos.
   Cobertura del set español (á é í ó ú ñ ¿ ¡ ü) verificada en el navegador. */
@font-face{
  font-family:'Archivo';
  font-style:normal;font-weight:800;font-display:swap;
  src:url(../assets/fonts/archivo-800.woff2) format('woff2');
}

/* ================  Tokens locales  ================
   Reutilizan los hex de variables.css; no los renombran ni los pisan.
   Ningún token global se redefine: variables.css gobierna las otras 4 páginas. */
.empieza{
  --foco-anillo:var(--text);      /* #241016 · 16.9:1 sobre --bg */
  --foco-halo:#FFFFFF;            /*         · 6.1:1 sobre --magenta */
  --tap-min:48px;

  /* --- Color --- */
  --tinta-2:#5C4147;              /* texto corrido. 8.50:1 crema / 7.20:1 rosa.
                                     El escalón que faltaba entre 16.9:1 y 6.5:1 */
  --linea-ui:rgba(74,27,47,.55);  /* #9A7E87 · 3.43:1 · SOLO límites de control (WCAG 1.4.11) */
  --linea-fina:rgba(74,27,47,.30);/* #C6B4B7 · 1.84:1 · filetes decorativos */

  /* --- Anchuras (escalera, no una sola columna repetida) --- */
  --w-tight:34rem;                /* 544 · bloques de una idea */
  --w-read:41rem;                 /* 656 · párrafos y listas */
  --w-wide:62rem;                 /* 992 · método en 3 columnas */
  --w-cartel:60rem;               /* 960 · hero en escritorio */
  --wrap:var(--w-read);

  /* --- Espaciado: FIJO, no fluido ---
     Antes había 16 valores estáticos y 11 pendientes de clamp distintas, y a
     390px TODOS los clamp caían a su mínimo: el sistema fluido no hacía nada
     en el único dispositivo que importa. Seis pasos, razón ~1.55. */
  --sp-1:.5rem;                   /*  8 */
  --sp-2:.75rem;                  /* 12 */
  --sp-3:1.25rem;                 /* 20 */
  --sp-4:2rem;                    /* 32 */
  --sp-5:3rem;                    /* 48 */
  --sp-6:4.5rem;                  /* 72 */
  --sp-7:7rem;                    /* 112 */
  --sec-y:var(--sp-6);

  /* --- Escala tipográfica: 8 pasos con saltos audibles ---
     Antes: 14 tamaños, 11 de ellos apiñados entre 15.2 y 20.5px. */
  --t-chip:.6875rem;                        /* 11 */
  --t-micro:.8125rem;                       /* 13 */
  --t-rotulo:.8125rem;                      /* 13, versalitas */
  --t-body:1rem;                            /* 16 */
  --t-lead:clamp(1.125rem,2.4vw,1.25rem);   /* 18 -> 20 */
  --t-h3:1.125rem;                          /* 18 · mismo paso que lead, los
                                               separan familia y peso */
  --t-entrada:clamp(1.375rem,4vw,1.5rem);   /* 22 -> 24 · estaba a 19.2, a
                                               1.2px del h3: inaudible */
  --t-cartel:clamp(1.75rem,6.6vw,2.75rem);  /* 28 -> 44 · declaraciones */
  --t-h1:clamp(2.4rem,11.8vw,5.5rem);       /* 38 -> 88 · el muro */

  /* --- Tracking por tamaño (no uno solo para todo el rango) --- */
  --ls-h1:-.045em;
  --ls-cartel:-.03em;
  --ls-entrada:-.012em;
  --ls-ui:0;
  --ls-caps:.16em;
  --ls-chip:.2em;

  /* --- Elevación: una rampa, un tinte --- */
  --e-btn:0 6px 18px -8px rgba(74,27,47,.45);
  --e-btn-hi:0 12px 30px -10px rgba(74,27,47,.55);

  /* --- Movimiento --- */
  --t-press:80ms;
  --t-ui:200ms;
  --t-entra:300ms;
  --ease-press:cubic-bezier(.2,0,.4,1);

  --font-cartel:'Archivo',system-ui,sans-serif;
}

/* ================  Base de página  ================ */
.empieza{background:var(--bg);}

/* variables.css:50-57 pinta dos glows rosas FIJOS sobre toda la página. Aquí
   lavan el crema y hacían que cada ratio de contraste documentado cambiara
   con el scroll. El cartel necesita un fondo plano de verdad. Solo afecta a
   esta página: es body.empieza, no body. */
body.empieza::before{background:none;}

/* antialiased adelgaza Inter 400 en macOS/iOS. Se queda solo donde ayuda:
   en los titulares grandes de peso 800. */
.empieza .hero h1,
.empieza .porque-p.destacado,
.empieza .cierre-h{-webkit-font-smoothing:antialiased;}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

.sec{padding-block:var(--sec-y);}

/* Los h2 de sección son RÓTULOS, no titulares: las afirmaciones de la página
   son grandes (el h1 y las dos declaraciones) y las etiquetas son pequeñas.
   Antes "Preguntas que me hacen siempre" era mayor que "Tomo tres negocios
   al mes", que es la línea que cierra la venta. */
.sec h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--t-rotulo);
  line-height:1.2;
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--muted);              /* 6.51:1 */
  margin-bottom:var(--sp-3);
}

/* Texto corrido: un color, un interlineado, una medida. Antes eran seis
   estilos de párrafo con cinco interlineados entre 1.45 y 1.6. */
.empieza :is(.hero-sub,.problema-p,.paso-cuerpo p,.porque-p,.riesgo-p,.faq-a p){
  color:var(--tinta-2);
  line-height:1.55;
  text-wrap:pretty;
}
.empieza :is(.problema-p,.paso-cuerpo p,.porque-p,.riesgo-p,.faq-a p){
  font-size:var(--t-body);
  max-width:65ch;
}

/* Nivel DECLARACIÓN — exactamente dos usos, más el h1. Son los dos únicos
   momentos fuera del hero que merecen tamaño de titular.
   text-transform y letter-spacing se anulan EXPLÍCITAMENTE: .cierre-h y
   .riesgo-h son h2, así que heredaban las versalitas y el tracking de rótulo
   de .sec h2 y salían como "TOMO TRES NEGOCIOS AL MES." */
.empieza :is(.porque-p.destacado,.sec .cierre-h){
  font-family:var(--font-cartel);
  font-weight:800;
  font-size:var(--t-cartel);
  line-height:1.04;
  letter-spacing:var(--ls-cartel);
  text-transform:none;
  color:var(--text);
  text-wrap:balance;
  max-width:none;
}

/* Nivel ENTRADA — dos usos: la apertura del argumento y la promesa de riesgo.
   .sec .riesgo-h vale (0,2,0) y gana a .sec h2 (0,1,1) sin !important. */
.empieza :is(.problema-p:first-of-type,.sec .riesgo-h){
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--t-entrada);
  line-height:1.28;
  letter-spacing:var(--ls-entrada);
  text-transform:none;             /* .riesgo-h es un h2: heredaba versalitas */
  color:var(--text);
  text-wrap:balance;
  max-width:24ch;
}

/* Saltar al CTA: solo visible con teclado */
.skip-link{
  position:absolute;
  left:.75rem;top:-100px;
  z-index:60;
  display:inline-flex;
  align-items:center;
  min-height:var(--tap-min);
  padding:.7rem 1.1rem;
  border-radius:var(--r-chip);
  background:var(--text);
  color:var(--bg);
  font-family:var(--font-body);
  font-weight:600;
  font-size:.9rem;
  transition:top 160ms var(--ease-out);
}
.skip-link:focus-visible{top:.75rem;}

/* ================  1. HERO  ================ */
.hero{
  position:relative;
  isolation:isolate;
  overflow:clip;                   /* las piezas sangran por los cuatro lados */
  padding-block:var(--sp-5) var(--sp-5);
  text-align:center;

  /* Luz del fondo: el crema no es plano, se abre en blanco por arriba y se
     calienta hacia el marco. El centro de la elipse está al 24% de alto, o
     sea justo detrás del titular, que es lo que tiene que destacar. */
  background:radial-gradient(115% 80% at 50% 24%,
    #FFFDFB 0%,
    #FCF6F1 42%,
    #F8EDE6 74%,
    #F5E7DE 100%);
}

/* ---- Fondo geométrico de marca ----
   Sustituye a los dos círculos de borde que había aquí (eran dos arcos sueltos
   arriba a la izquierda y dejaban los otros tres cuartos del hero vacíos).

   Reglas del sistema:
   · Todo en %, no en px. El alto del hero pasa de ~700px en un 390 a ~620 en
     escritorio con el retrato al lado; en px las piezas se apelmazan arriba.
   · Ancho en min(vw,px) para que ninguna pieza se coma la pantalla en móvil
     ni se infle en un monitor de 2560.
   · Contraste bajísimo a propósito: la pieza más fuerte (#F1D9CD) queda a
     1.06:1 del crema. Es textura, no decoración con voz. Ningún ratio de
     contraste de texto documentado en este archivo cambia por esto: el texto
     va sobre estas piezas y el peor caso, #241016 sobre #F1D9CD, da 14.2:1. */
.hero-fondo{
  --f-linea:#F0DACE;               /* borde de cuadros y círculos */
  --f-relleno:#F1D9CD;             /* disco lleno */
  --f-mancha:#EFD3C5;              /* mancha desenfocada, más saturada porque
                                      el blur la lava */
  --f-suave:#F5E7DF;               /* cápsula */

  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

/* Sin fundido en el borde inferior a propósito. El primer intento llevaba uno
   hacia var(--bg) para tapar la costura, pero la sección de abajo no es crema,
   es --surface-2 (#F2E1DC): el fundido metía una franja MÁS clara justo antes
   de una banda más rosa, y se veía peor que la costura. El degradado del hero
   acaba en #F5E7DE, a tres puntos de #F2E1DC, y esa sección ya trae su propio
   border-top. Además así las piezas de abajo quedan cortadas por el canto,
   que es exactamente el efecto del fondo original. */

.pieza{
  position:absolute;
  display:block;
  aspect-ratio:1;
  border-radius:32%;               /* cuadro redondeado tipo squircle */
}

/* Piezas de borde */
.pz-cuadro-1,.pz-cuadro-2,.pz-cuadro-3,.pz-cuadro-4,
.pz-circulo-1,.pz-circulo-2{border:2px solid var(--f-linea);}
.pz-circulo-1,.pz-circulo-2{border-radius:50%;}

.pz-cuadro-1{top:-5%;  left:-17%; width:min(56vw,240px); transform:rotate(-20deg);}
.pz-circulo-1{top:15%; left:-11%; width:min(34vw,150px);}
.pz-cuadro-2{top:33%;  left:-5%;  width:min(46vw,200px); transform:rotate(-7deg);}
.pz-cuadro-3{top:70%;  left:-2%;  width:min(52vw,222px); transform:rotate(-13deg);}
.pz-circulo-2{top:80%; left:36%;  width:min(38vw,164px);}
.pz-cuadro-4{top:78%;  left:64%;  width:min(40vw,172px); transform:rotate(5deg);}

/* Disco lleno: la pieza con más presencia de la composición, y la única que
   se lee de verdad. Va a la derecha, donde en escritorio está el retrato.
   En móvil sale medio fuera del canto: entero ocuparía casi la mitad del
   ancho del hero y dejaba de ser fondo para ser una mancha con protagonismo. */
.pz-disco{
  top:30%; right:-16%;
  width:min(42vw,190px);
  border-radius:50%;
  background:var(--f-relleno);
}

/* Mancha: un disco con blur. Es lo que da profundidad al centro y evita que
   el fondo parezca un patrón de wallpaper. */
.pz-mancha{
  top:55%; left:25%;
  width:min(46vw,196px);
  border-radius:50%;
  background:var(--f-mancha);
  filter:blur(38px);
}

.pz-capsula{
  bottom:1%; right:-9%;
  width:min(22vw,96px);
  aspect-ratio:1 / 2.4;
  border-radius:var(--r-pill);
  background:var(--f-suave);
  transform:rotate(22deg);
}

/* Chip: pieza de precisión. Relleno opaco para que el borde mantenga sus
   3.43:1, y el descuadre óptico del letter-spacing corregido (CSS añade el
   espaciado DESPUÉS del último glifo, así que el texto queda 2px a la izda). */
.hero .eyebrow{
  display:inline-flex;
  align-items:center;
  margin:0 0 var(--sp-4);
  padding:.5rem 1.15rem;
  padding-right:calc(1.15rem - var(--ls-chip));
  border:1px solid var(--linea-ui);
  border-radius:var(--r-pill);
  background:var(--bg);
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--t-chip);
  letter-spacing:var(--ls-chip);
  text-transform:uppercase;
  color:var(--text);               /* 16.9:1 */
  line-height:1;
}

/* EL MURO. max-width en em, así el corte a 3 líneas es invariante al tamaño.
   Medido en el navegador sobre archivo-800: el titular de 34 caracteres cae
   en 3 líneas para cualquier max-width entre 6.8em y 8.6em; 7.6em es el
   centro de esa ventana. Sin text-wrap:balance — es lo que producía la
   pirámide rasgada de 5 líneas. */
.hero h1{
  font-family:var(--font-cartel);
  font-weight:800;
  font-size:var(--t-h1);
  line-height:.88;
  letter-spacing:var(--ls-h1);
  max-width:7.6em;
  margin-inline:auto;
  color:var(--text);
}

.hero-sub{
  margin:var(--sp-3) auto 0;
  max-width:38ch;
  font-size:var(--t-lead);
  line-height:1.45;
}

/* ---- Marco de video (placeholder) ----
   La forma la fija el CLIENTE, no el material: una caja CUADRADA.

   El marco NO es un reproductor. Es un cartel que anuncia el video y lo
   abre a pantalla completa. Por eso el cuadrado ya no tiene que negociar
   con el formato del MP4: da igual que el video sea vertical de TikTok u
   horizontal, porque no se ve aquí dentro, se ve ocupando la pantalla.
   (empieza.js ya no reforma el marco con los metadatos del video.) */
.video-frame{
  --video-w:1;
  --video-h:1;

  /* Tope de ALTO expresado como ancho, para no romper el aspecto. Manda el
     alto: así el marco nunca empuja el CTA fuera del pliegue. Medido en
     390x844: con 290px el botón acababa en y=859, fuera de pantalla.
     Al pasar de vertical a cuadrado el marco GANA ancho y no gana un solo
     píxel de alto, así que el presupuesto del pliegue no cambia. */
  --video-alto:min(30vh,250px);
  --video-alto:min(30svh,250px);

  position:relative;
  isolation:isolate;
  aspect-ratio:var(--video-w) / var(--video-h);
  width:min(100%,calc(var(--video-alto) * var(--video-w) / var(--video-h)));
  height:auto;
  margin:var(--sp-4) auto 0;
  border:1px solid var(--linea-fina);
  border-radius:var(--r-chip);
  overflow:hidden;

  /* La superficie del placeholder. Antes aquí iba una foto; ahora la caja se
     pinta sola, así que el hero no pide ni un byte de imagen. Es la misma
     familia crema/rosa del fondo, un paso más saturada para que se despegue
     del degradado del hero sin convertirse en un bloque de color. */
  background:linear-gradient(158deg,#F9EFE9 0%,#F1DCD1 100%);
}

.video-el{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:1;

  /* cover, no contain: si el navegador rechaza la pantalla completa el video
     acaba reproduciéndose aquí dentro, y en una caja cuadrada contain dejaba
     dos franjas negras enormes a los lados de un video vertical. */
  object-fit:cover;

  /* SIN fondo propio. Un <video> vacío con background pintado es un bloque
     de color opaco que tapa todo lo que hay debajo — y cuando el MP4 no
     existe, lo que tapaba era justamente el aviso que explica por qué no
     hay video. El fondo solo aparece cuando hay algo que enmarcar. */
  background:none;

  /* Y oculto hasta que alguien lo pide. Con preload="metadata" el navegador
     pinta el PRIMER FOTOGRAMA del MP4 aquí dentro, o sea que el marco volvía
     a tener una imagen —la que el video traiga por casualidad en el segundo
     cero— y el rótulo blanco sobre negro sobre lo que salga es contraste
     ingobernable. El cartel se dibuja limpio y el video solo se ve cuando
     se abre.
     opacity, no display:none ni visibility: un elemento sin caja de render
     no siempre acepta requestFullscreen. Aquí sigue existiendo, solo que no
     se ve — y .reproduciendo lo devuelve ANTES de pedir pantalla completa. */
  opacity:0;
  pointer-events:none;
}

/* Reproduciendo (solo en el respaldo sin pantalla completa): manda el video
   con sus controles nativos y el cartel se retira. */
.video-frame.reproduciendo .video-play{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.video-play{transition:opacity 220ms var(--ease-out),visibility 0s linear 220ms;}
.video-frame.reproduciendo .video-el{
  z-index:3;
  opacity:1;
  pointer-events:auto;
  background:#000;
}

/* ---- El cartel ----
   El botón cubre la caja ENTERA: la persona toca donde quiera y el video se
   abre. Un disco de 56px en el centro de una caja de 456 obligaba a apuntar.

   El disco es TINTA, no magenta, y esa es una decisión de sistema, no de
   gusto: la página gasta el magenta en un solo objeto por pantalla y ese
   objeto es "Quiero más clientes", que está 32px por debajo de aquí. Un
   disco magenta de 72px justo encima le robaba la mirada al único botón que
   gana dinero. */
.video-play{
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;
  height:100%;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:var(--sp-2);
  padding:var(--sp-3);
  border:none;
  background:none;
  cursor:pointer;
  text-align:center;
}
.video-play[hidden]{display:none;}

.video-play-disco{
  width:72px;height:72px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--text);          /* 16.9:1 contra la superficie del cartel */
  color:#FFFFFF;
  box-shadow:var(--e-btn);
  transition:transform var(--t-press) var(--ease-press);
}
/* El triángulo tiene el peso óptico a la izquierda; sin este empujón se ve
   descentrado dentro del círculo aunque la caja esté centrada. */
.video-play-ico{margin-left:4px;width:26px;height:26px;}

.video-play-rotulo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--t-rotulo);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--tinta-2);            /* 6.78:1 sobre el extremo oscuro del
                                      degradado (#F0DACE). --muted daba 4.91:1,
                                      que pasa por los pelos y a 13px no. */
}

.video-play:active .video-play-disco{transform:scale(.94);}

/* ---- Sin MP4 ----
   Antes, si el video no existía, quedaba el retrato y no pasaba nada. Ahora
   detrás del cartel no hay nada, así que el aviso deja de ser una barra al
   pie y pasa a ser el contenido de la caja. Y aparece SOLO. Ya no espera a
   que alguien toque: un cartel que dice "ver la presentación" y no hace nada
   al tocarlo es peor que decir la verdad desde el principio. */
.video-frame.sin-video .video-play{display:none;}

.video-aviso{
  position:absolute;
  z-index:4;
  inset:0;
  margin:0;
  display:grid;
  align-content:center;
  padding:var(--sp-3);
  color:var(--tinta-2);
  font-size:var(--t-micro);
  line-height:1.5;
  text-align:center;
  text-wrap:pretty;
}
.video-aviso[hidden]{display:none;}

/* ================  CTAs  ================ */
.cta-block{margin-top:var(--sp-4);}

.empieza .btn{
  min-height:var(--tap-min);
  white-space:normal;
  text-align:center;
  justify-content:center;
  line-height:1.25;
  letter-spacing:var(--ls-ui);
  transition:transform var(--t-press) var(--ease-press),
             box-shadow var(--t-ui) var(--ease-out),
             background var(--t-ui) var(--ease-out);
}
.empieza .btn-lg{
  min-height:56px;
  padding-inline:clamp(1.4rem,6vw,2.2rem);
  font-size:var(--t-body);
}

/* La elevación vive en el COMPONENTE, no en el contenedor: antes
   .cta-block .btn-primary{box-shadow} empataba en especificidad con el
   :hover de variables.css y ganaba por orden, así que el hover del CTA
   estaba muerto. */
.empieza .btn-primary{box-shadow:var(--e-btn);}
.cta-block .btn-primary{width:min(100%,22rem);}

.cta-micro{
  margin-top:.625rem;
  font-size:var(--t-micro);
  line-height:1.4;
  color:var(--muted);
}

/* Secundario: contorno visible (3.43:1, antes 1.65:1) y peso menor. La
   subordinación ya no depende solo del relleno del primario. */
.cta-secundario{margin-top:var(--sp-5);}
.cta-secundario .btn-ghost{
  font-family:var(--font-body);
  font-weight:500;
  font-size:.9rem;
  padding:.7rem 1.2rem;
  color:var(--text);
  border:1px solid var(--linea-ui);
  background:transparent;
  box-shadow:none;
}
.cta-sub{
  margin-top:var(--sp-1);
  font-size:var(--t-micro);
  letter-spacing:.02em;
  line-height:1.4;
  color:var(--muted);
}

/* El gemelo del hero. Menos aire que el del cierre (sp-4, no sp-5): ahí
   arriba cada 16px salen del pliegue. Mismo ancho que el CTA primario para
   que los dos botones apilados compartan borde izquierdo y derecho; el
   rótulo es largo y cae en dos líneas en móvil, que es lo que se quiere
   antes que un botón de borde a borde. */
.cta-secundario-hero{margin-top:var(--sp-4);}
.cta-secundario-hero .btn-ghost{
  width:min(100%,22rem);
  text-wrap:balance;
}

@media (hover:hover) and (pointer:fine){
  .empieza .btn-primary:hover{box-shadow:var(--e-btn-hi);}
  .video-play:hover .video-play-disco{transform:scale(1.06);}
  .cta-secundario .btn-ghost:hover{border-color:var(--lilac);background:rgba(176,48,96,.05);}
  .empieza .btn-ghost:hover{box-shadow:none;}
  .faq-item > summary:hover .faq-q{color:var(--accent-deep);}
  .pie a:hover{color:var(--accent-deep);}
}
@media (hover:none){
  .empieza .btn:active{transform:scale(.965);box-shadow:var(--e-btn);}
}

/* ================  2. El problema  ================ */
.sec-problema{
  background:var(--surface-2);
  border-block:1px solid var(--linea-fina);
}
.sec-problema .wrap{max-width:var(--w-tight);}
.problema-p + .problema-p{margin-top:var(--sp-3);}

/* ================  3. Cómo trabajo  ================ */
.sec-metodo .wrap{max-width:var(--w-read);}
.pasos{list-style:none;display:grid;gap:var(--sp-5);}
.paso{display:flex;gap:var(--sp-3);align-items:baseline;}

/* Cifra colgada, sin círculo y sin magenta: el badge circular relleno era el
   segundo objeto magenta de la pantalla y el brief pide gastar el acento en
   uno solo. Ahora el número es tipografía, no un componente. */
.paso-num{
  flex:none;
  min-width:1.4em;
  font-family:var(--font-display);
  font-weight:700;
  font-size:2rem;
  line-height:.9;
  letter-spacing:-.02em;
  color:var(--lilac);              /* 6.80:1 */
  font-variant-numeric:lining-nums tabular-nums;
}
.paso-cuerpo h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--t-h3);
  line-height:1.25;
  letter-spacing:-.005em;
  color:var(--text);
  margin-bottom:var(--sp-1);
}
.sec-metodo .cta-block{margin-top:var(--sp-5);}

/* ================  4. Por qué yo  ================ */
.sec-porque .wrap{max-width:var(--w-tight);}
.porque-p + .porque-p{margin-top:var(--sp-3);}
.porque-p.destacado{margin-bottom:var(--sp-4);max-width:14em;}

/* ================  5. Reductor de riesgo  ================
   Se borró .riesgo-card: fondo blanco + radio de 20px + barrita de acento a
   la izquierda + sombra es el cliché que el brief nombra por su nombre, y era
   la única tarjeta de la página (una tarjeta sola no es sistema, es un objeto
   suelto). Ahora es una promesa escrita sobre el crema; su separación viene
   del ritmo de sección, no de un envase. */
.sec-riesgo .wrap{max-width:var(--w-tight);}

/* Sin la tarjeta, esta sección se quedó sin ninguna presencia: es la única
   que no lleva rótulo encima (su h2 ES la promesa), así que flotaba como un
   párrafo más. Un filete corto la marca como bloque aparte sin volver a
   envasarla. No es el rail de acento del cliché: va arriba, es fino y no
   lleva color de marca. */
.sec-riesgo .wrap{position:relative;}
.riesgo-h{
  position:relative;
  margin-bottom:var(--sp-2);
  padding-top:var(--sp-3);
}
.riesgo-h::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:3.5rem;height:2px;
  background:var(--linea-ui);
}

/* ================  6. FAQ  ================
   Las respuestas siguen en [PENDIENTE] por decisión del cliente. La
   composición de filas con filete es lo mejor resuelto del archivo original
   y se conserva; solo cambia la tipografía y el ritmo. */
.faq{border-top:1px solid var(--linea-fina);}
.faq-item{border-bottom:1px solid var(--linea-fina);}

.faq-item > summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height:56px;
  padding-block:var(--sp-2);
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-weight:500;
  font-size:var(--t-h3);
  line-height:1.3;
  letter-spacing:-.005em;
  color:var(--text);
}
.faq-item > summary::-webkit-details-marker{display:none;}

/* Signo + que gira a x al abrir */
.faq-ico{
  flex:none;
  position:relative;
  width:16px;height:16px;
  transition:transform 220ms var(--ease-out);
}
.faq-ico::before,
.faq-ico::after{
  content:'';
  position:absolute;
  background:var(--lilac);
  border-radius:2px;
}
.faq-ico::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%);}
.faq-ico::after{left:50%;top:0;width:2px;height:100%;transform:translateX(-50%);}
.faq-item[open] .faq-ico{transform:rotate(135deg);}

.faq-a{padding-bottom:var(--sp-4);}
.faq-item[open] .faq-a{animation:faq-entra var(--t-entra) var(--ease-out);}
@keyframes faq-entra{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:1;transform:none;}
}

/* ================  7. Cierre  ================ */
.sec-cierre{
  text-align:center;
  background:var(--surface-2);
  border-top:1px solid var(--linea-fina);
}
.sec-cierre .wrap{max-width:var(--w-tight);}
.cierre-h{margin:0 auto var(--sp-4);max-width:12em;}
.sec-cierre .cta-secundario .btn-ghost{border-color:var(--linea-ui);}

/* ================  Pie  ================ */
.pie{
  padding-block:var(--sp-5);
  border-top:1px solid var(--linea-fina);
  text-align:center;
}
.pie .wrap{max-width:var(--w-read);}
.pie p{font-size:var(--t-micro);line-height:1.4;color:var(--muted);}
.pie-marca{color:var(--text);}
.pie-sep{margin-inline:.5rem;color:var(--muted);}   /* era --line-strong: 1.66:1 */
.pie a{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap-min);
  padding-inline:.35rem;
  color:var(--lilac);              /* 6.80:1 */
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ================  CTA fija (solo móvil)  ================ */
.cta-fija{
  position:fixed;
  z-index:50;
  left:0;right:0;bottom:0;
  display:flex;
  justify-content:center;
  padding:.75rem var(--pad-x) calc(.75rem + env(safe-area-inset-bottom,0px));
  background:var(--bg);            /* opaco: al 94% con blur la barra flotaba */
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--linea-ui);
  opacity:0;
  transform:translateY(100%);
  pointer-events:none;             /* dejaba de verse y seguía capturando toques 300ms */
  transition:opacity var(--t-entra) var(--ease-out),transform var(--t-entra) var(--ease-out);
}
.cta-fija[hidden]{display:none;}
.cta-fija.visible{opacity:1;transform:none;pointer-events:auto;}
.cta-fija .btn{width:min(100%,22rem);}

/* El espacio se RESERVA siempre en vez de conmutarse: el toggle de la clase
   cambiaba la altura del documento tres veces por recorrido y la página
   pegaba un salto al ocultarse la barra. */
@media (max-width:719px){
  body.empieza{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));}
}

/* ================  MODAL: recursos  ================
   <dialog> nativo. El elemento en sí no se estiliza como caja: se deja
   transparente y sin borde, y la caja visible es .modal-caja. Así el
   scroll interno, el radio y la sombra se controlan sin pelear con los
   estilos de agente de usuario del <dialog>. */
.modal{
  width:min(100% - 1.5rem,29rem);
  max-height:calc(100dvh - 1.5rem);
  /* Estas tres declaraciones reponen lo que el navegador ya hacía y dos
     reglas de variables.css le quitaron. Sin ellas el modal se abría fuera
     de la pantalla (medido: top -556px en un móvil de 844):
       · position/inset — `body>*{position:relative}` pisa el position del
         <dialog>, que pasa a anclarse al documento en vez de a la ventana.
         Como el botón que lo abre está al final de la página, el modal nacía
         cientos de píxeles por encima del borde superior.
       · margin — `*{margin:0}` barre el margin:auto con el que el navegador
         centra un <dialog> modal. */
  position:fixed;
  inset:0;
  margin:auto;
  padding:0;
  border:none;
  background:transparent;
  color:var(--text);
  overflow:visible;                /* el scroll vive en .modal-caja */
}
.modal::backdrop{
  background:rgba(36,16,22,.6);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

/* La página de atrás no se mueve mientras el modal está abierto. showModal()
   hace inerte el fondo, pero no bloquea el scroll del documento. */
html.modal-abierto{overflow:hidden;}

.modal-caja{
  position:relative;
  max-height:calc(100dvh - 1.5rem);
  overflow-y:auto;
  overscroll-behavior:contain;     /* al llegar al tope no arrastra la página */
  padding:var(--sp-5) var(--sp-4) var(--sp-4);
  background:var(--bg);
  border:1px solid var(--linea-fina);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-float);
  text-align:center;
}

/* Botón de cierre: 48px de área táctil, pero el icono se ve de 20px. */
.modal-cerrar{
  position:absolute;
  top:.35rem;right:.35rem;
  display:flex;align-items:center;justify-content:center;
  width:var(--tap-min);height:var(--tap-min);
  border:none;border-radius:var(--r-pill);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:color var(--t-ui) var(--ease-out),background var(--t-ui) var(--ease-out);
}

.modal-marca{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:var(--sp-3);
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--t-micro);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text);
}
.modal-logo{width:26px;height:26px;border-radius:7px;flex:none;}

.modal-eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--t-chip);
  letter-spacing:var(--ls-chip);
  text-transform:uppercase;
  color:var(--lilac);              /* 6.80:1 */
}
.modal-h{
  margin-top:var(--sp-1);
  font-family:var(--font-cartel);
  font-weight:800;
  font-size:var(--t-entrada);
  line-height:1.15;
  letter-spacing:var(--ls-entrada);
  color:var(--text);
  text-wrap:balance;
}
.modal-sub{
  margin-top:var(--sp-2);
  font-size:var(--t-body);
  line-height:1.5;
  color:var(--tinta-2);            /* 8.50:1 */
}

/* ---- Campos ---- */
.modal-form{
  display:grid;
  gap:var(--sp-3);
  margin-top:var(--sp-4);
  text-align:left;
}
.campo{display:grid;gap:.35rem;}
/* :not(.consent) es obligatorio, no cosmético: la casilla de consentimiento
   también es un <label> hijo directo de .campo, y sin esto sus tres líneas de
   texto legal salían en VERSALITAS CON TRACKING — siete líneas ilegibles que
   además empujaban el modal fuera de la pantalla en móvil. */
.campo > label:not(.consent){
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--t-rotulo);
  letter-spacing:var(--ls-caps);
  text-transform:uppercase;
  color:var(--muted);              /* 6.51:1 */
}

/* 1rem = 16px exactos: por debajo de eso iOS hace zoom al enfocar el campo
   y la persona se queda con el modal descuadrado y sin saber por qué. */
.modal-form input[type=text],
.modal-form input[type=email],
.modal-form input[type=tel]{
  width:100%;
  min-height:var(--tap-min);
  padding:.7rem 1.1rem;
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.4;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--linea-ui); /* 3.43:1 · WCAG 1.4.11 */
  border-radius:var(--r-pill);
  transition:border-color var(--t-ui) var(--ease-out),
             box-shadow var(--t-ui) var(--ease-out);
}
.modal-form input::placeholder{color:var(--muted);opacity:1;}

.tel-grupo{display:flex;gap:.5rem;align-items:stretch;}

/* Botón de país. Ya no es un <select>: enseña bandera y clave, nada más, así
   que el ancho lo fija el contenido (~5.5rem) y no hay nombre que truncar.
   El <select> anterior tenía que ser de 7.5rem para que cupiera "+52 Mé…" y
   aun así se cortaba; esto ocupa menos y se lee entero. */
.tel-pais{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  min-height:var(--tap-min);
  padding:.7rem .9rem;
  font-family:var(--font-body);
  font-size:var(--t-body);
  line-height:1.4;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--linea-ui);   /* 3.43:1 · WCAG 1.4.11 */
  border-radius:var(--r-pill);
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--t-ui) var(--ease-out),
             border-color var(--t-ui) var(--ease-out);
}
/* La bandera es un emoji y su caja varía según el sistema. Ancho fijo para
   que la clave de al lado no baile al cambiar de país, y para que en Windows
   —donde no hay tipografía de banderas y salen las dos letras— el botón
   siga midiendo lo mismo. */
.tel-bandera{
  width:1.35em;
  font-size:1.05em;
  line-height:1;
  text-align:center;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
.tel-clave{font-variant-numeric:lining-nums tabular-nums;}
.tel-chevron{flex:none;color:var(--muted);transition:transform var(--t-ui) var(--ease-out);}
.tel-pais[aria-expanded="true"] .tel-chevron{transform:rotate(180deg);}

.tel-grupo input{flex:1 1 auto;min-width:0;}

/* ---- Vista de países ----
   ALTURA FIJA, no min-height. Con min-height el panel crecía hasta los 219
   países (medido: 21 500px), quien scrolleaba movía la caja entera del modal
   y el buscador se perdía por arriba justo cuando hacía falta. Con una altura
   cerrada, la cabecera y el buscador se quedan quietos y el único que se
   mueve es lo que tiene que moverse: la lista.
   De paso evita el otro salto: si el panel midiera lo que mide su contenido
   filtrado, la caja cambiaría de alto con cada letra tecleada. */
.modal-paises{
  display:flex;
  flex-direction:column;
  text-align:left;
  height:min(68dvh,30rem);
}

.paises-cab{
  display:flex;
  align-items:center;
  gap:.3rem;
  margin-bottom:var(--sp-3);
}
.paises-volver{
  display:flex;align-items:center;justify-content:center;
  flex:none;
  width:var(--tap-min);height:var(--tap-min);
  margin-left:-.6rem;               /* el icono se alinea con el texto, no su caja */
  border:none;border-radius:var(--r-pill);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:color var(--t-ui) var(--ease-out),background var(--t-ui) var(--ease-out);
}
.paises-h{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--t-h3);
  line-height:1.2;
  letter-spacing:-.005em;
  color:var(--text);
}

.paises-buscar{position:relative;}
.paises-lupa{
  position:absolute;
  left:.95rem;top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  pointer-events:none;
}
.paises-buscar input{
  width:100%;
  min-height:var(--tap-min);
  padding:.7rem 1rem .7rem 2.6rem;   /* izquierda: hueco para la lupa */
  font-family:var(--font-body);
  font-size:var(--t-body);           /* 16px exactos: por debajo iOS hace zoom */
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--linea-ui);
  border-radius:var(--r-pill);
}
.paises-buscar input::placeholder{color:var(--muted);opacity:1;}
/* La x nativa de type=search en WebKit es gris del sistema y no se puede
   recolorear; se quita y el vaciado queda en la tecla de borrar. */
.paises-buscar input::-webkit-search-cancel-button{-webkit-appearance:none;}

.paises-lista{
  flex:1 1 auto;
  margin-top:var(--sp-2);
  overflow-y:auto;
  overscroll-behavior:contain;      /* al llegar al tope no arrastra el modal */
  -webkit-overflow-scrolling:touch;
  list-style:none;
}

.paises-rotulo{
  padding:var(--sp-2) .9rem .35rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--t-chip);
  letter-spacing:var(--ls-chip);
  text-transform:uppercase;
  color:var(--muted);               /* 6.51:1 */
}
.paises-rotulo[hidden]{display:none;}

.pais{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-height:var(--tap-min);
  padding:.5rem .9rem;
  border-radius:var(--r-chip);
  font-size:.9375rem;
  color:var(--text);
  cursor:pointer;
}
.pais[hidden]{display:none;}
.pais-bandera{
  flex:none;
  width:1.5em;
  font-size:1.15em;
  line-height:1;
  text-align:center;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif;
}
.pais-nombre{flex:1 1 auto;min-width:0;line-height:1.3;}
.pais-clave{
  flex:none;
  font-size:.875rem;
  color:var(--muted);
  font-variant-numeric:lining-nums tabular-nums;
}
/* La palomita nace invisible pero OCUPANDO SITIO: si apareciera al elegir,
   el nombre de esa fila se desplazaría 16px y la lista entera parecería
   moverse bajo el dedo. */
.pais-check{flex:none;color:var(--accent);opacity:0;}
.pais[aria-selected="true"]{background:rgba(176,48,96,.09);}
.pais[aria-selected="true"] .pais-check{opacity:1;}
.pais[aria-selected="true"] .pais-nombre{font-weight:600;}

/* Resalte del teclado y del ratón. No se usa :hover para esto: con :hover, el
   puntero parado encima de una fila se peleaba con las flechas del teclado. */
.pais.marcado{background:rgba(176,48,96,.14);}

.paises-vacio{
  padding:var(--sp-4) .9rem;
  font-size:var(--t-micro);
  line-height:1.5;
  color:var(--muted);
  text-align:center;
}
.paises-vacio[hidden]{display:none;}

/* Medido en el navegador: a 390px el campo del número queda cómodo junto al
   botón de país; a 360px se quedaba sin sitio y el número se cortaba en
   pantalla. Por debajo de 380px, el país pasa a su propia fila. */
@media (max-width:379px){
  .tel-grupo{flex-wrap:wrap;}
  .tel-pais{width:100%;justify-content:flex-start;}
  .tel-pais .tel-chevron{margin-left:auto;}
}

/* ---- Consentimiento ---- */
.campo-consent{margin-top:var(--sp-1);}
.consent{
  display:flex;
  gap:.7rem;
  align-items:flex-start;
  font-size:var(--t-micro);
  line-height:1.5;
  color:var(--tinta-2);
  cursor:pointer;
}
/* La casilla nace SIN marcar y así se queda: el consentimiento premarcado no
   es consentimiento. Se dibuja a 22px porque la de 13px del sistema no se
   ve contra el crema. El área táctil la da el <label> entero. */
.consent input[type=checkbox]{
  flex:none;
  width:22px;height:22px;
  margin-top:.05rem;
  accent-color:var(--accent);
  cursor:pointer;
}

/* ---- Errores ----
   Color + texto, nunca solo color: quien no distingue rojo del gris lee el
   mensaje igual. #A4262C da 6.4:1 sobre el crema. */
.campo-error{
  font-size:var(--t-micro);
  line-height:1.4;
  color:#A4262C;
}
.campo-error[hidden]{display:none;}
.campo.error input[type=text],
.campo.error input[type=email],
.campo.error input[type=tel],
.campo.error .tel-pais{
  border-color:#A4262C;
  box-shadow:0 0 0 1px #A4262C;
}
.campo.error .consent input[type=checkbox]{outline:2px solid #A4262C;outline-offset:2px;}

.modal-enviar{width:100%;margin-top:var(--sp-1);}

.modal-legal{
  font-size:var(--t-chip);
  line-height:1.5;
  color:var(--muted);
}
.modal-legal a{
  color:var(--lilac);
  text-decoration:underline;
  text-underline-offset:2px;
}
.modal-legal strong{color:var(--text);font-weight:600;}

/* ---- Acuse ---- */
.modal-vista[hidden]{display:none;}
.exito-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;
  margin-bottom:var(--sp-3);
  border-radius:var(--r-pill);
  background:var(--surface-2);
  color:var(--accent-deep);        /* 7.9:1 sobre --surface-2 */
}
/* La dirección de correo y el aviso del spam. Un escalón por debajo del
   mensaje principal: importa, pero no es lo primero que hay que leer.
   El correo puede ser largo y no lleva espacios donde partir, así que se le
   permite romper dentro de la palabra antes que desbordar la caja. */
.exito-nota{
  margin-top:var(--sp-2);
  font-size:var(--t-micro);
  line-height:1.5;
  color:var(--muted);              /* 6.51:1 */
  overflow-wrap:anywhere;
}

#modalExito .modal-enviar{margin-top:var(--sp-4);}
#modalExito:focus{outline:none;}   /* recibe foco por script, no por tabulación */
.modal-volver{
  margin-top:var(--sp-3);
  padding:.5rem .75rem;
  min-height:var(--tap-min);
  font-family:var(--font-body);
  font-size:var(--t-micro);
  color:var(--muted);
  background:none;border:none;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}

@media (hover:hover) and (pointer:fine){
  .modal-cerrar:hover{color:var(--text);background:var(--surface-2);}
  .modal-volver:hover{color:var(--text);}
  .modal-legal a:hover{color:var(--accent-deep);}
  .tel-pais:hover{background:#EBD3CD;border-color:var(--lilac);}
  .paises-volver:hover{color:var(--text);background:var(--surface-2);}
}

/* Entrada: sin transición en el fondo la caja aparece de golpe y se lee como
   un salto de página. La desactiva prefers-reduced-motion más abajo. */
@keyframes modal-entra{
  from{opacity:0;transform:translateY(12px) scale(.98);}
  to{opacity:1;transform:none;}
}
.modal[open] .modal-caja{animation:modal-entra var(--t-entra) var(--ease-out);}

@media (min-width:720px){
  .modal-caja{padding:var(--sp-5) var(--sp-5) var(--sp-4);}
}

/* ================  FOCO VISIBLE  ================
   Anillo de dos capas: halo blanco pegado al elemento + anillo oscuro fuera.
   Siempre queda al menos una capa con >=3:1 contra el fondo, sea el crema
   (#FBF6F2), el relleno del botón (#B03060) o el retrato. */
/* Los campos del modal no entraban en el :is() de abajo y se quedaban con el
   anillo azul por defecto de Chrome, que no es de la paleta y encima tapaba
   el borde rojo de error. Aquí solo outline, sin el halo blanco: el halo
   existe para separarse del relleno magenta del botón, y sobre un campo
   blanco el anillo oscuro ya da 16.9:1 él solo. Sin box-shadow, el
   contorno rojo del estado de error sobrevive al foco. */
.empieza :is(input,textarea,select):focus-visible{
  outline:3px solid var(--foco-anillo);
  outline-offset:2px;
}
.empieza :is(a,button,summary,video,[tabindex]):focus-visible{
  outline:3px solid var(--foco-anillo);
  outline-offset:3px;
  box-shadow:0 0 0 3px var(--foco-halo);
}
.empieza :is(a,button,summary,video,[tabindex]):focus:not(:focus-visible){
  outline:none;
}
/* El :is(...) de arriba vale (0,3,0) por el [tabindex] y aplanaba la sombra
   del CTA al enfocarlo. Este selector empata y va después, así que gana. */
.empieza a.btn-primary:focus-visible{
  box-shadow:0 0 0 3px var(--foco-halo),var(--e-btn-hi);
}
/* El botón ocupa la caja entera, así que el anillo va POR DENTRO: con
   outline-offset positivo se dibujaba fuera del marco y lo recortaba el
   overflow:hidden del .video-frame. */
.video-play:focus-visible{
  outline:3px solid var(--foco-anillo);
  outline-offset:-6px;
  border-radius:var(--r-chip);
}
.faq-item > summary:focus-visible{
  outline-offset:-3px;
  border-radius:var(--r-chip);
}

/* ================  Preferencias del sistema  ================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important;}   /* .empieza * nunca alcanza a html */
  .empieza *,
  .empieza *::before,
  .empieza *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* ================  Escritorio  ================
   El tráfico es de TikTok, o sea casi todo móvil. En escritorio el problema
   no era que se viera mal, era que una columna de 640px centrada en 1440
   dejaba 400px de crema muerta por lado sin que nada tocara el marco.
   El hero pasa a dos columnas —tipo a la izquierda, retrato a la derecha—,
   que además es el patrón de la portada del sitio (index.html). */
@media (min-width:720px){
  .cta-fija{display:none!important;}

  .hero{padding-block:var(--sp-6) var(--sp-6);}
  .hero .wrap{max-width:var(--w-cartel);}
  .hero .eyebrow{margin-bottom:var(--sp-5);}
  .hero-sub{max-width:44ch;}
  /* El hero se ensancha y se achata: las piezas se separan hacia los dos
     márgenes y crecen, si no quedan amontonadas en la banda central sobre el
     texto. El borde sube a 3px porque a 1440 los 2px desaparecen. */
  .pz-cuadro-1,.pz-cuadro-2,.pz-cuadro-3,.pz-cuadro-4,
  .pz-circulo-1,.pz-circulo-2{border-width:3px;}

  .pz-cuadro-1{top:-14%; left:-6%;  width:min(24vw,300px);}
  .pz-circulo-1{top:34%;  left:-8%;  width:min(16vw,200px);}
  .pz-cuadro-2{top:60%;  left:-3%;  width:min(21vw,260px);}
  .pz-cuadro-3{top:80%;  left:12%;  width:min(23vw,286px);}
  .pz-circulo-2{top:84%;  left:44%;  width:min(17vw,212px);}
  .pz-cuadro-4{top:78%;  left:64%;  width:min(18vw,224px);}
  .pz-disco{top:32%;  right:-6%; width:min(23vw,290px);}
  .pz-mancha{top:66%; left:34%;  width:min(20vw,250px);filter:blur(52px);}
  .pz-capsula{bottom:-4%;right:-3%;width:min(9vw,110px);}

  .sec-metodo .cta-block .btn-primary{width:auto;}
}

@media (min-width:900px){
  /* Dos columnas asimétricas: el bloque de texto manda y el retrato acompaña.
     Devuelve al pliegue los ~200px que costaba apilar retrato sobre CTA. */
  .hero .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,17.5rem);
    column-gap:var(--sp-6);
    align-items:center;
    text-align:left;
  }
  .hero .eyebrow,
  .hero h1,
  .hero-sub,
  .hero .cta-secundario,
  .hero .cta-block{grid-column:1;margin-inline:0;}

  /* El chip es un hijo de grid: sin esto se estira a todo el ancho de la
     columna y deja de ser un chip. El contraste entre esta pieza diminuta y
     el muro de al lado ES el diseño. */
  .hero .eyebrow{justify-self:start;}

  /* La columna de texto mide ~544px a 1440. A 88px de cuerpo el titular no
     cabe en 3 líneas y salía con un rag feo ("Más clientes / con /
     publicidad en / Meta"). A 68px, 7.6em = 517px y vuelven las 3 líneas. */
  .hero h1{font-size:clamp(2.6rem,5.4vw,4.25rem);}
  .hero-sub{margin-inline:0;}

  /* La caja de video ROMPE la retícula por la derecha.
     La columna 2 mide 17.5rem (280px) y ahí dentro un cuadrado sale de 280px:
     más pequeño que el retrato vertical al que sustituye. Ensanchar la columna
     tampoco vale, porque se lo come a la columna de texto y el muro de 3
     líneas del h1 necesita sus 517px.

     Así que el marco se sale hacia el margen derecho, que es crema vacío:
     el ancho extra sale de donde no le hace falta a nadie. La sangría es
     exactamente el hueco que queda entre el contenedor y el borde de la
     ventana, menos 1rem de aire, y nunca más de 11rem.
       ·  960px de ventana -> 0     -> cuadrado de 280
       · 1152px            -> 80px  -> 360
       · 1440px            -> 176px -> 456   (tope)
       · 2560px            -> 176px -> 456   (tope)
     El tope existe para que en un monitor ancho el video no acabe midiendo
     más que el titular. El hero recorta con overflow:clip, así que ni con
     una cuenta rara puede aparecer scroll horizontal. */
  .video-frame{
    grid-column:2;
    grid-row:1 / span 6;
    --sangre:clamp(0px, calc((100vw - var(--w-cartel)) / 2 - 1rem), 11rem);

    /* Aquí el alto lo dicta el ancho vía aspect-ratio, no al revés: en
       escritorio el marco va en su propia columna y no empuja nada. */
    width:calc(100% + var(--sangre));
    margin:0;
  }

  .empieza{--sec-y:var(--sp-6);}

  /* UN SOLO BORDE IZQUIERDO para toda la página. Las anchuras de medida
     siguen variando (las impone el max-width del texto, no el contenedor),
     pero la posición no: antes cada sección arrancaba en una x distinta
     —137, 215, 245— y eso no lee como escalera, lee como desalineación.
     Va después de las reglas por sección, así que gana a igual especificidad. */
  .sec .wrap,
  .pie .wrap{max-width:var(--w-cartel);}
  .faq{max-width:var(--w-read);}

  /* Tres columnas: el único latido horizontal de la página, entre dos
     secciones verticales. Mata además el badge circular. */
  .pasos{grid-template-columns:repeat(3,1fr);gap:var(--sp-4);}
  .paso{display:block;border-top:1px solid var(--linea-ui);padding-top:var(--sp-3);}
  .paso-num{display:block;font-size:2.75rem;margin-bottom:var(--sp-2);}
}