/* ClipAgent · portada
   Solo la carga index.html; las demás páginas siguen con estilos.css.
   Un color, un significado:
   morado = marca, botones y el clip que sale de ClipAgent · verde = gratis, listo y nota alta · rojo = grabando y cuenta atrás.
   Los tres juntos, solo en la franja de arriba.
   Montserrat grita (titulares, precios, botones), Geist habla (texto). La mono, solo en el registro de la app.
   Cuerpos de texto, siete escalones: 12 · 13 · 14 · 15 · 16 · 18 · 20.
   Radios: 6 etiquetas · 12 controles, cupón y ventanas de la app · 18 tarjetas y clips. */

/* letras de reserva con la misma anchura que las buenas: nada salta cuando llegan Montserrat y Geist */
@font-face{font-family:"Grito Reserva";src:local("Arial Black"),local("Arial-Black");size-adjust:96%}
@font-face{font-family:"Geist Reserva";src:local("Arial");size-adjust:101%}

:root{
  --bg:#101012;--bg2:#17171a;--bg3:#141417;--ink:#fff;--line:#2a2a30;--borde:#33333b;
  --tw:#a970ff;--yt:#ff3b3b;--kk:#53fc18;
  --marca:var(--tw);--directo:var(--yt);--gratis:var(--kk);
  --txt2:#a9a9b3;--txt3:#8a8a94;
  --tri:linear-gradient(90deg,var(--tw) 0 33.34%,var(--yt) 33.34% 66.67%,var(--kk) 66.67%);
  --r-s:6px;--r-m:12px;--r-l:18px;
  --sombra:0 24px 48px -24px rgba(0,0,0,.8);
  --pad:clamp(16px,4vw,40px);
  --sans:Geist,"Geist Reserva",system-ui,sans-serif;
  --grito:Montserrat,"Grito Reserva",system-ui,sans-serif;
  --datos:"Geist Mono",ui-monospace,monospace;
  --sale:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{color-scheme:dark;scrollbar-color:#2a2a30 #101012;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding-top:3px}
::selection{background:var(--tw);color:#101012}
img,video{display:block;max-width:100%;height:auto}
input{caret-color:var(--kk)}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--tw);outline-offset:3px;border-radius:var(--r-s)}
.caja{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.salto{position:absolute;left:-999px;top:8px;z-index:40;padding:10px 14px;border-radius:var(--r-s);background:var(--tw);color:#101012;font-weight:600}
.salto:focus{left:8px}

/* franja tricolor de la marca, arriba del todo */
.firma{position:fixed;inset:0 0 auto;z-index:30;height:3px;background:var(--tri);pointer-events:none}

/* navegación */
.nav{position:sticky;top:3px;z-index:10;background:rgba(16,16,18,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:20px;height:64px}
.marca{display:flex;align-items:center;min-height:44px;margin-right:auto;font:800 18px var(--grito);letter-spacing:-.02em}
.marca img{margin-right:8px}
.marca span{color:var(--marca)}
.nav nav{display:flex;gap:4px;font-size:14px;font-weight:500;color:var(--txt2)}
.nav nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-s);transition:color .15s ease}
.nav nav a:hover{color:#fff}

/* botón: morado de la marca, liso; variante oscura para lo secundario */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border:0;border-radius:var(--r-m);background:var(--tw);color:#101012;font:800 15px var(--grito);letter-spacing:-.01em;white-space:nowrap;cursor:pointer;touch-action:manipulation;box-shadow:inset 0 -2px 0 rgba(16,16,18,.22);transition:background-color .15s ease,transform .1s ease}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:default}
.btn-s{min-height:44px;padding:0 16px;font-size:14px}
.btn-2{background:#1d1d22;color:#fff;box-shadow:inset 0 0 0 1px var(--borde)}
/* el botón del menú va en oscuro mientras se ve el cupón de la cabecera; al pasarlo de largo, toma el morado */
.nav .btn{background:#1d1d22;color:#fff;box-shadow:inset 0 0 0 1px var(--borde);transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .1s ease}
.nav.pasado .btn{background:var(--tw);color:#101012;box-shadow:inset 0 -2px 0 rgba(16,16,18,.22)}

/* tipografía: titulares en mayúsculas, como los subtítulos de los clips */
h1,h2{font-family:var(--grito);text-transform:uppercase;text-wrap:balance}
h1{margin:0 0 20px;font-weight:900;font-size:clamp(44px,5.5vw,70px);line-height:.94;letter-spacing:-.035em}
h2{margin:0 0 clamp(24px,3vw,40px);font-weight:900;font-size:clamp(32px,4.2vw,56px);line-height:.95;letter-spacing:-.03em}
h1 .on,h2 .on{color:var(--marca)}
h3{margin:0 0 8px;font-weight:600;font-size:18px;letter-spacing:-.01em}
.bloque{padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(56px,7vw,96px)}
.oscuro{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.mas{color:#fff;font-weight:500;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--tw);text-decoration-thickness:1.5px;text-underline-offset:4px;padding-block:13px;transition:color .15s ease}
.mas:hover{color:var(--tw)}
.contacto{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;padding-block:14px}
.contacto:hover{color:#fff}
/* el relleno vertical solo agranda la zona de toque; con teclado se recoge para que el anillo abrace la palabra */
.mas:focus-visible,.contacto:focus-visible{padding-block:2px}

/* ---------- cabecera ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,64px);align-items:center;padding-top:clamp(36px,5vw,72px);padding-bottom:clamp(44px,6vw,80px)}
h1 span{display:inline-block;transition:color .12s linear}
.sub{margin:0 0 28px;max-width:46ch;font-size:18px;color:var(--txt2);text-wrap:pretty}

/* la oferta y el botón son una sola pieza: un cupón con su número grande, su línea de troquel y sus dos muescas */
.cta{display:inline-flex;align-items:stretch;max-width:100%;border-radius:var(--r-m);overflow:hidden;color:#101012;box-shadow:var(--sombra);transition:transform .15s var(--sale)}
.cta:active{transform:translateY(1px)}
.cta-g{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:10px;padding:10px 24px 10px 16px;background:var(--gratis);box-shadow:inset 0 -2px 0 rgba(16,16,18,.18)}
.cta-n{grid-row:1/3;font:900 64px/.8 var(--grito);letter-spacing:-.05em}
.cta-g strong{align-self:end;font:900 27px/1 var(--grito);letter-spacing:-.025em;text-transform:uppercase;white-space:nowrap}
.cta-g small{align-self:start;margin-top:4px;font-size:13px;font-weight:600;line-height:1.2}
.cta-b{position:relative;display:flex;align-items:center;gap:10px;padding:0 24px 0 26px;background:var(--tw);font:800 16px var(--grito);letter-spacing:-.01em;white-space:nowrap;box-shadow:inset 0 -2px 0 rgba(16,16,18,.22);transition:background-color .15s ease}
.cta-b:before{content:"";position:absolute;left:-1px;top:12px;bottom:12px;width:3px;background:radial-gradient(circle,rgba(16,16,18,.55) 1.5px,transparent 1.6px) 0 0/3px 8px repeat-y}
.cta-b:after{content:"";position:absolute;left:-8px;top:0;bottom:0;width:16px;background:radial-gradient(circle at 50% 0,var(--bg) 7px,transparent 7.5px),radial-gradient(circle at 50% 100%,var(--bg) 7px,transparent 7.5px);pointer-events:none}
.cta svg{flex:none;transition:transform .15s var(--sale)}
@media(hover:hover) and (pointer:fine){
  .btn:hover,.nav.pasado .btn:hover{background:#b98bff}
  .btn-2:hover,.nav .btn:hover,.pausa:hover{background:#26262c}
  .cta:hover{transform:translateY(-1px)}
  .cta:hover .cta-b{background:#b98bff}
  .cta:hover svg{transform:translateX(3px)}
}
.nota{margin:16px 0 0;font-size:15px;color:var(--txt2);text-wrap:pretty}
.nota b{color:#fff;font-weight:600}
.req{display:block;margin-top:2px;font-size:14px}

/* tres clips reales, rectos y en fila; marco neutro: el único acento es la nota verde.
   Los clips llevan una barra de avance pegada arriba; se recorta (12 px de 960) para que el póster quede limpio */
.feed{margin:0}
.feed-in{display:grid;grid-template-columns:1fr 1.16fr 1fr;gap:clamp(8px,1.4vw,16px);align-items:center}
.feed figure{position:relative;margin:0;border:1px solid var(--borde);border-radius:var(--r-l);overflow:hidden;background:#000;box-shadow:var(--sombra)}
.feed video{width:100%;aspect-ratio:540/948;object-fit:cover;object-position:50% 100%}
.feed figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.punt{position:absolute;right:8px;bottom:8px;padding:3px 7px;border-radius:var(--r-s);background:rgba(0,0,0,.78);color:#fff;font:600 12px/1.5 var(--sans);white-space:nowrap}
.punt.alta{background:var(--gratis);color:#101012}
/* pie de imagen, uno solo para toda la página: 13 px en gris terciario */
.feed-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.feed-pie p,.vista p{margin:0;font-size:13px;line-height:1.5;color:var(--txt3)}
.pausa{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#1d1d22;box-shadow:inset 0 0 0 1px var(--borde);color:#fff;cursor:pointer;touch-action:manipulation;transition:background-color .15s ease}
.pausa[hidden]{display:none}
.pausa .i-play,.pausa[aria-pressed=true] .i-pausa{display:none}
.pausa[aria-pressed=true] .i-play{display:block}

/* a dónde va el clip: una línea, sin colores */
.plataformas{margin:0;padding:18px var(--pad);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;font-size:15px;color:var(--txt2);text-wrap:balance}
.plataformas b{font-weight:600;color:#fff}

/* ---------- del directo al vertical ----------
   el original, en marco neutro; lo que sale de ClipAgent, con el marco morado del logo.
   Cada nota sale del punto del clip que explica. */
.ba{--hueco:clamp(16px,2.4vw,28px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px) minmax(0,230px);gap:var(--hueco);align-items:start}
.ba figure{position:relative;margin:0}
.ba img{width:100%;border-radius:var(--r-l);border:1px solid var(--borde)}
.ba .clip img{border:2px solid var(--tw);aspect-ratio:1080/1896;object-fit:cover;object-position:50% 100%}
.tag{position:absolute;left:10px;top:10px;padding:3px 8px;border-radius:var(--r-s);background:rgba(0,0,0,.78);font:600 12px/1.5 var(--sans)}
.ba .clip .punt{right:12px;bottom:12px}
.partes{position:relative;align-self:stretch;margin:0;padding:0;list-style:none}
.partes li{position:absolute;left:0;right:0;transform:translateY(-50%);padding-left:16px;font-size:14px;line-height:1.35;color:var(--txt2)}
.partes li:before{content:"";position:absolute;left:calc(-1*var(--hueco) - 1px);top:50%;width:calc(var(--hueco) + 7px);border-top:1.5px solid var(--tw)}
.partes li:after{content:"";position:absolute;left:calc(-1*var(--hueco) - 5px);top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--tw);box-shadow:0 0 0 2px var(--bg)}
.partes b{display:block;color:#fff;font-weight:600;font-size:16px}
.partes li:nth-child(1){top:30%}
.partes li:nth-child(2){top:57%}
.partes li:nth-child(3){top:78%}
.partes li:nth-child(4){top:calc(100% - 24px)}
.partes li:nth-child(4):before{left:calc(-1*var(--hueco) - 12px);width:calc(var(--hueco) + 18px)}
.partes li:nth-child(4):after{content:none}

/* ---------- la app trabajando ---------- */
.demo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.demo h2{margin-bottom:24px}
.log{margin:0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-m);background:#0b0b0d;font:400 13px/1.8 var(--datos);color:var(--txt2);overflow-wrap:anywhere}
.log p{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;margin:0;text-wrap:balance}
.log time{color:var(--txt3);font-variant-numeric:tabular-nums}
.log .ok{color:var(--gratis)}.log .no{color:#ff8a82}
.datos{margin:20px 0 0;max-width:52ch;font-size:16px;color:var(--txt2);text-wrap:pretty}
.datos b{color:#fff;font-weight:600}
/* la tarjeta de la app entera, sobre el negro de la propia app */
.captura{margin:0;padding:clamp(6px,1vw,12px);border-radius:var(--r-m);overflow:hidden;border:1px solid var(--borde);box-shadow:var(--sombra);background:#000}
.captura img{width:100%}

/* ---------- guía ----------
   móvil y tableta: la captura va arriba y se queda a la vista mientras se tocan los pasos.
   Escritorio: los pasos en columna a la izquierda y la captura a la derecha; todo cabe en una pantalla.
   Todas las capturas van a 16:9, cada una anclada a su parte útil; en móvil, un recorte ampliado que se lee. */
.guia{display:flex;flex-direction:column}
.pasos{display:flex;flex-direction:column;counter-reset:p}
.pasos button{position:relative;display:block;width:100%;min-height:64px;padding:18px 12px 18px 52px;border:0;border-top:1px solid var(--line);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;touch-action:manipulation;counter-increment:p}
.pasos button:last-child{border-bottom:1px solid var(--line)}
.pasos button:before{content:counter(p);position:absolute;left:8px;top:17px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#1d1d22;font:800 13px var(--grito);color:var(--txt2);transition:background-color .15s ease,color .15s ease}
.pasos b{display:block;font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--txt2);transition:color .15s ease}
.pasos span{display:none;margin-top:4px;color:var(--txt2);font-size:15px}
.pasos [aria-selected=true] b,.pasos button:hover b{color:#fff}
.pasos [aria-selected=true]:before{background:var(--tw);color:#101012}
.pasos [aria-selected=true] span{display:block}
.pasos button:after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--tw);transform:scaleX(0);transform-origin:0 50%}
.pasos.auto [aria-selected=true]:after{animation:llena 4.6s linear forwards}
@keyframes llena{to{transform:scaleX(1)}}
.vistas{container-type:inline-size}
.vista picture{display:block}
.vista img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-m);border:1px solid var(--borde);box-shadow:var(--sombra)}
#v1 img{object-position:50% 0}
#v2 img{object-position:50% 100%}
.vista:focus-visible{outline-offset:6px;border-radius:var(--r-m)}
.vista p{margin-top:12px}
/* el clip final ocupa el mismo alto que las capturas: nada salta al cambiar de paso */
.vista.vertical img{width:auto;height:calc(100cqw*9/16);aspect-ratio:1080/1896;object-position:50% 100%;margin:0 auto}
.vista.vertical p{text-align:center}
#guia{overflow-x:clip}
.aguia{margin:clamp(20px,3vw,28px) 0 0;color:var(--txt2)}
.pasos:not(.auto) [aria-selected=true]:after{transform:scaleX(1)}
html:not(.js) .pasos span{display:block}
html:not(.js) .pasos.auto [aria-selected=true]:after{animation:none;transform:scaleX(1)}
@media(min-width:961px){
  .guia{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(32px,4vw,56px);align-items:start}
  .pasos button{min-height:0;padding:16px 8px 16px 44px}
  .pasos button:before{left:0;top:15px}
  .pasos b{font-size:16px}
  .pasos span{display:block;font-size:14px;line-height:1.45;color:var(--txt3)}
  .pasos [aria-selected=true] span{color:var(--txt2)}
  .vista.vertical img{border-radius:var(--r-l)}
  /* el 16:9 se centra frente al clip: la pareja se lee como antes y después */
  .ba>figure:first-child{align-self:center}
}

/* ---------- precio y lista ---------- */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:28px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg3)}
.plan h3{margin:0;font:800 20px var(--grito);letter-spacing:-.02em;color:#fff}
.para{margin:4px 0 20px;font-size:14px;color:var(--txt2)}
.precio{margin:0;font:900 56px/1 var(--grito);letter-spacing:-.035em;color:#fff}
.precio small{margin-left:6px;font:600 16px var(--sans);letter-spacing:0;color:var(--txt2)}
.anual{margin:8px 0 20px;font-size:13px;color:var(--txt3)}
.plan ul{flex:1;margin:0 0 24px;padding:0;list-style:none}
.plan li{padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:#e4e4ea}
.plan li b{font-weight:700;color:#fff}
.plan .btn{width:100%}
.pago{margin:12px 0 0;font-size:13px;line-height:1.4;text-align:center;text-wrap:balance;color:var(--txt2)}
.plan.prueba{border:2px solid var(--gratis);padding:27px}
.plan.prueba .pago{color:var(--gratis);font-weight:600}
.sello{display:inline-block;padding:4px 9px 3px;border-radius:var(--r-s);background:var(--gratis);color:#101012;font:900 13px/1.1 var(--grito);letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap}
.plan .sello{position:absolute;right:20px;top:-13px;margin:0;font-size:14px}
/* garantías: una línea de texto, sin iconos */
.garantias{display:flex;flex-wrap:wrap;gap:4px 0;margin:24px 0 0;padding:0;list-style:none;font-size:15px;color:#e4e4ea}
.garantias li+li:before{content:"·";margin:0 10px;color:var(--txt3)}
.propia{margin:14px 0 0;max-width:76ch;font-size:15px;color:var(--txt2);text-wrap:pretty}

/* el destino de todos los botones: un panel propio que se marca en morado al llegar */
.apunta{display:grid;grid-template-columns:1fr minmax(300px,520px);gap:clamp(20px,4vw,64px);align-items:center;margin-top:clamp(32px,4vw,48px);padding:clamp(20px,3vw,40px);border:1px solid var(--line);border-radius:var(--r-l);background:var(--bg);transition:border-color .3s ease}
#lista:target{border-color:var(--tw)}
.gta{margin:0;font:900 clamp(24px,2.4vw,32px)/1.08 var(--grito);letter-spacing:-.025em;text-transform:uppercase;color:#fff}
.gta b{display:block;color:var(--directo);font-weight:900;font-variant-numeric:tabular-nums}
form label{display:block;margin-bottom:12px;font-size:15px;font-weight:500;color:#e4e4ea}
#plan-elegido{display:block;margin-top:2px;color:var(--gratis);font-weight:600}
#plan-elegido:empty{display:none}
#plan-elegido.de-pago{color:#fff}
.campo{display:flex;flex-wrap:wrap;gap:8px}
input[type=email]{flex:1 1 200px;min-height:48px;padding:0 16px;border:1px solid #6b6b76;border-radius:var(--r-m);background:#0b0b0d;color:#fff;font:500 16px var(--sans);transition:border-color .15s ease}
input[type=email]:hover{border-color:var(--txt3)}
input[type=email]:focus{border-color:var(--tw)}
input[type=email]:focus-visible{outline-offset:1px;border-radius:var(--r-m)}
input[type=email]::placeholder{color:var(--txt3)}
input[type=email][aria-invalid=true]{border-color:#ff8a82}
.campo .btn{flex:0 1 auto}
#aviso{min-height:22px;margin:12px 0 0;font-size:14px;color:var(--txt2)}
#aviso:empty{min-height:0;margin:0}
#aviso:focus{outline:0}
#aviso.ok{color:var(--gratis)}#aviso.mal{color:#ff8a82}
/* apuntado: el formulario se recoge y queda solo la confirmación, en grande */
.hecho label,.hecho .campo{display:none}
.hecho #aviso{margin-top:0;font-size:18px;font-weight:600;line-height:1.45}
.legal{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--txt3)}

/* ---------- dudas ---------- */
.dudas{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(20px,4vw,64px)}
.dudas-cab{align-self:start}
.dudas h2{margin-bottom:16px}
.otra{margin:0;font-size:15px;color:var(--txt2)}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 0;font-weight:600;font-size:18px;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary:after{content:"";flex:none;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23a9a9b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .2s var(--sale)}
details[open] summary:after{transform:rotate(180deg)}
details p{margin:0 0 20px;max-width:62ch;color:var(--txt2)}

/* ---------- pie: dos líneas ---------- */
.pie{padding:32px 0 40px;border-top:1px solid var(--line);font-size:13px;color:var(--txt3)}
.pie-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pie .marca{margin:0;color:#fff}
.pie nav{display:flex;flex-wrap:wrap;gap:0 20px}
.pie nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--txt2);transition:color .15s ease}
.pie nav a:hover{color:#fff}
.pie-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin:16px 0 0;color:var(--txt3)}
.pie-legal span:first-child{max-width:90ch}

/* barra fija en el móvil */
.barra-gratis{display:none}

/* ---------- movimiento: solo lo que explica algo ---------- */
.js [data-rev]{opacity:0;transition:opacity .3s ease-out}
.js [data-rev].vis{opacity:1}
.js .hero-txt{animation:aparece .4s var(--sale) both}
.js .feed{animation:funde .4s var(--sale) .08s both}
@keyframes aparece{from{opacity:0;transform:translateY(12px)}}
@keyframes funde{from{opacity:0}}
.js .log p{opacity:0;transition:opacity .35s ease-out}
.js .log p.vis{opacity:1}
.vista:not([hidden]){animation:funde .3s ease-out}

/* ---------- medidas ---------- */
@media(max-width:1060px){
  .plan{padding:22px}
  .plan.prueba{padding:21px}
  .precio{font-size:44px}
  .planes{gap:14px}
}
@media(max-width:960px){
  .nav nav a:not(.nav-precio){display:none}
  .hero{grid-template-columns:minmax(0,1fr)}
  .feed{width:100%;margin:8px 0 0}
  .ba{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
  .ba>figure:first-child{grid-column:1/-1}
  .demo{grid-template-columns:1fr}
  .vistas{order:-1;margin-bottom:8px}
  .apunta,.dudas{grid-template-columns:1fr}
  .acceso h2{margin-bottom:36px}
}
/* la captura se queda fija bajo el menú mientras se recorren los pasos; solo en pantallas verticales:
   en una ventana ancha y baja taparía los pasos */
@media(max-width:960px) and (min-height:600px) and (max-aspect-ratio:4/5){
  .vistas{position:sticky;top:67px;z-index:2;margin:0 calc(var(--pad)*-1) 8px;padding:10px var(--pad);background:var(--bg);border-bottom:1px solid var(--line)}
  .vista p{margin-top:8px}
  .pasos button:first-child{border-top:0}
  .pasos button:last-child{border-bottom:0}
  /* con teclado, el paso enfocado no queda debajo de la captura fija */
  .pasos button{scroll-margin-top:calc(107px + 56.25vw)}
}
@media(min-width:961px){
  .nav-precio{display:none!important}
  .dudas-cab{position:sticky;top:96px}
}
/* pantalla ancha: los tres clips, que son la prueba, ganan sitio frente al titular */
@media(min-width:1181px){
  .hero{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
}
/* portátil pequeño: el cupón cabe entero en su columna (sin flecha y con menos relleno) y el antes/después se equilibra */
@media(min-width:961px) and (max-width:1180px){
  .cta-g{padding:10px 18px 10px 14px}
  .cta-b{padding:0 18px 0 22px;font-size:15px}
  .cta svg{display:none}
  .ba{grid-template-columns:minmax(0,1fr) minmax(0,240px) minmax(0,210px)}
}
@media(min-width:561px) and (max-width:960px){
  h1{font-size:clamp(52px,8.4vw,76px)}
  h2{font-size:clamp(40px,5.6vw,52px)}
}
@media(min-width:761px) and (max-width:960px){
  .pie-in{flex-direction:column;align-items:flex-start}
}
/* portátil pequeño: la captura de la app no cabe legible al lado del texto y pasa debajo */
@media(min-width:961px) and (max-width:1100px){
  .demo{grid-template-columns:minmax(0,1fr)}
  .log{max-width:720px}
  .captura{max-width:860px}
}
/* en tarjetas estrechas la frase y la nota del Básico ocupan dos líneas: las tres reservan el mismo alto y precios y botones quedan alineados */
@media(min-width:761px) and (max-width:1160px){
  .pago{min-height:38px}
  .para{min-height:45px}
}
@media(max-width:760px){
  html{scroll-padding-bottom:84px}
  .nav .btn{display:none}
  /* «Precio» cierra con la retícula: su relleno queda fuera del margen */
  .nav-precio{margin-right:-12px}
  .plataformas{font-size:14px}
  /* el recorte del paso 1 se funde por la derecha: la ventana sigue */
  #v1 picture{position:relative}
  #v1 picture:after{content:"";position:absolute;inset:1px 1px 1px auto;width:56px;border-radius:0 11px 11px 0;background:linear-gradient(90deg,transparent,#000 90%);pointer-events:none}
  /* planes compactos: nombre a la izquierda y precio a la derecha, en la misma fila */
  .planes{grid-template-columns:minmax(0,1fr);gap:16px}
  .plan{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:start;padding:20px}
  .plan.prueba{padding:27px 19px 19px}
  .plan h3,.plan .para{grid-column:1}
  .plan .para{margin-bottom:0}
  .plan .precio{grid-column:2;grid-row:1/span 2;align-self:center;font-size:40px}
  .plan .anual,.plan ul,.plan .btn,.plan .pago{grid-column:1/-1}
  .plan .anual{margin:10px 0 14px}
  .plan ul{margin-bottom:16px}
  .plan li{padding:8px 0}
  .plan .sello{right:auto;left:19px}
  .barra-gratis{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);transform:translateY(110%);visibility:hidden;transition:transform .25s var(--sale),visibility 0s .25s}
  .barra-gratis.ver{transform:none;visibility:visible;transition-delay:0s}
  .barra-gratis p{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;line-height:1.2}
  .barra-gratis p span{font-size:13px;font-weight:500;color:var(--txt2)}
  .barra-gratis .btn{flex:none}
  body{padding-bottom:76px}
  .pie nav{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;width:100%}
}
@media(max-width:640px){
  /* garantías en dos columnas: ninguna línea empieza con un punto suelto */
  .garantias{display:grid;grid-template-columns:auto auto;justify-content:start;gap:6px 24px}
  .garantias li+li:before{content:none}
}
@media(max-width:560px){
  .hero{padding-top:24px}
  .sub{margin-bottom:20px;font-size:16px}
  .cta{display:flex;flex-direction:column;width:100%}
  .cta-g{padding:12px 18px 14px 16px;box-shadow:none}
  .cta-n{font-size:clamp(68px,21vw,84px)}
  .cta-g strong{font-size:clamp(26px,9.2vw,36px)}
  .cta-g small{font-size:14px}
  .cta-b{justify-content:center;min-height:56px}
  .cta-b:before{left:14px;right:14px;top:-1px;bottom:auto;width:auto;height:3px;background:radial-gradient(circle,rgba(16,16,18,.55) 1.5px,transparent 1.6px) 0 0/8px 3px repeat-x}
  .cta-b:after{left:0;right:0;top:-8px;bottom:auto;width:auto;height:16px;background:radial-gradient(circle at 0 50%,var(--bg) 7px,transparent 7.5px),radial-gradient(circle at 100% 50%,var(--bg) 7px,transparent 7.5px)}
  .nota{margin-top:12px}
  .feed{margin-top:0}
  .punt{right:6px;bottom:6px;padding:2px 6px}
  .ba{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  /* las cuatro notas, repartidas en la altura del clip y sin pisarse */
  .partes{display:flex;flex-direction:column;justify-content:space-between;padding:16px 0 2px}
  .partes li:nth-child(n){position:relative;top:auto;transform:none;padding-left:20px;font-size:13px}
  /* sin clip al lado al que apuntar, la guía se queda en su punto */
  .partes li:nth-child(n):before{left:2px;top:7px;width:7px;height:7px;border-top:0;border-radius:50%;background:var(--tw)}
  .partes li:after{content:none}
  .partes b{font-size:15px}
  /* la captura de la app se ve en el paso 3 de la guía, ampliada; aquí mandan el registro y los datos */
  .demo .captura{display:none}
  /* el paso abierto reserva dos líneas: nada salta mientras la guía avanza sola */
  .pasos [aria-selected=true] span{min-height:3.1em}
  .campo .btn{flex:1 1 100%}
}
@media(max-width:350px){
  h1{font-size:12vw}
  .garantias{grid-template-columns:minmax(0,1fr)}
  /* la barra en una sola línea de alto también a 320 */
  .barra-gratis{gap:8px;padding-inline:12px}
  .barra-gratis .btn{padding:0 12px;font-size:13px}
  .barra-gratis p span{font-size:12px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero-txt,.js .feed,.vista:not([hidden]){animation:none}
  .js [data-rev],.js .log p{opacity:1;transition:none}
  .pasos.auto [aria-selected=true]:after{animation:none}
  h1 span,.btn,.nav .btn,.cta,.cta svg,summary:after,.barra-gratis,.apunta{transition:none}
}