/* ============ PÁGINAS DE SERVICIO ============ */
/* Las cuatro páginas comparten esta hoja (y styles.css para los tokens, el menú, los detalles de fondo y el pie).
   Cada una trae en <body> su color (--c), la tinta sobre el color (--on), su acento (--k), el acento sobre negro (--k2), la tinta sobre el acento (--kt) y el peso de su objeto (--peso).
   Todo cabe en una pantalla ancha y baja (1920×640): las medidas salen de --u, como en la portada */
.sv{--k2:var(--k);--kt:var(--ink);--u:min(1vw,1.72vh);--u:min(1vw,1.72svh);--alto:max(100vh,560px);--alto:max(100svh,560px);background:var(--ink)}
.sv .nav ul a[aria-current]::after{right:0}
.sv .nav{transition:color .3s,opacity .6s}
.sv-sec{position:relative;isolation:isolate;overflow:clip}
.ojo{display:inline-flex;align-items:center;gap:.7em}
.ojo::before{content:'';width:.62em;height:.62em;border-radius:50%;background:currentColor}
.ej-tag{display:inline-block;padding:.45em .9em;border:1.5px solid currentColor;border-radius:99px}

/* ---------- 1 · portada: la tarjeta, abierta a pantalla completa ---------- */
.sv-hero{height:var(--alto);background:var(--c);color:var(--on)}
.sv-hero > .ct{z-index:-1}
.sv-top{position:absolute;left:var(--pad);right:var(--pad);top:calc(70px + var(--u)*1.4);display:flex;justify-content:space-between;opacity:.75}
/* el objeto: el mismo sitio que calcula la transición de la portada (transicion.js → sitioObjeto) */
.sv-obw{--obw:calc(min(36vw,62vh)*var(--peso,1));--obw:calc(min(36vw,62svh)*var(--peso,1));position:absolute;z-index:1;left:calc(92vw - var(--obw));top:50%;width:var(--obw);translate:0 -50%;transform:perspective(1100px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.sv-ob{display:block;width:100%;height:auto;rotate:-3deg;filter:drop-shadow(0 calc(var(--obw)*.07) calc(var(--obw)*.09) rgba(0,0,0,.3));animation:bobcap 6.5s ease-in-out infinite}
.sv-txt{position:absolute;z-index:2;left:var(--pad);bottom:calc(var(--u)*4.4);display:grid;justify-items:start;gap:calc(var(--u)*1.8)}
.sv-t{display:grid;justify-items:start;font-weight:900;font-stretch:125%;font-size:var(--tt,min(15vw,29svh));line-height:.84;letter-spacing:-.03em;text-transform:uppercase;animation:hue 9s linear infinite}
.sv-t.dos{font-size:var(--tt,min(11vw,20.5svh))}
.sv-t .ln{display:block;white-space:nowrap}
.sv-t .l{display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(180deg,var(--on) 0 45%,#35f2ff 45%,#8f7bff 48.5%,#ff4fd8 51.5%,#ffd23f 55%,var(--on) 55% 100%)}
.sv-frase-h{max-width:19em;font-weight:600;font-size:max(16px,calc(var(--u)*2.15));line-height:1.25;text-wrap:balance}
.sv-baja{display:inline-flex;align-items:center;gap:10px;padding:.7em 1.15em;border:1.5px solid currentColor;border-radius:99px;text-decoration:none}
.sv-baja i{font-style:normal;animation:bob 1.6s ease-in-out infinite}
/* al llegar: las letras suben una a una; el objeto entra (si viene de la tarjeta, ya está en su sitio) */
.sv-t .l{animation:letra .9s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--i)*45ms + 120ms)}
@keyframes letra{from{opacity:0;transform:translateY(.55em) rotate(4deg)}}
.sv-frase-h,.sv-baja,.sv-top{animation:sube-in .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:.55s}
.sv-baja{animation-delay:.7s}
@keyframes sube-in{from{opacity:0;transform:translateY(16px)}}
.sv-obw{animation:ob-entra 1.1s cubic-bezier(.2,1.3,.35,1) both .15s}
@keyframes ob-entra{from{opacity:0;scale:.55;rotate:-14deg}}
html.via .sv-obw{animation:none}
html.via .sv-hero .ct{animation:none}
html.via .nav{animation:sube-in .7s .35s both}

/* ---------- 2 · la frase: se enciende palabra a palabra al bajar ---------- */
.sv-frase{height:calc(var(--alto)*2.2);background:var(--ink);color:var(--cream)}
.sv-pin{position:sticky;top:0;height:var(--alto);overflow:hidden}
.sv-frase .sv-pin{display:grid;align-content:center;padding:calc(70px + var(--u)*1.5) var(--pad) calc(var(--u)*3)}
.sv-frase .ojo{margin-bottom:calc(var(--u)*2.4);opacity:.6}
.sv-frase p{max-width:19em;font-weight:800;font-stretch:112%;font-size:min(5.4vw,12.4svh);line-height:1.06;letter-spacing:-.022em}
.sv-frase .w{opacity:.14;transition:opacity .35s,color .35s}
.sv-frase .w.on{opacity:1}
.sv-frase .w.k.on{color:var(--k2)}
.sv-frase-ob{position:absolute;right:var(--pad);bottom:calc(var(--u)*4);width:calc(var(--u)*13);opacity:0;scale:.6;rotate:-10deg;transition:opacity .5s,scale .7s cubic-bezier(.2,1.4,.4,1),rotate .7s cubic-bezier(.2,1.4,.4,1)}
.sv-frase.fin .sv-frase-ob{opacity:1;scale:1;rotate:6deg}

/* ---------- 3 · la demo: la web se monta al bajar, y se puede tocar ---------- */
.sv-demo{height:calc(var(--alto)*5.4);background:var(--paper);color:var(--ink)}
.sv-demo .sv-pin{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.5fr);align-items:center;gap:calc(var(--u)*4.5);padding:calc(70px + var(--u)*1.2) var(--pad) calc(var(--u)*2.6)}
.dm-izq{display:grid;gap:calc(var(--u)*2.2);align-content:center}
.dm-izq .ojo{opacity:.65}
/* los títulos de columna llevan tope por el ancho: en pantallas altas --u crece y una palabra larga («MONTARSE.») se saldría */
.dm-izq h2{font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*5.4),3.5vw);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.dm-pasos{list-style:none;padding:0;display:grid;gap:4px;counter-reset:p}
.dm-pasos button{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:calc(var(--u)*1.2);width:max-content;padding:calc(var(--u)*.55) calc(var(--u)*1.1);border-radius:99px;font-weight:700;font-size:max(14px,calc(var(--u)*1.55));cursor:pointer;transition:background .35s,color .35s,padding .35s}
.dm-pasos button:focus-visible{outline:2.5px solid var(--ink);outline-offset:2px}
.dm-pasos .n{display:grid;place-items:center;flex:none;width:calc(var(--u)*2.5);height:calc(var(--u)*2.5);min-width:24px;min-height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px currentColor;font:500 max(10px,calc(var(--u)*1)) 'DM Mono',monospace;transition:background .35s,color .35s,box-shadow .35s}
.dm-pasos .hecho .n{background:var(--ink);color:var(--paper);box-shadow:none}
.dm-pasos .ahora button{background:var(--ink);color:var(--paper);padding-left:calc(var(--u)*1.6)}
.dm-pasos .ahora .n{background:var(--k);color:var(--kt);box-shadow:none}
.dm-ctrl{display:grid;gap:calc(var(--u)*1.1)}
.dm-fila{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dm-fila > .mono{width:100%;font-size:11px;opacity:.6}
.dm-chip{padding:.6em 1.1em;border:1.5px solid var(--ink);border-radius:99px;background:none;color:var(--ink);font:600 max(13px,calc(var(--u)*1.3)) 'Archivo',sans-serif;cursor:pointer;transition:background .25s,color .25s}
.dm-chip:hover{background:rgba(17,17,17,.08)}
.dm-chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.dm-col{width:calc(var(--u)*3);height:calc(var(--u)*3);min-width:28px;min-height:28px;border:0;border-radius:50%;background:var(--v);cursor:pointer;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px transparent;transition:box-shadow .25s,scale .25s}
.dm-col:hover{scale:1.1}
.dm-col[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--paper),0 0 0 4.5px var(--ink)}
.dm-chip:focus-visible,.dm-col:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px}

/* el escenario de la demo: cada página pone dentro el suyo (webs.css, seo-geo.css…) */
.dm-esc{--marca:#4b23b8;--alto-v:calc(var(--alto) - 70px - var(--u)*5.6);position:relative;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;height:var(--alto-v)}
/* el marco lleva la etiqueta y el sello de velocidad pegados a la ventana, y es lo que se estrecha al pasar a móvil */
.dm-marco{position:relative;width:min(100%,calc(var(--alto-v)*1.62));height:100%;transition:width .9s cubic-bezier(.7,0,.2,1)}
.dm-marco > .ej-tag{position:absolute;right:calc(var(--u)*-1.4);top:calc(var(--u)*-1.3);z-index:4;rotate:7deg;font-size:11px;background:var(--k);color:var(--kt)}
/* al cambiar de negocio o de ciudad, la demo parpadea un instante */
.dm-cambia{animation:dm-cambia .45s ease}
@keyframes dm-cambia{40%{opacity:.25;filter:blur(3px)}}

/* ---------- 4 · qué incluye: seis piezas, cada una con su animación ---------- */
.sv-inc{min-height:var(--alto);background:var(--c);color:var(--on);display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2fr);align-items:center;gap:calc(var(--u)*4);padding:calc(70px + var(--u)*1.4) var(--pad) calc(var(--u)*3)}
.sv-inc > .ct{z-index:-1}
.inc-cab{display:grid;gap:calc(var(--u)*1.8);align-content:center}
.inc-cab .ojo{opacity:.7}
.inc-cab h2{font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*6),3.4vw);line-height:.84;letter-spacing:-.03em;text-transform:uppercase}
.inc-cab p{font-weight:600;font-size:max(15px,calc(var(--u)*1.6));line-height:1.3;max-width:15em;opacity:.85}
.inc-rej{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:calc(var(--u)*1.4);height:calc(var(--alto) - 70px - var(--u)*4.4)}
.inc{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:calc(var(--u)*.6);padding:calc(var(--u)*1.7);border-radius:calc(var(--u)*2.2);background:var(--cream);color:var(--ink);overflow:hidden;opacity:0;translate:0 calc(var(--u)*6);rotate:calc(var(--g,1)*3deg);transition:opacity .6s,translate .9s cubic-bezier(.2,1,.3,1),rotate .9s cubic-bezier(.2,1,.3,1);transition-delay:calc(var(--i)*80ms)}
.sv-inc.vis .inc{opacity:1;translate:0 0;rotate:0deg}
.inc b{font-weight:900;font-stretch:112%;font-size:max(15px,calc(var(--u)*1.9));line-height:1;letter-spacing:-.015em}
.inc p{font-weight:500;font-size:max(13px,calc(var(--u)*1.25));line-height:1.3;opacity:.75}
.inc-il{position:relative;display:grid;place-items:center;min-height:0;overflow:hidden;border-radius:calc(var(--u)*1.3);background:color-mix(in srgb,var(--c) 6%,#fff)}
.inc-il *{position:absolute}
.inc:not(.vis-il) .inc-il *{animation-play-state:paused}

/* ---------- 5 · cómo trabajamos: una tira que avanza de lado al bajar ---------- */
.sv-proc{height:calc(var(--alto)*4.2);background:var(--ink);color:var(--cream)}
.sv-proc .sv-pin{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;padding:calc(70px + var(--u)*1.2) 0 calc(var(--u)*3)}
.pr-tira{display:flex;align-items:center;gap:calc(var(--u)*4);width:max-content;padding-inline:var(--pad);will-change:transform}
.pr-p{flex:none;display:grid;align-content:center;gap:calc(var(--u)*1.4);width:min(56vw,calc(var(--u)*62))}
.pr-p.intro{width:min(46vw,calc(var(--u)*52))}
.pr-p.intro h2{font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*7.4),4.4vw);line-height:.84;letter-spacing:-.03em;text-transform:uppercase}
.pr-p.intro p{font-weight:600;font-size:max(15px,calc(var(--u)*1.7));line-height:1.3;max-width:20em;opacity:.8}
.pr-n{font-weight:900;font-stretch:125%;font-size:calc(var(--u)*17);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:2px rgba(243,238,228,.55);transition:color .5s,-webkit-text-stroke-color .5s}
.pr-p.on .pr-n{color:var(--k2);-webkit-text-stroke-color:var(--k2)}
.pr-p b{font-weight:900;font-stretch:112%;font-size:calc(var(--u)*3.6);line-height:1;letter-spacing:-.02em}
.pr-p p{font-weight:500;font-size:max(15px,calc(var(--u)*1.7));line-height:1.35;max-width:24em;opacity:.8}
.pr-linea{position:relative;height:2px;margin:calc(var(--u)*2) var(--pad) 0;background:rgba(243,238,228,.2)}
.pr-linea i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--av,0)*100%);background:var(--k2)}
.pr-linea img{position:absolute;left:calc(var(--av,0)*100%);bottom:-6px;width:calc(var(--u)*5.4);min-width:44px;translate:-50% 0;rotate:calc(var(--av,0)*720deg)}

/* ---------- 6 · hechas de verdad: trabajos reales en sus pantallas ---------- */
.sv-casos{background:var(--cream);color:var(--ink);padding:calc(70px + var(--u)*2) var(--pad) calc(var(--u)*4)}
.cs-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:calc(var(--u)*3)}
.cs-cab h2{font-weight:900;font-stretch:125%;font-size:calc(var(--u)*7);line-height:.84;letter-spacing:-.03em;text-transform:uppercase}
.cs-cab p{max-width:22em;font-weight:600;font-size:max(15px,calc(var(--u)*1.6));line-height:1.3;opacity:.75}
.caso{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center;gap:calc(var(--u)*5);min-height:calc(var(--alto) - 70px - var(--u)*6)}
.caso + .caso{margin-top:calc(var(--u)*5)}
.caso.inv{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.caso.inv .cs-disp{order:2}
.cs-disp{position:relative;perspective:1600px;width:min(100%,calc((var(--alto) - 70px - var(--u)*8)*1.62));height:calc(var(--alto) - 70px - var(--u)*8)}
.caso.inv .cs-disp{justify-self:end}
.cs-port,.cs-tel{position:absolute;transition:transform 1.1s cubic-bezier(.2,.9,.25,1),opacity .7s}
.cs-port{left:4%;top:0;width:min(90%,calc((var(--alto) - 70px - var(--u)*8)*1.42));transform:rotateX(18deg) rotateY(-14deg) translateY(10%);opacity:0;transform-origin:50% 100%}
/* en propiedades sueltas: con el atajo «background», si falta --img se pierde también el tamaño */
.cs-pant{position:relative;aspect-ratio:16/10;border-radius:calc(var(--u)*1.2) calc(var(--u)*1.2) 4px 4px;border:calc(var(--u)*.8) solid var(--ink);background-color:var(--ink);background-image:var(--img);background-position:50% 0;background-size:100% auto;background-repeat:no-repeat;overflow:hidden}
.cs-base{height:calc(var(--u)*1.6);margin-inline:-6%;border-radius:0 0 calc(var(--u)*1.6) calc(var(--u)*1.6);background:linear-gradient(#2a2a2a,#111)}
.cs-base::before{content:'';display:block;width:16%;height:40%;margin:0 auto;border-radius:0 0 8px 8px;background:#3a3a3a}
.cs-tel{right:0;bottom:0;width:min(24%,calc((var(--alto) - 70px - var(--u)*8)*.36));transform:translateY(30%) rotate(8deg);opacity:0}
.cs-tel .cs-pant{aspect-ratio:9/19.5;border-radius:calc(var(--u)*2.6);border-width:calc(var(--u)*.7);background-image:var(--img-m)}
.caso.vis .cs-port{transform:none;opacity:1}
.caso.vis .cs-tel{transform:rotate(4deg);opacity:1;transition-delay:.25s}
.caso.vis .cs-pant{animation:recorre 26s ease-in-out infinite alternate 1.2s}
.caso.vis .cs-tel .cs-pant{animation-duration:30s}
@keyframes recorre{to{background-position-y:100%}}
.cs-disp:hover .cs-pant{animation-play-state:paused}
.cs-txt{display:grid;gap:calc(var(--u)*1.6);align-content:center;opacity:0;translate:0 calc(var(--u)*3);transition:opacity .7s .2s,translate .9s cubic-bezier(.2,1,.3,1) .2s}
.caso.vis .cs-txt{opacity:1;translate:0 0}
.cs-txt .mono{opacity:.6}
.cs-txt h3{font-weight:900;font-stretch:125%;font-size:calc(var(--u)*5);line-height:.86;letter-spacing:-.03em;text-transform:uppercase}
.cs-txt p{font-weight:500;font-size:max(15px,calc(var(--u)*1.6));line-height:1.4;max-width:24em}
.cs-hecho{display:flex;flex-wrap:wrap;gap:8px}
.cs-hecho span{padding:.5em 1em;border-radius:99px;background:var(--c);color:var(--on);font-weight:700;font-size:max(12px,calc(var(--u)*1.15))}
.cs-ir{justify-self:start;display:inline-flex;gap:.6em;padding:.85em 1.3em;border-radius:99px;background:var(--ink);color:var(--cream);font:500 12px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:background .25s,color .25s}
.cs-ir:hover{background:var(--c)}

/* ---------- 7 · preguntas ---------- */
.sv-faq{min-height:var(--alto);background:var(--paper);color:var(--ink);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);align-items:center;gap:calc(var(--u)*5);padding:calc(70px + var(--u)*2) var(--pad) calc(var(--u)*4)}
.fq-cab{display:grid;gap:calc(var(--u)*1.8)}
.fq-cab .ojo{opacity:.6}
.fq-cab h2{font-weight:900;font-stretch:125%;font-size:min(calc(var(--u)*6.2),3.6vw);line-height:.84;letter-spacing:-.03em;text-transform:uppercase}
.fq-cab p{font-weight:600;font-size:max(15px,calc(var(--u)*1.6));line-height:1.3;max-width:17em;opacity:.75}
.fq-l{display:grid;gap:calc(var(--u)*1)}
.fq{border-radius:calc(var(--u)*2);background:#fff;box-shadow:0 0 0 1.5px var(--ink);transition:background .35s,color .35s}
.fq[open]{background:var(--ink);color:var(--cream)}
.fq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:calc(var(--u)*1.7) calc(var(--u)*2.2);list-style:none;cursor:pointer;font-weight:800;font-size:max(16px,calc(var(--u)*1.9));line-height:1.15}
.fq summary::-webkit-details-marker{display:none}
.fq summary:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;border-radius:calc(var(--u)*2)}
.fq summary i{flex:none;position:relative;width:calc(var(--u)*2.6);height:calc(var(--u)*2.6);min-width:26px;min-height:26px;border-radius:50%;background:var(--k)}
.fq summary i::before,.fq summary i::after{content:'';position:absolute;left:28%;right:28%;top:50%;height:2px;margin-top:-1px;background:var(--kt);transition:rotate .35s}
.fq summary i::after{rotate:90deg}
.fq[open] summary i::after{rotate:0deg}
.fq-r{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.fq[open] .fq-r{grid-template-rows:1fr}
.fq-r > div{overflow:hidden}
.fq-r p{padding:0 calc(var(--u)*2.2) calc(var(--u)*1.9);font-weight:500;font-size:max(15px,calc(var(--u)*1.5));line-height:1.45;max-width:36em;opacity:.85}

/* ---------- 8 · el cierre: a la auditoría, con el servicio ya marcado ---------- */
.sv-cierre{height:var(--alto);background:var(--girasol);color:var(--ink);display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center;gap:calc(var(--u)*2.4);padding:calc(70px + var(--u)*1.5) var(--pad) calc(var(--u)*3);text-align:center}
.sv-cierre::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 80% 90% at 50% 42%,transparent 38%,rgba(232,108,0,.4) 100%)}
.sv-cierre h2{font-weight:900;font-stretch:125%;font-size:min(9.6vw,19svh);line-height:.84;letter-spacing:-.035em;text-transform:uppercase;text-wrap:balance}
.sv-cierre p{max-width:24em;font-weight:600;font-size:max(16px,calc(var(--u)*1.9));line-height:1.3}
.ci-bt{position:relative;display:inline-flex;align-items:center;gap:calc(var(--u)*1.6);padding:calc(var(--u)*1.7) calc(var(--u)*1.8) calc(var(--u)*1.7) calc(var(--u)*3);border-radius:99px;background:var(--ink);color:var(--girasol);font:500 max(13px,calc(var(--u)*1.4)) 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:scale .3s cubic-bezier(.2,1.4,.4,1)}
.ci-bt i{display:grid;place-items:center;width:calc(var(--u)*4);height:calc(var(--u)*4);min-width:36px;min-height:36px;border-radius:50%;background:var(--girasol);color:var(--ink);font-style:normal;font-size:1.3em;transition:rotate .4s cubic-bezier(.2,1.4,.4,1)}
.ci-bt:hover{scale:1.04}
.ci-bt:hover i{rotate:-45deg}
.ci-bt:focus-visible{outline:3px solid var(--ink);outline-offset:4px}
.ci-ob{width:calc(var(--u)*11);margin-bottom:calc(var(--u)*-1);rotate:-8deg;pointer-events:none;filter:drop-shadow(0 calc(var(--u)*1.2) calc(var(--u)*1.4) rgba(0,0,0,.25));animation:bobcap 6.5s ease-in-out infinite}
.ci-otros{font-size:11px;opacity:.7}
.ci-otros a{text-underline-offset:3px}

/* ---------- móvil ---------- */
@media (max-width:980px){
  .sv{--u:clamp(9px,2.4vw,13px)}
  .sv-obw{--obw:calc(min(64vw,40vh)*var(--peso,1));--obw:calc(min(64vw,40svh)*var(--peso,1));left:calc(50vw - var(--obw)/2);top:15svh;translate:none}
  .sv-txt{right:var(--pad);bottom:calc(var(--u)*3.2)}
  .sv-t{--tt:min(24vw,15svh)}
  .sv-t.dos{--tt:min(17vw,10.5svh)}
  .sv-frase{height:calc(var(--alto)*2)}
  .sv-frase p{font-size:clamp(28px,8.2vw,46px)}
  .sv-frase-ob{width:84px}
  .sv-demo .sv-pin{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:14px;padding-top:78px}
  .dm-izq{gap:10px}
  .dm-izq h2{font-size:clamp(30px,8.6vw,44px)}
  .dm-pasos{grid-template-columns:repeat(5,auto);justify-content:start;gap:6px}
  .dm-pasos button{width:auto;padding:4px}
  .dm-pasos .t{display:none}
  .dm-pasos .ahora button{padding:4px 12px 4px 4px}
  .dm-pasos .ahora .t{display:inline;font-size:13px}
  .dm-fila > .mono{display:none}
  .dm-ctrl{gap:8px}
  .dm-fila{flex-wrap:nowrap;gap:6px}
  .dm-chip{padding:.45em .8em;font-size:12.5px}
  .dm-col{width:26px;height:26px;min-width:0;min-height:0}
  .dm-esc{--alto-v:calc(var(--alto) - 330px);height:var(--alto-v);min-height:0}
  .sv-inc{grid-template-columns:minmax(0,1fr);gap:22px;padding-top:90px}
  .inc-cab h2{font-size:clamp(40px,11vw,60px)}
  .inc-rej{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(170px,auto);height:auto}
  .pr-p{width:82vw}
  .pr-p.intro{width:78vw}
  .pr-p.intro h2{font-size:clamp(44px,13vw,70px)}
  .pr-n{font-size:clamp(90px,30vw,150px)}
  .pr-p b{font-size:clamp(26px,7.4vw,36px)}
  .cs-cab h2{font-size:clamp(40px,11vw,64px)}
  .caso,.caso.inv{grid-template-columns:minmax(0,1fr);gap:26px;min-height:0}
  .caso.inv .cs-disp{order:0}
  .cs-disp{height:auto;aspect-ratio:1.25/1}
  .cs-disp{width:100%}
  .cs-port{left:5%;width:88%}
  .cs-tel{width:30%}
  .cs-txt h3{font-size:clamp(34px,9.6vw,52px)}
  .sv-faq{grid-template-columns:minmax(0,1fr);gap:26px}
  .fq-cab h2{font-size:clamp(40px,11vw,60px)}
  .sv-cierre h2{font-size:clamp(34px,11.4vw,90px)}
  .ci-ob{width:96px}
}
@media (prefers-reduced-motion:reduce){
  .sv-frase,.sv-demo,.sv-proc{height:auto}
  .sv-pin{position:relative;height:auto;min-height:var(--alto)}
  .sv-proc .pr-tira{flex-wrap:wrap;width:auto}
  .inc,.cs-port,.cs-tel,.cs-txt{opacity:1;translate:none;rotate:none;transform:none}
  .sv-frase .w{opacity:1}
}