/* ───────────────────────────── cajanegra · estilos ─────────────────────────────
   Sistema de grises y escala tipográfica medidos en la referencia (estilos computados, 28-oct-2026):
   fondo #08090A · panel #0F1011/#101112 · relieve #1C1C1F · líneas rgba(255,255,255,.08)/#23252A
   texto #F7F8F8 · secundario #8A8F98 · Inter con peso 510 y tracking −0,022em en titulares.
   Identidad propia: el cian #5EDDEB del marco «IA» y Figtree 800 (la de nuestros subtítulos) en la escena.
──────────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:"Inter";src:url(../fonts/Inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/Figtree-800.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --bg:#08090A;
  --bg-2:#0F1011;
  --panel:#101112;
  --raise:#1C1C1F;
  --line:rgba(255,255,255,.08);
  --line-2:#23252A;
  --line-3:#34343A;
  --text:#F7F8F8;
  --text-2:#D0D6E0;
  --text-3:#8A8F98;
  --text-4:#62666D;
  --cian:#5EDDEB;
  --hondo:#04283D;
  --boton:#E5E5E6;

  --ancho:1344px;
  --margen:24px;
  --sans:"Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --subs:"Figtree","Inter",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px;overflow-x:clip;background:var(--bg);color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:24px;
  font-feature-settings:"cv01","ss03";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0;font-weight:510;text-wrap:balance}
ul,ol{margin:0;padding:0;list-style:none}
b,strong{font-weight:590}
dl,dd{margin:0}
:focus-visible{outline:2px solid var(--cian);outline-offset:3px;border-radius:6px}
::selection{background:var(--text);color:var(--bg)}

html[data-modo="compra"] [data-solo="espera"],
html[data-modo="espera"] [data-solo="compra"]{display:none!important}

.saltar{position:absolute;left:-999px;top:8px;z-index:100;background:var(--text);color:var(--bg);padding:6px 14px;border-radius:999px}
.saltar:focus{left:8px}

/* Contenedor común (mismo ancho y márgenes que la referencia) */
.cabecera__in,.hero,.resultados,.seccion,.final,.pie__in,.pie__legal{max-width:var(--ancho);margin-left:auto;margin-right:auto;padding-left:var(--margen);padding-right:var(--margen)}

/* ───────── Marco de selección (firma de nuestros subtítulos) ───────── */
.seleccion{position:relative;display:inline-block;padding:0 .08em;white-space:nowrap;isolation:isolate}
.seleccion::after{content:"";position:absolute;z-index:-1;inset:.06em -.02em .02em;border:1.5px solid var(--cian);
  background:
    linear-gradient(var(--cian),var(--cian)) 0 0/5px 5px no-repeat,
    linear-gradient(var(--cian),var(--cian)) 100% 0/5px 5px no-repeat,
    linear-gradient(var(--cian),var(--cian)) 0 100%/5px 5px no-repeat,
    linear-gradient(var(--cian),var(--cian)) 100% 100%/5px 5px no-repeat;
  background-origin:border-box}
.seleccion::before{content:attr(data-tag);position:absolute;left:-.02em;top:.06em;transform:translateY(-100%);
  font-family:var(--subs);font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1;padding:3px 4px 2px;
  background:var(--cian);color:var(--hondo);border-radius:2px 2px 0 0}

/* ───────── Botones (medidos: 40 px, 15 px/510, padding 0 18, píldora) ───────── */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:.4em;height:40px;padding:0 18px;border-radius:9999px;
  background:var(--boton);color:var(--bg);border:1px solid var(--boton);font-family:inherit;font-size:15px;font-weight:510;letter-spacing:-.011em;line-height:24px;
  text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease}
.boton:hover{background:#fff;border-color:#fff}
.boton--sec{background:var(--raise);color:var(--text);border-color:var(--line)}
.boton--sec:hover{background:#26262A;border-color:rgba(255,255,255,.14)}
.boton--mini{height:32px;padding:0 12px;font-size:13px}
.boton--ancho{width:100%}
.boton--grande{height:48px;padding:0 24px;font-size:16px}

/* ───────── Cabecera ───────── */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(8,9,10,.8);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line)}
.cabecera__in{height:64px;display:flex;align-items:center;gap:16px}
.marca{position:relative;font-size:17px;font-weight:650;letter-spacing:-.03em;text-decoration:none;line-height:1;padding-right:8px}
.marca::after{content:"";position:absolute;right:0;top:0;width:4px;height:4px;background:var(--cian)}
.nav{display:none;margin-left:auto;gap:2px;font-size:13px;color:var(--text-3)}
.nav a{text-decoration:none;padding:4px 12px;border-radius:9999px;transition:color .15s,background-color .15s}
.nav a:hover{color:var(--text);background:var(--raise)}
.cabecera .boton--mini{margin-left:auto}

/* ───────── Hero: primera pantalla completa ───────── */
.hero{padding-top:52px;padding-bottom:8px;display:grid;gap:28px}
.hero__titulo{font-weight:590;font-size:42px;line-height:1.16;letter-spacing:-.035em}
.hero__l1{white-space:nowrap}
.hero__titulo .seleccion{margin:0 0 0 -.08em}
.hero__titulo .rota::before{display:none}
.hero__titulo .rota::after{inset:.16em -.02em .08em;border-width:1.5px}
.hero__titulo .seleccion::before{top:auto;bottom:.02em;transform:translateY(100%);border-radius:0 0 2px 2px}
.hero__sub{margin-top:18px;max-width:480px;color:var(--text-3);font-size:17px;line-height:26px;letter-spacing:-.011em}
.hero__precio{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:17px;color:var(--text-3);text-decoration:none}
.hero__precio b{color:var(--text);font-weight:510}
.hero__precio svg{width:16px;height:16px;transition:transform .15s ease}
.hero__precio:hover svg{transform:translateX(3px)}
.hero__sub a{color:var(--text);text-decoration:none;font-weight:510}
.hero__sub a:hover{text-decoration:underline}
.hero__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.hero__acciones--centro{justify-content:center}
/* Móvil: botones grandes que llenan la fila, como la referencia */
.hero .hero__acciones{flex-wrap:nowrap;gap:10px;margin-top:24px}
.hero .hero__acciones .boton{flex:0 1 auto;height:46px;padding:0 20px;font-size:16px;font-weight:510}
@media (max-width:374px){.hero .hero__acciones .boton{font-size:15px;padding:0 14px}}

/* Palabra que cambia dentro del recuadro «IA» */
.rota{vertical-align:top}
.rota__medida{display:inline-block;white-space:nowrap}
.rota__ventana{display:none}
.rota.vivo{transition:width .55s cubic-bezier(.65,0,.25,1)}
.rota.vivo .rota__medida{position:absolute;visibility:hidden;left:0;top:0}
.rota.vivo .rota__ventana{display:block;position:relative;height:1.14em;line-height:1.14;overflow:hidden;margin:0 -.08em;padding:0 .08em}
.rota__w{position:absolute;left:.08em;top:0;line-height:1.14;white-space:nowrap;transition:transform .6s cubic-bezier(.65,0,.25,1),opacity .45s ease,filter .45s ease}
.rota__w.entra{transform:translateY(100%);opacity:0;filter:blur(6px)}
.rota__w.on{transform:none;opacity:1;filter:none}
.rota__w.sale{transform:translateY(-100%);opacity:0;filter:blur(6px)}

/* Escena: ventana de Claude detrás, móvil con el reel delante */
.escena{position:relative;margin:0;height:440px}
.claude{position:absolute;left:0;top:0;width:calc(100% - 52px);border-radius:12px;background:var(--bg-2);border:1px solid var(--line-2);overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.claude__barra{display:flex;align-items:center;gap:10px;height:34px;padding:0 12px;border-bottom:1px solid var(--line);font-size:12px;color:var(--text-3)}
.claude__puntos{display:flex;gap:5px}
.claude__puntos i{width:8px;height:8px;border-radius:50%;background:var(--line-3)}
.claude__nombre{color:var(--text-2);font-weight:510}
.claude__ruta{margin-left:auto;font-size:11px}
.claude__cuerpo{padding:14px 12px 16px;font-size:13px;line-height:19px;color:var(--text-2)}
.claude__yo{margin-left:auto;max-width:86%;width:fit-content;padding:8px 12px;border-radius:12px;background:var(--raise);border:1px solid var(--line);color:var(--text)}
.claude__tareas{margin-top:12px;max-width:calc(100% - 160px);padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--panel)}
.claude__tit{display:flex;align-items:center;gap:7px;font-weight:510;color:var(--text);margin-bottom:6px}
.claude__punto{width:6px;height:6px;border-radius:50%;background:var(--cian)}
.t-pasos{display:grid;gap:4px}
.t-pasos li{display:block;white-space:nowrap}
.t-pasos svg{display:inline-block;vertical-align:-2px;width:13px;height:13px;color:var(--cian);margin-right:8px}
.t-fin{margin-top:12px;color:var(--text)}
.t-ficheros{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 160px)}
.largo{display:none}
.t-ficheros li{display:flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:8px;background:var(--panel);border:1px solid var(--line-2);font-size:12px;color:var(--text)}
.t-ficheros svg{width:12px;height:12px;color:var(--text-3)}
.escena__movil{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:236px;aspect-ratio:9/16;border-radius:22px;padding:5px;background:#000;border:1px solid var(--line-3);
  box-shadow:0 30px 70px -20px rgba(0,0,0,.95)}
.escena__movil video{width:100%;height:100%;object-fit:cover;border-radius:17px;background:var(--panel)}
.escena .claude{display:none}
.globo{position:absolute;z-index:2;font-size:13px;line-height:18px;padding:9px 13px;border-radius:14px;background:var(--raise);border:1px solid var(--line-3);color:var(--text);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.9)}
.globo--pide{left:max(0px,calc(50% - 210px));top:36px;max-width:190px;border-bottom-left-radius:4px}
.globo--listo{right:max(0px,calc(50% - 210px));bottom:64px;display:flex;align-items:center;gap:7px;font-weight:510;border-bottom-right-radius:4px}
.globo--listo svg{width:14px;height:14px;color:var(--cian)}

/* ───────── Resultados: solo cifras, limpias ───────── */
.resultados{padding-top:88px}
.resultados__antetitulo{font-size:14px;line-height:20px;font-weight:510;letter-spacing:0;color:var(--text-3);margin-bottom:20px}
.cifras{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cifras li{display:flex;flex-direction:column;gap:4px;padding:22px 0}
.cifras li:first-child{grid-column:1/-1;border-bottom:1px solid var(--line)}
.cifras li+li+li{border-left:1px solid var(--line);padding-left:20px}
.cifras b{font-weight:640;font-size:40px;line-height:44px;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.cifras li:first-child b{font-size:56px;line-height:60px}
.cifras span{font-size:15px;line-height:22px;color:var(--text-3)}

/* ───────── Secciones ───────── */
.seccion{padding-top:112px}
.seccion__titulo{font-weight:640;font-size:34px;line-height:38px;letter-spacing:-.035em;margin-bottom:40px}
h3{font-size:18px;line-height:26px;letter-spacing:-.015em}

/* Pasos: tarjetas animadas */
.pasos{display:grid;gap:40px}
.paso h3{display:flex;align-items:center;gap:10px;font-size:17px;line-height:24px}
.paso__n{display:inline-grid;place-items:center;line-height:1;width:22px;height:22px;flex:none;border-radius:999px;border:1px solid var(--line-3);color:var(--text-2);font-size:12px;font-weight:510}
.paso p{margin-top:6px;color:var(--text-3);font-size:15px;line-height:24px;max-width:320px}
.paso .fig{margin-top:18px}
.fig{height:220px;border-radius:12px;border:1px solid var(--line);background:var(--bg-2);padding:18px;position:relative;overflow:hidden;font-size:13px;line-height:19px}
.fig__cap{font-size:12px;color:var(--text-3)}
.fig--tema{display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.fig--tema .fig__cap{margin-bottom:auto}
.fig__chips{display:flex;flex-wrap:wrap;gap:6px}
.fig__chips span{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--text-3)}
.fig__input{display:flex;align-items:center;gap:2px;height:46px;padding:0 8px 0 14px;border-radius:12px;background:var(--raise);border:1px solid var(--line);color:var(--text)}
.fig__caret{width:1.5px;height:16px;background:var(--cian);opacity:0}
.fig__enviar{margin-left:auto;width:28px;height:28px;border-radius:999px;flex:none;background:var(--boton);position:relative;transition:transform .2s ease}
.fig__enviar::after{content:"";position:absolute;inset:0;margin:auto;width:7px;height:7px;border-top:1.6px solid var(--bg);border-left:1.6px solid var(--bg);transform:translateY(2px) rotate(45deg)}
.fig--tema.envia .fig__enviar{transform:scale(.86)}
.fig--hace .fig__estado{display:flex;align-items:center;gap:8px;font-weight:510;margin-bottom:12px;color:var(--text)}
.fig__estado i{width:6px;height:6px;border-radius:50%;background:var(--cian)}
.fig--hace ul{display:grid;gap:8px}
.fig--hace li{display:flex;align-items:center;gap:9px;color:var(--text-2)}
.fig--hace li::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;border:1px solid var(--cian);background:radial-gradient(circle,var(--cian) 0 2.5px,transparent 3px)}
.fig__barra{position:absolute;left:18px;right:18px;bottom:18px;height:2px;border-radius:2px;background:var(--line-2);overflow:hidden}
.fig__barra i{position:absolute;inset:0;border-radius:2px;background:var(--cian);transform-origin:left}
.fig--sube{display:flex;gap:14px;align-items:center}
.fig--sube img{width:92px;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:8px;border:1px solid var(--line-2)}
.fig--sube ul{flex:1;display:grid;gap:6px}
.fig--sube li{display:flex;align-items:center;gap:9px;height:38px;padding:0 12px;border-radius:8px;background:var(--panel);border:1px solid var(--line-2);color:var(--text)}
.fig--sube li span{margin-left:auto;color:var(--text-3);font-size:12px}
.fig--sube svg{width:14px;height:14px;color:var(--text-3);flex:none}

/* Ejemplos: vídeo + título, nada más */
.ejemplos{display:grid;grid-template-columns:1fr 1fr;gap:28px 12px}
.ejemplo h3{margin-top:12px;font-size:16px;line-height:22px}
.ejemplo__marco{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.ejemplo__marco img,.ejemplo__marco video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ejemplo__play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;color:var(--text)}
.ejemplo__play svg{position:absolute;right:10px;bottom:10px;width:32px;height:32px;padding:9px;border-radius:50%;background:rgba(8,9,10,.7);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line-3);opacity:.85;transition:opacity .15s}
.ejemplo__play:hover svg{opacity:1}

/* ───────── Precio (como la referencia: título a un lado, tarjeta sencilla al otro) ───────── */
.precio{display:grid;gap:36px}
.precio__kicker{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}
.precio .seccion__titulo{margin-bottom:16px}
.precio__sub{font-size:16px;line-height:24px;color:var(--text-3)}
.precio__sub b{color:var(--text);font-weight:590}
.tarjeta{padding:28px 22px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
.tarjeta__marca{font-size:15px;font-weight:590;letter-spacing:-.02em;margin-bottom:18px}
.tarjeta__precio{display:flex;align-items:baseline;gap:10px;margin-bottom:24px}
.tarjeta__precio>span{font-size:56px;line-height:56px;font-weight:590;letter-spacing:-.035em}
.tarjeta__precio small{font-size:14px;color:var(--text-3)}
.tarjeta__nota{margin-top:12px;text-align:center;font-size:13px;color:var(--text-3)}
.consiente{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px;font-size:13px;line-height:19px;color:var(--text-3);cursor:pointer;
  padding:10px 12px;border-radius:10px;border:1px solid transparent;transition:border-color .2s,background-color .2s}
.consiente input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--cian)}
.consiente a{color:var(--text-2);text-underline-offset:2px}
.consiente.falta{border-color:var(--cian);background:rgba(94,221,235,.06);color:var(--text-2)}
/* ───────── Página de gracias ───────── */
.gracias{max-width:640px;margin:0 auto;padding:72px var(--margen) 96px}
.gracias__t{font-size:40px;line-height:44px;font-weight:600;letter-spacing:-.03em}
.gracias__sub{margin-top:12px;color:var(--text-3);font-size:17px;line-height:26px}
.gracias__caja{margin-top:32px}
.gracias__pasos{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:14px;counter-reset:g;font-size:15px;line-height:23px;color:var(--text-2)}
.gracias__pasos li{position:relative;padding-left:34px;counter-increment:g}
.gracias__pasos li::before{content:counter(g);position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-3);
  display:grid;place-items:center;font-size:12px;color:var(--text-2)}
.gracias__pasos b{color:var(--text);font-weight:510}
.gracias__extra{margin-top:20px;font-size:14px;line-height:21px;color:var(--text-3)}
.gracias__recuperar{margin-top:28px}
.gracias__recuperar .lista__fila .boton{flex:0 0 auto}
.gracias__recuperar .lista__fila input{flex:1 1 240px}
.gracias__estado{margin-top:12px;font-size:14px;color:var(--text-3);min-height:1.4em}
.gracias__ayuda{margin-top:28px;font-size:14px;color:var(--text-3)}
.gracias__ayuda a{color:var(--text-2)}
.incluye{margin-top:26px;padding-top:26px;border-top:1px solid var(--line);display:grid;gap:12px;font-size:16px;line-height:24px;color:var(--text-2)}
.incluye li{display:flex;gap:12px;align-items:center}
.incluye svg{width:15px;height:15px;flex:none;color:var(--text-3)}
.sellos{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:26px;font-size:13px;color:var(--text-3)}
.sellos li{display:flex;align-items:center;gap:7px}
.sellos svg{width:15px;height:15px;flex:none}
.precio__pie{margin-top:18px;font-size:14px;line-height:21px;color:var(--text-3)}
.precio__pie a{color:var(--text-2);text-underline-offset:3px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lista__fila{display:flex;gap:8px;flex-wrap:wrap}
.lista__fila input{flex:1 1 180px;height:40px;padding:0 16px;border-radius:9999px;border:1px solid var(--line-2);background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.lista__fila input::placeholder{color:var(--text-4)}
.lista__fila input:focus{outline:none;border-color:var(--cian)}
.lista__fila .boton{flex:1 0 auto}
.lista__ok{display:flex;gap:10px;align-items:center;margin-top:12px;font-size:14px;color:var(--text-3)}
.lista__ok input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--boton)}
.lista__estado{margin-top:10px;font-size:14px;min-height:1.4em}
.lista__estado.ok{color:var(--cian)}
.lista__estado.error{color:#FF8A80}

/* ───────── FAQ ───────── */
.faq .seccion__titulo{margin-bottom:14px}
.faq__intro{color:var(--text-3);font-size:16px;line-height:25px;max-width:340px}
.faq__intro a{color:var(--text-2);text-underline-offset:3px}
.faq__filtros{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 28px}
.faq__filtro{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--text-3);font:inherit;font-size:14px;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s}
.faq__filtro:hover{color:var(--text)}
.faq__filtro[aria-pressed="true"]{background:var(--boton);border-color:var(--boton);color:var(--bg);font-weight:510}
.faq__lista{display:grid;gap:8px}
.faq details{border-radius:14px;background:var(--bg-2);border:1px solid var(--line);transition:border-color .2s,background-color .2s}
.faq details:hover{border-color:var(--line-3)}
.faq details[open]{background:var(--panel);border-color:var(--line-3)}
.faq details[hidden]{display:none}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:18px 18px 18px 20px;font-weight:510;font-size:16px;line-height:23px;letter-spacing:-.011em}
.faq summary::-webkit-details-marker{display:none}
.faq__n{flex:none;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;color:var(--text-4);font-weight:400;width:20px}
.faq__q{flex:1}
.faq__mas{flex:none;width:28px;height:28px;border-radius:50%;background:var(--raise);border:1px solid var(--line);position:relative;transition:transform .25s ease,background-color .2s}
.faq__mas::before,.faq__mas::after{content:"";position:absolute;inset:0;margin:auto;width:10px;height:1.5px;background:var(--text-2);border-radius:1px}
.faq__mas::after{transform:rotate(90deg)}
.faq details[open] .faq__mas{transform:rotate(45deg);background:var(--cian)}
.faq details[open] .faq__mas::before,.faq details[open] .faq__mas::after{background:var(--hondo)}
.faq__r{padding:0 64px 20px 56px}
.faq__r p{color:var(--text-3);font-size:15px;line-height:24px;max-width:600px}
/* Apertura suave donde el navegador lo permite */
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:hidden;transition:block-size .3s ease,content-visibility .3s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}
@media (max-width:639px){
  .faq__r{padding:0 18px 18px 48px}
  .faq summary{padding:16px 14px 16px 16px;gap:12px;font-size:15px}
}

/* ───────── CTA final ───────── */
.final{padding-top:160px;padding-bottom:128px;text-align:center}
.final h2{font-weight:640;font-size:52px;line-height:54px;letter-spacing:-.035em}
.final .hero__acciones{margin-top:28px}

/* ───────── Pie ───────── */
.pie{border-top:1px solid var(--line)}
.pie__in{padding-top:32px;padding-bottom:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px}
.pie__links{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px}
.pie__links a{color:var(--text-3);text-decoration:none}
.pie__links a:hover{color:var(--text)}
.pie__legal{padding-bottom:36px;font-size:12px;line-height:18px;color:var(--text-4)}

.aviso{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:80;max-width:calc(100% - 32px);padding:10px 16px;border-radius:999px;
  background:var(--boton);color:var(--bg);font-size:14px;font-weight:510;box-shadow:0 20px 50px -10px rgba(0,0,0,.8)}

/* ───────── Movimiento ───────── */
@media (prefers-reduced-motion:no-preference){
  .js .hero__titulo .seleccion::after{transform-origin:left;transform:scaleX(0);animation:marca .45s cubic-bezier(.6,0,.2,1) .35s forwards}
  .js .hero__titulo .seleccion::before{opacity:0;animation:aparece .2s ease .75s forwards}
  /* ventana de Claude: las tareas se marcan una a una y luego sale el resultado */
  .js [data-terminal] .t-pasos li{color:var(--text-3)}
  .js [data-terminal] .t-pasos svg{opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .25s ease}
  .js [data-terminal] .t-pasos li.ok{color:var(--text-2)}
  .js [data-terminal] .t-pasos li.ok svg{opacity:1;transform:none}
  .js [data-terminal] .t-fin,.js [data-terminal] .t-ficheros li{opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .3s ease}
  .js [data-terminal].hecho .t-fin,.js [data-terminal].hecho .t-ficheros li{opacity:1;transform:none}
  .js [data-terminal].hecho .t-ficheros li:nth-child(2){transition-delay:.12s}
  .js [data-terminal].hecho .t-ficheros li:nth-child(3){transition-delay:.24s}
  .js .claude__punto{animation:latido 1.2s ease-in-out infinite}
  .js [data-terminal].hecho .claude__punto{animation:none}
  /* tarjetas de los pasos */
  .js .fig--tema .fig__caret{opacity:1;animation:parpadea 1s steps(1) infinite}
  .js .fig--hace li{opacity:.35;transition:opacity .3s ease}
  .js .fig--hace li::before{background:none;border-color:var(--line-3);transition:border-color .3s,background .3s}
  .js .fig--hace li.ok{opacity:1}
  .js .fig--hace li.ok::before{border-color:var(--cian);background:radial-gradient(circle,var(--cian) 0 2.5px,transparent 3px)}
  .js .fig--hace .fig__barra i{transform:scaleX(var(--p,0));transition:transform .5s ease}
  .js .fig--sube li,.js .fig--sube img{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
  .js .fig--sube.ve img,.js .fig--sube.ve li{opacity:1;transform:none}
  .js .fig--sube.ve li:nth-child(1){transition-delay:.25s}
  .js .fig--sube.ve li:nth-child(2){transition-delay:.45s}
  .js .fig--sube.ve li:nth-child(3){transition-delay:.65s}
}
@keyframes marca{to{transform:scaleX(1)}}
@keyframes aparece{to{opacity:1}}
@keyframes parpadea{50%{opacity:0}}
@keyframes latido{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ───────── Tablet ───────── */
@media (min-width:640px){
  :root{--margen:28px}
  .ejemplos{grid-template-columns:repeat(4,1fr);gap:20px}
  .pasos{grid-template-columns:repeat(3,1fr);gap:24px}
  /* En escritorio, como antes: la animación arriba y el texto debajo (en móvil, al revés) */
  .paso{display:flex;flex-direction:column}
  .paso .fig{order:-1;margin:0 0 18px}
  .escena{height:500px}
  .largo{display:inline}
  .claude__tareas,.t-ficheros{max-width:calc(100% - 120px)}
  .claude__cuerpo{font-size:14px;line-height:21px;padding:18px 16px 20px}
  .escena__movil{width:230px}
  .tarjeta{padding:32px 28px}
}
/* ───────── Escritorio: texto | escena, todo en la primera pantalla ───────── */
@media (min-width:860px){
  .cabecera__in{height:72px}
  .hero__titulo{font-size:clamp(36px,4.3vw,56px)}
  .solo-movil{display:none}
  .hero .hero__acciones .boton{flex:0 0 auto;height:48px;padding:0 24px;font-size:16px}
  .nav{display:flex}
  .cabecera .boton--mini{margin-left:12px}
  .precio{grid-template-columns:1fr minmax(420px,560px);gap:64px;align-items:start}
  .resultados{padding-top:48px}
  .cifras{grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
  .cifras li,.cifras li:first-child{grid-column:auto;border-bottom:0;padding:32px 0 32px 40px}
  .cifras li:first-child{padding-left:0}
  .cifras li+li{border-left:1px solid var(--line)}
  .faq{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;align-items:start}
  .faq__cabeza{position:sticky;top:110px}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:40px;min-height:clamp(560px,calc(100svh - 72px),860px);padding-top:24px;padding-bottom:24px}
  .escena{height:min(600px,calc(100svh - 150px))}
  .escena__movil{height:88%;width:auto;bottom:0}
  .claude{top:0;width:calc(100% - 150px)}
  .claude__yo{margin-right:130px;max-width:none}
}
/* La ventana de Claude solo cuando hay sitio; por debajo, móvil centrado con los dos globos */
@media (min-width:1100px){
  .escena .claude{display:block}
  .globo{display:none}
  .escena__movil{left:auto;right:0;transform:none}
}
@media (min-width:1024px){

  .hero__sub{font-size:18px;line-height:28px;max-width:480px;margin-top:24px}
  .hero__acciones{margin-top:32px}
  .escena__movil{border-radius:36px;padding:7px}
  .escena__movil video{border-radius:29px}
  .claude__tareas,.t-ficheros{max-width:calc(100% - 130px)}
  .cifras b,.cifras li:first-child b{font-size:64px;line-height:68px}
  .cifras span{font-size:16px}
  .tarjeta{padding:36px 36px 32px}
  .tarjeta__precio>span{font-size:64px;line-height:64px}
  .seccion{padding-top:160px}
  .seccion__titulo{font-size:48px;line-height:52px;margin-bottom:56px}
  .ejemplos{gap:24px}
  .ejemplo h3{font-size:17px;margin-top:16px}
  .final{padding-top:200px;padding-bottom:160px}
  .final h2{font-size:80px;line-height:84px}
}

/* ───────── Páginas legales ───────── */
.legal{max-width:760px;margin:0 auto;padding:56px var(--margen) 96px}
.legal__volver{display:inline-flex;gap:6px;font-size:13px;color:var(--text-3);text-decoration:none;margin-bottom:28px}
.legal__volver:hover{color:var(--text)}
.legal__marca{display:inline-block;margin-bottom:40px}
.legal h1{font-size:40px;line-height:44px;letter-spacing:-.022em}
.legal__fecha{margin-top:10px;color:var(--text-3);font-size:13px}
.legal__borrador{margin-top:24px;padding:12px 16px;border-radius:12px;border:1px dashed var(--cian);color:var(--cian);font-size:14px;line-height:21px}
.legal h2{font-size:20px;line-height:28px;margin-top:44px;letter-spacing:-.015em}
.legal p,.legal li{color:var(--text-3);margin-top:12px;max-width:42em;font-size:15px;line-height:24px}
.legal ul{padding-left:20px;list-style:disc}
.legal li{margin-top:6px}
.legal b{color:var(--text);font-weight:510}
.legal a{color:var(--text)}
.legal ol{padding-left:20px;list-style:decimal}
.legal code{font-size:.9em;color:var(--text)}
@media print{
  html,body{background:#fff!important;color:#111!important}
  .legal{padding:0;max-width:none}
  .legal__volver,.legal__borrador,.pie{display:none}
  .legal h1,.legal h2,.legal b,.legal a,.legal code,.legal .marca{color:#111!important}
  .legal p,.legal li,.legal__fecha{color:#333!important;font-size:11pt;line-height:1.45}
  .legal h2{margin-top:22px;break-after:avoid}
}
.hueco{color:var(--cian);font-weight:590}