/* ============================================================================================
   SERVICHECK — CAPA v2 (§rediseno-28oct)
   Reemplaza a premium.css. Va DESPUÉS de servicheck.css y solo sobreescribe; no borra nada de
   la hoja base, así una página que todavía use una clase vieja sigue igual.

   Principios:
   - El contenido se ve SIEMPRE, con o sin JavaScript. La animación es un agregado: nada queda
     tapado esperando una librería (la cortina #pgt de premium.css dejaba el sitio en azul
     si GSAP no cargaba — medido el 28-oct).
   - Transición entre páginas con View Transitions nativas del navegador: no bloquea, no
     depende de JS, y en navegadores sin soporte simplemente no existe.
   - Un solo menú, armado desde .tools/parciales/nav.html para las 28 páginas.
   ============================================================================================ */

:root{
  --ink-2:#22365a;
  --blue-text:#1667d9;            /* azul para TEXTO sobre fondo claro: 4.9:1 sobre --paper */
  --glass:rgba(10,24,52,.62);
  --glass-line:rgba(160,196,255,.16);
  --ring:0 0 0 1px rgba(255,255,255,.06) inset;
  --shadow-lg:0 50px 100px -40px rgba(3,10,26,.75),0 18px 40px -24px rgba(3,10,26,.6);
  --nav-h:72px;
}

/* ---------- Transición entre páginas (nativa) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vt-in .38s cubic-bezier(.22,.61,.36,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
.nav{view-transition-name:sc-nav}
::view-transition-old(sc-nav),::view-transition-new(sc-nav){animation:none}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---------- Base ---------- */
html{scroll-behavior:auto;scroll-padding-top:96px}
body{text-rendering:optimizeLegibility;font-feature-settings:"cv11","ss01"}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:#fff;color:var(--navy);font-weight:700;padding:10px 16px;border-radius:10px;transition:top .2s}
.skip:focus{top:12px}
#contenido{scroll-margin-top:0}
::selection{background:rgba(38,136,255,.32);color:inherit}

/* Barra de progreso de lectura (la llena sc-v2.js; sin JS no aparece) */
.sc-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:120;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--blue),var(--green-2));pointer-events:none}

/* ---------- Scrollbar de marca ---------- */
html{scrollbar-color:#24406f var(--navy-deep);scrollbar-width:thin}

/* ---------- Botones ---------- */
.btn{letter-spacing:-.005em}
.btn-sm{padding:10px 18px;font-size:13.5px;gap:8px}
.btn-sm svg{width:15px;height:15px}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn-green{color:#03140d}
.btn-primary,.btn-ghost,.btn-dark,.btn-green{will-change:auto}

/* ============================================================================================
   MENÚ
   ============================================================================================ */
.nav-in{max-width:1280px;padding:16px 28px;gap:24px}
.nav.scrolled .nav-in{padding:10px 28px}
.nav-links{list-style:none;display:flex;align-items:center;gap:4px;margin:0 auto 0 8px}
.nav-links > li{position:relative}
.nav-links > li > a,.nl-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:10px;color:var(--mist);font:500 14px/1 'Inter',system-ui,sans-serif;white-space:nowrap;background:none;border:0;cursor:pointer;transition:color .2s,background .2s}
.nl-btn svg{width:14px;height:14px;opacity:.7;transition:transform .25s var(--ease)}
.nav-links > li > a:hover,.nl-btn:hover,.nl-group:focus-within .nl-btn{color:#fff;background:rgba(255,255,255,.06)}
.nav-links > li > a.active,.nl-group.active .nl-btn{color:#fff}
.nav-links > li > a.active::after,.nl-group.active .nl-btn::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;border-radius:2px;background:var(--blue)}
.nav-links a:not(.active)::after,.nav-links .dd a::after{display:none}

/* Desplegables */
.dd{position:absolute;top:calc(100% + 10px);left:50%;width:min(440px,92vw);transform:translate(-50%,8px);opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .28s var(--ease),visibility 0s .28s;z-index:5}
.dd::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nl-group:hover .dd,.nl-group.open .dd{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.nl-group:hover .nl-btn svg,.nl-group.open .nl-btn svg{transform:rotate(180deg)}
.dd-in{background:#0b1a38;border:1px solid var(--glass-line);border-radius:18px;padding:8px;box-shadow:var(--shadow-lg)}
.dd-item{display:flex;gap:14px;align-items:flex-start;padding:12px 12px;border-radius:12px;transition:background .2s}
.dd-item:hover,.dd-item:focus-visible,.dd-item.active{background:rgba(255,255,255,.06)}
.dd-item b{display:block;font:600 14px/1.25 'Sora',sans-serif;color:#fff}
.dd-item small{display:block;font-size:12.5px;color:var(--mist-dim);margin-top:3px;line-height:1.4}
.dd-ic{width:36px;height:36px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center}
.dd-ic svg{width:18px;height:18px}
.dd .ic-blue{background:rgba(38,136,255,.16);color:var(--blue-2)}
.dd .ic-green{background:rgba(18,185,129,.16);color:var(--green-2)}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:12px 14px;border-radius:12px;background:rgba(38,136,255,.1);color:var(--blue-2);font:600 13px/1.3 'Sora',sans-serif}
.dd-foot svg{width:15px;height:15px;flex:none}
.dd-foot:hover{background:rgba(38,136,255,.18);color:#fff}

/* CTA del menú */
.nav-cta{gap:10px}
.nav-cta .btn-portal span{display:inline}
.nav-toggle{width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04)}
.nav-toggle span{transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Barra superior: punto vivo */
.tb-247{display:inline-flex;align-items:center;gap:8px}
.tb-247 i{width:6px;height:6px;border-radius:50%;background:var(--green-2);box-shadow:0 0 0 0 rgba(52,217,162,.6);animation:pulse 2.2s infinite}

/* Anchos: el menú completo necesita ~1180px; debajo, cajón. (Antes el botón "Hablemos hoy"
   quedaba cortado fuera de pantalla en 1280 y 1366 — medido.) */
@media(min-width:1081px) and (max-width:1240px){.nav-links{display:flex}.nav-cta .btn-ghost{display:none}.nav-toggle{display:none}}
@media(max-width:1180px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
}
@media(max-width:1080px){
  .topbar{display:none}
  .nav-cta .btn-primary.nav-hablemos{display:none}
  .hero{padding-top:128px}
  .page-hero{padding-top:136px}
}
/* Celular: el botón de ingreso se queda legible (antes bajaba a 9,5px) */
@media(max-width:600px){
  .nav-in,.nav.scrolled .nav-in{padding:10px 16px}
  .nav-cta .btn-portal{padding:9px 13px!important;font-size:13px!important;gap:6px}
  .nav-cta .btn-portal svg{display:inline-block;width:14px;height:14px}
  .nav .brand-chip{width:38px;height:38px}
  .nav .brand-name{font-size:17px}
  .nav .brand-sub{font-size:7px}
  .nav-toggle{width:42px;height:42px}
}
@media(max-width:380px){.nav .brand-sub{display:none}.nav-cta .btn-portal span{display:none}.nav-cta .btn-portal{padding:10px!important}}

/* Cajón móvil */
.drawer{display:block;inset:0;padding:calc(var(--nav-h) + 18px) 20px 28px;background:rgba(5,13,30,.98);overflow-y:auto;overscroll-behavior:contain;opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .28s var(--ease),transform .32s var(--ease)}
.drawer[hidden]{display:none}
.drawer.open{opacity:1;pointer-events:auto;transform:none}
.dr-in{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:26px}
.dr-sec{display:flex;flex-direction:column}
.dr-k{font:700 11px/1 'Sora',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--blue-2);margin-bottom:8px}
.drawer .dr-sec a{display:flex;align-items:center;justify-content:space-between;padding:13px 2px;border-bottom:1px solid rgba(255,255,255,.07);font:600 17px/1.2 'Sora',sans-serif;color:#fff}
.drawer .dr-sec a::after{content:"›";color:var(--mist-dim);font-size:20px}
.drawer .dr-sec a.active{color:var(--blue-2)}
.dr-ctas{display:flex;flex-direction:column;gap:10px}
.drawer .dr-ctas .btn{width:100%;justify-content:center;font-size:15.5px;padding:15px 20px;margin:0}
body.menu-abierto{overflow:hidden}
.nav.menu-abierto{background:rgba(5,13,30,.98)}

/* ============================================================================================
   HERO DEL INICIO
   ============================================================================================ */
.hero{min-height:auto;padding-bottom:96px}
.hero .wrap.hero-in{max-width:1280px;grid-template-columns:1.04fr 1fr;gap:56px}
.hero h1{font-size:clamp(38px,4.6vw,62px);line-height:1.03}
.hero h1 .line{display:block}
.hero p.sub{max-width:540px}
.hero-actions .btn{padding:16px 26px}

/* Escenario: cheque + consola de verificación */
.cheque-stage{position:relative;padding:0 0 214px}
.cheque-svg{filter:drop-shadow(0 50px 80px rgba(0,0,0,.55)) drop-shadow(0 10px 20px rgba(0,0,0,.25))}
.chq-badge{display:none}               /* reemplazadas por la consola: tapaban el banco y el MICR */

.vcon{position:absolute;right:-14px;bottom:0;width:min(340px,64%);background:var(--glass);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border:1px solid var(--glass-line);border-radius:18px;padding:16px 16px 14px;box-shadow:var(--shadow-lg);color:#fff;z-index:3}
.vcon-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.vcon-t{font:700 12px/1 'Sora',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.vcon-live{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 'Inter',sans-serif;color:var(--green-2)}
.vcon-live i{width:6px;height:6px;border-radius:50%;background:var(--green-2);animation:pulse 2s infinite}
.vcon ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.vcon li{display:flex;align-items:center;gap:10px;padding:7px 4px;font-size:13px;color:var(--mist);border-radius:8px}
.vcon li .vk{flex:1}
.vcon li .vs{width:20px;height:20px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(52,217,162,.16);color:var(--green-2)}
.vcon li .vs svg{width:12px;height:12px}
.vcon li .vt{font:600 11px/1 'Inter',sans-serif;color:var(--mist-dim);font-variant-numeric:tabular-nums}
.vcon-res{margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:12px;background:linear-gradient(135deg,rgba(18,185,129,.22),rgba(18,185,129,.08));border:1px solid rgba(52,217,162,.35)}
.vcon-res .rk{font:700 10.5px/1 'Sora',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--green-2)}
.vcon-res .rv{font:800 19px/1 'Sora',sans-serif;letter-spacing:.04em;color:#fff;margin-top:6px;font-variant-numeric:tabular-nums}
.vcon-res .rs{font-size:11px;color:var(--mist);text-align:right;line-height:1.35}
/* Estado inicial animable: solo si JS confirmó que va a animar (clase .sc-anim en <html>) */
.sc-anim .vcon li{opacity:.35}
.sc-anim .vcon li .vs{background:rgba(255,255,255,.06);color:transparent}
.sc-anim .vcon-res{opacity:0;transform:translateY(8px)}

.hero-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.hero-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:100px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:12.5px;color:var(--mist)}
.hero-chip svg{width:14px;height:14px;color:var(--green-2)}

@media(max-width:980px){
  .hero .wrap.hero-in{grid-template-columns:1fr;gap:40px}
  .cheque-stage{max-width:640px;margin:0 auto;width:100%;padding-bottom:0}
  .vcon{position:relative;right:auto;bottom:auto;width:100%;margin-top:18px}
}
@media(max-width:600px){
  .hero{padding-top:104px;padding-bottom:64px}
  .hero-tag{font-size:11.5px;margin-bottom:18px}
  .hero h1{font-size:clamp(34px,10vw,44px)}
  .hero p.sub{font-size:16px;margin-bottom:24px}
  .hero-actions{gap:10px;margin-bottom:28px}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .stat{min-width:0;padding:14px 16px}
  .stat .num{font-size:25px}
  .stat .lbl{font-size:10.5px}
}

/* ============================================================================================
   GRÁFICO DE RIESGO (bento del inicio) — proporción fija, textos fuera del SVG.
   Antes: preserveAspectRatio="none" estiraba el dibujo Y LAS LETRAS ("Autoriz a ción").
   ============================================================================================ */
.risk{position:relative;margin-top:6px}
.risk svg{width:100%;height:auto;display:block;overflow:visible}
.risk-lbls{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font:600 11.5px/1.2 'Inter',sans-serif;color:var(--slate)}
.risk-lbls .ok{color:#0a8a5f}
.risk-pin{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font:700 11px/1 'Sora',sans-serif;color:#0a8a5f;background:#e7f8f1;border:1px solid rgba(18,185,129,.3);padding:5px 9px;border-radius:100px;white-space:nowrap}

/* ============================================================================================
   PULIDO GENERAL
   ============================================================================================ */
/* Enlaces de texto sobre fondo claro: contraste AA */
.bg-paper a.lnk,.bg-paper2 a.lnk,.card a.lnk,.lnk{color:var(--blue-text);font-weight:600}
.lnk{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px}
.lnk:hover{text-decoration:underline;text-underline-offset:3px}

/* Tarjetas: luz que sigue al cursor (sc-v2.js pone --mx/--my; sin JS no se ve nada raro) */
.card,.chan,.svc-card,.art,.news-card,.cov-feat{position:relative;isolation:isolate}
@media(hover:hover) and (pointer:fine){
  .card::after,.chan::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(38,136,255,.09),transparent 45%)}
  .chan::after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(91,166,255,.16),transparent 45%)}
  .card:hover::after,.chan:hover::after{opacity:1}
}

/* Imágenes nítidas con medidas fijas */
.team-band img{aspect-ratio:auto}

/* Marquesina más legible */
.mq-track span{color:#8fa3c2}
.marquee{padding:22px 0 26px}

/* Pie */
.foot-col .fh{font:700 12.5px/1.2 'Sora',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:16px}
.foot-col a:hover{color:#fff}
.footer .brand{display:inline-flex}

/* Botón flotante de WhatsApp: más chico en celular y sin tapar botones del contenido */
@media(max-width:600px){
  .fab-wa{right:14px;bottom:14px;width:52px;height:52px}
  .fab-wa svg{width:24px;height:24px}
  .fab-wa::before{display:none}
  body{padding-bottom:0}
}

/* Movimiento reducido: todo quieto y visible */
@media(prefers-reduced-motion:reduce){
  .sc-anim .vcon li{opacity:1}
  .sc-anim .vcon li .vs{background:rgba(52,217,162,.16);color:var(--green-2)}
  .sc-anim .vcon-res{opacity:1;transform:none}
  .tb-247 i,.vcon-live i{animation:none}
}

/* Impresión: sin menú ni botones flotantes */
@media print{.nav,.drawer,.fab-wa,.sc-progress,.skip{display:none!important}.hero,.page-hero{padding-top:24px}}

/* El sello del cheque se ve siempre; solo arranca oculto si sc-v2.js lo va a animar */
.chq-stamp{opacity:1}
.sc-anim .chq-stamp{opacity:0}

/* Botón de WhatsApp en celular: aparece después del hero para no tapar los botones principales */
@media(max-width:600px){
  .js .fab-wa{opacity:0;pointer-events:none;transform:translateY(18px);transition:opacity .3s var(--ease),transform .35s var(--ease)}
  .js .fab-wa.on{opacity:1;pointer-events:auto;transform:none}
}
.src-band a,.art a,.faq a,.fa a{color:var(--blue-text)}
.lf-ok{margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(18,185,129,.1);border:1px solid rgba(18,185,129,.35);color:#0a7a54;font-weight:600;font-size:14px}
.lf-priv{margin-top:10px;font-size:12px;color:var(--slate)}
picture{display:contents}
/* Franja de ciudades (landings) */
.city-strip{padding:44px 0}
.cs-k{font:700 12px/1 'Sora',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.city-chips{display:flex;flex-wrap:wrap;gap:10px}
.city-chip{padding:9px 16px;border-radius:100px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14px;color:var(--ink);transition:.25s var(--ease)}
.city-chip:hover{border-color:rgba(38,136,255,.45);color:var(--blue-text);transform:translateY(-2px)}