/* ==================================================================
   LA PIEZA CLAVE · estilos de las páginas de servicio
   Lo usan los cuatro archivos «servicio-….html». La portada lleva su propio CSS
   dentro del archivo; aquí se repite solo la base común (variables, barra, pie)
   para que las páginas de servicio se vean igual que la portada.
   ================================================================== */

/* VARIABLES · mismas que en la portada. Si cambias un color de marca, cámbialo en los dos sitios. */
:root{
 color-scheme:light;
 --ground:#ffffff;--paper:#eef3fb;--ink:#0b1f4a;--ink2:#2a3d66;--navy:#0b1f4a;--navy-2:#17306b;--navy-3:#22448f;--blue:#1556d6;--blue-hover:#0f43ad;--sky:#8dc0ff;--soft:#dce8fb;--on:#ffffff;--on-soft:#dbe6f8;--on-mute:#c4d4ee;--ph:#a9bde0;--ghost:#8b9bbd;--er:#b3361f;--er-dark:#ff8a73;--plan:#1a4a8f;--plan-ink:#f4f8ff;--plan-aux:#bfd3f2;
 --m:clamp(16px,3vw,40px);--gap:clamp(56px,7vw,112px);
 --ease:cubic-bezier(.2,.8,.2,1);
 --fs-lead:clamp(1.05rem,1.5vw,1.3rem);--fs-ui:.95rem;--fs-small:.875rem;
 --fs-h3:clamp(1.25rem,1.9vw,1.75rem);--fs-statement:clamp(1.5rem,3.1vw,3rem);
 --nh:64px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nh);-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--ground);color:var(--ink);font:400 clamp(16px,1.15vw,19px)/1.55 "Plus Jakarta Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0}ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:800;text-wrap:balance}
p{text-wrap:pretty}
h1{font-size:clamp(2.6rem,7.4vw,6rem);line-height:.98;letter-spacing:-.04em}
h2{font-size:clamp(1.6rem,4.6vw,4.4rem);line-height:1;letter-spacing:-.04em}
h3{font-size:var(--fs-h3);line-height:1.12;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
.light :focus-visible{outline-color:var(--blue)}
::selection{background:var(--blue);color:var(--on)}
.btn{display:inline-block;background:var(--blue);color:var(--on);border:0;border-radius:0;padding:1.05rem 1.9rem;font-family:inherit;font-weight:700;font-size:1rem;line-height:1;text-decoration:none;cursor:pointer;transition:transform .12s var(--ease),background .2s}
.btn:hover{background:var(--blue-hover)}.btn:active{transform:scale(.97)}
.link{font-weight:700;text-decoration:none;padding:1rem 0}
.link:hover{text-decoration:underline;text-underline-offset:.3em}
.ctas{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
/* Texto solo para lectores de pantalla (se lee, no se ve). */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* BARRA · idéntica a la portada. */
nav{position:sticky;top:0;z-index:20;background:var(--navy);color:var(--on)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem var(--m)}
.logo{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;font-weight:300;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none}
.logo b{font-weight:800}.mk{width:48px;height:auto;display:block}.mk .kst{fill:var(--sky)}
.right{display:flex;align-items:center;gap:1.8rem}
nav .links{display:flex;align-items:center;gap:1.8rem;font-weight:500;font-size:var(--fs-ui)}
nav .links a{text-decoration:none;opacity:.8}nav .links a:hover,nav .links a.on{opacity:1}
nav .links a.on{text-decoration:underline;text-underline-offset:.45em;text-decoration-thickness:2px}
nav a.cta{background:var(--blue);padding:.65rem 1.2rem;font-weight:500;font-size:var(--fs-ui);text-decoration:none}
nav a.cta:hover{background:var(--blue-hover)}
.menu{display:none;background:none;border:0;color:var(--on);font-family:inherit;padding:0;min-height:44px;cursor:pointer}
.skip{position:absolute;left:var(--m);top:-60px;z-index:30;background:var(--on);color:var(--navy);padding:.8rem 1.2rem;font-weight:700}
.skip:focus{top:.6rem}
@media(max-width:760px){
 .right{gap:.2rem}
 .logo{font-size:1rem;white-space:nowrap;gap:.45rem}.mk{width:40px}
 nav a.cta{display:none}
 .menu{display:grid;place-items:center;width:44px;height:44px}
 .menu svg{width:26px;height:26px}
 nav .links{display:none;position:absolute;left:var(--m);right:var(--m);top:calc(100% + .5rem);flex-direction:column;align-items:stretch;gap:.4rem;background:var(--navy);padding:.5rem;box-shadow:0 18px 36px -16px rgba(5,12,26,.75)}
 nav.open .links{display:flex;animation:menuin .22s var(--ease)}
 nav .links a{padding:1.05rem 1.2rem;background:var(--navy-3);font-size:var(--fs-lead);font-weight:700;opacity:1;text-decoration:none}
 nav .links a:hover,nav .links a:active,nav .links a.on{background:var(--blue)}
}
@keyframes menuin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* SECCIONES Y REJILLA DE DOS COLUMNAS · como en la portada. */
section{padding:var(--gap) var(--m)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--m)}
.intro{margin-top:1.4rem;max-width:30em;font-size:var(--fs-lead)}

/* PIE · el nombre gigante, igual que en la portada. */
footer{background:var(--navy);color:var(--on);padding:0 var(--m) var(--m)}
.big-name{text-align:center;font-size:calc((100vw - 2*var(--m))/6.7);line-height:.9;letter-spacing:-.04em;font-weight:300;white-space:nowrap}
.big-name b{font-weight:800}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:clamp(1.4rem,3vw,2.4rem);color:var(--on-mute);font-size:var(--fs-small);font-weight:450;letter-spacing:.01em}

/* ==================================================================
   DIBUJOS DE PLANO · los mismos cuatro dibujos que en la portada.
   APRENDE · el fondo de cuadrícula son 4 degradados superpuestos (sin imágenes).
   ================================================================== */
.plano{background-color:var(--plan);background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:96px 96px,96px 96px,24px 24px,24px 24px}
.dw{display:block;width:100%;height:auto;overflow:visible}
.dw .ln{fill:none;stroke:var(--plan-ink);stroke-width:1.8;stroke-linejoin:miter}
.dw .ln2{stroke-width:4;stroke-linecap:square}
.dw .lt{fill:none;stroke:var(--plan-ink);stroke-width:1.1;opacity:.75}
.dw .ax{fill:none;stroke:var(--plan-aux);stroke-width:1.2;stroke-dasharray:5 4;opacity:.8}
.dw .ax0{fill:none;stroke:var(--plan-aux);stroke-width:1.1}
.dw .pf{fill:var(--sky)}
.dw .pk{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:square}
.dw .pk2{stroke-width:2;opacity:.7}
.dw .pb{fill:var(--navy)}
/* transform-box:fill-box hace que la escala de la pieza ocurra alrededor de su propio centro. */
.dw .pc,.dw .mv{transform-box:fill-box;transform-origin:center}

/* PORTADA DE CADA SERVICIO · el dibujo se traza solo al cargar (sin JavaScript).
   APRENDE · pathLength="1" + stroke-dasharray:1 + stroke-dashoffset:1 esconde el trazo; animarlo a 0 lo dibuja.
   --d (en el SVG) escalona el orden de cada línea. */
html.js .draw .ln,html.js .draw .lt{stroke-dasharray:1;stroke-dashoffset:1;animation:dwLine .9s var(--ease) forwards;animation-delay:calc(var(--d,0)*90ms + 150ms)}
html.js .draw .ax,html.js .draw .ax0{opacity:0;animation:dwFade .5s ease .7s forwards}
html.js .draw .mv{opacity:0;transform:var(--from);animation:dwPiece .8s var(--ease) .75s forwards}
/* La pieza llega la última y encaja con un pequeño rebote, como la clave del arco. */
html.js .draw .pc{opacity:0;transform:var(--from);animation:dwPiece .75s cubic-bezier(.34,1.3,.5,1) 1.25s forwards}
@keyframes dwLine{to{stroke-dashoffset:0}}
@keyframes dwFade{to{opacity:.8}}
@keyframes dwPiece{from{opacity:0;transform:var(--from)}to{opacity:1;transform:none}}

/* ENTRADAS (.r) · el mismo sistema que la portada. */
html.js .r{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
html.js .r.v{opacity:1;transform:none}
html.js.rm .r{opacity:1;transform:none}

/* ==================================================================
   CABECERA DEL SERVICIO · azul marino, texto a la izquierda y plano a la derecha.
   ================================================================== */
.sh{background:var(--navy);color:var(--on);padding:clamp(2rem,5vw,4.5rem) var(--m) var(--gap)}
.sh .two{grid-template-columns:1.1fr .9fr;align-items:center}
/* align-items:baseline alinea el texto de los tres elementos aunque el enlace tenga relleno extra (área para tocar). */
.crumb{font-size:var(--fs-small);color:var(--on-mute);margin-bottom:1.4rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.crumb a{text-underline-offset:.3em;padding:.5rem 0}.crumb a:hover{color:var(--on)}
.crumb [aria-current]{color:var(--on)}
.sh h1{font-size:clamp(2.6rem,6.6vw,6rem)}
.sh .lead{margin:1.4rem 0 2.2rem;font-size:clamp(1.1rem,1.6vw,1.45rem);max-width:30em;color:var(--on-soft);font-weight:450;letter-spacing:.01em;line-height:1.6}
.sh-art{padding:clamp(1.2rem,3vw,2.6rem)}

/* ¿TE SUENA? · frases grandes con el final en azul, como «No necesitas empezar de cero». */
.fails li{font-size:var(--fs-statement);font-weight:800;line-height:1.05;letter-spacing:-.03em;padding:0 0 1.4rem}
.fails li span{color:var(--blue)}
.note{margin-top:1.6rem;max-width:34em;font-size:var(--fs-lead)}

/* CÓMO LO HACEMOS · línea de tiempo. Aquí sí hay números: el orden de los pasos importa.
   El título se queda fijo a la izquierda (sticky) mientras recorres los pasos. */
.proc{background:var(--soft)}
.proc .two{grid-template-columns:.8fr 1.2fr;align-items:start}
.proc .two>div:first-child{position:sticky;top:calc(var(--nh) + 2rem)}
.steps{display:grid}
.step{display:grid;grid-template-columns:4.2rem 1fr;gap:1.2rem;padding-bottom:clamp(1.8rem,3vw,2.6rem);position:relative}
.step .sn{font-weight:800;font-size:2.6rem;line-height:1;letter-spacing:-.04em;color:var(--blue);font-variant-numeric:tabular-nums}
/* La línea vertical que une un paso con el siguiente (el último no la lleva). */
.step:not(:last-child)::before{content:"";position:absolute;left:1.35rem;top:3.4rem;bottom:.8rem;width:2px;background:var(--blue);opacity:.25}
.step h3{margin:.35rem 0 .5rem}
.step p{max-width:34em;color:var(--ink2)}

/* BLOQUE PROPIO DE CADA SERVICIO */
.special .two{align-items:start}
.tag{display:inline-block;font:500 .78rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border:1px solid currentColor;padding:.45rem .6rem}

/* Diagnóstico · el esquema del informe, como una hoja. */
.doc{background:var(--on);border:1px solid rgba(11,31,74,.14);box-shadow:0 24px 48px -28px rgba(11,31,74,.45);padding:clamp(1.4rem,3vw,2.6rem)}
.doc-h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:.9rem;margin-bottom:.4rem}
.doc-h strong{font-size:var(--fs-h3);letter-spacing:-.02em}
.doc-h span{color:var(--ink2);font-size:var(--fs-small)}
.doc ol{display:grid}
.doc li{display:grid;grid-template-columns:2.4rem 1fr;gap:.8rem;padding:1.1rem 0;border-bottom:1px solid rgba(11,31,74,.12)}
.doc li:last-child{border-bottom:0}
.doc li>span{font:500 .9rem/1.6 "IBM Plex Mono",ui-monospace,monospace;color:var(--blue)}
.doc h3{font-size:1.15rem;margin-bottom:.2rem}
.doc p{color:var(--ink2)}
.doc li.key{background:var(--soft);margin:0 -.9rem;padding-left:.9rem;padding-right:.9rem}

/* Reservas · lo que se queda y la pieza nueva. */
.cx{display:grid;grid-template-columns:1fr 1fr 1fr 1.2fr;gap:2px;background:var(--ink);border:2px solid var(--ink);margin-top:clamp(2rem,4vw,3.4rem)}
.cx>div{background:var(--on);padding:clamp(1.2rem,2.4vw,2rem);display:flex;flex-direction:column;gap:.5rem;min-height:12rem}
.cx .add{background:var(--sky)}
.cx small{font:500 .78rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.cx h3{font-size:clamp(1.3rem,2vw,1.8rem)}
.cx p{color:var(--ink2);margin-top:auto}
.cx .add p{color:var(--ink)}
.cx .add svg{width:2.6rem;height:auto;margin-bottom:.2rem}

/* Cobros · el mismo cobro antes y ahora. */
.flow{display:grid;grid-template-columns:1fr 1fr;gap:var(--m);margin-top:clamp(2rem,4vw,3.4rem)}
.flow h3{margin-bottom:1rem;display:flex;align-items:baseline;gap:.8rem}
.flow h3 small{font:500 .82rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;color:var(--ink2)}
.flow ol{display:grid;gap:1.4rem}
.flow li{padding:1rem 1.2rem;position:relative;font-weight:600}
.flow li:not(:last-child)::after{content:"";position:absolute;left:1.6rem;top:100%;height:1.4rem;width:2px;background:currentColor;opacity:.3}
.flow .old li{border:2px dashed var(--ghost);color:var(--ink2)}
.flow .old li em{font-style:normal;font:500 .72rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--er);margin-left:.6rem;white-space:nowrap}
.flow .new li{background:var(--sky);color:var(--ink)}
.flow .new li:not(:last-child)::after{opacity:.6;background:var(--blue)}

/* Renovación web · comparador «antes / ahora».
   APRENDE · container-type:inline-size convierte el marco en «contenedor»: dentro, la unidad cqw
   es el 1 % de SU ancho. Así las dos webs de ejemplo escalan como una imagen. */
/* Reparto: comparador en la columna izquierda (ocupa las dos filas) y, a la derecha, el título arriba y los cambios abajo. */
.ba-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(2rem,5vw,5rem);row-gap:clamp(1.6rem,3vw,2.4rem);align-items:start}
.ba-hd{grid-column:2;grid-row:1}
.ba-split .ba{grid-column:1;grid-row:1 / span 2;align-self:center}
.ba-split .chg{grid-column:2;grid-row:2;grid-template-columns:1fr 1fr;margin-top:0}
.ba{margin-top:0}
.ba-win{border:2px solid var(--ink);background:var(--ink)}
.ba-bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem}
.ba-bar i{width:.6rem;height:.6rem;border:1.5px solid var(--on-mute);border-radius:50%}
.ba-bar span{margin-left:.6rem;flex:1;max-width:22rem;background:var(--navy-2);color:var(--on-mute);font:500 .75rem/1 "IBM Plex Mono",ui-monospace,monospace;padding:.4rem .7rem}
.ba-view{position:relative;aspect-ratio:16/10;overflow:hidden;container-type:inline-size;--v:50;touch-action:pan-y}
.ba-view:has(.ba-range:focus-visible){outline:3px solid var(--blue);outline-offset:3px}
.ba-old,.ba-new{position:absolute;inset:0}
/* La web nueva se recorta desde la izquierda: lo que queda a la izquierda del tirador es «antes». */
.ba-new{clip-path:inset(0 0 0 calc(var(--v)*1%))}
.ba-handle{position:absolute;top:0;bottom:0;left:calc(var(--v)*1%);width:0;pointer-events:none}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:var(--on)}
.ba-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:3.2rem;height:3.2rem;background:var(--blue);color:var(--on);display:grid;place-items:center;box-shadow:0 8px 20px -8px rgba(5,12,26,.6)}
.ba-knob svg{width:1.6rem;height:1.6rem}
/* El control real es un <input type="range"> invisible encima de todo: funciona con ratón, dedo y teclado. */
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:3.2rem;height:100vh}
.ba-range::-moz-range-thumb{width:3.2rem;height:100vh;border:0}
/* Leyenda en la barra del navegador: qué lado es «antes» y cuál «ahora», sin tapar las webs. */
.ba-lbl{font:500 .7rem/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--on);padding:.4rem .55rem;white-space:nowrap}
.ba-lbl.l{margin-left:auto;background:var(--navy-3)}.ba-lbl.n{background:var(--blue)}
@media(max-width:560px){.ba-bar span{display:none}}
.ba-ctl{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.ba-ctl button{font:inherit;font-weight:700;font-size:var(--fs-ui);background:none;border:2px solid var(--ink);color:var(--ink);padding:.75rem 1.1rem;min-height:44px;cursor:pointer;transition:background .2s,color .2s}
.ba-ctl button:hover,.ba-ctl button[aria-pressed="true"]{background:var(--ink);color:var(--on)}
.ba-note{margin-top:.8rem;color:var(--ink2);font-size:var(--fs-small)}

/* Web «antes» (ejemplo ficticio, a propósito anticuada). */
.ba-old{background:#efe6c8;font-family:"Times New Roman",Times,serif;color:#222;text-align:center;padding:2.2cqw 3cqw;display:flex;flex-direction:column;gap:1.2cqw}
.ba-old .t{font-size:5.2cqw;font-weight:700;color:#b00000;text-shadow:.35cqw .35cqw 0 #9a9a9a;letter-spacing:.2cqw}
.ba-old .s{font-size:1.7cqw;font-style:italic}
.ba-old .w{background:#000080;color:#ffff00;font-size:1.6cqw;font-weight:700;padding:.6cqw}
.ba-old .n{font-size:1.4cqw;color:#0000ee;text-decoration:underline}
.ba-old .b{display:grid;grid-template-columns:30cqw 1fr;gap:2cqw;text-align:justify;font-size:1.25cqw;line-height:1.35}
.ba-old .ph{border:.3cqw ridge #999;background:#ccc;color:#666;display:grid;place-items:center;font-size:1.3cqw;height:18cqw}
.ba-old .f{margin-top:auto;font-size:1.1cqw;display:flex;justify-content:space-between;align-items:center}
.ba-old .f b{background:#000;color:#3f3;font-family:"Courier New",monospace;padding:.2cqw .6cqw;letter-spacing:.4cqw}

/* Web «ahora» (el mismo negocio ficticio, renovado). Paleta propia del ejemplo: corteza y trigo. */
.ba-new{background:#3a1d0c;color:#fff7ea;font-family:"Plus Jakarta Sans",system-ui,sans-serif;display:flex;flex-direction:column}
.ba-new .h{display:flex;justify-content:space-between;align-items:center;padding:2.4cqw 4cqw;font-size:1.5cqw}
.ba-new .h strong{font-size:2.1cqw;font-weight:800;letter-spacing:-.04cqw}
.ba-new .h .nv{display:flex;gap:2.4cqw;align-items:center;opacity:.9}
.ba-new .h .nv i{font-style:normal;background:#e9a43c;color:#2a1406;font-weight:700;padding:.9cqw 1.8cqw;opacity:1}
/* Foto a la izquierda y texto a la derecha: así, con el tirador en el centro, ya se lee el titular nuevo. */
.ba-new .m{flex:1;display:grid;grid-template-columns:.8fr 1.2fr;gap:3cqw;align-items:center;padding:0 4cqw}
.ba-new .m p{font-size:1.6cqw;opacity:.88;margin:1.6cqw 0 2.4cqw;max-width:34cqw;line-height:1.5}
.ba-new .m .big{font-size:4.6cqw;font-weight:800;line-height:1;letter-spacing:-.18cqw;text-wrap:balance}
.ba-new .m .bt{display:flex;gap:1.4cqw;font-size:1.5cqw;font-weight:700}
.ba-new .m .bt span{background:#e9a43c;color:#2a1406;padding:1.3cqw 2.2cqw}
.ba-new .m .bt span+span{background:none;color:#fff7ea;border:.2cqw solid #fff7ea}
.ba-new .m svg{width:100%;height:auto}
.ba-new .i{display:grid;grid-template-columns:repeat(3,1fr);background:#f6e7cf;color:#3a1d0c;font-size:1.45cqw}
.ba-new .i span{padding:1.8cqw 4cqw;border-left:.15cqw solid rgba(58,29,12,.2)}
.ba-new .i span:first-child{border-left:0}
.ba-new .i b{display:block;font-size:1.15cqw;font-weight:700;letter-spacing:.1cqw;text-transform:uppercase;opacity:.7;margin-bottom:.3cqw}

.chg{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--m);margin-top:clamp(2rem,4vw,3rem)}
.chg li{border-top:2px solid var(--ink);padding-top:.9rem}
.chg h3{font-size:1.15rem;margin-bottom:.35rem}
.chg p{color:var(--ink2);font-size:var(--fs-ui)}

/* OTRAS PIEZAS · las otras tres páginas de servicio, con su dibujo. */
.more{background:var(--paper)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--m);margin-top:clamp(2rem,4vw,3rem)}
.sv{display:flex;flex-direction:column;height:100%;background:var(--on);color:var(--ink);text-decoration:none;transition:background .25s var(--ease)}
.sv-pl{display:grid;place-items:center;aspect-ratio:16/10;padding:clamp(1rem,2vw,1.6rem)}
.sv-pl .dw{max-width:300px}
.sv-tx{display:flex;flex-direction:column;gap:.6rem;padding:clamp(1.2rem,2.2vw,1.8rem);flex:1}
.sv-tx p{color:var(--ink2);font-size:var(--fs-ui)}
.sv-go{margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--blue)}
.arw{width:1.15em;height:1.15em;transition:transform .25s var(--ease)}
.sv:hover{background:var(--soft)}
.sv:hover .arw{transform:translateX(5px)}
.sv .pc{transition:transform .35s var(--ease)}
.sv:hover .pc{transform:translateY(-6px)}

/* CIERRE · llamada a la acción antes del pie. */
.band{background:var(--navy);color:var(--on)}
.band .two{align-items:end}
.band p{color:var(--on-soft);font-size:var(--fs-lead);max-width:26em;margin:1.2rem 0 2rem;font-weight:450;letter-spacing:.01em}

@media(max-width:1000px){.cx{grid-template-columns:1fr 1fr}.chg{grid-template-columns:1fr 1fr}}
@media(max-width:820px){
 .two,.sh .two,.proc .two{grid-template-columns:minmax(0,1fr)}
 .ba-split{grid-template-columns:minmax(0,1fr)}
 .ba-hd,.ba-split .ba,.ba-split .chg{grid-column:1;grid-row:auto}
 .proc .two>div:first-child{position:static}
 .flow{grid-template-columns:1fr}
 .svc{grid-template-columns:minmax(0,1fr)}
 .sh .lead{margin:1rem 0 1.6rem}
 .ba-view{aspect-ratio:4/3}
}
@media(max-width:560px){
 .cx,.chg,.ba-split .chg{grid-template-columns:1fr}
 .cx>div{min-height:0}
 .step{grid-template-columns:3.2rem 1fr;gap:.8rem}
 .step .sn{font-size:2rem}
 .step:not(:last-child)::before{left:1rem;top:2.8rem}
}
/* REDUCIR MOVIMIENTO · todo visible desde el principio, sin trazos animados. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 html.js .r{opacity:1;transform:none;transition:none}
 html.js .draw .ln,html.js .draw .lt,html.js .draw .ax,html.js .draw .ax0,html.js .draw .mv,html.js .draw .pc{animation:none;stroke-dashoffset:0;opacity:1;transform:none}
 html.js .draw .ax{opacity:.8}
 nav.open .links{animation:none}
}