/* SKL Agency · sklagency.com. Fuente: fabrica/plantillas/agencia/sitio.css (lo copia «npm run fabrica -- agencia»). */
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:block;src:url(instrument-serif-latin.woff2) format("woff2")}
/* respaldo con las mismas medidas de Instrument Serif (82,7 % del ancho de Times): si un celular lento dibuja antes de tener la letra, el título ocupa lo mismo y nada salta */
@font-face{font-family:"Instrument Serif Respaldo";src:local("Times New Roman"),local("Liberation Serif"),local("Tinos");size-adjust:82.74%;ascent-override:119.65%;descent-override:37.47%;line-gap-override:0%}
:root{--bg:#07080A;--bg-2:#0D0F12;--bg-3:#14171B;--ink:#F4F4F1;--ink-2:#D2D6DA;--mute:#A0A6AD;--line:rgba(255,255,255,.12);--acc:#25E07A;--acc-ink:#03130A;--g1:#14B864;--g2:#2C5DA8;--g3:#E9B53D;
--c-verde:#1F6B4A;--c-rojo:#D2452B;--c-amarillo:#E9B53D;--c-azul:#2C5DA8;--ease:cubic-bezier(.2,.7,.2,1);
--f-display:"Instrument Serif","Instrument Serif Respaldo",Georgia,serif;--f-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:84px;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.62 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:var(--acc)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:.98;letter-spacing:-.018em;margin:0 0 .6rem}
h1,h2{text-wrap:balance}
h1{font-size:clamp(3rem,6.6vw,6.9rem)}
h2{font-size:clamp(2.4rem,5.2vw,4.6rem)}
h3{font-size:1.8rem}
p{margin:0 0 .9rem}
.acento{color:var(--acc)}
.contenedor{width:min(1220px,100% - 2.4rem);margin-inline:auto}
.salto{position:absolute;left:1rem;top:-4rem;background:var(--acc);color:var(--acc-ink);padding:.6rem 1rem;border-radius:8px;z-index:99;font-weight:700}.salto:focus{top:1rem}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:4px}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font:600 .75rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:1.3rem}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--acc);flex:none}
@media (max-width:420px){.eyebrow .lejos{display:none}}
.intro{font-size:clamp(1.06rem,1.45vw,1.24rem);color:var(--ink-2);max-width:40em}
.letra{font-size:.86rem;color:var(--mute)}
/* botones: suben y crecen la sombra (7.1) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:.85rem 1.5rem;border-radius:999px;background:var(--acc);color:var(--acc-ink);font:700 1rem/1.1 var(--f-body);text-decoration:none;border:1px solid var(--acc);transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px -16px rgba(37,224,122,.75)}
.btn:active{transform:translateY(-1px);transition-duration:.12s}
.btn svg{width:21px;height:21px;flex:none}
.btn-2{background:transparent;color:var(--ink);border-color:rgba(255,255,255,.28)}
.btn-2:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);box-shadow:none}
/* ---- barra superior: transparente sobre la portada, sólida al bajar ---- */
.top{position:sticky;top:0;z-index:40;background:rgba(7,8,10,.86);border-bottom:1px solid var(--line);transition:background .4s,border-color .4s}
@supports (backdrop-filter:blur(14px)){.top{background:rgba(7,8,10,.8);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}}
.js .top:not(.bajo){background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.top .contenedor{display:flex;align-items:center;gap:1rem;min-height:72px}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink);margin-right:auto;min-width:0}
.logo svg{width:36px;height:36px;flex:none}
.logo b{font:700 1.06rem/1 var(--f-body);letter-spacing:-.01em}
.logo small{display:block;font:500 .7rem/1.35 var(--f-body);color:var(--mute);letter-spacing:.05em}
.logo .skl{width:47px;height:35px;overflow:visible;transition:filter .45s var(--ease)}
.logo:hover .skl{filter:drop-shadow(0 0 10px rgba(37,224,122,.5))}
.logo .sep{width:1px;height:32px;flex:none;background:linear-gradient(transparent,rgba(255,255,255,.4),transparent)}
.logo .marca-t b{display:block;font:700 .82rem/1 var(--f-body);letter-spacing:.34em;text-transform:uppercase}
.logo .marca-t small{margin-top:5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav{display:flex;gap:1.8rem}
.nav a{position:relative;color:var(--ink-2);text-decoration:none;font-weight:500;font-size:.94rem;padding:.5rem 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:.2rem;height:1px;background:var(--acc);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover{color:var(--ink)}.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.top .btn{min-height:44px;padding:.55rem 1.15rem;font-size:.93rem}
@media (max-width:400px){.top .btn .txt{display:none}.top .btn{padding:.6rem;width:44px}}
/* ---- portada: el degradado sigue el cursor (efecto firma) ---- */
.hero{position:relative;isolation:isolate;overflow:clip;margin-top:-72px;padding:calc(72px + clamp(2.2rem,6vw,5rem)) 0 clamp(3.5rem,8vw,7rem)}
.degradado{position:absolute;top:-140px;bottom:-140px;left:-10%;right:-10%;z-index:-2;pointer-events:none;background:radial-gradient(circle 620px at 64% 34%,rgba(20,184,100,.95) 0%,rgba(20,184,100,.42) 32%,rgba(20,184,100,.12) 56%,transparent 72%),radial-gradient(circle 760px at 38% 64%,rgba(44,93,168,.9) 0%,rgba(44,93,168,.38) 34%,rgba(44,93,168,.1) 58%,transparent 74%),radial-gradient(circle 480px at 82% 68%,rgba(233,181,61,.8) 0%,rgba(233,181,61,.3) 34%,rgba(233,181,61,.08) 58%,transparent 74%);opacity:.72;transform:translate3d(var(--dx,0px),var(--dy,0px),0);will-change:transform}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,8,10,.25),transparent 30%,transparent 80%,var(--bg))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(300px,.78fr);gap:clamp(1.8rem,4.5vw,4.5rem);align-items:center}
.hero h1{margin-bottom:1.5rem}
.lead{font-size:clamp(1.08rem,1.55vw,1.3rem);color:var(--ink-2);max-width:31em;margin-bottom:2rem}
.acciones{display:flex;flex-wrap:wrap;gap:.8rem}
.sellos{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;padding:0;margin:1.8rem 0 0;font-size:.9rem;color:var(--mute)}
.sellos li{display:flex;align-items:center;gap:.5rem}.sellos li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.hero h1,.lead,.hero .acciones,.sellos{animation:entra 1s var(--ease) both}.lead{animation-delay:.1s}.hero .acciones{animation-delay:.2s}.sellos{animation-delay:.3s}
@keyframes entra{from{transform:translateY(26px)}to{transform:none}}
/* teléfono con el chat de ejemplo */
.telefono{position:relative;width:min(340px,100%);margin-inline:auto;border-radius:46px;padding:10px;background:linear-gradient(155deg,#33383e,#0b0c0e 60%);box-shadow:0 50px 100px -40px #000,0 0 0 1px rgba(255,255,255,.14),0 0 90px -24px rgba(37,224,122,.4)}
@media (hover:hover) and (pointer:fine){.telefono{animation:flota 8s ease-in-out infinite}}
@keyframes flota{50%{transform:translateY(-12px)}}
.pantalla{border-radius:37px;overflow:hidden;background:#0B1310}
.barra{display:flex;justify-content:space-between;align-items:center;padding:.55rem 1.4rem .2rem;font:600 .7rem/1 var(--f-body);color:#dfe7e3;background:#12302A}
.barra i{display:inline-block;width:16px;height:8px;border:1px solid #dfe7e3;border-radius:2px;position:relative}.barra i::after{content:"";position:absolute;inset:1px 3px 1px 1px;background:#dfe7e3;border-radius:1px}
.chat-top{display:flex;gap:.65rem;align-items:center;padding:.55rem .95rem .75rem;background:#12302A}
.chat-top .av{width:36px;height:36px;border-radius:50%;background:var(--c-amarillo);color:#13231C;display:grid;place-items:center;font-weight:800;flex:none}
.chat-top b{display:block;font-size:.9rem;line-height:1.2}.chat-top small{color:#9fd8b8;font-size:.72rem}
.mensajes{padding:.85rem .7rem;display:flex;flex-direction:column;gap:.45rem}
.b{max-width:88%;margin:0;padding:.5rem .72rem .6rem;border-radius:14px 14px 14px 4px;background:#1A2722;color:#EAF1EE;font-size:.8rem;line-height:1.42}
.b.yo{align-self:flex-end;border-radius:14px 14px 4px 14px;background:#155C3B}
.b time{display:block;text-align:right;font-size:.6rem;opacity:.62;margin-top:.15rem}
.b{animation:burbuja .6s var(--ease) both}.b:nth-child(2){animation-delay:.5s}.b:nth-child(3){animation-delay:1.1s}.b:nth-child(4){animation-delay:1.7s}
@keyframes burbuja{from{transform:translateY(12px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.resumen{margin:.1rem .7rem .85rem;padding:.65rem .78rem;border-radius:12px;border:1px dashed rgba(37,224,122,.5);background:rgba(37,224,122,.07);font-size:.74rem;animation:burbuja .6s var(--ease) 2.3s both}
.resumen b{display:block;margin-bottom:.35rem;color:var(--acc);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.resumen dl{display:grid;grid-template-columns:auto 1fr;gap:.1rem .7rem;margin:0}.resumen dt{color:#9DB8AC}.resumen dd{margin:0;color:#EAF1EE}
.nota-demo{font-size:.8rem;color:var(--mute);text-align:center;margin:1.2rem auto 0;max-width:30em}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero{padding-bottom:3rem}}
@media (max-width:560px){.acciones .btn{width:100%}}
/* ---- secciones ---- */
.seccion{position:relative;padding:clamp(4.5rem,10vw,9rem) 0}
.alt{background:var(--bg-2);border-block:1px solid var(--line)}
/* manifiesto: lo que pasa hoy */
.manifiesto{font-size:clamp(2.4rem,6vw,5.6rem);max-width:15em;margin-bottom:1.6rem}
.manifiesto span{color:var(--mute)}
.dolores{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:3rem}
.dolor{padding:1.8rem 1.8rem 0 0}
.dolor+.dolor{padding-left:1.8rem;border-left:1px solid var(--line)}
.dolor b{display:block;font:400 1.75rem/1.05 var(--f-display);margin-bottom:.6rem}
.dolor p{color:var(--mute);margin:0}
@media (max-width:860px){.dolores{grid-template-columns:1fr}.dolor,.dolor+.dolor{padding:1.5rem 0;border-left:0;border-bottom:1px solid var(--line)}}
/* servicios: filas que se invierten al pasar el mouse */
.filas{border-top:1px solid var(--line);margin-top:3rem}
.fila{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.2fr) 56px;gap:1.4rem;align-items:center;padding:2rem .4rem;border-bottom:1px solid var(--line);transition:background .45s var(--ease),color .45s var(--ease),padding .45s var(--ease)}
.fila .n{font:500 .8rem/1 var(--f-body);color:var(--acc);letter-spacing:.14em}
.fila h3{margin:0;font-size:clamp(2rem,3.4vw,3.1rem)}
.fila p{margin:0;color:var(--mute);transition:color .45s var(--ease)}
.fila .ic{width:46px;height:46px;color:var(--acc);justify-self:end;transition:color .45s var(--ease),transform .45s var(--ease)}
@media (hover:hover){.fila:hover{background:var(--ink);color:var(--bg);padding-inline:1.6rem}.fila:hover p{color:#3D4349}.fila:hover .n,.fila:hover .ic{color:#08743F}.fila:hover .ic{transform:rotate(-8deg) scale(1.08)}}
@media (max-width:860px){.fila{grid-template-columns:40px 1fr 40px;gap:.5rem 1rem;padding:1.6rem 0}.fila p{grid-column:2/4}.fila .ic{width:34px;height:34px;grid-row:1;grid-column:3}}
/* ejemplos: a la medida de cada negocio */
.adapta{list-style:none;padding:0;margin:3rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);counter-reset:a}
.adapta li{counter-increment:a;padding:1.4rem 1.4rem 1.5rem 0;border-bottom:1px solid var(--line)}
.adapta li:not(:nth-child(3n+1)){padding-left:1.4rem;border-left:1px solid var(--line)}
.adapta li::before{content:"0" counter(a);display:block;font:500 .75rem/1 var(--f-body);letter-spacing:.14em;color:var(--acc);margin-bottom:.8rem}
.adapta b{display:block;font:400 1.6rem/1.05 var(--f-display);margin-bottom:.4rem}
.adapta span{color:var(--mute);font-size:.95rem}
@media (max-width:860px){.adapta{grid-template-columns:1fr 1fr}.adapta li,.adapta li:not(:nth-child(3n+1)){padding:1.2rem 1rem 1.3rem 0;border-left:0}.adapta li:nth-child(even){padding-left:1rem;border-left:1px solid var(--line)}}
@media (max-width:520px){.adapta{grid-template-columns:1fr}.adapta li:nth-child(even){padding-left:0;border-left:0}}
.sub-demos{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:.6rem 2rem;margin:5rem 0 1.4rem}
.sub-demos h3{font-size:clamp(2rem,3.6vw,3.2rem);margin:0}
.sub-demos p{color:var(--mute);margin:0;max-width:34em;font-size:.97rem}
.demos{border-top:1px solid var(--line)}
.demo{border-bottom:1px solid var(--line)}
.demo summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:14px minmax(0,1fr) auto 46px;gap:1.3rem;align-items:center;padding:1.6rem .3rem;min-height:88px}
.demo summary::-webkit-details-marker{display:none}
.demo .pto{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px rgba(255,255,255,.07),0 0 26px -2px var(--c)}
.demo .nom{font:400 clamp(1.9rem,4.4vw,3.6rem)/1 var(--f-display);transition:color .35s var(--ease),transform .45s var(--ease)}
.demo summary:hover .nom{color:var(--acc);transform:translateX(.5rem)}
.demo .tipo{font:600 .72rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.demo .tipo b{color:var(--acc)}
.demo .mas{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;position:relative;transition:transform .45s var(--ease),background .3s,border-color .3s}
.demo .mas::before,.demo .mas::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .45s var(--ease),background .3s}
.demo .mas::after{transform:translate(-50%,-50%) rotate(90deg)}
.demo[open] .mas{background:var(--acc);border-color:var(--acc);transform:rotate(180deg)}
.demo[open] .mas::before,.demo[open] .mas::after{background:var(--acc-ink)}.demo[open] .mas::after{transform:translate(-50%,-50%) rotate(0)}
.demo-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem 4rem;align-items:center;padding:.4rem .3rem 2.6rem 2.9rem}
.demo[open] .demo-cuerpo{animation:abre .6s var(--ease) both}
@keyframes abre{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.rot{font:600 .72rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 .7rem}
.amb{font:400 clamp(1.7rem,3vw,2.6rem)/1.12 var(--f-display);color:var(--ink);margin:0 0 2rem;max-width:18em}
.rasgos{list-style:none;padding:0;margin:0 0 1.8rem;border-top:1px solid var(--line);max-width:34rem}
.rasgos li{display:flex;align-items:center;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:.97rem}
.rasgos .k{flex:none;width:5.5rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.muestras{display:inline-flex}.muestras i{width:26px;height:26px;border-radius:50%;border:2px solid var(--bg);margin-right:-7px;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.mini{display:block;width:min(270px,72vw);aspect-ratio:9/17;border-radius:34px;padding:9px;background:linear-gradient(155deg,#33383e,#0b0c0e 60%);box-shadow:0 40px 80px -36px #000,0 0 0 1px rgba(255,255,255,.14),0 0 70px -26px var(--c);overflow:hidden}
.mini img{width:100%;height:100%;object-fit:cover;object-position:50% 0;border-radius:26px;background:var(--bg-3);transition:object-position 7s ease-in-out}
@media (hover:hover){.mini:hover img{object-position:50% 100%}}
@media (hover:none){.demo[open] .mini img{animation:recorre 11s ease-in-out 1s 2 alternate both}}
@keyframes recorre{to{object-position:50% 100%}}
@media (max-width:760px){.demo summary{grid-template-columns:12px minmax(0,1fr) 42px;gap:.9rem;padding:1.3rem 0}.demo .tipo{grid-column:2;grid-row:2}.demo .mas{grid-column:3;grid-row:1/3;width:42px;height:42px}.demo-cuerpo{grid-template-columns:1fr;padding:.2rem 0 2.2rem}.mini{margin-inline:auto}}
/* panel y diagnóstico */
.banda{position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:clamp(1.8rem,4.5vw,3.6rem);display:grid;grid-template-columns:minmax(0,1.5fr) auto;gap:1.6rem 3rem;align-items:center;background:var(--bg-3);border:1px solid var(--line)}
.banda::before{content:"";position:absolute;inset:-40%;z-index:-1;background:radial-gradient(40% 50% at 15% 20%,rgba(37,224,122,.22),transparent 70%),radial-gradient(45% 55% at 85% 90%,rgba(44,93,168,.28),transparent 70%);filter:blur(30px)}
.banda h2{font-size:clamp(2.1rem,4.2vw,3.6rem);margin-bottom:.9rem}.banda p{color:var(--ink-2);margin:0;max-width:40em}
@media (max-width:860px){.banda{grid-template-columns:1fr}}
/* cifras */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.cifra{padding:2.4rem 1.5rem 2.4rem 0}
.cifra+.cifra{padding-left:1.6rem;border-left:1px solid var(--line)}
.cifra b{display:flex;align-items:baseline;gap:.15em;font:400 clamp(3.4rem,7.4vw,6.2rem)/1 var(--f-display);color:var(--ink)}
.cifra b small{font:500 .2em/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--acc);max-width:7em}
.cifra>span{display:block;color:var(--mute);font-size:.95rem;margin-top:.7rem;max-width:15em}
@media (max-width:860px){.cifras{grid-template-columns:1fr 1fr}.cifra,.cifra+.cifra{padding:1.8rem 1rem 1.8rem 0;border-left:0;border-bottom:1px solid var(--line)}.cifra:nth-child(even){padding-left:1rem;border-left:1px solid var(--line)}.cifra:nth-child(n+3){border-bottom:0}}
/* pasos */
.pasos{list-style:none;counter-reset:p;padding:0;margin:3rem 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.pasos li{counter-increment:p;border-top:1px solid var(--line);padding-top:1.4rem}
.pasos li::before{content:"0" counter(p);display:block;font:400 4rem/1 var(--f-display);color:var(--acc);margin-bottom:1rem}
.pasos b{display:block;font:400 1.65rem/1.05 var(--f-display);margin-bottom:.55rem}
.pasos p{color:var(--mute);font-size:.97rem;margin:0}
@media (max-width:900px){.pasos{grid-template-columns:1fr 1fr}}@media (max-width:520px){.pasos{grid-template-columns:1fr}}
/* precios */
.paquetes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem;margin-top:3rem;align-items:stretch;padding-top:.9rem}
.paquete{position:relative;display:flex;flex-direction:column;padding:1.8rem 1.35rem 1.4rem;border-radius:24px;border:1px solid var(--line);background:var(--bg-2);transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease)}
.paquete:hover{transform:translateY(-6px);border-color:rgba(37,224,122,.55);box-shadow:0 30px 60px -36px rgba(37,224,122,.6)}
.paquete.rec{border-color:var(--acc);background:linear-gradient(180deg,rgba(37,224,122,.13),var(--bg-2) 50%)}
.sello{position:absolute;top:-.85rem;left:1.2rem;right:1.2rem;width:max-content;max-width:calc(100% - 2.4rem);background:var(--acc);color:var(--acc-ink);font:700 .66rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase;padding:.45rem .7rem;border-radius:999px}
.paquete h3{font-size:2.15rem;margin-bottom:.4rem}
.precio{font:400 clamp(2.3rem,2.9vw,2.9rem)/1 var(--f-display);margin:0 0 .35rem;white-space:nowrap}.precio small{font:500 .82rem var(--f-body);color:var(--mute)}
.instal{color:var(--mute);font-size:.84rem;margin-bottom:1.1rem}
.paquete ul{list-style:none;padding:0;margin:0 0 1rem;flex:1}
.paquete li{position:relative;padding:.42rem 0 .42rem 1.4rem;font-size:.88rem;line-height:1.45;color:var(--ink-2);border-top:1px solid rgba(255,255,255,.07)}
.paquete li::before{content:"";position:absolute;left:0;top:.95em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
.extra{font-size:.78rem;color:var(--mute);margin:0 0 1.1rem}
.paquete .btn{width:100%;padding-inline:.75rem;gap:.45rem;font-size:.92rem}.paquete .btn svg{width:18px;height:18px}
.desliza{display:none;font-size:.85rem;color:var(--mute);margin:1rem 0 0}
@media (max-width:1180px){.paquetes{grid-template-columns:repeat(6,minmax(0,1fr))}.paquete{grid-column:span 2}.paquete:nth-child(4){grid-column:2/4}.paquete:nth-child(5){grid-column:4/6}}
@media (max-width:760px){.paquetes{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.8rem;margin-inline:-1.2rem;padding:1.2rem 1.2rem 1.6rem;scrollbar-width:none}.paquetes::-webkit-scrollbar{display:none}.paquete{flex:0 0 84%;scroll-snap-align:center}.desliza{display:block}}
/* preguntas */
.faq{border-top:1px solid var(--line);margin-top:2.4rem;max-width:64rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.2rem;align-items:center;padding:1.4rem .2rem;min-height:68px;font:400 clamp(1.45rem,2.6vw,2.15rem)/1.12 var(--f-display);transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--acc),var(--acc)) center/100% 1.5px no-repeat,linear-gradient(var(--acc),var(--acc)) center/1.5px 100% no-repeat;transition:transform .45s var(--ease)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq summary:hover{color:var(--acc)}
.faq details p{color:var(--ink-2);padding:0 .2rem 1.5rem;max-width:46em;margin:0}
/* contacto: el correo gigante con subrayado animado; el degradado vuelve a seguir el cursor */
.contacto{position:relative;isolation:isolate;overflow:clip}
.contacto .degradado{opacity:.32;top:-220px;bottom:-220px}
.mail{display:inline-block;position:relative;font:400 clamp(2.1rem,7.6vw,6.6rem)/1.02 var(--f-display);letter-spacing:-.02em;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;margin:1.4rem 0 1.8rem;transition:color .35s}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:-.06em;height:2px;background:var(--acc);transform:scaleX(.16);transform-origin:left;transition:transform .7s var(--ease)}
.mail:hover,.mail:focus-visible{color:var(--acc)}.mail:hover::after,.mail:focus-visible::after{transform:scaleX(1)}
.contacto-pie{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2rem}
.dato-wa{font:400 clamp(2rem,4vw,3.2rem)/1 var(--f-display);margin:0}
.dato-wa a{color:inherit;text-decoration:none}
.barniz{width:100%;height:6px}
.wa-flota{position:fixed;right:clamp(1rem,3vw,1.75rem);bottom:calc(clamp(1rem,3vw,1.75rem) + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:var(--acc);color:var(--acc-ink);box-shadow:0 16px 36px -12px rgba(37,224,122,.7);transition:transform .45s var(--ease)}
.wa-flota:hover{transform:translateY(-3px) scale(1.04)}
.wa-flota svg{width:30px;height:30px}
.wa-flota::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--acc);animation:onda 3s ease-out 1.5s 3;opacity:0;pointer-events:none}
@keyframes onda{from{transform:scale(1);opacity:.65}to{transform:scale(1.65);opacity:0}}
/* aparición al bajar: el texto ya está en el HTML y siempre se ve; solo sube a su lugar (si el JS falla, queda quieto) */
.js .rv{transition:transform 1s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js .rv:not(.visto){transform:translateY(34px)}
/* «Reducir movimiento» solo apaga lo que se mueve sin parar; hover, apariciones y cifras siguen (Windows lo trae activado muchas veces sin que la persona lo pida) */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.telefono,.wa-flota::after,.demo[open] .mini img{animation:none}}

/* ================= páginas interiores, legales, formularios, pago, cookies y pie (22-oct-2026) ================= */
.nav a[aria-current="page"]{color:var(--ink)}.nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu-b{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.menu-b i{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.menu-b[aria-expanded="true"] i:first-of-type{transform:translateY(3.25px) rotate(45deg)}.menu-b[aria-expanded="true"] i:last-of-type{transform:translateY(-3.25px) rotate(-45deg)}
@media (max-width:960px){
  .menu-b{display:inline-flex}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;padding:.6rem 1.2rem 1.2rem;background:rgba(7,8,10,.97);border-bottom:1px solid var(--line)}
  .nav.abierto{display:flex}
  .nav a{padding:1rem 0;font-size:1.1rem;border-bottom:1px solid var(--line)}.nav a::after{display:none}
  .js .top.menu-abierto{background:rgba(7,8,10,.97);border-color:var(--line)}
}
.hero-pagina{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.hero-pagina h1{font-size:clamp(2.8rem,6vw,5.6rem);max-width:14em}
.hero-pagina .lead{max-width:38em}
.hero-pagina .degradado{opacity:.5}
.version{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin:.4rem 0 0;color:var(--mute);font-size:.9rem}
.borrador{display:inline-block;padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(233,181,61,.55);background:rgba(233,181,61,.1);color:#F2CE7A;font:700 .72rem/1.2 var(--f-body);letter-spacing:.06em;text-transform:uppercase}
mark.falta{background:rgba(233,181,61,.18);color:#F2CE7A;border-radius:4px;padding:0 .25em;font-weight:600}
.legal-sec{padding-top:clamp(2rem,5vw,3.5rem)}
.legal-grid{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,46rem);gap:clamp(1.5rem,5vw,5rem);align-items:start}
.indice{position:sticky;top:96px;display:flex;flex-direction:column;gap:.15rem;border-left:1px solid var(--line);padding-left:1rem}
.indice a{color:var(--mute);text-decoration:none;font-size:.88rem;padding:.3rem 0;line-height:1.35}.indice a:hover{color:var(--acc)}
@media (max-width:900px){.legal-grid{grid-template-columns:1fr}.indice{position:static;border-left:0;padding:0 0 1rem;border-bottom:1px solid var(--line)}}
.legal{color:var(--ink-2);font-size:1.02rem;min-width:0}
.legal h2{font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ink);margin:2.6rem 0 .9rem;scroll-margin-top:96px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.5rem;color:var(--ink);margin:1.8rem 0 .6rem}
.legal p,.legal li{line-height:1.7}
.legal ul,.legal ol{padding-left:1.3rem;margin:0 0 1rem}.legal li{margin:.35rem 0}
.legal strong{color:var(--ink)}
.legal a,.letra a,.aviso a,.aviso-corto a,.faq a,.lista-check a{color:var(--acc);text-underline-offset:3px}
.legal-fin{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--mute)}
.tabla{overflow-x:auto;margin:1.2rem 0 1.6rem;border:1px solid var(--line);border-radius:16px;-webkit-overflow-scrolling:touch}
.tabla table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:30rem}
.tabla th{text-align:left;font:600 .74rem/1.3 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);background:var(--bg-3)}
.tabla th,.tabla td{padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla td{color:var(--ink-2)}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.8rem}
.chips a{padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-size:.92rem;transition:border-color .3s,color .3s}.chips a:hover{border-color:var(--acc);color:var(--acc)}
.otras-legales{padding:2.6rem 0}
.dos-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5rem);align-items:start}
@media (max-width:900px){.dos-col{grid-template-columns:1fr}}
.lista-check{list-style:none;padding:0;margin:1.6rem 0 0;border-top:1px solid var(--line)}
.lista-check li{position:relative;padding:.9rem 0 .9rem 1.9rem;border-bottom:1px solid var(--line);color:var(--ink-2)}
.lista-check li::before{content:"";position:absolute;left:.15rem;top:1.25rem;width:.7rem;height:.38rem;border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}
.pasos.tres{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.pasos.tres{grid-template-columns:1fr}}
.pago-etapa{margin-top:.8rem!important;color:var(--acc)!important;font-weight:600}
.mas-fila{display:block;margin-top:.6rem;color:var(--mute);font-size:.93rem}
/* formularios */
.form{position:relative;display:flex;flex-direction:column;gap:1rem;padding:clamp(1.4rem,3vw,2.2rem);border-radius:26px;background:var(--bg-2);border:1px solid var(--line)}
.campo{display:flex;flex-direction:column;gap:.4rem}
.campo label{font-weight:600;font-size:.92rem;color:var(--ink)}
.campo input,.campo select,.campo textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:.85rem 1rem;min-height:52px;width:100%;transition:border-color .3s,box-shadow .3s}
.campo textarea{resize:vertical;min-height:8rem}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(37,224,122,.22)}
.check{display:flex;gap:.8rem;align-items:flex-start;font-size:.93rem;color:var(--ink-2);line-height:1.5;cursor:pointer}
.check input{flex:none;width:22px;height:22px;margin:.1rem 0 0;accent-color:var(--acc)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{margin:0;font-size:.93rem;color:var(--ink-2)}.aviso:empty{display:none}
.aviso.error{padding:.8rem 1rem;border-radius:12px;background:rgba(210,69,43,.14);border:1px solid rgba(210,69,43,.5);color:#FFD3C9}
.aviso-corto{display:flex;gap:.7rem;align-items:flex-start;margin:0;font-size:.84rem;color:var(--mute);line-height:1.55}
.aviso-corto svg{flex:none;width:18px;height:18px;margin-top:.15rem;color:var(--acc)}
.form .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.canal-pronto p{color:var(--ink-2);margin:0}
.cf-turnstile{min-height:65px}
/* pagar mi plan */
.pago{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:start}
.pago-txt h2{font-size:clamp(2.2rem,4.4vw,3.8rem)}
.pago-txt p{color:var(--ink-2)}
@media (max-width:900px){.pago{grid-template-columns:1fr}}
.total{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;color:var(--mute)}
.total b{font:400 2.4rem/1 var(--f-display);color:var(--ink)}
.pago.apagado .form{border-style:dashed}
/* aviso de cookies: abajo, sin tapar la página ni bloquear nada */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 clamp(.8rem,3vw,1.6rem) calc(clamp(.8rem,3vw,1.6rem) + env(safe-area-inset-bottom,0px));pointer-events:none}
.ck-caja{pointer-events:auto;width:min(760px,100%);margin-left:auto;background:rgba(20,23,27,.97);border:1px solid rgba(255,255,255,.18);border-radius:22px;padding:1.2rem 1.3rem;box-shadow:0 30px 70px -30px #000;max-height:calc(100vh - 2rem);overflow-y:auto}
.ck-t{font:400 1.5rem/1.1 var(--f-display);margin:0 0 .4rem;color:var(--ink)}
.ck-txt{font-size:.9rem;color:var(--ink-2);margin:0 0 1rem;line-height:1.55}.ck-txt a{color:var(--acc)}
.ck-botones{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.ck-b{min-height:46px;padding:.6rem .8rem;font-size:.95rem;width:100%}
.ck-opciones{display:grid;gap:.6rem;margin:0 0 1rem}
.ck-opciones[hidden]{display:none}
.ck-cat{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem .8rem;border:1px solid var(--line);border-radius:14px;cursor:pointer}
.ck-cat input{flex:none;width:20px;height:20px;margin-top:.15rem;accent-color:var(--acc)}
.ck-cat b{display:block;font-size:.95rem;color:var(--ink)}.ck-cat small{display:block;font-size:.82rem;color:var(--mute)}
.ck-cat.apagada,.ck-cat.fija{cursor:default}.ck-cat.apagada b{color:var(--mute)}
@media (max-width:560px){.ck-caja{padding:.9rem 1rem;border-radius:18px}.ck-t{font-size:1.2rem;margin-bottom:.25rem}.ck-txt{font-size:.82rem;margin-bottom:.7rem}.ck-b{min-height:44px;padding:.5rem .4rem;font-size:.9rem}.ck-botones{gap:.45rem}}
@media (max-width:330px){.ck-botones{grid-template-columns:1fr}}
.cookies:not([hidden])~.wa-flota{display:none}
/* pie */
.pie{border-top:1px solid var(--line);color:var(--mute);font-size:.9rem;padding-top:3rem;background:var(--bg-2)}
.pie-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr) minmax(0,1fr);gap:2rem 3rem;padding-bottom:2.4rem}
@media (max-width:860px){.pie-grid{grid-template-columns:1fr 1fr}.pie-marca{grid-column:1/-1}}
@media (max-width:520px){.pie-grid{grid-template-columns:1fr}}
.pie .logo{margin:0 0 1.2rem}
.pie-quien{max-width:34rem;line-height:1.6;margin:0 0 .7rem}
.pie-datos{margin:0 0 .4rem}.pie-datos a{color:var(--ink-2)}
.pie-t{font:600 .72rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin:0 0 .9rem}
.pie-col{display:flex;flex-direction:column;gap:.15rem}
.pie-col a,.pie-ck{color:var(--ink-2);text-decoration:none;padding:.35rem 0;font-size:.92rem;line-height:1.4}
.pie-col a:hover,.pie-ck:hover{color:var(--acc)}
.pie-ck{background:none;border:0;font:inherit;font-size:.92rem;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pie-bajo{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 1.5rem;padding:1.4rem 0 6.5rem;border-top:1px solid var(--line);font-size:.84rem}
.pie-bajo p{margin:0}
.estado-pago{display:inline-flex;gap:.7rem;align-items:flex-start;margin:.6rem 0 0;padding:.85rem 1.1rem;border-radius:16px;border:1px solid rgba(233,181,61,.5);background:rgba(233,181,61,.1);color:#F6DFA6;font-size:.95rem;max-width:40rem}
.estado-pago svg{flex:none;width:20px;height:20px;margin-top:.1rem}
.estado-pago.listo{border-color:rgba(37,224,122,.5);background:rgba(37,224,122,.1);color:#BFF5D6}
.pasos-pago{list-style:none;counter-reset:pp;padding:0;margin:1.6rem 0 1.4rem;display:grid;gap:1rem}
.pasos-pago li{counter-increment:pp;position:relative;padding-left:3.2rem;min-height:2.4rem}
.pasos-pago li::before{content:counter(pp);position:absolute;left:0;top:0;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--acc);color:var(--acc);font:400 1.2rem/1 var(--f-display)}
.pasos-pago b{display:block;color:var(--ink);font-size:1.02rem}
.pasos-pago span{display:block;color:var(--mute);font-size:.93rem}
.nav a[href$="pagar/"]{color:var(--acc)}