/* IN-TEC México — hoja de estilo del portal.
   Dirección: sitio CLARO, en el lenguaje que funciono en zentria.work
   (fondo lino, tarjetas blancas, esquinas suaves, sombras azuladas),
   pero con la paleta propia de IN-TEC extraida del logotipo de 2018. */

/* ================================================================
   TIPOGRAFIAS SERVIDAS DESDE ESTE SERVIDOR  (v34, 2026-09-02)
   Antes venian de fonts.googleapis.com. Eso obligaba al navegador a
   resolver DNS, abrir TCP y negociar TLS con DOS origenes ajenos ANTES
   de poder pintar nada: 1 670 ms de bloqueo de render en movil, medidos
   por PageSpeed. Ahora viajan por la conexion que ya esta abierta.
   Ambas son variables y traen el subconjunto latino, que es todo lo que
   necesita el espanol. Licencia OFL: ver assets/fonts/LICENCIAS.txt
   ================================================================ */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 600;          /* fuente variable: un archivo, tres pesos */
  font-display:swap;
  src:url(../fonts/inter-latin-var.woff2?v=46) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:500 700;
  font-display:swap;
  src:url(../fonts/spacegrotesk-latin-var.woff2?v=46) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* fondos */
  --lino:#F5F7FB;
  --lino-2:#EDF1F8;
  --blanco:#FFFFFF;
  --linea:#DBE3F0;
  --linea-2:#C7D3E4;

  /* tinta */
  --tinta:#0B1626;
  --niebla:#5B6B85;
  --niebla-2:#5F6E88;   /* v34: el #8494AC daba 2.72 de contraste, ilegible */

  /* la marca IN-TEC */
  --cyan:#0091C7;
  --cyan-cl:#3FB6E4;
  --cyan-tx:#00719C;    /* v34: cyan legible. El #0091C7 solo llega a 3.3
                           sobre los fondos claros y a 3.6 bajo texto blanco:
                           no pasa AA. Este da 4.8 y 5.5. El --cyan original se
                           queda para lo DECORATIVO (barras, puntos, filos), que
                           no tiene requisito de contraste. */
  --cyan-dp:#0C5283;
  --navy:#113666;
  --indigo:#151C4A;
  --ok:#0F8A63;

  --display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --body:Inter,"Helvetica Neue",Arial,sans-serif;

  --r:12px;
  --r-s:10px;
  --sombra:0 1px 2px rgba(11,22,38,.04),0 10px 22px -12px rgba(12,82,131,.35);
  --sombra-a:0 2px 4px rgba(11,22,38,.06),0 18px 34px -16px rgba(0,145,199,.42);
  --e1:cubic-bezier(.22,.61,.36,1);
  --e2:cubic-bezier(.16,.84,.44,1);
  --tshadow:0 1px 2px rgba(4,10,20,.9),0 3px 14px rgba(4,10,20,.7),0 12px 44px rgba(4,10,20,.7);
  --measure:64ch;
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--lino);color:var(--tinta);
  font-family:var(--body);font-size:17px;line-height:1.66;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

h1,h2,h3,.eyebrow,.btn,.kicker,.tag,.s-n,.fh,.marcas li,.brand-tx{font-family:var(--display)}

.skip{position:absolute;left:-9999px;background:var(--cyan-tx);color:#fff;padding:.7rem 1.1rem;z-index:99;border-radius:var(--r-s)}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}

.wrap{max-width:1140px;margin:0 auto;padding:0 26px}
.wrap.narrow{max-width:780px}
.lede{color:var(--niebla);font-size:1.13rem;max-width:var(--measure)}
.sec p{max-width:var(--measure)}

/* ------------------------------------------------------------- NAV ----- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;
  background:rgba(245,247,251,0);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:background .4s var(--e1),border-color .4s var(--e1)}
.nav.solid{background:rgba(255,255,255,.92);border-bottom-color:var(--linea)}
.nav-in{max-width:1140px;margin:0 auto;padding:.7rem 26px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.mark{width:auto;height:34px;flex:none;filter:drop-shadow(0 1px 2px rgba(11,22,38,.18))}
.brand-tx{font-size:.95rem;letter-spacing:.06em;font-weight:500;color:#fff;text-shadow:0 1px 6px rgba(4,10,20,.7);transition:color .4s,text-shadow .4s}
.brand-tx b{font-weight:700}
.nav.solid .brand-tx{color:var(--niebla);text-shadow:none}
.nav.solid .brand-tx b{color:var(--tinta)}
.nav-links{display:flex;align-items:center;gap:1.4rem}
.nav-links a:not(.btn){color:#fff;text-decoration:none;font-family:var(--display);font-size:.9rem;font-weight:500;
  text-shadow:0 1px 6px rgba(4,10,20,.7);transition:color .25s,text-shadow .4s}
.nav.solid .nav-links a:not(.btn){color:var(--niebla);text-shadow:none}
.nav.solid .nav-links a:not(.btn):hover{color:var(--cyan-tx)}
@media(max-width:940px){.nav-links a:not(.btn){display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;
  background:var(--cyan-tx);color:#fff;text-decoration:none;
  font-family:var(--display);font-weight:600;font-size:.94rem;
  padding:.74rem 1.35rem;border:1px solid var(--cyan);border-radius:var(--r-s);cursor:pointer;
  box-shadow:0 8px 18px -10px rgba(0,145,199,.8);
  transition:background .25s var(--e1),transform .25s var(--e1),box-shadow .25s var(--e1);text-shadow:none}
.btn:hover{background:#0079A8;border-color:#0079A8;transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(0,145,199,.9)}
.btn.ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.5);box-shadow:none;backdrop-filter:blur(6px)}
.btn.ghost:hover{background:rgba(255,255,255,.24);border-color:#fff}
.btn-sm{padding:.52rem 1rem;font-size:.86rem}
@media(pointer:coarse){.btn{min-height:44px}}

/* ------------------------------------------------------------ HERO ----- */
.hero{height:400vh;position:relative}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--indigo)}
.poster,.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster{background-size:cover;background-position:center;transition:opacity .8s var(--e1)}
.stage video{opacity:0;transition:opacity .8s var(--e1);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 116% 86% at 50% 46%,rgba(6,12,22,0) 32%,rgba(6,12,22,.7) 100%)}

.ring{position:absolute;right:24px;bottom:24px;width:32px;height:32px;color:var(--cyan-cl);transition:opacity .5s}
.ring-p{transform:rotate(-90deg);transform-origin:50% 50%;stroke-dashoffset:var(--ld,126);transition:stroke-dashoffset .15s linear}
.stage.video-ready .ring,.stage.video-failed .ring{opacity:0}

.bands{position:absolute;inset:0;display:grid;place-items:center;padding:0 26px;z-index:4}
.band{grid-area:1/1;position:relative;max-width:780px;text-align:center;color:#fff;
  opacity:0;pointer-events:none;text-shadow:var(--tshadow)}
.band::before{content:"";position:absolute;inset:-16% -22%;pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7*var(--k,1));
  background:radial-gradient(ellipse 70% 58% at 50% 50%,rgba(5,10,20,.72) 0%,rgba(5,10,20,.46) 46%,rgba(5,10,20,0) 76%)}
.band .btn{text-shadow:none}
.band.settle{pointer-events:auto}

.kicker{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan-cl);margin:0 0 1rem;font-weight:600}
.hl{font-size:clamp(2rem,5.4vw,3.9rem);line-height:1.06;letter-spacing:-.028em;font-weight:700;margin:0;text-wrap:balance}
.hl2{font-size:clamp(1.6rem,3.8vw,2.7rem);line-height:1.12;letter-spacing:-.022em;font-weight:700;margin:0 0 .8rem;text-wrap:balance}
.band .sub{color:#DDE7F0;font-size:1.05rem;margin:.85rem auto 0;max-width:50ch}
.cta-row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin:1.7rem 0 0}

.w{display:inline-block;white-space:nowrap}
.band[data-fx] .w{--kc:clamp(0,(var(--k,1) - var(--th,0))*2.8,1);opacity:var(--kc)}
[data-fx="rise"] .w{transform:translateY(calc((1 - var(--kc,1)) * 24px))}
[data-fx="settle"] .w{transform:translateY(calc((1 - var(--kc,1)) * 14px))}

.cue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);width:21px;height:33px;
  border:1.5px solid rgba(255,255,255,.4);border-radius:11px;opacity:var(--cue,1);transition:opacity .5s}
.cue span{position:absolute;left:50%;top:7px;width:2.5px;height:6px;margin-left:-1.25px;border-radius:2px;
  background:#fff;animation:cue 2.1s var(--e1) infinite -.6s}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(11px);opacity:0}100%{opacity:0}}
@media(max-height:560px){.cue{display:none}}

/* Las cinco compuertas. Iguales, caracter por caracter, a las de hero.js */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px),
       (prefers-reduced-motion:reduce){
  .hero{height:auto}
  /* En vertical, una foto 16:9 con `cover` se recorta al 29% de su ancho y la
     composicion se destruye. Aqui manda un degradado y la foto queda como velo,
     asi el encuadre del telefono deja de depender del recorte. */
  .stage{position:relative;height:auto;min-height:78vh;display:grid;place-items:center;
    background:linear-gradient(178deg,#0A111E 0%,#0E2A50 52%,var(--navy) 100%);
    overflow:hidden}
  .stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:url("../img/hero-static.jpg?v=14") center 38%/cover no-repeat;
    opacity:.3;mix-blend-mode:screen}
  .bands{position:relative;z-index:4}
  .stage video,.ring,.cue,.poster{display:none}
  /* sin scrub: las bandas dejan de apilarse en la misma celda y se muestran
     la primera (marca + titular) y la de cierre. La 2 se omite. */
  .bands{position:relative;inset:auto;padding:6rem 26px 4rem;display:block}
  .band{opacity:0;display:none;grid-area:auto;margin-inline:auto}
  /* !important a proposito: si hero.js llegara a creerse en modo scrub
     mientras el CSS ya es estatico, sus opacity:0 en linea dejarian el hero
     VACIO. Aqui el CSS es la fuente de verdad y eso no puede pasar. */
  html:not(.hero-seq) .band.settle,
  html:not(.hero-seq) .band.b1{opacity:1 !important;display:block;pointer-events:auto}
  html:not(.hero-seq) .band.settle .w,
  html:not(.hero-seq) .band.b1 .w{opacity:1 !important;transform:none !important}
  .band.intro{display:none}
  .band.b1{margin-bottom:3rem}
  .band .w{opacity:1;transform:none}
  /* Aqui se forzaba la marca a color oscuro y sobre el hero oscuro del telefono
     quedaba ilegible. `.nav-links` ademas ya no existe en el HTML. Las reglas
     base ya resuelven esto: blanca sobre el hero, oscura con .nav.solid. */
}

/* ------------------------------------------------ TIRA DE CREDIBILIDAD - */
.strip{background:var(--blanco);border-bottom:1px solid var(--linea)}
.strip-grid{display:grid;gap:1px;background:var(--linea)}
@media(min-width:720px){.strip-grid{grid-template-columns:repeat(4,1fr)}}
.strip-grid>div{background:var(--blanco);padding:1.7rem 1.5rem}
.s-n{font-size:1.32rem;font-weight:700;letter-spacing:-.015em;color:var(--cyan-dp);margin:0 0 .3rem}
.s-l{font-size:.9rem;color:var(--niebla);margin:0;line-height:1.5}

/* --------------------------------------------------------- SECCIONES -- */
.sec{padding:6rem 0}
.sec.alt{background:var(--lino-2)}
.eyebrow{font-size:.73rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan-tx);margin:0 0 .9rem}
.h2{font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.14;letter-spacing:-.024em;font-weight:700;
  margin:0 0 1rem;max-width:20ch;text-wrap:balance}
.note{color:var(--niebla);font-size:.98rem;margin-top:1.8rem;padding-left:1rem;border-left:3px solid var(--cyan);border-radius:1px}

.two{display:grid;gap:2.6rem;align-items:center}
@media(min-width:920px){.two{grid-template-columns:1.02fr .98fr;gap:3.6rem}
  .two.flip>figure{order:-1}}
.two p{color:var(--niebla)}
.two .h2{max-width:none}
.shot{margin:0}
.shot img{border-radius:var(--r);box-shadow:var(--sombra);width:100%}

.ticks{list-style:none;margin:1.6rem 0 0;padding:0}
.ticks li{position:relative;padding:0 0 .85rem 1.75rem;color:var(--niebla);font-size:1rem;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:0;top:.62rem;width:8px;height:8px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 0 4px rgba(0,145,199,.13)}

.whitehat{margin-top:1.6rem;font-size:.92rem;color:var(--niebla-2);letter-spacing:.02em}
.whitehat b{font-family:var(--display);color:var(--tinta);letter-spacing:.04em}

/* niveles */
.tiers{display:grid;gap:1.3rem;margin-top:2.4rem}
@media(min-width:860px){.tiers{grid-template-columns:1fr 1fr}}
.tier{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:1.8rem 1.8rem 2rem;box-shadow:var(--sombra)}
.tier.prio{border-color:rgba(0,145,199,.4);box-shadow:var(--sombra-a)}
.tier .tag{font-size:.7rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;color:var(--niebla-2);margin:0 0 .5rem}
.tier.prio .tag{color:var(--cyan-tx)}
.tier h3{font-size:1.3rem;margin:0 0 1.1rem;letter-spacing:-.015em}
.tier ul{margin:0;padding:0;list-style:none}
.tier li{position:relative;padding:0 0 .7rem 1.5rem;color:var(--niebla);font-size:.99rem}
.tier li::before{content:"";position:absolute;left:0;top:.6rem;width:6px;height:6px;border-radius:50%;background:var(--linea-2)}
.tier.prio li::before{background:var(--cyan)}
.tier b{color:var(--tinta);font-weight:600}

.hours{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-top:1.3rem}
@media(min-width:760px){.hours{grid-template-columns:repeat(3,1fr)}}
.hours p{background:var(--blanco);margin:0;padding:1.25rem 1.4rem;max-width:none}
.hours b{display:block;font-family:var(--display);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla-2);margin-bottom:.3rem;font-weight:600}
.hours span{color:var(--tinta);font-size:.98rem}

/* tarjetas */
.grid{display:grid;gap:1.2rem;margin-top:2.4rem}
@media(min-width:700px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--r);padding:1.6rem;
  box-shadow:var(--sombra);transition:transform .3s var(--e1),box-shadow .3s var(--e1),border-color .3s var(--e1)}
.card:hover{transform:translateY(-3px);box-shadow:var(--sombra-a);border-color:rgba(0,145,199,.35)}
.card h3{font-size:1.1rem;margin:0 0 .5rem;letter-spacing:-.012em}
.card p{color:var(--niebla);font-size:.97rem;margin:0;max-width:none}

/* filas de capacidades */
.stack{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-top:2.2rem}
.row-i{background:var(--blanco);padding:1.15rem 1.5rem;display:grid;gap:.2rem 1.6rem;align-items:baseline}
@media(min-width:680px){.row-i{grid-template-columns:230px 1fr}}
.row-i h3{font-size:1rem;margin:0;letter-spacing:-.01em}
.row-i p{margin:0;color:var(--niebla);font-size:.97rem;max-width:none}

.marcas-t{font-family:var(--display);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--niebla-2);margin:2.6rem 0 1rem}
/* Muro de marcas. Los logotipos se muestran SIN alterar (ni recolorear ni
   deformar): es lo que piden las guias de marca de los fabricantes. Solo se
   normaliza la altura optica dentro de una caja comun. */
.marcas{list-style:none;display:grid;gap:1px;margin:0;padding:0;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;
  grid-template-columns:repeat(2,1fr)}
@media(min-width:560px){.marcas{grid-template-columns:repeat(4,1fr)}}
@media(min-width:980px){.marcas{grid-template-columns:repeat(8,1fr)}}
.marcas li{background:var(--blanco);display:grid;place-items:center;padding:1.5rem .9rem;min-height:96px}
.marcas img{max-width:100%;height:26px;width:auto;object-fit:contain;
  opacity:.86;transition:opacity .3s var(--e1),transform .3s var(--e1)}
/* v38: decia .cuadrado y el HTML siempre uso .cuad, asi que los logos
   cuadrados nunca recibieron su altura. */
.marcas img.cuad{height:30px}
/* 24 marcas: la rejilla cierra exacta a 8, a 4 y a 2 columnas.
   Si algun dia el numero deja de ser multiplo de 8, la ultima fila
   queda con huecos: ese es el momento de volver a rellenarla. */
.marcas li:hover img{opacity:1;transform:scale(1.04)}

.marcas-nota{font-size:.83rem;line-height:1.6;color:var(--niebla-2);margin:1.1rem 0 0;max-width:78ch}
.marcas-nota b{color:var(--niebla);font-weight:600}

/* contacto */
.cta-sec{background:linear-gradient(180deg,var(--lino) 0%,#E7EEF7 100%)}
.form{margin-top:2.2rem;display:grid;gap:1rem}
.row{display:grid;gap:1rem}
@media(min-width:660px){.row{grid-template-columns:1fr 1fr}}
.form label{display:block;font-family:var(--display);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--niebla-2);font-weight:600}
.opt{text-transform:none;letter-spacing:0;font-weight:400;opacity:.8}
.form input,.form textarea{width:100%;margin-top:.4rem;background:var(--blanco);border:1px solid var(--linea-2);
  border-radius:var(--r-s);color:var(--tinta);font-family:var(--body);font-size:1rem;padding:.75rem .9rem;transition:border-color .25s,box-shadow .25s}
.form input:focus,.form textarea:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 4px rgba(0,145,199,.13)}
.form textarea{resize:vertical}
.form .btn{justify-self:start}
.formnote{font-size:.82rem;color:var(--niebla-2);margin:0}
.formnote.done{color:var(--ok)}

.contact{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;margin-top:2.6rem}
@media(min-width:700px){.contact{grid-template-columns:repeat(3,1fr)}}
.contact p{background:var(--blanco);margin:0;padding:1.25rem 1.4rem;max-width:none}
.contact b{display:block;font-family:var(--display);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla-2);margin-bottom:.35rem}
.contact a{color:var(--cyan-dp);text-decoration:none;font-size:.97rem;word-break:break-word}
.contact a:hover{color:var(--cyan-tx);text-decoration:underline}

/* pie */
.foot{background:var(--blanco);border-top:1px solid var(--linea);padding:3.4rem 0 2.6rem;color:var(--niebla);font-size:.93rem}
.foot-in{display:grid;gap:2.4rem;align-items:start}
@media(min-width:900px){.foot-in{grid-template-columns:230px 1fr;gap:3.4rem}}
.flogo{width:190px;height:auto}
.fcols{display:grid;gap:1.8rem}
@media(min-width:640px){.fcols{grid-template-columns:repeat(3,1fr)}}
.fh{font-family:var(--display);font-size:.74rem;letter-spacing:.15em;text-transform:uppercase;color:var(--niebla-2);margin:0 0 .5rem;font-weight:600}
.foot p{margin:0;max-width:none;line-height:1.7}
.foot a{color:var(--cyan-dp);text-decoration:none}
.foot a:hover{text-decoration:underline}
.fmini{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--linea);font-size:.82rem;color:var(--niebla-2)}

/* entradas */
.rev>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--e2),transform .7s var(--e2)}
.rev.in>*{opacity:1;transform:none}
.rev.in>*:nth-child(2){transition-delay:.08s}
.rev.in>*:nth-child(3){transition-delay:.16s}
.rev.in>*:nth-child(4){transition-delay:.24s}
.rev.in>*:nth-child(5){transition-delay:.32s}
.rev.done>*,.rev.done>*:nth-child(2),.rev.done>*:nth-child(3),
.rev.done>*:nth-child(4),.rev.done>*:nth-child(5){transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rev>*{opacity:1;transform:none}
  .band .w{opacity:1;transform:none}
  .cue{display:none}
}

/* =====================================================================
   v4 — Menú expandido, cinta de tecnologías, bento, centro de monitoreo,
   casos y certificaciones. Paleta derivada del logotipo IN-TEC 2018.
   ===================================================================== */

/* --------------------------------------------------------- MEGA MENU - */
.menu{display:none;list-style:none;margin:0;padding:0;gap:.2rem}
@media(min-width:1080px){.menu{display:flex;align-items:center}}
.mi{position:relative}
.mb{display:inline-flex;align-items:center;gap:.35rem;background:none;border:0;cursor:pointer;
  font-family:var(--display);font-size:.9rem;font-weight:500;color:#fff;text-decoration:none;
  padding:.55rem .75rem;border-radius:var(--r-s);text-shadow:0 1px 6px rgba(4,10,20,.7);
  transition:color .25s,background .25s,text-shadow .4s}
.nav.solid .mb{color:var(--niebla);text-shadow:none}
.nav.solid .mb:hover,.nav.solid .mi.open .mb{color:var(--cyan-dp);background:var(--lino-2)}
.mb:hover{background:rgba(255,255,255,.12)}
.chev{width:11px;height:7px;transition:transform .28s var(--e1)}
.mi.open .chev{transform:rotate(180deg)}

.mega{position:absolute;top:calc(100% + .5rem);left:50%;transform:translateX(-50%) translateY(-6px);
  width:min(660px,88vw);background:var(--blanco);border:1px solid var(--linea);border-radius:14px;
  box-shadow:0 4px 8px rgba(11,22,38,.06),0 26px 50px -20px rgba(17,54,102,.34);
  padding:.7rem;opacity:0;pointer-events:none;transition:opacity .25s var(--e1),transform .25s var(--e1);z-index:50}
.mi.open .mega{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
/* Puente invisible sobre el hueco de .5rem: sin el, el cursor sale del <li>
   al bajar hacia el panel, se dispara mouseleave y el menu se cierra antes
   de que puedas tocar una tarjeta. */
.mega::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mega-in{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}
.mcard{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:.1rem .75rem;
  padding:.85rem .9rem;border-radius:10px;text-decoration:none;transition:background .22s var(--e1)}
.mcard:hover{background:var(--lino-2)}
.mcard svg{grid-row:1/3;width:24px;height:24px;fill:none;stroke:var(--cyan);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;align-self:start;margin-top:.15rem}
.mcard b{font-family:var(--display);font-size:.95rem;color:var(--tinta);font-weight:600}
.mcard span{font-size:.85rem;color:var(--niebla);line-height:1.45}

.nav-cta{display:flex;align-items:center;gap:1.1rem}
.lnk-sop{display:none;font-family:var(--display);font-size:.87rem;font-weight:500;color:#fff;
  text-decoration:none;text-shadow:0 1px 6px rgba(4,10,20,.7);transition:color .25s,text-shadow .4s}
@media(min-width:760px){.lnk-sop{display:inline}}
.nav.solid .lnk-sop{color:var(--niebla);text-shadow:none}
.nav.solid .lnk-sop:hover{color:var(--cyan-dp)}

.burger{display:grid;gap:4px;background:none;border:0;cursor:pointer;padding:.5rem;margin-left:.3rem}
@media(min-width:1080px){.burger{display:none}}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:background .4s}
.nav.solid .burger span{background:var(--tinta)}
/* `.nav` lleva backdrop-filter, y eso lo vuelve el bloque contenedor de sus
   hijos `position:fixed`. Con `bottom:0` la altura se resolvia contra los 67px
   del nav y el panel quedaba de 38px. Se fija la altura a mano. */
body.men-abierto .menu{display:block;position:fixed;top:60px;left:0;right:0;bottom:auto;
  height:calc(100vh - 60px);height:calc(100svh - 60px);
  background:var(--blanco);padding:1.2rem;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;z-index:45}
body.men-abierto{overflow:hidden}
body.men-abierto .mb{color:var(--tinta);text-shadow:none;width:100%;justify-content:space-between;font-size:1.05rem;padding:.9rem .4rem}
/* Se repite el selector con `.mi.open` a proposito: `.mi.open .mega` son 3
   clases y le gana a `body.men-abierto .mega`, que son 2 mas un elemento.
   Sin esta linea el panel abierto recupera el translateX(-50%) del
   escritorio y las tarjetas se recorren media pantalla a la izquierda. */
body.men-abierto .mega,
body.men-abierto .mi.open .mega{position:static;transform:none;width:auto;box-shadow:none;border:0;opacity:1;pointer-events:auto;padding:0 0 .6rem}
body.men-abierto .mega::before{display:none}
body.men-abierto .mega-in{grid-template-columns:1fr}

/* -------------------------------------------------------- LA CINTA --- */
.cinta{background:var(--blanco);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  padding:1.6rem 0;overflow:hidden;position:relative}
.cinta::before,.cinta::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.cinta::before{left:0;background:linear-gradient(90deg,var(--blanco),transparent)}
.cinta::after{right:0;background:linear-gradient(270deg,var(--blanco),transparent)}
.cinta-pista{display:flex;width:max-content;animation:desliza 46s linear infinite}
.cinta:hover .cinta-pista{animation-play-state:paused}
.cinta-set{display:flex;align-items:center;gap:4.2rem;padding-right:4.2rem}
.cinta-set img{height:26px;width:auto;filter:grayscale(1);opacity:.5;transition:filter .4s var(--e1),opacity .4s var(--e1)}
.cinta-set img.cuad{height:30px}
.cinta-set img:hover{filter:grayscale(0);opacity:1}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ================================================================
   v41 — LA CINTA NO SE DESLIZA EN TELEFONO
   Medido el 2026-09-04 con PageSpeed: en una pantalla de 412 px, la tira en
   movimiento (145 414 px²) y el globo girando (101 579 px²) cubrian el 73 %
   de la primera pantalla. El Speed Index mide cuando la vista se estabiliza,
   y con eso corriendo no se estabiliza nunca: 17.1 s con un LCP de 2.1 s.
   Ademas una tira que corre sola es dificil de leer en un telefono y consume
   bateria. Aqui se muestra como rejilla quieta.
   ================================================================ */
@media (max-width:720px){
  .cinta{overflow:visible}
  .cinta::before,.cinta::after{display:none}   /* los degradados de los bordes */
  .cinta-pista{display:block;width:auto;animation:none}
  .cinta-set{flex-wrap:wrap;justify-content:center;gap:1.4rem 2rem;padding:0 20px}
  /* La copia del bucle solo existe para que el deslizamiento sea continuo.
     Sin deslizamiento sobra, y son 24 imagenes menos que cargar y maquetar. */
  .cinta-set[aria-hidden="true"]{display:none}
  .cinta-set img{height:22px;opacity:.6}
  .cinta-set img.cuad{height:25px}
}

/* Las animaciones perpetuas se pausan cuando salen de pantalla. La clase la
   pone site.js con un observador de interseccion. Es para la bateria del
   visitante, no para la calificacion. */
.fuera{animation-play-state:paused !important}


/* ---------------------------------------------------------- BENTO ---- */
.bento{display:grid;gap:1.2rem;margin-top:2.6rem}
@media(min-width:760px){.bento{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){
  .bento{grid-template-columns:repeat(3,1fr)}
  .bx-lg{grid-column:span 2}
}
.bx{position:relative;background:var(--blanco);border:1px solid var(--linea);border-radius:16px;
  padding:1.7rem 1.75rem;box-shadow:var(--sombra);overflow:hidden;
  transition:transform .3s var(--e1),box-shadow .3s var(--e1),border-color .3s var(--e1)}
.bx:hover{transform:translateY(-3px);box-shadow:var(--sombra-a);border-color:rgba(0,145,199,.36)}
.bx-h{display:flex;align-items:center;gap:.8rem;margin-bottom:.75rem}
.ic{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:11px;
  background:linear-gradient(150deg,rgba(0,145,199,.14),rgba(21,28,74,.08));border:1px solid rgba(0,145,199,.22)}
.ic svg{width:20px;height:20px;fill:none;stroke:var(--cyan-dp);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bx h3{font-size:1.12rem;margin:0;letter-spacing:-.014em}
.bx p{color:var(--niebla);font-size:.99rem;margin:0;max-width:none}
.mini{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:1.1rem 0 0;padding:0}
.mini li{font-family:var(--display);font-size:.76rem;color:var(--cyan-dp);background:rgba(0,145,199,.08);
  border:1px solid rgba(0,145,199,.18);border-radius:99px;padding:.28rem .7rem}

/* ================================================================
   v36 — el bento de "Que hacemos" ya lleva fotografia
   Antes eran seis cajas con icono, y cuatro de ellas con una sola linea
   dentro: se veian vacias. Ahora cada tarjeta abre con su foto y cierra
   con sus etiquetas, igual que las tarjetas de redes hibridas.
   La marca de agua de la v35 se retiro: con foto competia.
   ================================================================ */
.bx-img{position:relative;margin:-1.7rem -1.75rem 1.25rem;
  border-radius:16px 16px 0 0;overflow:hidden;height:190px;background:var(--lino-2)}
.bx-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--e1)}
.bx-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,22,38,.10),transparent 46%,rgba(11,22,38,.16))}
.bx:hover .bx-img img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.bx-img img{transition:none}
  .bx:hover .bx-img img{transform:none}}

/* Las tarjetas grandes son mas anchas: a 16:9 la foto se comeria la
   tarjeta, asi que se recorta por alto en vez de crecer. */
@media(min-width:1040px){
  .bx-lg .bx-img{height:215px}
}

/* Se estiran a la altura de su fila y las etiquetas se anclan abajo:
   asi la rejilla deja de verse dispareja. */
.bx{display:flex;flex-direction:column}
.bx .mini{margin-top:auto;padding-top:1.1rem}

/* luz que sigue al cursor; la posicion la escribe site.js */
.luz::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s var(--e1);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(0,145,199,.12),transparent 62%)}
.luz:hover::before{opacity:1}

/* ------------------------------------------- CENTRO DE MONITOREO ----- */
.noc{background:linear-gradient(160deg,var(--indigo) 0%,#0E2A50 52%,var(--navy) 100%);
  padding:5.6rem 0;position:relative;overflow:hidden}
.noc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(900px 520px at 78% 8%,rgba(0,145,199,.26),transparent 62%)}
.noc-grid{position:relative;display:grid;gap:2.8rem;align-items:center}
@media(min-width:960px){.noc-grid{grid-template-columns:1.05fr .95fr;gap:4rem}}
.eb-cl{color:var(--cyan-cl)}
.h2-cl{color:#fff;max-width:18ch}
.lede-cl{color:#C6D6E6}
.noc-p{color:#AFC4D8;font-size:1rem;max-width:var(--measure)}
.noc-p b{color:#fff}

.panel-noc{background:rgba(6,14,28,.62);border:1px solid rgba(90,140,190,.3);border-radius:16px;
  padding:1.3rem 1.4rem 1.1rem;backdrop-filter:blur(8px);box-shadow:0 24px 50px -22px rgba(0,0,0,.8)}
.pn-top{display:flex;align-items:center;gap:.6rem;padding-bottom:.9rem;margin-bottom:.5rem;
  border-bottom:1px solid rgba(90,140,190,.24)}
.pn-dot{width:8px;height:8px;border-radius:50%;background:#3FBE90;box-shadow:0 0 0 4px rgba(63,190,144,.18);
  animation:latido 2.6s var(--e1) infinite}
@keyframes latido{0%,100%{opacity:1}50%{opacity:.45}}
.pn-t{font-family:var(--display);font-size:.88rem;font-weight:600;color:#fff}
.pn-hb{margin-left:auto;font-size:.72rem;color:#89A6C2;letter-spacing:.04em}
.pn-rows{list-style:none;margin:0;padding:0}
.pn-rows li{display:flex;align-items:center;gap:1rem;padding:.62rem 0;border-bottom:1px solid rgba(90,140,190,.14)}
.pn-rows li:last-child{border-bottom:0}
.pn-l{font-size:.88rem;color:#C6D6E6}
.pn-v{margin-left:auto;font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:.2rem .6rem;border-radius:99px}
.pn-v.ok{color:#5FD3A8;background:rgba(63,190,144,.14);border:1px solid rgba(63,190,144,.3)}
.pn-v.warn{color:#F0B85C;background:rgba(214,154,60,.14);border:1px solid rgba(214,154,60,.32)}
.pn-foot{font-size:.72rem;color:#7B94AE;margin:.9rem 0 0;max-width:none}

/* ---------------------------------------------------------- CASOS ---- */
.casos{display:grid;gap:1.1rem;margin-top:2.5rem}
@media(min-width:700px){.casos{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.casos{grid-template-columns:repeat(3,1fr)}}
.caso{position:relative;background:var(--blanco);border:1px solid var(--linea);border-radius:14px;
  padding:1.5rem 1.55rem 1.6rem;overflow:hidden;box-shadow:var(--sombra);
  transition:transform .3s var(--e1),box-shadow .3s var(--e1)}
.caso:hover{transform:translateY(-3px);box-shadow:var(--sombra-a)}
.c-tag{display:inline-block;font-family:var(--display);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-dp);background:rgba(0,145,199,.09);border-radius:99px;
  padding:.24rem .68rem;margin:0 0 .8rem}
.caso h3{font-size:1.04rem;margin:0 0 .5rem;letter-spacing:-.012em;line-height:1.28}
.caso p{color:var(--niebla);font-size:.95rem;margin:0;max-width:none}

/* ------------------------------------------------ COLUMNAS Y CERTS --- */
.cols2{display:grid;gap:1.4rem 2rem;margin-top:1.7rem}
@media(min-width:560px){.cols2{grid-template-columns:1fr 1fr}}
.cols2 h3{font-family:var(--display);font-size:.95rem;margin:0 0 .25rem;letter-spacing:-.01em}
.cols2 p{margin:0;font-size:.93rem;color:var(--niebla);max-width:none}

.certs{display:grid;gap:1.2rem;margin-top:2.4rem}
@media(min-width:760px){.certs{grid-template-columns:repeat(3,1fr)}}
.cert{position:relative;background:var(--blanco);border:1px solid var(--linea);border-radius:14px;
  padding:1.6rem 1.6rem 1.7rem;overflow:hidden;box-shadow:var(--sombra)}
.cnum{font-family:var(--display);font-size:.74rem;font-weight:700;letter-spacing:.12em;color:var(--cyan-tx);
  display:block;margin-bottom:.7rem}
.cert h3{font-size:1.1rem;margin:0 0 .45rem;letter-spacing:-.014em}
.cert p{color:var(--niebla);font-size:.94rem;margin:0;max-width:none}

@media (prefers-reduced-motion:reduce){
  .cinta-pista{animation:none}
  .pn-dot{animation:none}
  .luz::before{display:none}
}

/* ================================================================
   v5 — plataforma propia, soberania de datos, SSL, redes hibridas
   ================================================================ */

/* ---------------------------------------------- plataforma propia - */
.plataforma{padding:6.5rem 0;background:var(--blanco);border-block:1px solid var(--linea)}
.pl-grid{display:grid;gap:2.8rem;align-items:start}
@media(min-width:980px){.pl-grid{grid-template-columns:1.05fr .95fr;gap:4rem}}
.pl-grid>div>p{max-width:var(--measure)}
.pl-grid .lede{margin-bottom:1.4rem}

.pl-panel{position:relative;border-radius:var(--r);padding:2rem 1.9rem;
  background:linear-gradient(158deg,var(--indigo) 0%,#0E2A50 55%,var(--navy) 100%);
  box-shadow:0 24px 54px -22px rgba(21,28,74,.55);overflow:hidden}
.pl-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background:radial-gradient(120% 90% at 88% 0%,rgba(63,182,228,.28),transparent 62%)}
.pl-t{position:relative;font-family:var(--display);font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan-cl);margin:0 0 1.35rem;font-weight:600}
.pl-list{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:.95rem}
.pl-list li{display:grid;grid-template-columns:8.5rem 1fr;gap:.2rem 1rem;
  padding-bottom:.95rem;border-bottom:1px solid rgba(255,255,255,.09)}
.pl-list li:last-child{border-bottom:0;padding-bottom:0}
.pl-k{font-family:var(--display);font-size:.9rem;font-weight:600;color:#fff}
.pl-v{font-size:.9rem;line-height:1.5;color:#AFC4D8}
@media(max-width:520px){.pl-list li{grid-template-columns:1fr}}

/* ------------------------------------------- soberania de los datos - */
.sob{display:grid;gap:1.1rem;margin-top:2.8rem}
@media(min-width:700px){.sob{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.sob{grid-template-columns:repeat(4,1fr);gap:1rem}}
.so{position:relative;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r);padding:1.7rem 1.5rem 1.6rem;box-shadow:var(--sombra);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.so:hover{transform:translateY(-4px);box-shadow:var(--sombra-a);border-color:#C3D3E8}
.so-n{display:block;font-family:var(--display);font-size:.78rem;font-weight:600;
  letter-spacing:.16em;color:var(--cyan-tx);margin-bottom:1rem}
.so h3{font-family:var(--display);font-size:1.08rem;font-weight:600;color:var(--tinta);
  margin:0 0 .55rem;line-height:1.25;text-wrap:balance}
.so p{font-size:.94rem;line-height:1.6;color:var(--niebla);margin:0;max-width:none}

/* ------------------------------------------- vigencia de los certificados - */
.reloj-wrap{max-width:30rem}
.reloj{display:grid;gap:1.15rem;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r);padding:1.9rem 1.7rem;box-shadow:var(--sombra)}
.rl{display:grid;grid-template-columns:3.6rem 1fr auto;gap:.9rem;align-items:center}
.rl-y{font-family:var(--display);font-size:.86rem;font-weight:600;color:var(--niebla);
  font-variant-numeric:tabular-nums}
.rl-b{height:9px;border-radius:99px;background:var(--lino-2);position:relative;overflow:hidden}
.rl-b::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:99px;
  background:linear-gradient(90deg,var(--cyan-dp),var(--cyan));
  transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.rev.in .rl-b::after{transform:scaleX(1)}
.rl:nth-child(2) .rl-b::after{transition-delay:.1s}
.rl:nth-child(3) .rl-b::after{transition-delay:.2s}
.rl:nth-child(4) .rl-b::after{transition-delay:.3s}
.rl-d{font-size:.85rem;color:var(--niebla-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.rl.al .rl-y,.rl.al .rl-d{color:var(--cyan-dp);font-weight:600}
.rl.al .rl-b::after{background:linear-gradient(90deg,var(--navy),var(--cyan-dp))}
.reloj-p{margin:1.1rem 0 0;font-size:.86rem;color:var(--niebla-2);line-height:1.55}
@media(prefers-reduced-motion:reduce){.rl-b::after{transform:scaleX(1);transition:none}}

/* -------------------------------------------------- redes hibridas - */
.hib{display:grid;gap:1.1rem;margin-top:2.8rem}
@media(min-width:760px){.hib{grid-template-columns:1fr 1fr;gap:1.2rem}}
.hb{position:relative;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r);padding:1.75rem 1.6rem;box-shadow:var(--sombra);
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s,border-color .35s}
.hb:hover{transform:translateY(-4px);box-shadow:var(--sombra-a);border-color:#C3D3E8}
.hb-h{display:flex;align-items:center;gap:.85rem;margin-bottom:.7rem}
.hb-h h3{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--tinta);margin:0}
.hb .ic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;
  border-radius:11px;background:var(--lino-2);border:1px solid var(--linea)}
.hb .ic svg{width:21px;height:21px;fill:none;stroke:var(--cyan-dp);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.hb p{font-size:.96rem;line-height:1.6;color:var(--niebla);margin:0;max-width:none}

/* ================================================================
   v6 — marca en el hero, venta y mantenimiento (indice anclado)
   ================================================================ */


/* --------------------------------- venta: indice anclado + pistas - */
.vt-grid{display:grid;gap:2.4rem}
@media(min-width:1000px){.vt-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:4rem;align-items:start}
  .vt-fijo{position:sticky;top:6.5rem}}
.vt-fijo .lede{font-size:1.04rem}

.vt-idx{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:.1rem;
  border-left:2px solid var(--linea)}
.vt-idx a{position:relative;display:flex;align-items:baseline;gap:.85rem;
  padding:.72rem 0 .72rem 1.1rem;text-decoration:none;color:var(--niebla);
  font-size:.96rem;line-height:1.35;transition:color .3s,transform .35s cubic-bezier(.2,.7,.3,1)}
.vt-idx a::before{content:"";position:absolute;left:-2px;top:.35rem;bottom:.35rem;width:2px;
  background:var(--cyan);transform:scaleY(0);transform-origin:top;
  transition:transform .4s cubic-bezier(.2,.7,.3,1)}
.vt-idx a:hover{color:var(--tinta);transform:translateX(3px)}
.vt-idx a.on{color:var(--tinta);font-weight:600}
.vt-idx a.on::before{transform:scaleY(1)}
.vi-n{font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.12em;
  color:var(--niebla-2);font-variant-numeric:tabular-nums;transition:color .3s}
.vt-idx a.on .vi-n{color:var(--cyan-tx)}
@media(max-width:999px){.vt-idx{display:none}}

.vt-pistas{display:grid;gap:1.15rem}
.vp{position:relative;background:var(--blanco);border:1px solid var(--linea);
  border-radius:var(--r);padding:1.9rem 1.8rem;box-shadow:var(--sombra);scroll-margin-top:7rem;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),box-shadow .4s,border-color .4s}
.vp::after{content:"";position:absolute;left:0;top:1.6rem;bottom:1.6rem;width:3px;
  border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--cyan),var(--cyan-dp));
  transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.vp:hover{transform:translateY(-4px);box-shadow:var(--sombra-a);border-color:#C3D3E8}
.vp:hover::after,.vp.on::after{transform:scaleY(1)}
.vp-h{display:flex;align-items:baseline;gap:.9rem;margin-bottom:.75rem}
.vp-n{font-family:var(--display);font-size:.76rem;font-weight:600;letter-spacing:.14em;
  color:var(--cyan-tx);font-variant-numeric:tabular-nums}
.vp-h h3{font-family:var(--display);font-size:1.16rem;font-weight:600;color:var(--tinta);
  margin:0;line-height:1.25;text-wrap:balance}
.vp>p{font-size:.97rem;line-height:1.62;color:var(--niebla);margin:0 0 1.15rem;max-width:none}
.vp-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.vp-l li{font-size:.83rem;color:var(--niebla);background:var(--lino-2);
  border:1px solid var(--linea);border-radius:99px;padding:.32rem .78rem;line-height:1.3}

/* --------------------------- micro-interaccion: la flecha que entra - */
.note a{color:var(--cyan-dp);text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(12,82,131,.35);transition:border-color .3s}
.note a::after{content:" \2192";display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.note a:hover{border-color:var(--cyan-dp)}
.note a:hover::after{transform:translateX(4px)}

/* ================================================================
   v9 - el cierre del hero: la marca llega y se queda
   ================================================================ */

/* El globo ya lo trae el video. Aqui solo el lockup tipografico, que
   nunca se deforma y se lee igual en el hero estatico de movil. */
.marca-cierre{display:flex;flex-direction:column;align-items:center;gap:.34rem;
  margin:0 0 1.15rem}
.mc-nom{font-family:var(--display);font-size:clamp(1.32rem,2.9vw,2.05rem);line-height:1;
  font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.mc-nom b{font-weight:700;letter-spacing:.12em}
.mc-slogan{font-family:var(--display);font-size:clamp(.7rem,1.25vw,.88rem);line-height:1;
  font-weight:500;letter-spacing:.46em;text-transform:uppercase;color:var(--cyan-cl);
  padding-left:.46em}
.marca-cierre::after{content:"";width:54px;height:2px;margin-top:.85rem;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent)}

/* La frase memorable manda: mas grande que un h2 normal y sin competencia. */
.band .hl2.frase{font-size:clamp(1.85rem,4.6vw,3.35rem);line-height:1.06;
  letter-spacing:-.022em;max-width:17ch;margin-inline:auto;text-wrap:balance}

/* Al final el cromo del globo es muy claro: el velo se refuerza o el
   texto se pierde encima del logo. */
.band.settle::before{inset:-22% -26%;
  background:radial-gradient(ellipse 74% 64% at 50% 50%,
    rgba(4,9,18,.86) 0%,rgba(4,9,18,.68) 42%,rgba(4,9,18,.28) 68%,rgba(4,9,18,0) 84%)}

/* ================================================================
   v10 - la entrada: la marca completa, y se va al primer scroll
   ================================================================ */

/* Velo casi a pantalla completa: el pasillo se intuye pero no compite,
   y el globo diminuto del fondo del video queda tapado por el logo real
   (era el "logo partido" de la version anterior). */
.band.intro::before{inset:-100vmax -100vmax;
  background:radial-gradient(ellipse 34% 30% at 50% 50%,
    rgba(3,7,14,.80) 0%,rgba(3,7,14,.70) 45%,rgba(3,7,14,.62) 100%)}

.in-globo{display:block;width:clamp(180px,21vw,290px);height:auto;margin:0 auto 1.5rem;
  filter:drop-shadow(0 16px 44px rgba(0,0,0,.72)) drop-shadow(0 0 56px rgba(0,145,199,.5));
  animation:in-flota 8s var(--e2) infinite}
@keyframes in-flota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-11px) rotate(-1deg)}}
body.paused .in-globo{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.in-globo{animation:none}}

.in-marca .mc-nom{font-size:clamp(1.5rem,3.4vw,2.5rem)}
.in-marca .mc-slogan{font-size:clamp(.74rem,1.4vw,1rem);letter-spacing:.5em}
.in-marca::after{width:74px}

/* ================================================================
   v12 — lo comercial integrado: mesa de ayuda e imagenes en los cuadros
   ================================================================ */

/* lista de alcance en dos columnas, para la mesa de ayuda */
.mini-l{display:grid;grid-template-columns:1fr;gap:.5rem;margin-top:1.4rem}
@media(min-width:520px){.mini-l{grid-template-columns:1fr 1fr;gap:.5rem 1.4rem}}
.mini-l li{position:relative;padding-left:1.15rem;font-size:.95rem;color:var(--niebla);line-height:1.45}
.mini-l li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;
  background:var(--cyan)}

/* imagen dentro de una pista de venta */
.vp-img{margin:-1.9rem -1.8rem 1.5rem;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  aspect-ratio:16/7;background:var(--lino-2)}
.vp-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.vp:hover .vp-img img{transform:scale(1.035)}

/* franja de imagen en las tarjetas de caso */
.c-img{margin:-1.5rem -1.55rem 1.25rem;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  aspect-ratio:16/8;background:var(--lino-2);position:relative}
.c-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.c-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,54,102,.06),rgba(17,54,102,.22))}
.caso:hover .c-img img{transform:scale(1.04)}

/* imagen ancha de apoyo dentro de una seccion */
.shot.ancha{margin:2.6rem 0 0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sombra)}
.shot.ancha img{display:block;width:100%;height:auto}

/* ================================================================
   v13 — el nav deja de partirse; iconos y contexto visual por cuadro
   ================================================================ */

/* El nav se partia en dos lineas al crecer el menu. Nada de la barra
   superior debe romper renglon. */
.brand-tx,.mb,.lnk-sop,.nav-cta .btn{white-space:nowrap}
.menu{gap:.1rem}
.mb{padding-inline:.62rem}
@media(min-width:1080px) and (max-width:1240px){
  .mb{font-size:.9rem;padding-inline:.5rem}
  .nav-in{gap:.6rem}
}

/* icono en las franjas de horario y de contacto */
.hi{display:grid;place-items:center;width:34px;height:34px;margin-bottom:.7rem;
  border-radius:10px;background:var(--lino-2);border:1px solid var(--linea)}
.hi svg{width:18px;height:18px;fill:none;stroke:var(--cyan-dp);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.hours p:hover .hi,.contact p:hover .hi{background:#E4EDFA;border-color:#C3D3E8}
.hi,.hours p,.contact p{transition:background .3s,border-color .3s}

/* imagen dentro de una tarjeta de red hibrida */
.hb-img{margin:-1.75rem -1.6rem 1.25rem;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  aspect-ratio:16/8;background:var(--lino-2);position:relative}
.hb-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.hb-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,54,102,.05),rgba(17,54,102,.2))}
.hb:hover .hb-img img{transform:scale(1.04)}

/* imagen dentro de una tarjeta de certificacion */
.cert-img{margin:-1.6rem -1.6rem 1.35rem;border-radius:var(--r) var(--r) 0 0;overflow:hidden;
  aspect-ratio:16/8;background:var(--lino-2);position:relative;display:block}
.cert-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.cert-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(17,54,102,.05),rgba(17,54,102,.2))}
.cert:hover .cert-img img{transform:scale(1.04)}

/* el retrato de contacto se recorta a una franja: la cara arriba */
.shot.ancha.retrato{aspect-ratio:21/8;margin-top:2.4rem}
.shot.ancha.retrato img{width:100%;height:100%;object-fit:cover;object-position:center 32%}

/* ================================================================
   v14 — el telefono tiene su propia portada, no la del escritorio
   ================================================================ */
/* Los CUATRO gates de dispositivo. A proposito NO llevan
   (prefers-reduced-motion:reduce), que si esta en el bloque del hero estatico:
   esa preferencia habla de movimiento, no de tamano de pantalla. Meterla aqui
   le daria tipografia de telefono a un escritorio que la tenga activada. */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  /* La marca entra tambien en el telefono: ahi no hay recorrido que la traiga */
  /* Aqui habia un segundo globo, detras del titular. Con el que gira en la
     banda de cierre se veian DOS a la vez y confundia. Se deja solo aquel. */
  .band .hl{font-size:clamp(1.6rem,7.4vw,2.3rem);line-height:1.12}
  .band .hl2.frase{font-size:clamp(1.5rem,6.6vw,2.1rem)}
  .band .sub{font-size:1rem}
  .band.b1{margin-bottom:2.4rem}
  /* .cta-row trae justify-content:center del escritorio; en grid eso deja la
     pista en max-content y el width:100% del boton se resuelve contra ella. */
  .cta-row{display:grid;gap:.6rem;justify-content:stretch}
  .cta-row .btn{width:100%;justify-content:center}
  /* el nav del telefono: la marca no compite con el boton */
  .brand-tx{font-size:.86rem;letter-spacing:.04em}
  .mark{height:30px}
  .nav-cta .btn{padding-inline:.9rem;font-size:.88rem}
  .lnk-sop{display:none}
}

/* Tableta: ni la retícula del telefono ni la del escritorio */
@media (min-width:721px) and (max-width:1079px){
  .wrap,.nav-in{max-width:920px}
  .bento{grid-template-columns:1fr 1fr}
  .casos,.certs{grid-template-columns:1fr 1fr}
  .sob{grid-template-columns:1fr 1fr}
}

/* ================================================================
   v15 — el recorrido tambien en telefono, con cuadros en vez de video
   ================================================================ */
.seq{display:none;position:absolute;inset:0;width:100%;height:100%;z-index:1;
  transition:opacity .5s var(--e1)}
/* Los cuadros tapan el hueco mientras baja el video: en frio el poster quedaba
   congelado varios segundos y el hero se veia plano y sin movimiento. */
.stage.seq-ready .seq{display:block;opacity:1}
.stage.video-ready .seq{opacity:0}
.poster{z-index:0}
.stage video{z-index:2}
.scrim{z-index:3}
/* Orden de capas del hero: poster 0 < cuadros 1 < video 2 < velo 3 < TEXTO 4.
   .bands no tenia z-index y al darle numero a las capas de abajo el texto
   quedo pintado DEBAJO del video. Si se agrega otra capa, respetar este orden. */

/* Los CUATRO gates de dispositivo. A proposito NO llevan
   (prefers-reduced-motion:reduce), que si esta en el bloque del hero estatico:
   esa preferencia habla de movimiento, no de tamano de pantalla. Meterla aqui
   le daria tipografia de telefono a un escritorio que la tenga activada. */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px){

  /* Con la secuencia encendida vuelve el hero recorrible. `svh` en vez de
     `vh` porque la barra de direccion del navegador movil aparece y
     desaparece al hacer scroll, y con `vh` el alto cambia a media animacion. */
  html.hero-seq .hero{height:340vh;height:340svh}
  html.hero-seq .stage{position:sticky;top:0;height:100vh;height:100svh;
    min-height:0;display:block;background:#0A111E}
  html.hero-seq .stage::after{display:none}
  html.hero-seq .seq{display:block}
  html.hero-seq .scrim{display:block}

  html.hero-seq .bands{position:absolute;inset:0;display:grid;place-items:center;
    padding:0 22px;z-index:4}
  html.hero-seq .band{grid-area:1/1;display:block;margin-bottom:0;opacity:0}
  html.hero-seq .band.intro{display:block}
  html.hero-seq .cue{display:block}
  html.hero-seq .in-globo{width:clamp(150px,40vw,230px)}
}

/* ================================================================
   v17 — nuestros clientes
   ================================================================ */
.clientes{list-style:none;margin:2.8rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
@media(min-width:560px){.clientes{grid-template-columns:repeat(3,1fr)}}
@media(min-width:860px){.clientes{grid-template-columns:repeat(5,1fr)}}
.clientes li{background:var(--blanco);display:grid;place-items:center;
  padding:1.5rem 1.1rem;min-height:112px;transition:background .3s}
.clientes li:hover{background:var(--lino-2)}
.clientes img{max-width:100%;max-height:60px;width:auto;height:auto;display:block;
  filter:grayscale(1);opacity:.62;transition:filter .4s var(--e1),opacity .4s var(--e1),transform .4s var(--e1)}
.clientes li:hover img{filter:grayscale(0);opacity:1;transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.clientes li:hover img{transform:none}}

/* ================================================================
   v20 — el contacto abre a todo, no solo a la poliza
   ================================================================ */
.temas{border:0;margin:0 0 1.5rem;padding:0;min-width:0}
.temas legend{padding:0;margin-bottom:.8rem;font-family:var(--display);font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--niebla-2);font-weight:600}
.temas .opt{letter-spacing:.02em;text-transform:none;font-weight:400}
.chip{display:inline-flex;align-items:center;margin:0 .45rem .45rem 0;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:block;font-size:.9rem;line-height:1.3;color:var(--niebla);
  background:var(--blanco);border:1px solid var(--linea);border-radius:99px;
  padding:.5rem .95rem;transition:background .25s,border-color .25s,color .25s}
.chip:hover span{border-color:#C3D3E8;color:var(--tinta)}
.chip input:checked + span{background:var(--cyan-dp);border-color:var(--cyan-dp);color:#fff;font-weight:500}
.chip input:focus-visible + span{outline:2px solid var(--cyan);outline-offset:2px}
.cta-sec .shot.ancha.retrato{margin:2.2rem 0 2.6rem}

/* ================================================================
   v21 — el formulario compacto y con defensas
   ================================================================ */
/* `.form label` es display:block y mayusculas; ganaba sobre `.chip` y dejaba
   los nueve temas apilados a todo lo ancho. Aqui se empata y se corrige. */
.form .chip{display:inline-flex;width:auto;margin:0 .4rem .4rem 0;
  text-transform:none;letter-spacing:0;font-weight:400;font-size:1rem}
.form .chip span{font-family:var(--body);font-size:.86rem;padding:.44rem .82rem;
  color:var(--niebla);font-weight:400}
.form .chip input:checked + span{color:#fff;font-weight:500}
.temas{margin-bottom:1.1rem}

/* la trampa: invisible para la gente, presente para un robot */
.miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.verif{max-width:22rem}
.verif-p{display:flex;align-items:center;gap:.6rem;margin-top:.4rem}
.verif-p #verif-q{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--tinta);
  letter-spacing:0;text-transform:none;white-space:nowrap;
  background:var(--lino-2);border:1px solid var(--linea);border-radius:var(--r-s);padding:.5rem .8rem}
.verif-p input{margin-top:0;width:5.5rem;text-align:center}

/* ================================================================
   v22 — lista desplegable en vez de nueve chips
   ================================================================ */
.form select{width:100%;margin-top:.4rem;background:var(--blanco);
  border:1px solid var(--linea-2);border-radius:var(--r-s);padding:.8rem .9rem;
  font-family:var(--body);font-size:1rem;color:var(--tinta);
  text-transform:none;letter-spacing:0;font-weight:400;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--niebla) 50%),
                   linear-gradient(135deg,var(--niebla) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:2.6rem}
.form select:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 4px rgba(0,145,199,.13)}
.form select:invalid{color:var(--niebla-2)}
.formnote.err{color:#B3261E}

/* ================================================================
   v30 — el globo gira detras de la ultima frase
   ================================================================ */
/* Va como imagen y no dentro del video: siempre nitido, pesa 150 KB y no
   depende de que el video haya cargado. Se desvanece con su banda. */
.globo-fondo{position:absolute;left:50%;top:50%;z-index:-1;pointer-events:none;
  width:min(52vw,460px);height:auto;
  transform:translate(-50%,-50%);
  opacity:.30;
  filter:drop-shadow(0 0 60px rgba(0,145,199,.45));
  animation:globo-gira 26s linear infinite}
@keyframes globo-gira{from{transform:translate(-50%,-50%) rotate(0)}
                        to{transform:translate(-50%,-50%) rotate(360deg)}}
body.paused .globo-fondo{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.globo-fondo{animation:none}}
/* El canvas de la secuencia ya no existe: se retira su regla para que nadie
   la reviva sin leer por que se quito (144 MB de mapas de bits en memoria). */
.seq{display:none !important}

/* ================================================================
   v31 — un solo globo en telefono
   ================================================================ */
@media (max-width:720px),
       (orientation:portrait) and (max-width:1024px),
       (orientation:portrait) and (pointer:coarse),
       (orientation:landscape) and (pointer:coarse) and (max-height:560px){
  /* En el hero estatico el globo compite con el texto: se achica y se atenua. */
  /* v41: y se queda QUIETO. Al 16 % de opacidad detras del texto la rotacion
     no se aprecia, y a cambio deja la primera pantalla sin estabilizarse
     nunca — que es lo que disparaba el Speed Index a 17.1 s.
     OJO CON EL ORDEN: esta regla tiene que ir DESPUES de la que declara
     `animation:globo-gira` (mas arriba en este archivo). Ponerla antes no
     sirve de nada: misma especificidad, gana la ultima. Ya paso. */
  .globo-fondo{width:min(62vw,300px);opacity:.16;animation:none}
}

/* ================================================================
   v43 — EL PORTAL DEJA DE SER UNA SOLA PAGINA
   La portada conserva el hero; las paginas interiores abren con un
   encabezado sobrio. Como ahi no hay hero detras, el nav tiene que
   nacer solido: si no, el texto blanco cae sobre fondo claro y
   desaparece. site.js le pone .solid al bajar, pero arriba del todo se
   la quita — por eso esto se ata al <body>, que gana en especificidad
   y no depende del scroll.
   ================================================================ */
body.sin-hero .nav{background:rgba(255,255,255,.92);border-bottom-color:var(--linea)}
body.sin-hero .nav .brand-tx{color:var(--niebla);text-shadow:none}
body.sin-hero .nav .brand-tx b{color:var(--tinta)}
body.sin-hero .mb{color:var(--niebla);text-shadow:none}
body.sin-hero .mb:hover,body.sin-hero .mi.open .mb{color:var(--cyan-dp);background:var(--lino-2)}
/* OJO: `.nav-links` NO existe en el HTML — lo dice el comentario de mas arriba
   en este mismo archivo. Los enlaces sueltos del menu son `.mi > a` y el de
   soporte es `.lnk-sop`. Escribir la regla contra `.nav-links` no da error:
   simplemente no le pega a nadie, y "Soporte" se quedaba BLANCO SOBRE BLANCO
   en las paginas interiores. Medido: contraste 1.0. */
body.sin-hero .lnk-sop{color:var(--niebla);text-shadow:none}
body.sin-hero .lnk-sop:hover{color:var(--cyan-dp)}
body.sin-hero .mi > a{color:var(--niebla);text-shadow:none}
body.sin-hero .mi > a:hover{color:var(--cyan-tx)}

.pagina-h{padding:7.5rem 0 .5rem;background:var(--lino)}
.pagina-h .wrap{max-width:1140px}
.h1p{font-family:var(--display);font-size:clamp(2rem,4.6vw,3.1rem);line-height:1.08;
  letter-spacing:-.026em;font-weight:700;margin:0 0 1rem;text-wrap:balance;max-width:20ch}
.pagina-h .lede{margin:0}
@media (max-width:720px){ .pagina-h{padding:6rem 0 .25rem} .h1p{max-width:none} }

/* ================================================================
   v45 — AVISO DE PRIVACIDAD
   Es un documento legal recuperado del WordPress anterior, palabra por
   palabra. Se lee de corrido, asi que manda la medida de linea y el aire
   entre apartados; nada de tarjetas ni adornos.
   ================================================================ */
.aviso-doc{max-width:74ch}
.aviso-doc p{color:var(--niebla);font-size:1rem;line-height:1.72;margin:0 0 1.1rem;max-width:none}
.av-h{font-family:var(--display);font-size:1.04rem;font-weight:600;color:var(--tinta);
  letter-spacing:-.008em;line-height:1.4;margin:2.4rem 0 .8rem;
  padding-top:1.4rem;border-top:1px solid var(--linea)}
.aviso-doc .av-h:first-child{margin-top:0;padding-top:0;border-top:0}
.fsep{color:var(--linea-2);margin:0 .35rem}
.fmini a{color:var(--niebla);text-decoration:none;border-bottom:1px solid var(--linea-2)}
.fmini a:hover{color:var(--cyan-tx);border-bottom-color:var(--cyan-tx)}