/* HBD Revolution · v10 (túnel, cabecera y salida a la luz de v9 intactos; zona clara según GUION v10) */
@font-face{font-family:"Archivo Wide";src:url("assets/fonts/archivo-wide.woff2") format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Manrope";src:url("assets/fonts/manrope-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("assets/fonts/jbmono-var.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Wide Fallback";src:local("Verdana Bold"),local("Verdana-Bold"),local("Arial Black");font-weight:800;size-adjust:96%;ascent-override:91.5%;descent-override:21.9%;line-gap-override:0%}
@font-face{font-family:"Manrope Fallback";src:local("Arial");size-adjust:104%;ascent-override:102.5%;descent-override:28.8%;line-gap-override:0%}
@font-face{font-family:"Mono Fallback";src:local("Consolas"),local("Menlo");size-adjust:100%}


/* =========================== SISTEMA COMÚN (túnel + zona clara) ===========================
   Color · Tipo · Espacio (base 8 px) · Retícula 12 col · Radios · Sombras · Movimiento */
:root{
  /* color: zona túnel (azul profundo de marca, degradado radial desde el punto de fuga) */
  --bg:#0a1233; --bg-c:#1a2a66; --ink:#ffffff; --mute:#b9c2d8; --cy:#00aeef; --cy-l:#8fdcfb;
  /* color: Cliender (manual, solo estos 5) */
  --cl-w:#ffffff; --cl-c:#ebeae4; --cl-p:#927eec; --cl-d:#14181e; --cl-n:#1e2839;
  /* HBD: el degradado solo en elementos HBD (rombos, renders), nunca con morado en el mismo elemento */
  --hbd-1:#2d388a; --hbd-2:#00aeef; --hbd:linear-gradient(135deg,var(--hbd-1),var(--hbd-2));
  /* derivados (tinta y líneas por opacidad, no colores nuevos) */
  --ink-2:rgba(20,24,30,.76); --ink-l:rgba(20,24,30,.12); --ink-l2:rgba(20,24,30,.26);
  --line:rgba(185,194,216,.18); --line-2:rgba(185,194,216,.34); --panel:#0d1633;
  /* tipo: mismas familias, escala y tracking arriba y abajo */
  --f-wide:"Archivo Wide","Wide Fallback",sans-serif;
  --f-sans:"Manrope","Manrope Fallback",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","Mono Fallback",ui-monospace,monospace;
  --t-mono:.75rem; --t-s:.875rem;            /* túnel y cabecera; en la zona clara --t-s = .9375rem */
  /* zona clara: escala modular Manrope (GUION v10 §1.2) */
  --t-label:.85rem;
  --t-b:clamp(1rem,.95rem + .25vw,1.125rem);
  --t-lead:clamp(1.25rem,1.1rem + .6vw,1.4rem);
  --t-h3:clamp(1.5rem,1.2rem + 1.1vw,1.75rem);
  --t-h2m:clamp(1.75rem,.9rem + 2.6vw,2.5rem);
  --t-h2:clamp(2rem,1rem + 4.2vw,3.5rem);
  --t-num:clamp(3.5rem,1.5rem + 8vw,6rem);
  --t-d3:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);
  --t-d2:clamp(1.55rem,.95rem + 2.3vw,3.1rem);    /* = «Cliender, lo que se ve.» del héroe */
  --t-d1:clamp(1.8rem,.62rem + 5.3vw,5.4rem);    /* = H1 «Somos la estructura.» */
  --t-d0:clamp(2.4rem,.4rem + 7.6vw,7.6rem);
  --t-yr:clamp(3.5rem,1rem + 6.4vw,7.5rem);
  --t-xl:clamp(5rem,1.5rem + 11vw,12rem);
  --tr-d1:-.035em; --tr-d2:-.025em; --tr-mono:.12em; --lh-b:1.6;
  /* espacio: base 8 px */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --sec-y:clamp(56px,6vw,88px);
  /* retícula: 12 columnas; la cabecera y el contenido comparten el mismo borde */
  --g:clamp(16px,5vw,56px); --gut:clamp(16px,2.2vw,32px); --wrap:1280px;
  --pad-x:max(var(--g),calc((100% - var(--wrap)) / 2));
  /* radios y sombras (luz difusa, no glass) */
  --r1:6px; --r2:12px; --r3:20px;
  --sh1:0 1px 2px rgba(20,24,30,.06),0 12px 32px -14px rgba(20,24,30,.22);
  --sh2:0 2px 6px rgba(20,24,30,.08),0 36px 72px -28px rgba(30,40,57,.45);
  /* movimiento: un easing y cuatro duraciones para todo */
  --ease:cubic-bezier(.22,1,.36,1); --d1:.2s; --d2:.45s; --d3:.9s; --d4:1.3s;
  --rombo:polygon(50% 0,100% 50%,50% 100%,0 50%);
  --luz-ext:90vh; --luz-o:90vh;   /* tramo extra de la salida a la luz / cuánto sube «Qué hacemos» sobre él */
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--f-sans);font-size:1rem;line-height:1.5;overflow-x:clip;min-height:100vh}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
.mono{font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:var(--tr-mono);text-transform:uppercase}
:focus-visible{outline:3px solid var(--cy);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:16px;top:-90px;z-index:60;display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;background:#fff;color:var(--bg);font-weight:700;text-decoration:none;border-radius:6px}
.skip:focus{top:12px}

/* ---------- Cabecera ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px var(--g);pointer-events:none}
.top a{pointer-events:auto;text-decoration:none}
.brand{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.brand img{height:30px;width:auto}
.to-cl{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--cl-c)}
.to-cl__txt{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase}
.to-cl img{height:36px;width:auto}
.to-cl svg{width:12px;height:12px;flex:none}
@media (max-width:600px){.brand img{height:26px}.to-cl img{height:30px}.to-cl{gap:8px}}

/* ---------- Héroe ---------- */
.hero-copy{text-align:center}
.h-a{display:block;font-family:var(--f-wide);font-weight:800;font-size:clamp(1.8rem,.62rem + 5.3vw,5.4rem);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.h-b{display:block;margin-top:.32em;font-family:var(--f-wide);font-weight:700;font-size:clamp(1.55rem,.95rem + 2.3vw,3.1rem);line-height:1.05;letter-spacing:-.025em;color:var(--cl-p);text-wrap:balance}
.hero__act{margin:18px auto 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
@media (min-width:900px){.hero__act{flex-direction:row;gap:24px}.hero__act .lead{white-space:nowrap;max-width:none;text-wrap:nowrap}}
.poster-pic{display:contents}
.lead{max-width:38ch;text-wrap:balance;color:var(--mute);font-size:clamp(.98rem,.92rem + .3vw,1.125rem)}
.lead strong{color:#fff;font-weight:700}
.cue{display:none}
.poster{display:none}

/* CTA Cliender (paleta plana) */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 28px;background:var(--cl-p);color:var(--cl-d);font-family:var(--f-sans);font-weight:800;font-size:1.0625rem;text-decoration:none;border-radius:var(--r2);transition:background-color var(--d1) var(--ease)}
.cta:hover{background:var(--cl-c)}
.cta--hero{min-height:48px;padding:12px 22px;font-size:1rem}

/* ---------- Rótulos del túnel ---------- */
.beats ol{list-style:none}
.beat strong{display:block;font-family:var(--f-wide);font-weight:800;line-height:1;letter-spacing:-.035em;text-wrap:balance}
.beat__n{display:block;color:var(--cy-l);margin-bottom:18px}

/* ---------- Cliender (paleta plana, logo siempre sobre el navy liso que lo rodea) ---------- */
.clim{position:relative;overflow:hidden;background:var(--cl-n);color:var(--cl-w)}
.clim:focus{outline:none}
.clim__in{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:1000px;margin:0 auto}
.clim h2{padding:28px}
.clim h2 img{width:clamp(220px,40vw,600px)}
.clim__tag{font-family:var(--f-sans);font-weight:800;font-size:clamp(1.8rem,1rem + 2.6vw,3.4rem);line-height:1.05;letter-spacing:-.03em;color:var(--cl-w);text-wrap:balance}
.clim__text{margin-top:12px;max-width:40ch;color:var(--cl-c);font-family:var(--f-sans);font-size:clamp(1rem,.94rem + .3vw,1.18rem)}
.clim .cta{margin-top:26px}
.clim :focus-visible{outline-color:var(--cl-w)}
.clim__sign{margin-top:18px;font-family:var(--f-sans);font-size:.875rem;color:var(--cl-c)}
@media (max-width:600px){.clim__sign span{display:block}.clim__sign .sep{display:none}}
.portal,.portal__line,.trazo{display:none}

.gl,.hud,.goto{display:none}

/* =================== Modo 3D =================== */
.fx .track{position:relative;height:450vh}
.fx .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.fx .gl{display:block;position:absolute;inset:0;width:100%;height:100%}
.fx .hero-copy{position:absolute;inset:0;padding:calc(76px + 1vh) var(--g) 0;pointer-events:none;will-change:transform,opacity}
.fx .hero-copy a{pointer-events:auto}
.fx .h-a .w,.fx .h-b{display:inline-block;will-change:transform}
.fx .h-a .w:nth-child(1){transform:translate3d(-.18em,0,0) scale(1.04)}
.fx .h-a .w:nth-child(2){transform:translate3d(0,-.16em,0) scale(1.04)}
.fx .h-a .w:nth-child(3){transform:translate3d(.18em,0,0) scale(1.04)}
.fx .h-b{transform:translate3d(0,-.12em,0)}
.fx .cue{display:flex;position:absolute;left:0;right:0;bottom:26px;flex-direction:column;align-items:center;gap:8px;color:var(--mute)}
.fx .cue span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.fx .cue i{display:block;width:2px;height:26px;background:var(--cy);transform-origin:top;animation:cue 1.8s cubic-bezier(.22,1,.36,1) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:1}60%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
.fx .beats{position:absolute;inset:0;pointer-events:none}
.fx .beat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--g);text-align:center;opacity:0;visibility:hidden;will-change:transform,opacity}
.fx .beat strong{font-size:clamp(2rem,.9rem + 5vw,5.2rem);max-width:15ch}
.fx .beat__n{color:#fff}
.fx .clim{position:absolute;inset:0;padding:76px var(--g) 24px;background:transparent;pointer-events:none;display:flex;flex-direction:column;justify-content:center}
.fx .clim:not(.listo){visibility:hidden}
.fx .clim [data-in]{opacity:0}
.fx .clim .cta{transition:background-color .2s,translate .35s cubic-bezier(.22,1,.36,1)}
.fx .portal{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx .portal__bg{position:absolute;left:50%;top:50%;width:200px;height:225px;margin:-112.5px 0 0 -100px;background:var(--cl-n);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0;transform:scale(.02);will-change:transform}
.fx .portal__line{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.fx .portal__line path{fill:none;stroke:var(--cl-p);stroke-width:2}
.fx .portal__line .pi{stroke-opacity:.5;stroke-width:1}
.fx .trazo{display:block;position:absolute;overflow:visible;pointer-events:none;visibility:hidden;fill:none}
.fx .trazo path{fill:none;stroke-linecap:butt;stroke-linejoin:round}
.fx .trazo .tz-halo path{stroke:var(--cl-p);stroke-opacity:.55;stroke-width:var(--tz-h,20)}
.fx .trazo .tz-line path{stroke:#b9acf6;stroke-width:var(--tz-w,4)}
.fx .trazo .tz-fill{opacity:0}
.fx .trazo .tz-fill path{stroke:none}
.fx .trazo .tz-fill .tz-s{fill:var(--cl-p)}
.fx .trazo .tz-fill .tz-l{fill:#fff}
.fx .goto{display:inline-flex;position:absolute;right:var(--g);bottom:18px;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1.5px solid var(--cl-p);border-radius:10px;background:rgba(20,24,30,.78);color:#fff;font-family:var(--f-sans);font-weight:700;font-size:.9375rem;text-decoration:none;opacity:0;visibility:hidden}
.fx .goto:hover{background:var(--cl-p);color:var(--cl-d)}
.fx .hud{display:none}   /* v11: la barra del túnel la sustituye el indicador de progreso de toda la página (.prog / .prog-bar) */
.hud__bar{display:block;height:100%;background:rgba(185,194,216,.16)}
.hud__bar i{display:block;height:100%;background:var(--cy);transform-origin:left;transform:scaleX(0)}
.fx .foot{position:relative;z-index:1}
@media (max-width:600px){html:not(.fx) .hero-copy{padding-top:82px}.fx .hero-copy{padding-top:82px}.fx .goto{bottom:14px;padding:10px 14px}}
@media (max-height:640px){
  .fx .clim h2{padding:24px}.fx .clim h2 img{width:clamp(200px,40vw,600px)}
  .fx .cue{bottom:14px}.fx .cue span{display:none}
  .fx .clim__tag{font-size:1.5rem}.fx .clim__text{font-size:.95rem}.fx .clim__sign{font-size:.8rem;margin-top:10px}
  .fx .clim .cta{margin-top:14px;min-height:48px}
}

/* =================================================================================================
   v8 · «Salir a la luz» — sistema común túnel ↔ zona clara
   Mismos tokens de color, tipo, espacio, radios, sombras y movimiento arriba y abajo: la cabecera,
   los rótulos mono con rombo HBD, las cotas, los botones y el revelado son un único componente que
   solo cambia de color según el fondo (data-tema: tunel · navy · claro · crema).
   ================================================================================================= */

/* ---------- Componentes compartidos ---------- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.rb{display:inline-block;width:10px;height:11px;flex:none;background:var(--hbd);clip-path:var(--rombo)}
.rb--p{background:var(--cl-p)}
/* rótulo-kicker: rombo HBD + etiqueta mono + cota (el único mono de la zona clara, eco de los contadores del túnel) */
.kick{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:var(--t-label);font-weight:500;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.kick .cota{flex:1;max-width:240px;margin-left:8px}
.kick--osc{color:var(--cl-c)}
.beat__n::before{content:"";display:inline-block;width:10px;height:11px;margin-right:12px;background:var(--hbd);clip-path:var(--rombo);vertical-align:-1px}
/* cota de plano: línea de medida con remates y módulo (la misma de los rótulos del túnel) */
.cota{position:relative;display:block;height:11px;border-inline:1px solid currentColor;opacity:.55;transform-origin:left}
.cota::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:currentColor}
.cota::after{content:"";position:absolute;left:0;right:0;top:3px;height:5px;background:repeating-linear-gradient(90deg,transparent 0 23px,currentColor 23px 24px)}
/* encabezado de sección: kicker + H2 en Manrope (la voz de Cliender; Archivo Wide queda solo en el túnel) */
.sh{display:grid;gap:var(--s3);font-weight:inherit}
.sh__d{display:block;max-width:22ch;font-family:var(--f-sans);font-weight:800;font-size:var(--t-h2);line-height:1.05;letter-spacing:-.03em;color:var(--cl-d);text-wrap:balance;font-kerning:normal}
.sh__d--m{max-width:26ch;font-size:var(--t-h2m);font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink-2)}
.sh__d--m strong{color:var(--cl-d);font-weight:800}
[data-rv="mask"]{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
[data-rv="mask"]>span{display:block}
.intro{max-width:40ch;font-size:var(--t-lead);font-weight:500;line-height:1.45;letter-spacing:-.005em;color:var(--ink-2);text-wrap:pretty}
.lbl{font-family:var(--f-sans);font-size:var(--t-label);font-weight:700;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.arw{display:grid;place-items:center;width:48px;height:48px;flex:none;border:1.5px solid currentColor;border-radius:var(--r2);transition:transform var(--d2) var(--ease),background-color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.arw svg{width:14px;height:14px}

/* botón secundario: el mismo arriba y abajo, solo cambia el color */
.btn2{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border:1.5px solid var(--cl-p);border-radius:var(--r2);color:#fff;font-family:var(--f-sans);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease),border-color var(--d1) var(--ease)}
.btn2 svg{width:12px;height:12px;flex:none;transition:transform var(--d2) var(--ease)}
.btn2:hover{background:var(--cl-p);border-color:var(--cl-p);color:var(--cl-d)}
.btn2:hover svg{transform:translate(3px,-3px)}
.btn2:active{transform:translateY(1px)}
.cont .btn2{color:var(--cl-d);border-color:var(--cl-d)}
.cont .btn2:hover{background:var(--cl-p);border-color:var(--cl-p);color:var(--cl-d)}
.cont .btn2--osc{color:#fff;border-color:var(--cl-p)}
.cta:active{transform:translateY(1px)}

/* ---------- Cabecera: misma pieza en las dos zonas, cambia de color con lo que tiene debajo ---------- */
.top{padding:12px var(--pad-x)}
.top ul{list-style:none}
.brand,.to-cl__logo{position:relative}
.brand__l,.to-cl__l{position:absolute;left:0;top:0;opacity:0}
.brand__d,.brand__l,.to-cl__d,.to-cl__l{transition:opacity var(--d2) var(--ease)}
.brand img{height:30px;width:auto}
.to-cl__logo{display:block}
.to-cl__logo img{height:36px;width:auto}
@media (max-width:600px){.brand img{height:26px}.to-cl__logo img{height:30px}}
@media (max-width:399px){.to-cl__txt{display:none}.to-cl__logo img{height:28px}}
.nav{display:none}
.menu{margin-left:auto}
.menu summary{pointer-events:auto;list-style:none;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r1);cursor:pointer;color:var(--cl-c);font-family:var(--f-mono);font-size:var(--t-mono);font-weight:500;letter-spacing:var(--tr-mono);text-transform:uppercase;background:rgba(10,18,51,.55);transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{width:9px;height:10px;background:var(--hbd);clip-path:var(--rombo);transition:transform var(--d2) var(--ease)}
.menu[open] summary i{transform:rotate(90deg) scale(1.15)}
.menu__panel{pointer-events:auto;position:absolute;left:var(--g);right:var(--g);top:calc(100% - 4px);padding:6px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r2);box-shadow:0 24px 48px -24px rgba(0,0,0,.5)}
.menu__panel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:var(--r1);font-weight:600;color:var(--cl-c)}
.menu__panel a:hover{background:rgba(185,194,216,.08)}
.menu__panel a[aria-current]{color:#fff;box-shadow:inset 2px 0 0 var(--cy)}
@media (min-width:1100px){
  .menu{display:none}
  .nav{display:block;margin-left:auto;margin-right:clamp(8px,2vw,28px)}
  .nav ul{display:flex;align-items:center}
  .nav li+li::before{content:"";width:4px;height:5px;background:var(--line-2);clip-path:var(--rombo)}
  .nav li{display:flex;align-items:center}
  .nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:var(--t-s);font-weight:600;color:var(--mute);transition:color var(--d1) var(--ease)}
  .nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:9px;height:1.5px;background:var(--cy);transform:scaleX(0);transform-origin:left;transition:transform var(--d2) var(--ease)}
  .nav a:hover,.nav a[aria-current]{color:#fff}
  .nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hdr-bg,var(--cl-n));border-bottom:1px solid var(--hdr-line,var(--line));opacity:0;transition:opacity var(--d2) var(--ease)}
.fx .top.is-solid::before{opacity:1}
.top[data-tema="navy"]{--hdr-bg:var(--cl-n)}
.top[data-tema="claro"],.top[data-tema="crema"]{--hdr-bg:var(--cl-w);--hdr-line:var(--ink-l);color:var(--cl-d)}
.top[data-tema="crema"]{--hdr-bg:var(--cl-c)}
.top[data-tema="claro"] .brand__d,.top[data-tema="crema"] .brand__d,.top[data-tema="claro"] .to-cl__d,.top[data-tema="crema"] .to-cl__d{opacity:0}
.top[data-tema="claro"] .brand__l,.top[data-tema="crema"] .brand__l,.top[data-tema="claro"] .to-cl__l,.top[data-tema="crema"] .to-cl__l{opacity:1}
.top[data-tema="claro"] .to-cl,.top[data-tema="crema"] .to-cl{color:var(--cl-d)}
.top[data-tema="claro"] .nav a,.top[data-tema="crema"] .nav a{color:var(--ink-2)}
.top[data-tema="claro"] .nav a:hover,.top[data-tema="claro"] .nav a[aria-current],.top[data-tema="crema"] .nav a:hover,.top[data-tema="crema"] .nav a[aria-current]{color:var(--cl-d)}
.top[data-tema="claro"] .nav a::after,.top[data-tema="crema"] .nav a::after{background:var(--cl-p)}
.top[data-tema="claro"] .nav li+li::before,.top[data-tema="crema"] .nav li+li::before{background:var(--ink-l2)}
.top[data-tema="claro"] .menu summary,.top[data-tema="crema"] .menu summary{background:var(--cl-w);color:var(--cl-d);border-color:var(--ink-l2)}
.top[data-tema="claro"] .menu__panel,.top[data-tema="crema"] .menu__panel{background:var(--cl-w);border-color:var(--ink-l);box-shadow:var(--sh2)}
.top[data-tema="claro"] .menu__panel a,.top[data-tema="crema"] .menu__panel a{color:var(--cl-d)}
.top[data-tema="claro"] .menu__panel a:hover,.top[data-tema="crema"] .menu__panel a:hover{background:var(--cl-c)}
.top[data-tema="claro"] .menu__panel a[aria-current],.top[data-tema="crema"] .menu__panel a[aria-current]{box-shadow:inset 3px 0 0 var(--cl-p)}
.top[data-tema="claro"] :focus-visible,.top[data-tema="crema"] :focus-visible{outline-color:var(--cl-d)}

/* ---------- Clímax como transición (v7): se funde con el navy y avisa de que la página sigue ---------- */
.stage__fade,.clim__next{display:none}
.fx .stage__fade{display:block;position:absolute;left:0;right:0;bottom:0;height:24vh;background:linear-gradient(rgba(30,40,57,0),var(--cl-n) 88%);opacity:0;pointer-events:none;transition:opacity .9s var(--ease)}
html[data-tramo="cliender"] .stage__fade{opacity:1}
.fx .clim__next{position:absolute;left:0;right:0;bottom:14px;margin:0 auto;width:max-content;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;padding:6px 12px;border-radius:var(--r1);color:var(--cl-c);text-decoration:none}
.clim__next span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.clim__next i{display:block;width:2px;height:24px;background:var(--cl-p);transform-origin:top}
html[data-tramo="cliender"] .clim__next i{animation:nx 1.8s var(--ease) 3 forwards}
@keyframes nx{0%{transform:scaleY(0)}65%,100%{transform:scaleY(1)}}
@media (max-height:699px){
  .fx .clim__next{clip-path:inset(50%);background:var(--cl-n)}
  .fx .clim__next:focus-visible{clip-path:none}
}

/* ---------- Salir a la luz ---------- */
/* estático (sin WebGL / movimiento reducido): composición fija, el rombo de luz asoma y funde con el blanco */
.luz{position:relative;height:clamp(220px,34vw,440px);overflow:hidden;background:var(--cl-n)}
.luz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(rgba(255,255,255,0),#fff 92%)}
.luz__glow{position:absolute;left:50%;bottom:-60%;width:150%;aspect-ratio:1;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(235,234,228,.6),rgba(235,234,228,0))}
.luz__r{position:absolute;left:50%;bottom:0;height:auto;transform:translate(-50%,50%)}
.luz__r3{width:min(150vw,1700px);opacity:.5}
.luz__r2{width:min(118vw,1300px);opacity:.85}
.luz__r1{position:absolute;left:50%;bottom:0;width:min(66vw,760px);aspect-ratio:72/81;background:#fff;clip-path:var(--rombo);transform:translate(-50%,58%)}
.luz-ext{display:none}
/* 3D: capa sobre el clímax, guiada por el scroll (solo transform/opacity) */
.fx .track{height:calc(450vh + var(--luz-ext))}
.fx .luz-ext{display:block;position:absolute;left:0;right:0;bottom:0;height:var(--luz-ext);pointer-events:none;visibility:hidden}
.fx .luz{position:absolute;inset:0;height:auto;background:none;pointer-events:none;visibility:hidden;z-index:3}
.fx .luz::after{display:none}
html.fx[data-luz] .luz{visibility:visible}
html.fx[data-luz="llena"] .luz{background:#fff}
.fx .luz__glow{left:50%;top:50%;bottom:auto;width:150vmax;height:150vmax;aspect-ratio:auto;margin:-75vmax 0 0 -75vmax;transform:scale(.1);opacity:0}
.fx .luz__r{left:50%;top:50%;bottom:auto;width:512px;height:576px;max-width:none;margin:-288px 0 0 -256px;transform:scale(0);opacity:0;mix-blend-mode:plus-lighter}
.fx .luz__r1{left:50%;top:50%;bottom:auto;width:200px;height:225px;aspect-ratio:auto;margin:-112.5px 0 0 -100px;transform:scale(0)}
html.fx[data-luz] .luz__glow,html.fx[data-luz] .luz__r,html.fx[data-luz] .luz__r1{will-change:transform,opacity}

/* «Qué hacemos» sube sobre el último tramo del túnel: su cabecera aparece mientras la luz se abre
   (la franja que solapa es transparente: la luz es su fondo) */
.fx .cont{position:relative;margin-top:calc(var(--luz-o) * -1)}

/* =================================================================================================
   v10 · Zona clara = Cliender. Manrope en todo (el mono solo en el kicker), bandas amplias blanco / crema,
   un único navy (Historia) y un único morado de impacto (remate de Valores). Retícula de 12 columnas,
   espaciado en múltiplos de 8 px. Movimiento solo de entrada y de hover (transform/opacity, una vez).
   ================================================================================================= */
.cont,.foot{--t-s:.9375rem}
.cont{background:var(--cl-w);color:var(--cl-d)}
.cont [data-tema="claro"]{background:var(--cl-w)}
.cont [data-tema="crema"]{background:var(--cl-c)}
.cont [data-tema="navy"]{background:var(--cl-n);color:var(--cl-w)}
.cont :focus-visible{outline-color:var(--cl-d)}
.cont [data-tema="navy"] :focus-visible{outline-color:var(--cl-w)}
.fx .cont{background:transparent}
.fx .cont>.hac{background:linear-gradient(rgba(255,255,255,0) 0 var(--luz-o),var(--cl-w) var(--luz-o))}
/* relleno vertical por sección (arriba / abajo), no uniforme: móvil · escritorio */
.sec{position:relative;padding-block:var(--py-t,64px) var(--py-b,64px);scroll-margin-top:68px}
.hac{--py-t:32px;--py-b:64px}
.cli-s{--py-t:48px;--py-b:48px}
.nos{--py-t:72px;--py-b:64px}
.met-s{--py-t:64px;--py-b:64px}
.his-s{--py-t:72px;--py-b:72px}
.val-s{--py-t:64px;--py-b:56px}
.eq-s{--py-t:64px;--py-b:72px}
.fin{--py-t:72px;--py-b:56px}
@media (min-width:900px){
  .hac{--py-b:112px}
  .cli-s{--py-t:72px;--py-b:72px}
  .nos{--py-t:128px;--py-b:96px}
  .met-s{--py-t:112px;--py-b:112px}
  .his-s{--py-t:128px;--py-b:128px}
  .val-s{--py-t:112px;--py-b:96px}
  .eq-s{--py-t:96px;--py-b:120px}
  .fin{--py-t:128px;--py-b:96px}
}
.wrap{position:relative;padding-inline:var(--pad-x)}
@media (min-width:900px){
  .g12,.hac__head,.met__head,.eq__head,.nos__top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
}
/* cabecera de sección: kicker + titular a la izquierda (col 1-8), entradilla + CTA a la derecha (col 9-12) a la base */
.hac__head,.met__head,.eq__head{display:grid;gap:var(--s4);margin-bottom:var(--s5)}
.hac__aside,.met__aside,.eq__aside{display:grid;gap:var(--s3);justify-items:start;align-content:end}
@media (min-width:900px){
  .hac__head,.met__head,.eq__head{margin-bottom:var(--s6)}
  .hac__head .sh,.met__head .sh,.eq__head .sh{grid-column:1/9}
  .hac__aside,.met__aside,.eq__aside{grid-column:9/13;padding-bottom:var(--s1)}
}
/* enlace de texto */
.lnk{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;font-weight:700;font-size:var(--t-b);color:var(--cl-d);text-decoration:underline;text-decoration-color:var(--cl-p);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color var(--d1) var(--ease)}
.lnk svg{width:12px;height:12px;flex:none;transition:transform var(--d2) var(--ease)}
.lnk:hover{text-decoration-color:var(--cl-d)}
.lnk:hover svg{transform:translate(3px,-3px)}
/* CTA morado en claro: al pasar, tinta */
.cont .cta{transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.cont .cta:hover{background:var(--cl-d);color:var(--cl-w)}
.cont .cta svg{width:14px;height:14px;flex:none;transition:transform var(--d2) var(--ease)}
.cont .cta:hover svg{transform:translate(3px,-3px)}
/* CTA tinta (solo sobre el morado del remate) */
.cta-ink{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 24px;border-radius:var(--r2);background:var(--cl-d);color:var(--cl-w);font-family:var(--f-sans);font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;transition:background-color var(--d1) var(--ease),color var(--d1) var(--ease)}
.cta-ink svg{width:12px;height:12px;flex:none;transition:transform var(--d2) var(--ease)}
.cta-ink:hover{background:var(--cl-w);color:var(--cl-d)}
.cta-ink:hover svg{transform:translate(3px,-3px)}
.cta-ink:active{transform:translateY(1px)}
.val__fin .cta-ink:focus-visible{outline:3px solid var(--cl-w);outline-offset:3px;border-radius:var(--r2);box-shadow:0 0 0 9px var(--cl-d)}

/* ---------- Qué hacemos: tres escenarios navy (el navy del clímax) con la pantalla real asomando ---------- */
.vt{list-style:none;display:grid;gap:var(--gut)}
.vt__i{display:grid;min-width:0}
.vt__c{position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr;min-width:0;border-radius:var(--r3);background:var(--cl-c)}
.vt__c::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;box-shadow:var(--sh2);opacity:0;transition:opacity var(--d2) var(--ease);pointer-events:none}
.vt__win{position:relative;overflow:hidden;aspect-ratio:4/3;border-radius:var(--r3) var(--r3) 0 0;background:var(--cl-n)}
.vt__in{position:absolute;inset:0;display:block;transition:transform var(--d3) var(--ease) .12s}
.vt__scr{position:absolute;max-width:none;height:auto;border-radius:var(--r1);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 16px 32px -16px rgba(0,0,0,.65)}
/* regla común: la pantalla entra por arriba-izquierda y se corta a sangre por la derecha y por abajo */
.vt__shot{width:78%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.vt__shot--3{left:8%;top:12%}
.vt__shot--2{left:19%;top:26%}
.vt__shot--1{left:30%;top:40%}
.vt__i--sales .vt__scr{width:116%;left:10%;top:16%}
.vt__i--media .vt__scr{width:134%;left:6%;top:18%}
.vt__txt{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s3)}
.vt__h{line-height:1.05}
.cont i,.foot i{font-style:normal}
.vt__h a{display:inline-flex;flex-direction:column;gap:var(--s1);text-decoration:none}
.vt__h a::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--r3)}
.vt__h a:focus-visible{outline:none}
.vt__i:focus-within .vt__c{outline:3px solid var(--cl-d);outline-offset:4px}
.vt__i:focus-within .vt__name{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.14em;text-decoration-color:var(--cl-p)}
.vt__brand{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-s);font-weight:700;line-height:1.4;color:var(--ink-2)}
.vt__brand::before{content:"";width:9px;height:10px;flex:none;background:var(--cl-p);clip-path:var(--rombo)}
.vt__name{font-weight:800;font-size:var(--t-h2m);line-height:1.05;letter-spacing:-.02em;color:var(--cl-d)}
.vt__d{max-width:36ch;color:var(--ink-2);font-size:var(--t-b);line-height:1.6;text-wrap:pretty}
.vt__go{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin-top:auto;padding-top:var(--s2);color:var(--ink-2);font-size:var(--t-s);font-weight:600;line-height:1.5}
.vt__go .arw{color:var(--cl-d)}
@media (min-width:640px) and (max-width:899px){
  .vt__c{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:none}
  .vt__win{aspect-ratio:auto;min-height:260px;border-radius:var(--r3) 0 0 var(--r3)}
  .vt__txt{padding:var(--s4)}
  /* ventana más alta que ancha: las pantallas se dimensionan por la altura para seguir cortando a sangre */
  .vt__shot{width:auto;height:48%}
  .vt__shot--2{top:32%}
  .vt__shot--1{top:56%}
  .vt__i--sales .vt__scr{width:auto;height:88%}
  .vt__i--media .vt__scr{width:auto;height:86%}
}
@media (min-width:900px){
  .vt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .vt__txt{padding:var(--s4)}
}
@media (hover:hover){
  .vt__i:hover .vt__c::before{opacity:1}
  .vt__i:hover .arw{background:var(--cl-p);border-color:var(--cl-p)}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .vt__c{transition:transform var(--d2) var(--ease)}
  .vt__scr{transition:transform .6s var(--ease)}
  .vt__i:hover .vt__c{transform:translate3d(0,-4px,0)}
  .vt__i:hover .vt__scr{transform:translate3d(-6px,-6px,0)}
  .vt__i:hover .arw{transform:translate(4px,-4px)}
}

/* Software propio: panel de producto con la captura real del CRM sangrando a derecha y abajo */
.soft{position:relative;overflow:hidden;display:grid;gap:var(--s4);margin-top:var(--gut);padding:var(--s4) var(--s3) 0;border-radius:var(--r3);background:var(--cl-c)}
.soft__txt{display:grid;gap:var(--s3);justify-items:start;align-content:start}
.soft__list{list-style:none;width:100%}
.soft__list li{display:flex;align-items:center;gap:var(--s2);padding-block:var(--s2);border-top:1px solid var(--ink-l2);font-weight:800;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.015em;color:var(--cl-d)}
.soft__list li::before{content:"";width:10px;height:11px;flex:none;background:var(--cl-p);clip-path:var(--rombo)}
.soft__win{justify-self:end;width:calc(100% + var(--s3));margin-right:calc(var(--s3) * -1);overflow:hidden;border-radius:var(--r2) var(--r2) 0 0;background:var(--cl-w);box-shadow:0 0 0 1px rgba(20,24,30,.08),var(--sh2)}
.soft__in{display:block;transition:transform var(--d3) var(--ease) .12s}
.soft__in img{width:100%}
@media (min-width:900px){
  .soft{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding:var(--s5) var(--s5) 0}
  .soft__txt{grid-column:1/7;padding-bottom:var(--s5)}
  .soft__win{grid-column:7/13;align-self:end;width:min(calc(100% + var(--s5)),600px);margin-right:calc(var(--s5) * -1)}
}
/* ---------- Confían en nosotros: muro de logos en tinta sobre crema ---------- */
.logos{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--s4)}
.logo{display:grid;place-items:center;min-width:0;height:88px;border-right:1px solid var(--ink-l);border-bottom:1px solid var(--ink-l)}
.logo:nth-child(2n){border-right:0}
.logo:nth-child(n+7){border-bottom:0}
.logo img{width:auto;max-width:70%;height:calc(var(--lh) * .8);object-fit:contain;opacity:.8;transition:opacity var(--d1) var(--ease)}
.logo:hover img{opacity:1}
.logo--fox{--lh:56px}
.logo--integra{--lh:56px}
.logo--xd{--lh:44px}
.logo--academy{--lh:36px}
.logo--sbc{--lh:48px}
.logo--sie{--lh:30px}
.logo--ehe{--lh:28px}
.logo--refor{--lh:30px}
@media (min-width:640px){
  .logos{grid-template-columns:repeat(4,minmax(0,1fr))}
  .logo{height:104px}
  .logo:nth-child(2n){border-right:1px solid var(--ink-l)}
  .logo:nth-child(4n){border-right:0}
  .logo:nth-child(n+5){border-bottom:0}
  .logo img{height:calc(var(--lh) * .9)}
}
@media (min-width:900px){
  .logos{margin-top:var(--s5)}
  .logo{height:128px}
  .logo img{height:var(--lh)}
}

/* ---------- Sobre nosotros + cifras ---------- */
.nos__top{display:grid;gap:var(--s5)}
.nos .sh__d--m{max-width:30ch}
.nos__dl{display:grid;gap:var(--s4)}
.nos__dl div{display:grid;align-content:start;gap:var(--s1);padding-top:var(--s2);border-top:1px solid var(--ink-l2)}
.nos__dl dd{max-width:58ch;color:var(--ink-2);font-size:var(--t-b);line-height:1.6;text-wrap:pretty}
@media (min-width:900px){
  .nos__top .sh{grid-column:1/11}
  .nos__dl{grid-column:1/13;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut)}
}
/* ---------- Cómo trabajamos: regla de 90 días (la cota de plano a escala del método) ----------
   Móvil: tres tramos apilados con su barra vertical. Desde 640 px: cota horizontal 0 · 30 · 60 · 90 días con
   remates en cada mes y un tramo morado por fase que se enciende uno tras otro al entrar (una vez, transform). */
.regla{position:relative}
.regla__eje{display:none}
.regla__ol{list-style:none;display:grid;gap:4px}
.regla__s{position:relative;display:grid;align-content:start;gap:var(--s1);min-width:0;padding:var(--s1) 0 var(--s4) calc(var(--s4) + 6px)}
.regla__b{position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:3px;background:var(--ink-l2);overflow:hidden}
.regla__b i{position:absolute;inset:0;background:var(--cl-p);transform-origin:top}
.regla__h{font-weight:800;font-size:var(--t-d2);line-height:1.02;letter-spacing:-.03em;color:var(--cl-d)}
.regla__t{max-width:44ch;margin-top:var(--s1);color:var(--ink-2);font-size:var(--t-b);line-height:1.6;text-wrap:pretty}
@media (min-width:640px){
  .regla{padding-top:56px}
  .regla__eje{display:block;position:absolute;left:0;right:0;top:0;height:44px;color:var(--cl-d)}
  .regla__cota{position:absolute;left:0;right:0;bottom:0}
  .regla__d{position:absolute;top:0;font-size:var(--t-label);font-weight:700;line-height:1;letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums;color:var(--ink-2);transform:translateX(-50%);white-space:nowrap}
  .regla__d::after{content:"";position:absolute;left:50%;top:calc(1em + 6px);width:1px;height:20px;background:var(--cl-d);opacity:.55}
  .regla__d--0{left:0;transform:none}.regla__d--0::after{left:0}
  .regla__d--1{left:33.333%}
  .regla__d--2{left:66.667%}
  .regla__d--3{left:auto;right:0;transform:none}.regla__d--3::after{left:auto;right:0}
  .regla__ol{grid-template-columns:repeat(3,minmax(0,1fr))}
  .regla__s{padding:var(--s4) var(--gut) 0 0}
  .regla__b{left:0;right:0;top:0;bottom:auto;width:auto;height:6px}
  .regla__b i{transform-origin:left}
}
/* ---------- Historia: único bloque navy ---------- */
.his-s .sh__d{color:var(--cl-w)}
.his{position:relative;margin-top:var(--s6);--yr:var(--t-yr)}
.his__ol{list-style:none;display:grid;gap:var(--s6)}
.his__rail{position:absolute;left:6px;top:var(--s1);bottom:var(--s1);width:4px;border-radius:2px;background:rgba(235,234,228,.16)}
.his__rail i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--hbd-1),var(--hbd-2));transform-origin:top;transition:transform 1.4s var(--ease) .1s}
.his__rail i+i{display:none}
.his__i{position:relative;min-width:0;padding-left:var(--s5)}
.his__i::before{content:"";position:absolute;z-index:1;left:0;top:calc(var(--yr) * .475 - 9px);width:16px;height:18px;background:var(--cl-p);clip-path:var(--rombo)}
.his__i--hbd::before{background:var(--hbd)}
.his__y{font-weight:800;font-size:var(--yr);line-height:.95;letter-spacing:-.04em;color:var(--cl-w);font-variant-numeric:tabular-nums}
.his__i--hbd .his__y{color:var(--cy-l)}
.his__i--hoy .his__y{color:var(--cl-p)}
.his__i h3{margin-top:var(--s3);max-width:22ch;font-weight:800;font-size:var(--t-h3);line-height:1.15;letter-spacing:-.015em;color:var(--cl-w);text-wrap:balance}
.his__t{max-width:40ch;margin-top:var(--s2);color:var(--cl-c);font-size:var(--t-b);line-height:1.6;text-wrap:pretty}
@media (min-width:900px){
  .his__ol{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut)}
  .his__rail{left:0;right:0;top:calc(var(--yr) * .95 + var(--s3));bottom:auto;width:auto;height:4px}
  .his__rail i{right:auto;width:calc((100% - 2 * var(--gut)) / 3 + var(--gut));background:linear-gradient(90deg,var(--hbd-1),var(--hbd-2));transform-origin:left}
  .his__rail i+i{display:block;left:calc((100% - 2 * var(--gut)) / 3 + var(--gut));background:var(--cl-p);transition-delay:.7s}
  .his__i{padding-left:0}
  .his__i::before{top:calc(var(--yr) * .95 + var(--s3) - 7px)}
  .his__i h3{margin-top:calc(var(--s3) + var(--s5))}
}

/* ---------- Valores: rejilla 3 × 2 a sangre de la retícula, cada valor a tamaño de titular; remate morado con CTA ---------- */
.val__head .sh__d--m{max-width:30ch}
.val{list-style:none;display:grid;margin-top:var(--s5)}
.val__i{position:relative;display:flex;align-items:center;gap:var(--s2);min-width:0;padding-block:var(--s3);border-top:1px solid var(--ink-l2)}   /* cada celda lleva su propia línea: mismos cortes en las dos filas */
.val__i::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--cl-p);transform:scaleX(0);transform-origin:left;pointer-events:none}
.val__rb{width:12px;height:13px;flex:none;background:var(--hbd);clip-path:var(--rombo)}
.val__i h3{font-weight:800;font-size:var(--t-d2);line-height:1.04;letter-spacing:-.03em;color:var(--cl-d);text-wrap:balance}
@media (min-width:640px){
  .val{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut)}
}
@media (min-width:900px){
  .val{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--s6)}
  .val__i{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--s4);min-height:clamp(176px,15vw,224px);padding-block:var(--s4) var(--s5)}
}
@media (hover:hover) and (pointer:fine){
  .val__i::before{transition:transform .6s var(--ease)}
  .val__i:hover::before{transform:scaleX(1)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .val__i h3{transition:transform var(--d2) var(--ease)}
  .val__i:hover h3{transform:translate3d(8px,0,0)}
}
.val__fin{display:grid;gap:var(--s4);justify-items:stretch;margin-top:var(--s5);padding:clamp(32px,5vw,72px);border-radius:var(--r3);background:var(--cl-p);color:var(--cl-d)}
/* «nosotros ganamos.» mide 8,9 em: en móvil estrecho el cuerpo se ajusta para que no quede «ganamos.» suelto */
.val__fin-t{font-weight:800;font-size:min(var(--t-h2),calc((100vw - 2 * var(--g) - 2 * clamp(32px,5vw,72px)) / 9.1));line-height:1.05;letter-spacing:-.03em;color:var(--cl-d)}
@media (min-width:640px){.val__fin .cta-ink{justify-self:start}}
@media (min-width:900px){
  .val__fin{margin-top:var(--s6);grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end}
  .val__fin-t{grid-column:1/9}
  .val__fin .cta-ink{grid-column:9/13;justify-self:end}
}

/* ---------- Equipo: 2 · 3+3+1 · 4+3 centradas ---------- */
.eq{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) var(--gut)}
.eq__i{grid-column:span 2;min-width:0}
.eq__i:nth-child(7){grid-column:2/span 2}
.eq__ph{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r2);background:var(--cl-n)}
.eq__ph::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(20,24,30,.08)}
.eq__ph img{width:100%;height:100%;object-fit:cover}
.eq__n{margin-top:var(--s2);font-weight:800;font-size:var(--t-lead);line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.eq__r{margin-top:var(--s1);color:var(--ink-2);font-size:var(--t-s);font-weight:600;line-height:1.4}
.eq__b{max-width:46ch;margin-top:var(--s2);color:var(--ink-2);font-size:var(--t-s);font-weight:500;line-height:1.5;text-wrap:pretty}
.eq__in{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:var(--s1);font-size:var(--t-s);font-weight:700;color:var(--cl-d);text-decoration:underline;text-decoration-color:var(--cl-p);text-decoration-thickness:2px;text-underline-offset:6px;transition:text-decoration-color var(--d1) var(--ease)}
.eq__in:hover{text-decoration-color:var(--cl-d)}
.eq__in svg{width:10px;height:10px;flex:none;transition:transform var(--d2) var(--ease)}
.eq__in:hover svg{transform:translate(3px,-3px)}
@media (min-width:640px){
  .eq{grid-template-columns:repeat(6,minmax(0,1fr))}
  .eq__i:nth-child(7){grid-column:3/span 2}
  .eq__n{margin-top:var(--s3)}
}
@media (min-width:1100px){
  .eq{grid-template-columns:repeat(8,minmax(0,1fr));row-gap:var(--s6)}
  .eq__i:nth-child(5){grid-column:2/span 2}
  .eq__i:nth-child(7){grid-column:auto/span 2}
}

/* ---------- Cierre: banda crema que termina en la marca, como empezó la luz ---------- */
.fin__in{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center}
.fin__logo{width:auto;height:56px}
.fin__tag{max-width:22ch;font-weight:800;font-size:var(--t-h2);line-height:1.05;letter-spacing:-.03em;color:var(--cl-d);text-wrap:balance}
.fin__act{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--s2);margin-top:var(--s2)}
.cta--fin{min-height:64px;padding:16px 36px;font-size:1.25rem;border-radius:var(--r2)}
.fin__act .btn2{min-height:64px;padding-inline:28px}
.fin__firma{margin-top:var(--s2);color:var(--ink-2);font-size:var(--t-s);font-weight:600;line-height:1.5}
@media (max-width:639px){
  .fin__act{flex-direction:column;align-items:stretch;width:100%;max-width:420px}
  .fin__act a{justify-content:center;text-align:center}
  .val__fin .cta-ink{width:100%}
}
.foot{background:var(--cl-w);color:var(--ink-2);border-top:1px solid var(--ink-l)}
.foot__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding-block:var(--s3);font-size:var(--t-s);font-weight:600;line-height:1.5}
.foot__in img{height:24px;width:auto}

/* ---------- Revelado robusto (solo con el túnel 3D y sin movimiento reducido; cada elemento se revela una vez) ---------- */
html.rv [data-rv=""]{opacity:0;transform:translate3d(0,24px,0);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.rv [data-rv=""].is-in{opacity:1;transform:none}
html.rv [data-rv="mask"]>span{transform:translate3d(0,105%,0);transition:transform .7s var(--ease)}
html.rv [data-rv="mask"].is-in>span{transform:none}
html.rv [data-rv="fila"]{opacity:0;transform:translate3d(0,16px,0);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.rv [data-rv="fila"].is-in{opacity:1;transform:none}
html.rv [data-rv="logo"]{opacity:0;transition:opacity .5s var(--ease)}
html.rv [data-rv="logo"].is-in{opacity:1}
html.rv .kick[data-rv] .cota{transform:scaleX(0);transition:transform var(--d4) var(--ease) .15s}
html.rv .kick[data-rv]>span:not(.cota),html.rv .kick[data-rv] .rb{opacity:0;transition:opacity var(--d3) var(--ease)}
html.rv .kick[data-rv].is-in .cota{transform:none}
html.rv .kick[data-rv].is-in>span,html.rv .kick[data-rv].is-in .rb{opacity:1}
html.rv .regla:not(.is-in) .regla__b i{transform:scaleY(0)}
html.rv .regla:not(.is-in) .regla__cota{transform:scaleX(0)}
html.rv .his:not(.is-in) .his__rail i{transform:scaleY(0)}
@media (min-width:900px){
  html.rv .regla:not(.is-in) .regla__b i,html.rv .his:not(.is-in) .his__rail i{transform:scaleX(0)}
}
/* las pantallas suben dentro de su ventana, .12 s después de la tarjeta */
html.rv .vt__i:not(.is-in) .vt__in{transform:translate3d(0,14%,0)}
html.rv .soft:not(.is-in) .soft__in{transform:translate3d(0,12%,0)}
/* escalonado corto dentro de cada grupo (≤ .24 s; filas de Valores .08 s hasta .4 s; logos .05 s hasta .35 s) */
html.rv .vt__i:nth-child(2),html.rv .his__i:nth-child(2),html.rv .nos__dl div:nth-child(2),html.rv .eq__i:nth-child(4n+2){transition-delay:.08s}
html.rv .vt__i:nth-child(3),html.rv .his__i:nth-child(3),html.rv .eq__i:nth-child(4n+3){transition-delay:.16s}
html.rv .eq__i:nth-child(4n+4){transition-delay:.24s}
html.rv .vt__i:nth-child(2) .vt__in{transition-delay:.2s}
html.rv .vt__i:nth-child(3) .vt__in{transition-delay:.28s}
html.rv .val__i:nth-child(2){transition-delay:.08s}
html.rv .val__i:nth-child(3){transition-delay:.16s}
html.rv .val__i:nth-child(4){transition-delay:.24s}
html.rv .val__i:nth-child(5){transition-delay:.32s}
html.rv .val__i:nth-child(6){transition-delay:.4s}
html.rv .logo:nth-child(2){transition-delay:.05s}
html.rv .logo:nth-child(3){transition-delay:.1s}
html.rv .logo:nth-child(4){transition-delay:.15s}
html.rv .logo:nth-child(5){transition-delay:.2s}
html.rv .logo:nth-child(6){transition-delay:.25s}
html.rv .logo:nth-child(7){transition-delay:.3s}
html.rv .logo:nth-child(8){transition-delay:.35s}
/* lo que se revela ya pasado (scroll rápido, ancla, recarga a media página) aparece sin transición */
html.rv .rv-now,html.rv .rv-now *,html.rv .rv-now::before,html.rv .rv-now *::before,html.rv .rv-now::after,html.rv .rv-now *::after{transition:none!important}

/* ---------- v11 · Indicador de progreso de scroll (toda la página) ----------
   ≥1024 px (y ≥560 px de alto): rail vertical fino en el margen izquierdo, una marca por sección (enlace de 44 px),
   relleno por tramos (llega a cada marca cuando se llega a su sección). <1024 px: barra de 2 px bajo la cabecera.
   Color según el fondo (data-tema, el mismo mecanismo que la cabecera). Solo se escribe transform.
   Rail sutil: trazo de 1 px, marcas de 6×7 px; en reposo se queda casi apagado (opacity .18) y vuelve a 1 con el
   scroll (.is-vivo), con el puntero cerca (.is-cerca, ambas desde secciones.js), al pasar el ratón o con foco de
   teclado. Visible, el relleno y las marcas sin visitar miden ≥3:1 contra el fondo; atenuado es decorativo. */
.prog{display:none}
.prog-bar{position:fixed;left:0;right:0;top:68px;z-index:29;height:2px;pointer-events:none;background:rgba(185,194,216,.12)}
.prog-bar i{display:block;height:100%;background:var(--cy-l);opacity:.8;transform:scaleX(0);transform-origin:left}
.prog-bar[data-tema="claro"],.prog-bar[data-tema="crema"]{background:rgba(20,24,30,.07)}
.prog-bar[data-tema="claro"] i,.prog-bar[data-tema="crema"] i{background:var(--cl-d);opacity:.7}
html:not(.fx) .prog-bar{top:0}
@media (min-width:1024px) and (min-height:560px){
  .prog-bar{display:none}
  .prog{--pl:clamp(352px,56vh,448px);display:block;position:fixed;z-index:28;top:50%;left:max(0px,calc((var(--pad-x) - 44px) / 2));width:44px;height:var(--pl);margin-top:calc(var(--pl) / -2);color:var(--cy-l);opacity:.18;transition:opacity var(--d3) var(--ease)}
  .prog.is-vivo,.prog.is-cerca,.prog:hover,.prog:has(a:focus-visible){opacity:1;transition-duration:var(--d1)}
  .prog ol{list-style:none;position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%}
  .prog__track{position:absolute;left:21px;top:22px;bottom:22px;width:1px;background:rgba(185,194,216,.3)}
  .prog__track i{position:absolute;inset:0;background:currentColor;transform:scaleY(0);transform-origin:top}
  .prog a{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r1);text-decoration:none;color:inherit}
  .prog a::before{content:"";width:6px;height:7px;background:rgba(185,194,216,.56);clip-path:var(--rombo);transition:transform var(--d2) var(--ease)}
  .prog a.is-past::before{background:currentColor}
  .prog a[aria-current]::before{background:#fff;transform:scale(1.3)}
  .prog a:hover::before{transform:scale(1.3)}
  .prog__lbl{position:absolute;left:46px;top:50%;margin-top:-15px;display:flex;align-items:center;height:30px;padding:0 10px;border-radius:var(--r1);background:var(--cl-w);color:var(--cl-d);font-family:var(--f-mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;box-shadow:var(--sh1);opacity:0;transform:translate3d(-4px,0,0);transition:opacity var(--d1) var(--ease),transform var(--d2) var(--ease);pointer-events:none}
  .prog a:hover .prog__lbl,.prog a:focus-visible .prog__lbl{opacity:1;transform:none}
  .prog a:focus-visible{outline:2px solid var(--cy);outline-offset:-4px}
  .prog[data-tema="claro"],.prog[data-tema="crema"]{color:var(--cl-d)}
  .prog[data-tema="claro"] .prog__track,.prog[data-tema="crema"] .prog__track{background:rgba(20,24,30,.2)}
  .prog[data-tema="claro"] a::before,.prog[data-tema="crema"] a::before{background:rgba(20,24,30,.5)}
  .prog[data-tema="claro"] a.is-past::before,.prog[data-tema="crema"] a.is-past::before,
  .prog[data-tema="claro"] a[aria-current]::before,.prog[data-tema="crema"] a[aria-current]::before{background:var(--cl-d)}
  .prog[data-tema="claro"] .prog__lbl,.prog[data-tema="crema"] .prog__lbl{background:var(--cl-d);color:var(--cl-w)}
  .prog[data-tema="claro"] a:focus-visible,.prog[data-tema="crema"] a:focus-visible{outline-color:var(--cl-d)}
}
/* movimiento reducido: sin atenuado ni fundidos (encender y apagar a saltos molesta más que dejarlo quieto) */
@media (min-width:1024px) and (min-height:560px) and (prefers-reduced-motion:reduce){.prog{opacity:1}}

/* póster (solo para generar la imagen estática) */
.poster-mode .prog,.poster-mode .prog-bar,
.poster-mode .cont,.poster-mode .stage__fade,.poster-mode .luz,
.poster-mode .top,.poster-mode .hero-copy,.poster-mode .beats,.poster-mode .hud,.poster-mode .clim,.poster-mode .foot,.poster-mode .skip,.poster-mode .goto,.poster-mode .portal,.poster-mode .portal__line,.poster-mode .trazo{display:none!important}

/* =================== Modo estático (sin WebGL o movimiento reducido) =================== */
html:not(.fx) .top{position:absolute}
html:not(.fx) .hero-copy{padding:calc(76px + 1vh) var(--g) 32px}
html:not(.fx) .hero-copy,html:not(.fx) .beats{background:radial-gradient(110% 70% at 50% 42%,var(--bg-c),var(--bg) 72%)}
html:not(.fx) .poster{display:block;margin:32px auto 0}
html:not(.fx) .poster--logo{width:min(86vw,520px);border-radius:var(--r1)}
html:not(.fx) .beats{padding:24px var(--g) 88px}
html:not(.fx) .poster--tunel{width:min(100%,1100px);margin:0 auto 48px;border-radius:var(--r1)}
html:not(.fx) .beats ol{max-width:1100px;margin:0 auto;display:grid;gap:44px;text-align:center}
html:not(.fx) .beat strong{font-size:clamp(1.6rem,.9rem + 3.2vw,3.6rem)}
html:not(.fx) .clim{padding:clamp(72px,10vh,120px) var(--g)}
/* estático: la luz de salida se dibuja solo con CSS (luz-rombo.webp no se descarga sin el túnel 3D) */
html:not(.fx) .luz__r{display:none}
html:not(.fx) .luz::before{content:"";position:absolute;left:50%;bottom:0;width:min(118vw,1300px);aspect-ratio:72/81;transform:translate(-50%,50%);clip-path:var(--rombo);background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,.1) 78%,rgba(255,255,255,0))}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* v11 · poda de contenido: Tech con una sola captura, Nosotros sin visión, una sola cifra, Valores solo títulos */
.vt__i--tech .vt__scr{width:116%;left:10%;top:16%}
@media (min-width:640px) and (max-width:899px){.vt__i--tech .vt__scr{width:auto;height:88%;top:16%}}
@media (min-width:900px){.nos__dl{grid-template-columns:minmax(0,1fr)}}

/* =================== v11d · ronda «mejor nota posible» =================== */
/* Confían en nosotros: +350 a la izquierda y los 8 logos a la derecha, un solo golpe de vista (crema) */
.cli{display:grid;gap:var(--s5);margin-top:var(--s4)}
.cli__cifra{display:grid;align-content:center;gap:var(--s2);min-width:0}
.cli__n{display:block;font-weight:800;font-size:var(--t-xl);line-height:.84;letter-spacing:-.05em;color:var(--cl-d);font-variant-numeric:tabular-nums;white-space:nowrap}
.cli__l{display:block;max-width:20ch;font-size:var(--t-lead);font-weight:700;line-height:1.3;letter-spacing:-.005em;color:var(--ink-2)}
.cli .logos{margin-top:0}
@media (min-width:900px){
  .cli{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:center;margin-top:var(--s6)}
  .cli__cifra{grid-column:1/6}
  .cli .logos{grid-column:6/13}
  .cli .logo{height:120px}
  .cli .logo img{height:calc(var(--lh) * .9)}
}
html.rv [data-rv="cuenta"]{opacity:0;transform:translate3d(0,16px,0);transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.rv [data-rv="cuenta"].is-in{opacity:1;transform:none}
/* Método: la cota se dibuja y los tramos se encienden en orden (.55 s · .85 s · 1.15 s) */
html.rv .regla .regla__cota{transition:transform var(--d4) var(--ease)}
html.rv .regla .regla__b i{transition:transform .7s var(--ease) .55s}
html.rv .regla .regla__s:nth-child(2) .regla__b i{transition-delay:.85s}
html.rv .regla .regla__s:nth-child(3) .regla__b i{transition-delay:1.15s}
/* Cierre: la luz vuelve a abrirse. Un rombo crema nace en mitad de la banda y la cubre (la misma curva que la
   salida a la luz); el logo de Cliender aparece (0 → 1, sin fundido) cuando ya está sobre crema liso. */
.fin{overflow:hidden;isolation:isolate}
.fin .wrap{position:relative;z-index:1}
.fin__luz{display:none}
html.rv .fin{background:var(--cl-n)}   /* la banda nace navy (como la salida del túnel) y la luz la abre a crema */
html.rv .fin__luz{display:block;position:absolute;left:0;right:0;top:50%;height:1px;z-index:0;pointer-events:none}
html.rv .fin__r1,html.rv .fin__r2{position:absolute;left:50%;top:0;width:200px;height:225px;margin:-112.5px 0 0 -100px;clip-path:var(--rombo);background:var(--cl-c);transform:scale(.03)}
html.rv .fin__r2{background:var(--cl-p);transition:transform 1.4s cubic-bezier(.5,0,.25,1)}   /* borde morado que se adelanta al crema */
html.rv .fin__r1{transition:transform 1.6s cubic-bezier(.5,0,.25,1) .12s}
html.rv .fin__luz.is-in .fin__r1,html.rv .fin__luz.is-in .fin__r2{transform:scale(18)}
html.rv .fin__luz:not(.is-in)~.wrap .fin__logo{opacity:0}
html.rv .fin__logo{transition:opacity 0s linear 1.05s}
/* el contenido del cierre no se ve hasta que la luz cubre la banda (nunca tinta sobre navy) */
html.rv .fin__in{transition:visibility 0s linear 1s}
html.rv .fin__luz:not(.is-in)~.wrap .fin__in{visibility:hidden;transition:none}
/* Método: solo los tres títulos con su mes (las tres fases iguales) */
.regla__t{display:none}
/* Valores: título + su frase oficial */
.val__i{flex-direction:column;align-items:flex-start;gap:var(--s2)}
.val__t{max-width:36ch;color:var(--ink-2);font-size:var(--t-b);line-height:1.55;text-wrap:pretty}
@media (min-width:900px){.val__i{justify-content:flex-start;gap:var(--s3)}}
/* Sobre nosotros: titular a la izquierda y la misión como entradilla a la derecha, a la base */
@media (min-width:900px){
  .nos__top{align-items:end}
  .nos__top .sh{grid-column:1/8}
  .nos__dl{grid-column:8/13;align-self:end;grid-template-columns:minmax(0,1fr)}
}
.nos__dl dd{font-size:var(--t-lead);line-height:1.45;color:var(--cl-d);font-weight:500}
/* Héroe: más aire entre la cabecera y el H1 */
.fx .hero-copy,html:not(.fx) .hero-copy{padding-top:clamp(96px,12vh,140px)}
@media (max-width:600px){.fx .hero-copy,html:not(.fx) .hero-copy{padding-top:clamp(92px,11vh,112px)}}
/* Etiquetas mono pequeñas: de 11,5-12 px a 12,8 px */
.fx .cue span,.clim__next span,.to-cl__txt,.beat__n{font-size:.8rem}
/* Estático (sin WebGL / movimiento reducido) */
html:not(.fx) .poster--logo{border-radius:0;mix-blend-mode:screen}   /* el póster es luz sobre negro: se suma al fondo, sin cuadrado */
html:not(.fx) .luz{background:linear-gradient(180deg,var(--cl-n) 0,var(--cl-n) 12%,#fff 100%);background:linear-gradient(in oklab 180deg,var(--cl-n) 0,var(--cl-n) 12%,#fff 100%)}
html:not(.fx) .luz::before,html:not(.fx) .luz::after,html:not(.fx) .luz__glow,html:not(.fx) .luz__r1{display:none}   /* solo el degradado: sin formas ni grises sucios */

/* ---------- Ajustes revisión 10-nov ---------- */
/* Túnel: legibilidad de las frases sobre las líneas brillantes */
.fx .beat{isolation:isolate}
.fx .beat::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 58% 34% at 50% 50%,rgba(8,12,20,.62),rgba(8,12,20,.28) 55%,transparent 78%);pointer-events:none}
.fx .beat strong,.fx .beat__n{text-shadow:0 2px 18px rgba(8,12,20,.7),0 0 2px rgba(8,12,20,.5)}
/* Etiquetas pequeñas algo mayores */
.fx .cue span,.clim__next span,.to-cl__txt,.beat__n{font-size:.875rem}
/* Logos de clientes: +20 % y más presencia */
.logo img{opacity:.92}
.logo--fox{--lh:67px}
.logo--integra{--lh:67px}
.logo--xd{--lh:53px}
.logo--academy{--lh:43px}
.logo--sbc{--lh:58px}
.logo--sie{--lh:36px}
.logo--ehe{--lh:34px}
.logo--refor{--lh:36px}
.logo img{max-width:80%}
/* Sales: captura ampliada para que se lea la interfaz */
.vt__i--sales .vt__scr{width:200%;left:8%;top:14%}
@media (min-width:640px) and (max-width:899px){.vt__i--sales .vt__scr{width:auto;height:150%;left:8%;top:14%}}
/* Equipo: 4+3 desde 900 px (sin foto huérfana a 1024) */
@media (min-width:900px) and (max-width:1099px){
  .eq{grid-template-columns:repeat(8,minmax(0,1fr))}
  .eq__i:nth-child(n){grid-column:auto/span 2}
  .eq__i:nth-child(5){grid-column:2/span 2}
}
/* Cabecera legible sobre el túnel brillante (contraste AA de la navegación) */
.fx .top[data-tema="tunel"]{background:linear-gradient(to bottom,rgba(10,18,51,.82) 0%,rgba(10,18,51,.55) 62%,rgba(10,18,51,0) 100%)}
.top[data-tema="tunel"] .nav a,.top[data-tema="tunel"] .to-cl{text-shadow:0 1px 10px rgba(10,18,51,.9),0 0 2px rgba(10,18,51,.8)}
.menu summary{font-size:.85rem}
@media (min-width:1024px){.prog__lbl{font-size:.8125rem}}
/* Método: las tres fases con su texto oficial (documento maestro Tres verticales) */
.regla__t{display:block}
/* Casos de éxito reales (cliender.com/casos-de-exito) */
.casos{list-style:none;display:grid;gap:0;border-top:1px solid var(--ink-l)}
.caso a{display:grid;gap:6px;padding:var(--s3) 0;border-bottom:1px solid var(--ink-l);text-decoration:none;color:var(--cl-d)}
.caso__n{font-weight:800;font-size:var(--t-lead);line-height:1.2;letter-spacing:-.015em}
.caso__t{color:var(--ink-2);font-size:var(--t-b);line-height:1.5;text-wrap:pretty}
.caso__go{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--t-s);font-weight:700;text-decoration:underline;text-decoration-color:var(--cl-p);text-decoration-thickness:2px;text-underline-offset:6px}
.caso__go svg{width:10px;height:10px;flex:none;transition:transform var(--d2) var(--ease)}
.caso a:hover .caso__go{text-decoration-color:var(--cl-d)}
.caso a:hover .caso__go svg{transform:translate(3px,-3px)}
.caso a:focus-visible{outline:3px solid var(--cl-d);outline-offset:4px}
.cli__mas{margin-top:var(--s3)}
@media (min-width:900px){
  .cli .casos{grid-column:1/13;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut);border-top:0}
  .caso a{height:100%;align-content:start;border-top:2px solid var(--cl-d);border-bottom:0;padding-top:var(--s3)}
}
/* Cierre: nota bajo los botones */
.fin__nota{margin-top:var(--s2);color:var(--ink-2);font-size:var(--t-s);font-weight:600;line-height:1.5}
/* Pie como el de Cliender: razón social, dirección, contacto y enlaces legales */
.foot__in{flex-wrap:wrap;align-items:flex-start;row-gap:var(--s2)}
.foot__datos{display:grid;gap:4px;min-width:0;flex:1 1 360px}
.foot__dir{text-wrap:pretty}
.foot__ct,.foot__legal{display:flex;flex-wrap:wrap;column-gap:var(--s3)}
.foot__ct a,.foot__legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--cl-d);text-decoration:underline;text-decoration-color:var(--ink-l2);text-underline-offset:5px;transition:text-decoration-color var(--d1) var(--ease)}
.foot__ct a:hover,.foot__legal a:hover{text-decoration-color:var(--cl-p)}
@media (min-width:900px){.foot__in{align-items:center}.foot__legal{margin-left:auto}}