/* ==========================================================================
   Network Control — hoja de estilos compartida
   Paleta: Índigo vivo · sin frameworks · un solo archivo cacheable
   ========================================================================== */

:root{
  --bg:#eef0f7; --surface:#ffffff; --surface-2:#f5f6fc; --ink:#1b1f3b;
  --muted:#474c68; --line:#d3d7e6; --line-2:#e3e6f1;
  --brand:#3b3be0; --brand-ink:#20206e; --brand-soft:#e8e8fd;
  --cta:#25b268; --cta-ink:#1c9556; --accent:#ffc24b;
  --live:#22b063; --shadow:0 30px 60px -34px rgba(20,20,70,.30);
  --disp:"Bricolage Grotesque",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0d18; --surface:#141726; --surface-2:#1a1e30;
    --ink:#eef0fb; --muted:#b4b8dc; --line:#272b43; --line-2:#20243a;
    --brand:#7d7bff; --brand-ink:#c9c8ff; --brand-soft:#211f4d;
    --cta:#2ec777; --cta-ink:#54d992; --accent:#ffc24b; --live:#33d17f;
    --shadow:20px 40px -30px rgba(0,0,0,.7);
  }}
:root[data-theme="dark"]{
  --bg:#0b0d18; --surface:#141726; --surface-2:#1a1e30; --ink:#eef0fb;
  --muted:#b4b8dc; --line:#272b43; --line-2:#20243a;
  --brand:#7d7bff; --brand-ink:#c9c8ff; --brand-soft:#211f4d;
  --cta:#2ec777; --cta-ink:#54d992; --accent:#ffc24b; --live:#33d17f;
  --shadow:20px 40px -30px rgba(0,0,0,.7);
}

/* --- reset base --- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.55;-webkit-font-smoothing:antialiased;font-size:16px}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;
  line-height:1.05;margin:0;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
::selection{background:var(--brand);color:#fff}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- fondos por sección (se intercalan) --- */
body{position:relative;background:var(--bg)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px}
@media(max-width:560px){.wrap{padding-inline:18px}}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;
  color:var(--brand);text-transform:uppercase;display:inline-flex;gap:8px;align-items:center}

.btn{font-family:var(--sans);font-weight:600;font-size:15px;border:0;border-radius:11px;
  padding:13px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease;line-height:1}
.btn:active{transform:translateY(1px)}
.btn-cta{background:var(--cta);color:#fff;box-shadow:0 12px 24px -12px var(--cta)}
.btn-cta:hover{background:var(--cta-ink)}
.btn-brand{background:var(--brand);color:#fff}
.btn-brand:hover{background:var(--brand-ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--brand);color:var(--brand)}
.btn-sm{padding:9px 15px;font-size:14px;border-radius:9px}

/* ---------- header ---------- */
/* Topbar liquid crystal — barra flotante de cristal */
header{position:sticky;top:0;z-index:50;background:transparent;border:0;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 0}
.nav{position:relative;max-width:1200px;margin:0 auto;height:60px;
  display:flex;align-items:center;gap:26px;
  transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .35s ease}
/* Al hacer scroll la barra se desliza a la izquierda y deja un botón con el logo */
header.tucked{pointer-events:none}
header.tucked .nav{transform:translateX(calc(-100% - 40px));opacity:0;pointer-events:none}
.nav-home{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:16px;z-index:60;
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);
  box-shadow:0 14px 30px -16px rgba(20,20,70,.45);
  opacity:0;transform:translateX(-46px) scale(.82);pointer-events:none;
  transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.28,.4,1),box-shadow .2s ease}
.nav-home img{width:30px;height:30px;display:block}
header.tucked .nav-home{opacity:1;transform:none;pointer-events:auto}
header.tucked .nav-home:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(20,20,70,.5)}
header.tucked .nav-home:active{transform:scale(.94)}
@media(prefers-reduced-motion:reduce){header.tucked .nav{transform:none}}
/* Nav sobre el hero oscuro (solo inicio): texto claro */
.pg-inicio header .brand{color:#fff}
.pg-inicio header .nav-links a{color:rgba(255,255,255,.82)}
.pg-inicio header .nav-links a:hover,.pg-inicio header .nav-links a.active{color:#fff}
.pg-inicio header .iconbtn{border-color:rgba(255,255,255,.32);color:rgba(255,255,255,.85)}
.pg-inicio header .iconbtn:hover{border-color:#fff;color:#fff}
.pg-inicio header .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42);background:transparent}
.pg-inicio header .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);background:rgba(255,255,255,.08)}
/* fina línea de acento de marca sobre el cristal */
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);
  font-weight:800;font-size:18px;letter-spacing:-.02em}
.glyph{width:26px;height:26px;flex:none}
.nav-links{display:flex;gap:22px;margin-left:8px;font-size:14.5px;font-weight:500;color:var(--muted)}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--brand);font-weight:600}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:10px}
.iconbtn{background:transparent;border:1.5px solid var(--line);color:var(--muted);
  width:38px;height:38px;border-radius:10px;cursor:pointer;display:grid;place-items:center}
.iconbtn:hover{border-color:var(--brand);color:var(--brand)}
.burger{display:none}
/* foco visible por teclado (accesibilidad) */
a:focus-visible,button:focus-visible,.btn:focus-visible,.iconbtn:focus-visible{
  outline:2.5px solid var(--brand);outline-offset:2px;border-radius:8px}
/* franja de prueba social (tecnologías y aliados) */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.trust .wrap{display:flex;align-items:center;gap:26px 34px;flex-wrap:wrap;justify-content:center;padding-block:22px}
.trust .tl{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.trust .tlist{display:flex;align-items:center;gap:14px 30px;flex-wrap:wrap;justify-content:center}
.trust .tlist span{font-family:var(--disp);font-weight:700;font-size:17px;color:var(--muted);opacity:.8;
  transition:color .15s ease,opacity .15s ease}
.trust .tlist span:hover{color:var(--brand);opacity:1}
@media(max-width:1020px){
  .nav-links{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;
    gap:0;background:color-mix(in srgb,var(--surface) 92%,transparent);
    -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
    border:1px solid var(--line);border-radius:16px;padding:8px 20px 14px;
    box-shadow:0 20px 40px -22px rgba(20,20,70,.5)}
  .nav-links[data-open]{display:flex}
  .nav-links a{padding:12px 0;border-bottom:1px solid var(--line-2);font-size:16px;color:var(--ink)}
  .burger{display:grid}
  .hide-sm{display:none}}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 18px}
.trust{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.trust b{color:var(--ink);font-weight:500}
.trust span{display:inline-flex;align-items:center;gap:7px}
.trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cta)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--live) 55%,transparent)}
  70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* Credenciales / afiliaciones del hero — insignias normalizadas (mismo lienzo, misma altura) */
.hcreds{margin-top:16px}
.hcreds-lbl{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
.hcreds-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cred{flex:1 1 100px;max-width:150px;min-width:84px;background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;
  box-shadow:0 12px 26px -16px rgba(20,20,70,.45);transition:transform .18s ease,box-shadow .18s ease}
.cred img{width:100%;height:auto;display:block}
.cred:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(20,20,70,.5)}
.cred-meta{border:1.5px solid color-mix(in srgb,#0866ff 55%,var(--line));
  box-shadow:0 16px 30px -14px rgba(8,102,255,.5)}
.cred-meta:hover{box-shadow:0 20px 38px -16px rgba(8,102,255,.6)}

/* ---- Cotizador de planes ---- */
.qz{display:grid;grid-template-columns:1.3fr .9fr;gap:24px;align-items:start}
@media(max-width:820px){.qz{grid-template-columns:1fr}}
.qz-form{display:grid;gap:18px}
.qz-group{border:0;margin:0;padding:0}
.qz-group legend{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--brand);font-weight:600;margin-bottom:10px;padding:0}
.qz-opt{display:flex;align-items:center;gap:12px;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;
  padding:13px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.qz-opt:hover{border-color:color-mix(in srgb,var(--brand) 40%,var(--line))}
.qz-opt input{width:20px;height:20px;accent-color:var(--brand);flex:none;cursor:pointer}
.qz-opt:has(input:checked){border-color:var(--brand);background:color-mix(in srgb,var(--brand) 6%,var(--surface));box-shadow:0 10px 24px -16px color-mix(in srgb,var(--brand) 60%,transparent)}
.qz-tx{display:flex;flex-direction:column;line-height:1.25;flex:1}
.qz-tx b{font-family:var(--disp);font-size:15.5px}
.qz-tx small{color:var(--muted);font-size:12.5px}
.qz-pr{font-family:var(--disp);font-weight:800;color:var(--brand);font-size:16px;font-variant-numeric:tabular-nums}
.qz-opt-mod{gap:11px}
.qz-ic{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface-2);transition:border-color .18s,background .18s}
.qz-ic img{display:block}
.qz-mod-pilot .qz-ic{background:color-mix(in srgb,var(--brand) 9%,var(--surface));border-color:color-mix(in srgb,var(--brand) 22%,var(--line-2))}
.qz-mod-fdns .qz-ic{background:color-mix(in srgb,var(--cta) 10%,var(--surface));border-color:color-mix(in srgb,var(--cta) 24%,var(--line-2))}
.qz-opt-mod:has(input:checked) .qz-ic{border-color:color-mix(in srgb,var(--brand) 45%,transparent)}
@media(max-width:560px){.qz-ic{width:36px;height:36px;border-radius:10px}.qz-ic img{width:24px;height:24px}}
.qz-summary{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow);position:sticky;top:84px}
.qz-summary h3{font-family:var(--disp);font-size:18px;margin-bottom:14px}
.qz-list{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.qz-list li{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--muted)}
.qz-list li b{color:var(--ink);font-variant-numeric:tabular-nums}
.qz-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;padding-top:14px;border-top:2px solid var(--brand)}
.qz-total span{font-family:var(--disp);font-weight:700}
.qz-total b{font-family:var(--disp);font-weight:800;font-size:26px;color:var(--brand);font-variant-numeric:tabular-nums}
.qz-note{font-size:11.5px;color:var(--muted);background:color-mix(in srgb,var(--accent,#f5b301) 12%,var(--surface-2));border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;margin:14px 0 16px;line-height:1.45}
.qz-summary .btn{width:100%;justify-content:center}

/* ---- Afiliaciones (Nosotros) + clientes ---- */
.afil{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.afil-c{display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.afil-badge{display:grid;place-items:center;width:100%;height:78px;background:#fff;border-radius:12px;padding:12px 20px;
  box-shadow:inset 0 0 0 1px rgba(20,20,70,.08)}
.afil-badge img{max-height:42px;max-width:100%;width:auto;height:auto;display:block}
.afil-badge.sri img{max-height:54px}
.afil-c b{font-family:var(--disp);font-size:16.5px}
.afil-c span{color:var(--muted);font-size:14px;line-height:1.5}

/* ===== Hero (opción 7): titular centrado + 2 flujos animados ===== */
/* ===== Hero: degradado oscuro + diagrama a la derecha, texto sobre el espacio oscuro de la izquierda ===== */
.heroq{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:clamp(500px,62vh,620px);
  margin-top:calc(-1 * (env(safe-area-inset-top,0px) + 72px));
  padding-block:calc(env(safe-area-inset-top,0px) + 96px) 44px;
  background:
    radial-gradient(60% 70% at 100% 100%, rgba(22,150,140,.28), transparent 70%),
    radial-gradient(45% 55% at 0% 0%, rgba(7,112,215,.35), transparent 70%),
    linear-gradient(180deg,#08235c 0%,#0a2766 55%,#0a2e74 100%)}
/* Diagrama (SRI, FerroDNS, ISPilot, Cliente, ONT, OLT) como capa propia, con bordes difuminados
   sobre el degradado: se escala por ancho para no quedar nunca bajo el texto */
.heroq::after{content:"";position:absolute;z-index:0;pointer-events:none;right:max(0px,calc((100vw - 1900px) / 2));top:50%;
  width:min(calc(84vw - 70px),1500px);aspect-ratio:1642/656;transform:translateY(-44%);
  background:url(../img/hero-net-v7.jpg) center/100% 100% no-repeat;
  background:image-set(url(../img/hero-net-v7.webp) type("image/webp"), url(../img/hero-net-v7.jpg) type("image/jpeg")) center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 95%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 90%,transparent 100%);
  mask-composite:intersect}
/* velo suave: refuerza el contraste del texto sin tapar el diagrama */
.heroq::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg, rgba(10,26,58,.92) 0%, rgba(10,26,58,.6) 28%, rgba(10,26,58,.12) 46%, transparent 60%)}
.heroq .wrap{position:relative;z-index:2;width:100%}
.hq-grid{display:block}
.hq-head{max-width:600px;margin:0;text-align:left}
.hq-head .eyebrow{color:#4fc9ff}
.hq-head h1{font-family:var(--disp);font-weight:800;line-height:1.06;font-size:clamp(28px,3vw,43px);margin:14px 0 16px;color:#fff}
.hq-head h1 em{font-style:normal;color:#43c6ff;background:none}
.hq-head .sub{color:#c3ccef;font-size:clamp(15.5px,1.5vw,18px);max-width:44ch;margin:0 0 26px}
.hq-head .hero-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start;margin:0 0 28px}
.heroq .btn-ghost{color:#fff;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45)}
.heroq .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85);background:rgba(255,255,255,.06)}
.hq-head .hcreds-lbl{text-align:left;color:#9fb0e6}
.hq-head .hcreds-row{justify-content:flex-start}
.hq-stats{display:flex;justify-content:flex-start;gap:26px;flex-wrap:wrap;margin:22px 0 0}
.hq-stats div{text-align:left;white-space:nowrap}
.hq-stats b{display:block;font-family:var(--disp);font-weight:800;font-size:25px;color:#43c6ff;font-variant-numeric:tabular-nums;line-height:1}
.hq-stats span{font-family:var(--mono);font-size:11.5px;color:#9fb0e6}
.hq-figure{display:none}
/* Móvil y tablet: fondo plano oscuro + el gráfico debajo del texto */
@media(max-width:1100px){
  .heroq::after{display:none}
  .heroq{display:block;min-height:0;
    background:#0a1a3a url(../img/hero-m-bg.jpg) center/cover no-repeat;
    background:#0a1a3a image-set(url(../img/hero-m-bg.webp) type("image/webp"), url(../img/hero-m-bg.jpg) type("image/jpeg")) center/cover no-repeat;
    padding-block:calc(env(safe-area-inset-top,0px) + 82px) 30px}
  /* velo para dar profundidad y legibilidad sobre la textura del globo */
  .heroq::before{display:block;
    background:linear-gradient(180deg, rgba(7,16,44,.82) 0%, rgba(8,20,54,.6) 46%, rgba(8,20,54,.78) 100%)}
  .hq-head{max-width:none}
  .hq-head .sub{max-width:100%}
  .hq-figure{display:block;margin:22px 0 0;max-width:760px}
  .hq-figure img{display:block;width:100%;height:auto;border-radius:14px;
    border:1px solid rgba(120,160,255,.18);box-shadow:0 20px 50px -24px rgba(0,0,0,.7)}}
/* Móvil angosto: que las 3 afiliaciones y los stats quepan sin cortarse */
@media(max-width:560px){
  /* afiliaciones: badges normalizados por ALTURA (anchos naturales, envuelven si hace falta) */
  .hq-head .hcreds-row{gap:8px;flex-wrap:wrap}
  .hq-head .cred{flex:0 0 auto;width:auto;min-width:0;max-width:none;
    padding:7px 11px;display:flex;align-items:center;border-radius:11px}
  .hq-head .cred img{width:auto;height:24px}
  .hq-stats{gap:14px 16px}
  .hq-stats div{white-space:normal}
  .hq-stats b{font-size:22px}
  .hq-stats span{font-size:10.5px;line-height:1.25}}
@keyframes barFill{0%,3%{width:0}82%{width:100%}100%{width:100%}}

/* ===== Hero: escenario animado — el cuadro chico rota 2 íconos, se une al grande y el grande se centra ===== */
.stagewrap{position:relative;height:150px;margin-top:6px}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 3px rgba(47,191,113,.25)}50%{box-shadow:0 0 0 6px rgba(47,191,113,.04)}}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.05)}}
/* movimiento compartido: chico rota → se desplaza al centro y se funde → grande se expande */
@keyframes miniFlow{0%{left:0;opacity:1;transform:translateY(-50%) scale(1)}
  26%{left:0;opacity:1;transform:translateY(-50%) scale(1)}
  40%{left:calc(50% - 46px);opacity:0;transform:translateY(-50%) scale(.5)}
  41%,95%{left:calc(50% - 46px);opacity:0}
  100%{left:0;opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes arrFlow{0%,20%{opacity:1}32%,96%{opacity:0}100%{opacity:1}}
@keyframes stageFlow{0%,40%{right:0;width:58%}52%,93%{right:0;width:100%}100%{right:0;width:58%}}
@keyframes mA{0%,11%{opacity:1}15%,100%{opacity:0}}
@keyframes mB{0%,12%{opacity:0}16%,36%{opacity:1}40%,100%{opacity:0}}
@keyframes pRec{0%,58%{opacity:1}64%,100%{opacity:0}}
@keyframes pThink{0%,62%{opacity:0}66%,74%{opacity:1}78%,100%{opacity:0}}
@keyframes pHappy{0%,76%{opacity:0}80%,86%{opacity:1}90%,100%{opacity:0}}
@keyframes pCheck{0%,88%{opacity:0}92%,99%{opacity:1}100%{opacity:0}}
@keyframes dRec{0%,58%{opacity:1}64%,100%{opacity:0}}
@keyframes dAnal{0%,60%{opacity:0}64%,72%{opacity:1}76%,100%{opacity:0}}
@keyframes dOk16{0%,37%{opacity:0}41%,47%{opacity:1}51%,100%{opacity:0}}
@keyframes dBad16{0%,87%{opacity:0}91%,97%{opacity:1}100%{opacity:0}}
@keyframes dotsP{0%,100%{opacity:.1}50%{opacity:.28}}
@keyframes glowP{0%,58%{opacity:0}66%{opacity:1}96%{opacity:.5}100%{opacity:0}}
@keyframes partF{0%,22%{left:15%;opacity:0}26%{opacity:1}45%{left:55%;opacity:0}100%{opacity:0}}
@keyframes fst1{0%,52%{opacity:0}56%,63%{opacity:1}67%,100%{opacity:0}}
@keyframes fst2{0%,64%{opacity:0}68%,78%{opacity:1}82%,100%{opacity:0}}
@keyframes ftoast{0%,88%{opacity:0;transform:translateY(12px)}92%{opacity:1;transform:translateY(0)}99%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
@keyframes dst1{0%,52%{opacity:0}56%,61%{opacity:1}65%,100%{opacity:0}}
@keyframes dst2{0%,62%{opacity:0}66%,72%{opacity:1}76%,100%{opacity:0}}
@keyframes dtoastP16{0%,38%{opacity:0;transform:translateY(12px)}42%,48%{opacity:1;transform:translateY(0)}52%,100%{opacity:0;transform:translateY(12px)}}
@keyframes dtoastB16{0%,88%{opacity:0;transform:translateY(12px)}92%,97%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(12px)}}
@keyframes niGlow{0%{box-shadow:0 8px 16px -10px rgba(20,20,70,.4);border-color:var(--line);transform:translateY(0)}
  7%{box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 32%,transparent);border-color:var(--brand);transform:translateY(-2px)}
  20%,100%{box-shadow:0 8px 16px -10px rgba(20,20,70,.4);border-color:var(--line);transform:translateY(0)}}
@keyframes wireFill{0%,3%{width:0}14%{width:100%}42%{width:100%}50%{width:0}100%{width:0}}
@keyframes tglOk{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes tglBad{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@keyframes wireFillV{0%,3%{height:0}14%{height:100%}42%{height:100%}50%{height:0}100%{height:0}}

/* ---------- generic section ---------- */
section{scroll-margin-top:80px}
.band{border-top:1px solid var(--line);padding-block:66px}
.sec-head{max-width:60ch;margin-bottom:38px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px);margin:12px 0 12px}
.sec-head p{color:var(--muted);font-size:17px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:16px;overflow:hidden}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--surface);padding:22px 20px}
.stat .n{font-family:var(--disp);font-weight:800;font-size:34px;letter-spacing:-.02em}
.stat .l{font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.04em;margin-top:4px}

/* red gpon — banda oscura "sala de control": separa de los 4 módulos */
.gpon{position:relative;overflow:hidden;border-top:0;padding-block:84px;
  --ink:#eef0ff;--muted:#aab2dd;--brand:#7fe0c2;
  --line:rgba(255,255,255,.16);--line-2:rgba(255,255,255,.12);
  --surface:rgba(255,255,255,.05);--surface-2:rgba(255,255,255,.07);
  color:var(--ink);
  background:
    linear-gradient(90deg, rgba(8,11,36,.95), rgba(8,11,36,.62) 40%, rgba(8,11,36,.15) 60%, rgba(8,11,36,0) 78%),
    url(../img/gpon-bg.jpg) center right / cover no-repeat;
  background:
    linear-gradient(90deg, rgba(8,11,36,.95), rgba(8,11,36,.62) 40%, rgba(8,11,36,.15) 60%, rgba(8,11,36,0) 78%),
    image-set(url(../img/gpon-bg.webp) type("image/webp"), url(../img/gpon-bg.jpg) type("image/jpeg")) center right / cover no-repeat}
.gpon::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 16% 26%, rgba(122,125,255,.6) 0, transparent 3px),
    radial-gradient(circle at 60% 16%, rgba(47,191,113,.6) 0, transparent 3px),
    radial-gradient(circle at 86% 40%, rgba(122,125,255,.55) 0, transparent 3px),
    radial-gradient(circle at 30% 74%, rgba(47,191,113,.5) 0, transparent 3px),
    radial-gradient(circle at 74% 80%, rgba(122,125,255,.5) 0, transparent 3px),
    radial-gradient(circle at 46% 46%, rgba(255,255,255,.5) 0, transparent 2.5px);
  background-repeat:no-repeat;
  -webkit-mask-image:radial-gradient(135% 100% at 50% 15%,#000,transparent 82%);
  mask-image:radial-gradient(135% 100% at 50% 15%,#000,transparent 82%)}
.gpon::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(620px 320px at 82% 0%, rgba(96,92,225,.35), transparent 70%),
    radial-gradient(520px 320px at 8% 100%, rgba(47,191,113,.16), transparent 70%)}
.gpon .wrap{position:relative;z-index:1}
/* GPON con imagen de fondo: oculta patrones y arma el contenido a la izquierda */
.gpon::before,.gpon::after{display:none!important}
.gpon-inner{width:100%}
.gpon-copy{max-width:560px}
.gpon-copy h2{font-size:clamp(30px,4.4vw,46px);margin:12px 0 14px}
.gpon-copy h2 em{font-style:normal;color:#3ad6a6}
.gpon-copy .sub{color:#b9c0e6;font-size:16.5px;margin-bottom:26px;max-width:46ch}
.gfeats{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:16px}
.gfeats li{display:flex;gap:14px;align-items:flex-start}
.gi{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;color:#fff}
.gi svg{width:22px;height:22px}
.gi-a{background:linear-gradient(150deg,#2fbf71,#1a8f52)}
.gi-b{background:linear-gradient(150deg,#12a3bd,#0b7e91)}
.gi-c{background:linear-gradient(150deg,#6d5cff,#4b32b8)}
.gfeats b{display:block;font-size:15.5px;color:#fff}
.gfeats li span:last-child{color:#aab2dd;font-size:13.5px}
.gfeats li>div span{color:#aab2dd;font-size:13.5px}
.gpills{display:flex;flex-wrap:wrap;gap:12px}
.gpill{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);border-radius:14px;padding:11px 15px}
.gpill .pi{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;color:#fff}
.gpill .pi svg{width:18px;height:18px}
.pi-a{background:#2fbf71}.pi-b{background:#12a3bd}.pi-c{background:#6d5cff}
.gpill b{display:block;font-family:var(--disp);font-size:15px;color:#fff;line-height:1.1}
.gpill small{color:#aab2dd;font-size:12px}
@media(max-width:760px){.gpon{min-height:auto}.gpon-copy{max-width:none}
  .gpon{background:linear-gradient(180deg, rgba(8,11,36,.92), rgba(8,11,36,.8)), url(../img/gpon-bg.jpg) center/cover no-repeat;
    background:linear-gradient(180deg, rgba(8,11,36,.92), rgba(8,11,36,.8)), image-set(url(../img/gpon-bg.webp) type("image/webp"), url(../img/gpon-bg.jpg) type("image/jpeg")) center/cover no-repeat}}

/* funcionalidades (lista) */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0;margin:0}
@media(max-width:760px){.feats{grid-template-columns:1fr}}
.feats li{list-style:none;display:flex;gap:11px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.feats li svg{width:18px;height:18px;flex:none;color:var(--cta);margin-top:2px}
.feats b{display:block;font-weight:600;font-size:14.5px}
.feats span{color:var(--muted);font-size:13px}

/* planes */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:820px){.plans{grid-template-columns:1fr;max-width:440px;margin-inline:auto}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px;
  display:flex;flex-direction:column;gap:6px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.plan:hover{transform:translateY(-4px);box-shadow:0 30px 52px -30px rgba(20,20,70,.5);border-color:var(--brand)}
.plan.pop{border:1.5px solid var(--brand);box-shadow:var(--shadow);position:relative}
.plan.pop::after{content:"Más elegido";position:absolute;top:-11px;left:28px;
  background:var(--accent);color:#3a2a00;font-family:var(--mono);font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:20px;letter-spacing:.03em}
.plan .name{font-family:var(--disp);font-weight:700;font-size:19px}
.plan .who{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:8px}
.plan .cost{display:flex;align-items:baseline;gap:5px;margin:6px 0 4px}
.plan .cost b{font-family:var(--disp);font-size:42px;font-weight:800;letter-spacing:-.02em}
.plan .cost span{color:var(--muted);font-family:var(--mono);font-size:13px}
.plan ul{list-style:none;padding:0;margin:16px 0 22px;display:grid;gap:10px}
.plan li{display:flex;gap:9px;font-size:14.5px;align-items:flex-start}
.plan li svg{width:16px;height:16px;flex:none;color:var(--cta);margin-top:3px}
.plan .btn{width:100%;justify-content:center;margin-top:auto}

/* cta + contacto */
.cta-band{position:relative;overflow:hidden;color:#eef0ff;border-radius:22px;padding:44px;
  display:grid;grid-template-columns:1.3fr 1fr;gap:30px;align-items:center;
  background:
    url(../img/bg-cities.svg) center/cover no-repeat,
    radial-gradient(900px 320px at 78% -25%, rgba(96,92,225,.5), transparent 60%),
    linear-gradient(160deg,#0d1030,#161a4c 55%,#0c0f2c)}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(130% 130% at 50% 0%,#000,transparent 72%);
  mask-image:radial-gradient(130% 130% at 50% 0%,#000,transparent 72%)}
.cta-band>*{position:relative;z-index:1}
@media(max-width:720px){.cta-band{grid-template-columns:1fr;padding:32px}}
.cta-band h2{color:#fff;font-size:clamp(26px,3.4vw,36px)}
.cta-band p{color:#c7c9ef;margin-top:10px;font-size:16px}
.cta-band .btn-cta{box-shadow:0 14px 30px -10px rgba(0,0,0,.5)}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:48px;align-items:stretch}
@media(max-width:760px){.contact{grid-template-columns:1fr;gap:30px}}
.cinfo{display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.cline{display:flex;gap:13px;align-items:flex-start}
.cline .ci{width:40px;height:40px;border-radius:11px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;flex:none}
.cline .ci svg{width:19px;height:19px}
.cline .lbl{font-family:var(--mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted)}
.cline .val{font-weight:500;margin-top:2px}
form{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-family:var(--mono);font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.field input,.field textarea{font-family:var(--sans);font-size:15px;color:var(--ink);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.field textarea{resize:vertical;min-height:84px}
.form-msg{font-family:var(--mono);font-size:13px;color:var(--cta-ink);display:none}
.form-msg[data-show]{display:block}

/* footer (oscuro, con color y motivo de red) */
footer.ft{position:relative;overflow:hidden;margin-top:6px;border-top:0;padding-block:56px 30px;color:#c9cdea;
  background:url(../img/bg-cities.svg) center/cover no-repeat,
    linear-gradient(160deg,#1b1a5e,#152a63 55%,#0d1740)}
footer.ft::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#7b5cf0,#3b3be0,#12a3bd,#2fbf71)}
footer.ft .wrap{position:relative;z-index:1}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
@media(max-width:720px){.ft-grid{grid-template-columns:1fr 1fr}}
.ft h4{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em;
  color:#8fa0ff;margin:0 0 14px;font-weight:600}
.ft a{display:block;color:#dfe2f6;font-size:14.5px;padding:5px 0}
.ft a:hover{color:#fff}
.ft .about{color:#bcc1e6;font-size:14px;max-width:34ch;margin-top:12px}
.ft .brand{color:#fff}
.ft-bot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:34px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:12px;color:#b4b9e0}

/* accesibilidad: saltar al contenido */
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--brand);color:#fff;
  padding:10px 16px;border-radius:0 0 12px 0;font-weight:600;font-size:14px}
.skip:focus{left:0}

/* botón flotante de WhatsApp */
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:54px;height:54px;border-radius:50%;
  background:#25d366;color:#fff;display:grid;place-items:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45);transition:transform .15s ease}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:28px;height:28px}
@media(max-width:560px){.wa-float{right:14px;bottom:14px;width:50px;height:50px}}

/* botón volver arriba (encima del de WhatsApp) */
.totop{position:fixed;right:20px;bottom:84px;z-index:60;width:46px;height:46px;border-radius:50%;
  background:var(--brand);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.4);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,background .15s ease}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--brand-ink)}
.totop svg{width:22px;height:22px}
@media(max-width:560px){.totop{right:14px;bottom:74px;width:44px;height:44px}}

/* animaciones sutiles al entrar en viewport */
.js-anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-anim .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-anim .reveal{opacity:1;transform:none;transition:none}}

/* novedades / noticias */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.news{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.news{grid-template-columns:1fr}}
.newscard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .15s ease,transform .15s ease}
.newscard:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:var(--shadow)}
.nmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:11.5px}
.ncat{color:var(--brand);text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  background:var(--brand-soft);padding:4px 9px;border-radius:20px}
.nmeta time{color:var(--muted)}
.newscard h3{font-family:var(--disp);font-size:17px;line-height:1.2}
.newscard p{color:var(--muted);font-size:14px;line-height:1.55;flex:1}

/* cómo funciona (pasos) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:18px}}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;
  transition:transform .18s ease,box-shadow .18s ease}
.step:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
/* conector-flecha entre pasos (solo en fila): línea + punta de flecha centradas en el gap */
.step:not(:last-child)::before{content:"";position:absolute;top:50%;right:-26px;width:22px;height:2.5px;
  transform:translateY(-50%);background:var(--brand);border-radius:2px;z-index:3}
.step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-28px;width:9px;height:9px;
  transform:translateY(-50%) rotate(45deg);border-top:2.5px solid var(--brand);border-right:2.5px solid var(--brand);z-index:3}
@media(max-width:760px){.step:not(:last-child)::after,.step:not(:last-child)::before{display:none}}
.step .num{font-family:var(--disp);font-weight:800;font-size:15px;color:#fff;background:var(--brand);
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  font-variant-numeric:tabular-nums}
.step h3{font-family:var(--disp);font-size:19px;margin-bottom:8px}
.step p{color:var(--muted);font-size:14.5px;line-height:1.55}
/* color por sección (tintes translúcidos, dejan ver el fondo de red) */
.tint-a{background:color-mix(in srgb,#6d5cff 9%, transparent);border-block:1px solid var(--line)}
/* fondos por sección intercalados (motivo + tinte de color) */
.fx-nodos{background:url(../img/bg-nodos.svg) center/cover no-repeat, color-mix(in srgb,#6d5cff 11%, var(--bg));
  border-block:1px solid var(--line)}
.fx-fibra{background:url(../img/bg-fibra.svg) center/cover no-repeat, color-mix(in srgb,#12a3bd 11%, var(--bg));
  border-block:1px solid var(--line)}

/* ---- sección Módulos estilo showcase (hero + 4 tarjetas imagen/texto) ---- */
/* Banner de módulos: imagen de fondo con el texto encima (lado izquierdo) */
.modsec-hero{position:relative;overflow:hidden;margin-bottom:40px;border-radius:20px;min-height:340px;
  display:flex;align-items:center;
  background:#e9f0fb url(../img/modulos-hero.jpg) right center/cover no-repeat;
  background:#e9f0fb image-set(url(../img/modulos-hero.webp) type("image/webp"), url(../img/modulos-hero.jpg) type("image/jpeg")) right center/cover no-repeat;
  box-shadow:0 24px 50px -34px rgba(20,20,70,.5);isolation:isolate}
.modsec-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(233,240,251,.97) 0%,rgba(233,240,251,.88) 26%,rgba(233,240,251,.4) 46%,rgba(233,240,251,0) 58%)}
.modsec-hero-in{position:relative;z-index:1;max-width:48%;padding:44px}
/* texto oscuro fijo: la imagen de fondo es clara en ambos temas */
.modsec-hero .eyebrow{color:var(--brand)}
.modsec-hero h2{font-size:clamp(26px,3.4vw,42px);margin:10px 0 12px;color:#171a37}
.modsec-hero h2 em{font-style:normal;color:#3b3be0;background:linear-gradient(transparent 62%,rgba(59,59,224,.18) 62%)}
.modsec-hero .sub{color:#454a70;font-size:16px;max-width:42ch;margin-bottom:22px}
.modsec-badges{display:flex;gap:22px;flex-wrap:wrap}
.modsec-badges .b{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#2c3157;max-width:160px}
.modsec-badges .bi{width:36px;height:36px;flex:none;border-radius:11px;background:rgba(59,59,224,.12);color:#3b3be0;display:grid;place-items:center}
.modsec-badges .bi svg{width:19px;height:19px}
@media(max-width:760px){
  .modsec-hero{background-position:78% bottom}
  .modsec-hero::before{background:linear-gradient(180deg,rgba(233,240,251,.97) 0%,rgba(233,240,251,.92) 55%,rgba(233,240,251,.72) 100%)}
  .modsec-hero-in{max-width:100%;padding:30px 24px 150px}}

/* MÓDULOS — tarjetas compactas (imagen a un lado + texto), con presencia para no quedar
   apagadas frente al banner: sombra marcada, acento índigo e interacción al pasar el cursor */
.modgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.modgrid{grid-template-columns:1fr}}
.modx{display:grid;grid-template-columns:196px 1fr;min-height:196px;background:var(--surface);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 22px 44px -30px rgba(20,20,70,.5);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.modx:hover{transform:translateY(-4px);border-color:var(--brand);
  box-shadow:0 30px 54px -26px rgba(59,59,224,.42)}
@media(max-width:560px){.modx{grid-template-columns:40% 1fr;min-height:0}}
.modx-tx{padding:24px 26px;display:flex;flex-direction:column;justify-content:center}
.modx h3{font-family:var(--disp);font-size:19px;margin-bottom:8px;line-height:1.2}
.modx p{color:var(--muted);font-size:13.5px;margin-bottom:14px;line-height:1.6}
.modx .chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.modx .chip{font-family:var(--mono);font-size:10px;background:var(--surface-2);border:1px solid var(--line-2);
  padding:4px 9px;border-radius:20px;color:var(--ink);display:inline-flex;align-items:center;gap:5px}
.modx .chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cta)}
.modx-link{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--brand);display:inline-flex;align-items:center;gap:7px}
.modx:hover .modx-link{gap:11px}
.modx-img{position:relative;overflow:hidden;background:transparent}
/* difuminado DESDE los colores de la imagen HACIA el texto:
   imagen nítida a la izquierda → copia borrosa (colores) que se funde hacia el texto */
.modx-img::before{content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--mimg);background-size:cover;background-position:center;
  filter:blur(16px) saturate(1.12);transform:scale(1.25)}
.modx-img img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;transition:transform .35s ease;
  -webkit-mask-image:linear-gradient(to right, #000 74%, transparent 100%);
  mask-image:linear-gradient(to right, #000 74%, transparent 100%)}
.modx-img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right, transparent 86%, var(--surface) 100%)}
.modx:hover .modx-img img{transform:scale(1.05)}
@media(max-width:560px){
  .modx-img{min-height:118px}
  .modx-img::before{display:none}
  .modx-img img{-webkit-mask-image:none;mask-image:none;object-fit:cover}
  .modx-img::after{display:none}
  .modx-tx{padding:15px 16px}
  .modx h3{font-size:16px;margin-bottom:5px}
  .modx p{font-size:12.5px;margin-bottom:8px;line-height:1.5}
  .modx .chips{display:none}}

/* Cinta dinámica de funcionalidades destacadas */
.marquee{position:relative;overflow:hidden;margin-top:30px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:6px 2px}
.marquee.run .mq-track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;
  animation:mq 34s linear infinite}
.marquee.run:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-50% - 8px))}}
.mq-item{display:inline-flex;align-items:center;gap:11px;white-space:nowrap;flex:none;
  background:var(--surface);border:1px solid var(--line);border-radius:30px;padding:12px 20px 12px 12px;
  font-weight:600;font-size:14.5px;box-shadow:0 14px 30px -22px rgba(20,20,70,.55)}
.mq-item .mi{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(150deg,#4b46ff,#2320a8)}
.mq-item .mi svg{width:19px;height:19px}
.mq-item:nth-child(2n) .mi{background:linear-gradient(150deg,#25b9cf,#0b7e91)}
.mq-item:nth-child(3n) .mi{background:linear-gradient(150deg,#33cf89,#1a8f52)}
@media(prefers-reduced-motion:reduce){.marquee.run .mq-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.num.n-cyan{background:#12a3bd}
.num.n-coral{background:#ef5a48}

/* detalle editorial: guion antes del eyebrow */
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px;opacity:.55;flex:none}
@keyframes domA{0%,18%{opacity:1}22%,100%{opacity:0}}
@keyframes domB{0%,48%{opacity:0}50%,68%{opacity:1}72%,100%{opacity:0}}

/* --- Rediseño del flujo del hero: panel operativo, estable y legible --- */
.heroq .panels{gap:22px;margin-top:38px}

/* La historia permanece en sus dos columnas: llega, se procesa y se resuelve. */
.mini .m1{animation:mA 7s ease-in-out infinite}
@keyframes flowArrow{0%,100%{transform:translateY(-50%) translateX(0);box-shadow:0 5px 12px -7px rgba(var(--flow-accent-rgb),.7)}50%{transform:translateY(-50%) translateX(3px);box-shadow:0 0 0 5px rgba(var(--flow-accent-rgb),.08)}}

/* DNS: URL segura entra, se examina y se permite; después la maliciosa entra y se bloquea. */
.fdns .mini .dom-a{animation:dnsSafeUrl 14s ease-in-out infinite}
@keyframes dnsSafeUrl{0%{opacity:0;transform:translateX(-20px)}5%,14%{opacity:1;transform:translateX(0)}18%,100%{opacity:0;transform:translateX(12px)}}
@keyframes dnsThreatUrl{0%,49%{opacity:0;transform:translateX(-20px)}54%,63%{opacity:1;transform:translateX(0)}67%,100%{opacity:0;transform:translateX(12px)}}
@keyframes dnsQuery{0%,4%{opacity:0;transform:scale(.82)}7%,14%{opacity:1;transform:scale(1)}18%,49%{opacity:0;transform:scale(.9)}52%,63%{opacity:1;transform:scale(1)}67%,100%{opacity:0;transform:scale(.9)}}
@keyframes dnsScan{0%,15%{opacity:0;transform:scale(.8)}19%,28%{opacity:1;transform:scale(1)}32%,64%{opacity:0;transform:scale(.85)}68%,78%{opacity:1;transform:scale(1)}82%,100%{opacity:0;transform:scale(.85)}}
@keyframes dnsAllowed{0%,29%{opacity:0;transform:scale(.7)}33%,45%{opacity:1;transform:scale(1)}49%,100%{opacity:0;transform:scale(.85)}}
@keyframes dnsBlocked{0%,79%{opacity:0;transform:scale(.7)}83%,96%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.85)}}
@keyframes dnsReceiving{0%,4%{opacity:0}7%,14%{opacity:1}18%,49%{opacity:0}52%,63%{opacity:1}67%,100%{opacity:0}}
@keyframes dnsAnalysing{0%,15%{opacity:0}19%,28%{opacity:1}32%,64%{opacity:0}68%,78%{opacity:1}82%,100%{opacity:0}}
@keyframes dnsSafeToast{0%,32%{opacity:0;transform:translateY(12px)}36%,45%{opacity:1;transform:translateY(0)}49%,100%{opacity:0;transform:translateY(12px)}}
@keyframes dnsThreatToast{0%,82%{opacity:0;transform:translateY(12px)}86%,96%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(12px)}}

/* Facturación: los comprobantes reales son la entrada del flujo, no un icono genérico. */
.fpay .stagewrap{height:182px}
@keyframes paymentSriToast{0%,84%{opacity:0;transform:translateY(12px)}88%,92%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(12px)}}
@keyframes paymentServiceUpdate{0%,93%{opacity:0;transform:translate(-50%,10px)}96%,99%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,10px)}}
@keyframes payReceiptOne{0%,11%{opacity:1;transform:translateX(0)}15%,100%{opacity:0;transform:translateX(10px)}}
@keyframes payReceiptTwo{0%,14%{opacity:0;transform:translateX(-10px)}18%,29%{opacity:1;transform:translateX(0)}33%,100%{opacity:0;transform:translateX(10px)}}
@keyframes payBotWaiting{0%,34%{opacity:1;transform:scale(1)}38%,100%{opacity:0;transform:scale(.9)}}
@keyframes payReview{0%,37%{opacity:0;transform:scale(.85)}41%,53%{opacity:1;transform:scale(1)}57%,100%{opacity:0;transform:scale(.9)}}
@keyframes payValidating{0%,56%{opacity:0;transform:scale(.85)}60%,68%{opacity:1;transform:scale(1)}72%,100%{opacity:0;transform:scale(.9)}}
@keyframes payAuthorized{0%,65%{opacity:0;transform:scale(.8)}69%,74%{opacity:1;transform:scale(1)}78%,100%{opacity:0;transform:scale(.9)}}
@keyframes paySriToastLong{0%,68%{opacity:0;transform:translateY(12px)}71%,76%{opacity:1;transform:translateY(0)}79%,100%{opacity:0;transform:translateY(12px)}}
@keyframes paymentServiceUpdateLong{0%,75%{opacity:0;transform:translate(-50%,10px)}79%,97%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,10px)}}
@keyframes payReceivingLabel{0%,2%{opacity:0}5%,29%{opacity:1}33%,100%{opacity:0}}
@keyframes payReviewLabel{0%,39%{opacity:0}42%,53%{opacity:1}57%,100%{opacity:0}}
@keyframes paySRIValidationLabel{0%,57%{opacity:0;transform:translateY(4px)}61%,68%{opacity:1;transform:translateY(0)}72%,100%{opacity:0;transform:translateY(4px)}}

/* FerroDNS: una persona navega, FerroDNS inspecciona y decide antes de abrir el sitio. */
.fdns .stagewrap{height:182px}
@keyframes dnsSafeUrlJourney{0%{opacity:0;transform:translateX(-20px) scale(.9)}5%,14%{opacity:1;transform:translateX(0) scale(1)}18%,100%{opacity:0;transform:translateX(24px) scale(.94)}}
@keyframes dnsThreatUrlJourney{0%,49%{opacity:0;transform:translateX(-20px) scale(.9)}54%,63%{opacity:1;transform:translateX(0) scale(1)}67%,100%{opacity:0;transform:translateX(24px) scale(.94)}}

/* ====== Sede: mapa OpenStreetMap a todo ancho con difuminado y barra ====== */
.sede-osm{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);min-height:380px;box-shadow:0 18px 44px rgba(20,20,70,.07)}
.sede-osm iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1}
.sede-osm .sede-chip{position:absolute;left:16px;top:16px;z-index:4;display:inline-flex;align-items:center;gap:7px;
  background:color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(10px);
  border:1px solid color-mix(in srgb,#fff 40%,var(--line));border-radius:12px;padding:7px 11px;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink);box-shadow:0 6px 18px rgba(20,20,70,.08)}
.sede-osm .sede-chip svg{width:14px;height:14px}
.sede-osm .sede-credit{position:absolute;right:12px;top:16px;z-index:4;font-family:var(--mono);font-size:10px;color:var(--muted);
  background:color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,#fff 35%,var(--line));padding:3px 8px;border-radius:8px;text-decoration:none}
.sede-osm .sede-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding:78px 22px 20px;pointer-events:none;
  background:linear-gradient(to top, var(--surface) 0%, color-mix(in srgb,var(--surface) 86%,transparent) 46%, transparent 100%)}
.sede-osm .sede-bar .who,.sede-osm .sede-bar .btn{pointer-events:auto}
.sede-osm .who{display:flex;align-items:center;gap:11px}
.sede-osm .who .p{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--brand),#5b5bf0);box-shadow:0 8px 20px color-mix(in srgb,var(--brand) 38%,transparent)}
.sede-osm .who .p svg{width:22px;height:22px}
.sede-osm .who b{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--ink);display:block;line-height:1.15}
.sede-osm .who small{font-size:13px;color:var(--muted)}
@media(max-width:560px){.sede-osm{min-height:340px}.sede-osm .sede-bar{padding-top:96px}.sede-osm .who b{font-size:18px}}

/* Insignias de integraciones (Nativo / Propio / Meta / Ecuador) */
.integ-tag{font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:20px;background:color-mix(in srgb,var(--cta) 14%,var(--surface));color:var(--cta-ink);border:1px solid color-mix(in srgb,var(--cta) 30%,transparent)}
.integ-tag.brand{background:color-mix(in srgb,var(--brand) 12%,var(--surface));color:var(--brand);border-color:color-mix(in srgb,var(--brand) 26%,transparent)}

/* Rediseño: integraciones como un ecosistema conectado. */
.integrations{overflow:hidden;background:linear-gradient(125deg,color-mix(in srgb,var(--brand-soft) 36%,var(--bg)),var(--bg) 58%,color-mix(in srgb,var(--cta) 8%,var(--bg)))}
.integ-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.integ-heading .sec-head{margin-bottom:34px}
.integ-status{flex:none;display:flex;align-items:center;gap:8px;margin-bottom:42px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.integ-status span{width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 5px color-mix(in srgb,var(--live) 14%,transparent)}.integ-ico{flex:none;width:42px;height:42px;margin:0;border-radius:12px;display:grid;place-items:center;color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface))}.integ-ico svg{width:22px;height:22px}.integ-pills{display:flex;gap:7px;flex-wrap:wrap}.integ-pills span{padding:4px 8px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line-2);font:500 10px var(--mono);color:var(--ink)}
@media(max-width:760px){.integ-heading{align-items:flex-start}.integ-status{margin:5px 0 34px}}
@media(max-width:520px){.integ-heading{display:block}.integ-heading .sec-head{margin-bottom:18px}.integ-status{margin-bottom:28px}}

/* Segunda propuesta: todas las integraciones siguen visibles en una retícula editorial. */
.integ-showcase{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:stretch}.integ-showcase .integ-card{min-height:218px;display:flex;flex-direction:column;padding:20px;border-radius:18px;background:color-mix(in srgb,var(--surface) 91%,transparent);box-shadow:0 16px 30px -28px rgba(20,20,70,.45)}
.integ-showcase .integ-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -28px rgba(20,20,70,.5)}.integ-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px}.integ-showcase .integ-ico{width:43px;height:43px}.integ-showcase .integ-card h3{font-size:18px;margin:0 0 8px;line-height:1.12}.integ-showcase .integ-card p{font-size:13.2px;line-height:1.5}.integ-index{font:600 11px var(--mono);color:var(--muted);letter-spacing:.08em}
.integ-showcase .integ-featured{grid-column:span 2;padding:25px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 12%,var(--surface)),var(--surface) 72%)}.integ-featured h3{font-size:26px!important}.integ-featured p{max-width:40ch;font-size:14.5px!important}.integ-meter{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:17px;font:500 10px var(--mono);color:var(--brand)}.integ-meter span{height:6px;width:76px;border-radius:10px;background:repeating-linear-gradient(90deg,var(--brand) 0 11px,transparent 11px 15px)}
.integ-showcase .integ-sign{grid-column:span 2;background:linear-gradient(135deg,color-mix(in srgb,var(--cta) 8%,var(--surface)),var(--surface) 70%)}.integ-sign h3{font-size:20px!important}.integ-dns .integ-ico{color:var(--cta-ink);background:color-mix(in srgb,var(--cta) 12%,var(--surface))}.integ-sri .integ-ico{color:#ae7100;background:color-mix(in srgb,var(--accent) 20%,var(--surface))}
.integ-art{display:block;max-width:none;width:calc(100% + 40px);height:55px;object-fit:cover;object-position:center;margin:12px -20px -20px;opacity:.96;mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%)}.integ-featured .integ-art{width:calc(100% + 50px);height:86px;margin:8px -25px -10px}.integ-sign .integ-art{height:72px;margin-top:6px}.integ-dns .integ-art{height:56px}
@media(max-width:900px){.integ-showcase{grid-template-columns:repeat(2,1fr)}.integ-showcase .integ-featured{grid-column:span 2}.integ-showcase .integ-sign{grid-column:span 1}}
@media(max-width:540px){.integ-showcase{grid-template-columns:1fr}.integ-showcase .integ-card,.integ-showcase .integ-featured,.integ-showcase .integ-sign{grid-column:span 1;min-height:auto}.integ-showcase .integ-featured{padding:21px}.integ-featured h3{font-size:23px!important}.integ-meter{margin-top:18px}.integ-featured .integ-art{width:calc(100% + 42px);margin-inline:-21px}}

/* ====== Redes sociales en el footer ====== */
.ft-social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.ft-social a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:#c7ccf0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.ft-social a:hover{color:#fff;background:var(--brand);border-color:var(--brand);transform:translateY(-2px)}
.ft-social a svg{width:18px;height:18px}

/* Integraciones: FerroDNS también destacada (span-2) para rellenar la retícula sin huecos */
.integ-showcase .integ-dns{grid-column:span 2;background:linear-gradient(135deg,color-mix(in srgb,var(--cta) 9%,var(--surface)),var(--surface) 72%)}
.integ-showcase .integ-dns h3{font-size:20px}
.integ-showcase .integ-dns .integ-art{height:74px}
@media(max-width:900px){.integ-showcase .integ-dns{grid-column:span 1}}
@media(max-width:540px){.integ-showcase .integ-dns{grid-column:span 1}}

/* Regulación de dimensiones: tarjetas e ilustraciones más compactas y equilibradas */
.integ-showcase .integ-card{min-height:184px;padding:19px}
.integ-card-top{margin-bottom:13px}
.integ-showcase .integ-card h3{font-size:17px;margin-bottom:7px}
.integ-showcase .integ-card p{font-size:13px;line-height:1.5}
.integ-showcase .integ-featured{padding:21px}
.integ-featured h3{font-size:23px!important}
.integ-featured p{font-size:13.6px!important;max-width:42ch}
.integ-showcase .integ-dns h3,.integ-showcase .integ-sign h3{font-size:19px!important}
.integ-art{height:50px!important;margin:9px -19px -19px!important}
.integ-featured .integ-art{height:64px!important;margin:6px -21px -21px!important}
.integ-showcase .integ-dns .integ-art{height:56px!important}
.integ-showcase .integ-sign .integ-art{height:58px!important}
.integ-meter{padding-top:12px!important}
/* Ilustraciones completas, sin recorte (contain en vez de cover) */
.integ-art{object-fit:contain!important;object-position:center bottom!important;width:100%!important;height:96px!important;margin:12px 0 0!important;-webkit-mask-image:none!important;mask-image:none!important;opacity:1}
.integ-featured .integ-art{height:110px!important;margin-top:8px!important}
.integ-showcase .integ-dns .integ-art{height:104px!important}
.integ-showcase .integ-sign .integ-art{height:104px!important}
/* Pie con etiquetas para las tarjetas sin ilustración (llena el espacio) */
.integ-showcase .integ-card .integ-pills{margin-top:auto;padding-top:14px}
/* Figuras de fondo decorativas (malla de red + glows + puntos) para que no se vea vacía */
.integrations{position:relative}
.integrations::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../img/bg-net.svg) center/cover no-repeat;
  opacity:1;
  -webkit-mask-image:radial-gradient(135% 100% at 50% 6%,#000 62%,transparent 94%);
  mask-image:radial-gradient(135% 100% at 50% 6%,#000 62%,transparent 94%)}
.integrations::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(760px 460px at 90% -6%, color-mix(in srgb,var(--brand) 26%,transparent), transparent 56%),
    radial-gradient(680px 460px at 0% 104%, color-mix(in srgb,var(--cta) 22%,transparent), transparent 60%),
    radial-gradient(color-mix(in srgb,var(--brand) 26%,transparent) 1.4px, transparent 1.4px);
  background-size:auto,auto,26px 26px;opacity:.7}
.integrations .wrap,.integrations .marquee{position:relative;z-index:1}
/* Fondo para "Afiliaciones y respaldos" (Nosotros) */
.afil-band{position:relative;overflow:hidden;
  background:linear-gradient(140deg, color-mix(in srgb,var(--cta) 10%,var(--bg)), var(--bg) 52%, color-mix(in srgb,var(--brand) 9%,var(--bg)))}
.afil-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--brand) 18%,transparent) 1.3px,transparent 1.3px);
  background-size:26px 26px;opacity:.6;
  -webkit-mask-image:radial-gradient(130% 92% at 50% 0%,#000 60%,transparent 92%);
  mask-image:radial-gradient(130% 92% at 50% 0%,#000 60%,transparent 92%)}
.afil-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(620px 340px at 90% -8%, color-mix(in srgb,var(--cta) 18%,transparent), transparent 58%),
    radial-gradient(560px 340px at 4% 106%, color-mix(in srgb,var(--brand) 16%,transparent), transparent 60%)}
.afil-band .wrap{position:relative;z-index:1}

/* ============ ISPilot (bot con IA): insignias y sección ============ */
.chip.chip-pilot{display:inline-flex;align-items:center;gap:5px;color:var(--brand);border-color:color-mix(in srgb,var(--brand) 30%,var(--line-2))}
.chip.chip-pilot::before{display:none}
.chip-pilot img{width:14px;height:14px;object-fit:contain}
.integ-pills .pill-pilot{display:inline-flex;align-items:center;gap:5px;color:var(--brand);
  background:color-mix(in srgb,var(--brand) 9%,var(--surface));border-color:color-mix(in srgb,var(--brand) 28%,var(--line-2))}
.pill-pilot img{width:14px;height:14px;object-fit:contain}
.integ-pilot .integ-ico{background:color-mix(in srgb,#1e90ff 10%,var(--surface))}
.integ-pilot .integ-ico img{width:36px;height:36px;object-fit:contain}
.pilot-band{position:relative;overflow:hidden;
  background:linear-gradient(140deg,color-mix(in srgb,#1e90ff 11%,var(--bg)),var(--bg) 55%,color-mix(in srgb,var(--brand) 8%,var(--bg)))}
.pilot-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
/* fondo con detalle: trama de puntos + resplandores */
.pilot-band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,#1e90ff 26%,transparent) 1.3px,transparent 1.3px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(70% 90% at 25% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 90% at 25% 50%,#000 20%,transparent 75%)}
.pilot-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../img/bg-pilot.svg) center/cover no-repeat,radial-gradient(520px 360px at 22% 40%,color-mix(in srgb,#1e90ff 20%,transparent),transparent 70%),
    radial-gradient(460px 320px at 95% 105%,color-mix(in srgb,var(--cta) 14%,transparent),transparent 70%)}
/* el fondo se atenúa detrás del texto para no cruzarlo */
.pilot-band::after{-webkit-mask-image:radial-gradient(42% 48% at 70% 50%,rgba(0,0,0,.08) 60%,#000 100%);mask-image:radial-gradient(42% 48% at 70% 50%,rgba(0,0,0,.08) 60%,#000 100%)}
@media(max-width:820px){.pilot-band::after{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 36%,rgba(0,0,0,.08) 48%,rgba(0,0,0,.08) 100%);mask-image:linear-gradient(180deg,#000 0,#000 36%,rgba(0,0,0,.08) 48%,rgba(0,0,0,.08) 100%)}}
.pilot-band .wrap{position:relative;z-index:1}
.pilot-fig{position:relative;margin:0;display:grid;place-items:center;min-height:380px}
.pilot-fig img{position:relative;z-index:2;width:100%;max-width:440px;height:auto;filter:drop-shadow(0 26px 34px color-mix(in srgb,#1e90ff 28%,transparent))}
/* ondas de señal detrás del robot */
.pilot-ring{position:absolute;left:50%;top:50%;z-index:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;
  border:1.5px solid color-mix(in srgb,#1e90ff 26%,transparent)}
.pilot-ring.r1{width:62%;aspect-ratio:1;background:radial-gradient(closest-side,color-mix(in srgb,#1e90ff 14%,transparent),transparent)}
.pilot-ring.r2{width:84%;aspect-ratio:1;border-style:dashed;border-color:color-mix(in srgb,#1e90ff 20%,transparent)}
.pilot-ring.r3{width:106%;aspect-ratio:1;border-color:color-mix(in srgb,#1e90ff 12%,transparent)}
@media(prefers-reduced-motion:no-preference){
  .pilot-ring.r2{animation:pilotSpin 60s linear infinite}
  .pilot-ring.r1{animation:pilotPulse 4s ease-in-out infinite}}
@keyframes pilotSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pilotPulse{50%{transform:translate(-50%,-50%) scale(1.05);opacity:.7}}
.pilot-copy h2{font-size:clamp(28px,3.6vw,42px);margin:12px 0 14px}
.pilot-copy h2 em{font-style:normal;color:var(--brand)}
.pilot-copy .sub{color:var(--muted);font-size:16.5px;max-width:48ch;margin:0 0 24px}
.pilot-roles{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:16px}
.pilot-roles li{display:flex;gap:14px;align-items:flex-start}
.pilot-roles b{display:block;font-size:15.5px;color:var(--ink)}
.pilot-roles li>div span{color:var(--muted);font-size:13.8px;line-height:1.45}
.pilot-copy .hero-actions{margin:0}
@media(max-width:820px){.pilot-grid{grid-template-columns:1fr;gap:26px}.pilot-fig{min-height:0;padding:34px 0}.pilot-fig img{max-width:300px}}
/* ============ Nosotros: intro con la mascota ISPilot ============ */
.about-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;margin-bottom:38px}
.about-intro .sec-head{max-width:62ch;margin:0}
.about-pilot{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.about-pilot::before{content:"";position:absolute;inset:14% 8% 6%;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,#1e90ff 30%,transparent),transparent)}
.about-pilot img{position:relative;z-index:1;width:100%;max-width:340px;height:auto;
  filter:drop-shadow(0 22px 28px color-mix(in srgb,#1e90ff 30%,transparent))}
.about-bubble{position:relative;z-index:2;margin:0 0 4px;max-width:30ch;padding:12px 16px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 30px -18px rgba(20,20,70,.45);
  font-size:14.5px;line-height:1.45;color:var(--ink);text-align:center}
.about-bubble b{color:var(--brand)}
.about-bubble::after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);
  background:var(--surface);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.about-loc{position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:30px;
  background:var(--surface);border:1px solid var(--line);font:600 12px var(--mono);letter-spacing:.03em;color:var(--ink)}
.about-loc svg{width:16px;height:16px;color:var(--cta-ink)}
@media(max-width:860px){.about-intro{grid-template-columns:1fr;gap:28px}.about-pilot img{max-width:260px}}

/* ============ Inicio reordenado ============ */
/* ISPilot en banda oscura: recupera la alternancia claro/oscuro tras el hero claro→oscuro */
.pilot-band.pilot-dark{border-top:0;color:var(--ink);
  --ink:#eef0ff;--muted:#b3bce6;--brand:#6fd0ff;--line:rgba(255,255,255,.16);--line-2:rgba(255,255,255,.12);
  --surface:#18204a;--surface-2:rgba(255,255,255,.07);
  background:linear-gradient(140deg,#0a1a3f 0%,#0b1233 55%,#0d1b3d 100%)}
.pilot-dark::before{background-image:radial-gradient(rgba(111,208,255,.22) 1.3px,transparent 1.3px)}
.pilot-dark .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.pilot-dark .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;color:#fff}
.pilot-dark .pilot-ring{border-color:rgba(111,208,255,.28)}
.pilot-dark .pilot-ring.r2{border-color:rgba(111,208,255,.2)}
.pilot-dark .pilot-ring.r3{border-color:rgba(111,208,255,.12)}
/* FerroDNS */
.fdns-band{position:relative;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cta) 10%,var(--bg)),var(--bg) 60%)}
.fdns-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
.fdns-copy h2{font-size:clamp(28px,3.6vw,42px);margin:12px 0 14px}
.fdns-copy h2 em{font-style:normal;color:var(--cta-ink)}
.fdns-copy .sub{color:var(--muted);font-size:16.5px;max-width:44ch;margin:0 0 24px}
@media(max-width:980px){.fdns-grid{grid-template-columns:1fr;gap:30px}}
/* encabezado de sección con botón a la derecha */
.sec-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none}
.sec-head-row>div{max-width:60ch}
.sec-head-row .btn{flex:none}
@media(max-width:720px){.sec-head-row{display:block}.sec-head-row .btn{margin-top:16px}}

/* ============ Revisión móvil ============ */
/* Hero en móvil/tablet: texto y botones arriba, el diagrama como imagen protagonista
   (a sangre, sin marco) y después los respaldos y las cifras */
@media(max-width:1100px){
  .hq-grid{display:flex;flex-direction:column}
  .hq-head{display:contents}
  .hq-head .eyebrow{order:1}
  .hq-head h1{order:2}
  .hq-head .sub{order:3}
  .hq-head .hero-actions{order:4;margin-bottom:0}
  .hq-figure{order:5;margin:18px auto 4px;width:100%;max-width:640px}
  .hq-figure img{border:0;border-radius:0;box-shadow:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%)}
  .hq-head .hcreds{order:6;margin-top:6px}
  .hq-stats{order:7}
}
@media(max-width:720px){
  .hq-figure{margin:18px -24px 4px;width:auto;max-width:none}
  .hq-head h1{font-size:clamp(30px,8.4vw,40px);margin:12px 0 14px}
  .hq-head .sub{font-size:15.5px;margin-bottom:22px}
  .hq-head .hero-actions{display:grid;grid-template-columns:1fr auto;gap:10px}
  .hq-head .hero-actions .btn{justify-content:center;text-align:center;padding-inline:14px;white-space:nowrap;font-size:14.5px}
  .hq-head .hcreds-lbl{text-align:center}
  .hq-head .hcreds-row{display:grid;grid-template-columns:1fr 1.55fr 1fr;gap:8px}
  .hq-head .cred{width:auto;min-width:0;max-width:none;height:48px;padding:6px 8px;display:grid;place-items:center;border-radius:12px}
  .hq-head .cred img{width:100%;height:100%;max-height:36px;object-fit:contain}
  .hq-head .cred:nth-child(2){padding:4px 6px}
  .hq-head .cred:nth-child(2) img{max-height:42px}
  .hq-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:18px;
    border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.04)}
  .hq-stats div{padding:12px 6px;text-align:center;white-space:normal}
  .hq-stats div+div{border-left:1px solid rgba(255,255,255,.12)}
  .hq-stats b{font-size:21px}
  .hq-stats span{font-size:10px;line-height:1.3;display:block;margin-top:4px}}
@media(max-width:560px){.hq-figure{margin-inline:-18px}}
/* Fondos con líneas (fibra/nodos): en móvil cruzaban títulos y textos → solo color + un brillo suave */
@media(max-width:760px){
  .fx-fibra{background:radial-gradient(420px 260px at 100% 0%,color-mix(in srgb,#12a3bd 16%,transparent),transparent 70%),color-mix(in srgb,#12a3bd 11%, var(--bg))}
  .fx-nodos{background:radial-gradient(420px 260px at 100% 0%,color-mix(in srgb,#6d5cff 16%,transparent),transparent 70%),color-mix(in srgb,#6d5cff 11%, var(--bg))}
}
/* Banner de Módulos en móvil: la ilustración de abajo quedaba tapada por el velo → hueco vacío */
@media(max-width:760px){
  .modsec-hero::before{background:linear-gradient(180deg,rgba(233,240,251,.97) 0%,rgba(233,240,251,.9) 50%,rgba(233,240,251,0) 78%)}
}
/* Pie en móvil: la marca a todo el ancho (antes en una columna angosta) */
@media(max-width:720px){
  .ft-grid>div:first-child{grid-column:1/-1}
  .ft-grid .about{max-width:46ch}
  .ft-social{flex-wrap:nowrap}
}
/* Mapa de Contacto: el crédito tapaba el zoom del mapa (arriba a la derecha); en móvil la barra cubría casi todo */
.sede-osm .sede-credit{right:58px}
@media(max-width:560px){
  .sede-osm{min-height:430px}
  .sede-osm .sede-bar{padding-top:36px;flex-direction:column;align-items:flex-start;gap:12px;
    background:linear-gradient(180deg,transparent 0,var(--surface) 34px,var(--surface) 100%)}}
@media(max-width:360px){.hq-head .hero-actions{grid-template-columns:1fr}}
@media(min-width:721px) and (max-width:1100px){
  .hq-figure img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 86%,transparent 100%);
    mask-composite:intersect}}

/* Barra de compatibilidad con logos (tarjetas blancas: se leen igual en modo claro y oscuro) */
.trust .tlogos{gap:12px}
.trust .tlogo{display:grid;place-items:center;height:54px;padding:10px 18px;border-radius:12px;background:#fff;
  border:1px solid var(--line);box-shadow:0 8px 18px -14px rgba(20,20,70,.35);transition:transform .2s ease,box-shadow .2s ease}
.trust .tlogo::before{display:none}
.trust .tlist .tlogo{opacity:1}
.trust .tlogo:hover{transform:translateY(-2px);box-shadow:0 12px 22px -14px rgba(20,20,70,.45)}
.trust .tlogo img{display:block;height:28px;width:auto;max-width:130px;object-fit:contain}
.trust .tlogo-solt{padding:8px 10px}
.trust .tlogo-solt img{height:34px;border-radius:6px}
@media(max-width:560px){
  .trust .wrap{gap:14px}
  .trust .tlogos{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px}
  .trust .tlogo{height:50px;padding:8px 12px}
  .trust .tlogo img{height:24px;max-width:100%}
  .trust .tlogo-solt img{height:32px}}

/* Barra de compatibilidad: franja de color de marca con patrón de circuito y una "fibra" que une los logos */
.trust{position:relative;overflow:hidden;border:0;
  background:linear-gradient(100deg,#2f2fc4 0%,#3b3be0 22%,#1e7be8 58%,#0fa2b8 100%)}
.trust::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:url(../img/bg-circuit.svg) 0 0/240px 120px repeat}
.trust::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 140px at 18% 0%,rgba(255,255,255,.22),transparent 70%),
    radial-gradient(420px 140px at 85% 100%,rgba(37,178,104,.35),transparent 70%)}
.trust .wrap{position:relative;z-index:1;padding-block:26px}
.trust .tl{display:inline-flex;align-items:center;gap:8px}
.trust .tlogos{position:relative}
.trust .tlogos::before{content:"";position:absolute;left:-24px;right:-24px;top:50%;height:2px;margin-top:-1px;z-index:0;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75) 10%,rgba(255,255,255,.75) 90%,transparent)}
.trust .tlogos::after{content:"";position:absolute;top:50%;left:0;width:110px;height:5px;margin-top:-2.5px;z-index:0;border-radius:5px;opacity:0;
  background:linear-gradient(90deg,transparent,#fff,transparent);filter:drop-shadow(0 0 8px #bff4ff)}
@media(prefers-reduced-motion:no-preference){.trust .tlogos::after{animation:fiberPulse 3.6s ease-in-out infinite}}
@keyframes fiberPulse{0%{left:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{left:calc(100% - 110px);opacity:0}}
.trust .tlogo{position:relative;z-index:1;border-color:rgba(255,255,255,.7);box-shadow:0 10px 22px -12px rgba(8,16,60,.55)}
@media(max-width:560px){.trust .tlogos::before{left:-10px;right:-10px}}

/* Barra de marcas v3: fondo blanco + patrón de nodos y líneas con los colores del hero */
.trust{background:var(--surface);border-block:1px solid var(--line)}
.trust::before{opacity:.32;
  background:linear-gradient(100deg,#0a1a3a 0%,#123a8f 40%,#1e7be8 75%,#43c6ff 100%);
  -webkit-mask:url(../img/bg-circuit.svg) 0 0/240px 120px repeat;mask:url(../img/bg-circuit.svg) 0 0/240px 120px repeat}
.trust::after{background:radial-gradient(420px 140px at 12% 50%,color-mix(in srgb,#1e7be8 10%,transparent),transparent 70%),
  radial-gradient(420px 140px at 90% 50%,color-mix(in srgb,#43c6ff 12%,transparent),transparent 70%)}
.trust .tlogos::before{background:linear-gradient(90deg,transparent,#123a8f 10%,#1e7be8 60%,#43c6ff 90%,transparent);opacity:.55}
.trust .tlogos::after{background:linear-gradient(90deg,transparent,#43c6ff,transparent);filter:drop-shadow(0 0 6px #43c6ff)}
.trust .tlogo{border-color:var(--line);box-shadow:0 10px 22px -14px rgba(10,26,58,.4)}
/* Barra de marcas: todo el patrón en el índigo del fondo del hero (#0a2766) */
.trust{--hero-indigo:#0e3a85}
.trust::before{background:var(--hero-indigo);opacity:.92}
.trust::after{background:radial-gradient(420px 140px at 12% 50%,color-mix(in srgb,var(--hero-indigo) 7%,transparent),transparent 70%),
  radial-gradient(420px 140px at 90% 50%,color-mix(in srgb,var(--hero-indigo) 7%,transparent),transparent 70%)}
.trust .tlogos::before{background:linear-gradient(90deg,transparent,var(--hero-indigo) 10%,var(--hero-indigo) 90%,transparent);opacity:.8}
.trust .tlogos::after{background:linear-gradient(90deg,transparent,#2f55c8,transparent);filter:drop-shadow(0 0 6px #2f55c8)}
.trust .tlogo{box-shadow:0 10px 22px -14px rgba(10,39,102,.45)}
/* en modo oscuro el mismo índigo se aclara un poco para que las líneas se vean sobre el fondo oscuro */
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .trust{--hero-indigo:#3d5fc4}}
:root[data-theme="dark"] .trust{--hero-indigo:#3d5fc4}
.trust .tl{text-shadow:0 0 3px var(--surface),0 0 6px var(--surface),0 0 10px var(--surface)}

/* ============ FerroDNS: logo ============ */
/* menú: ISPilot y FerroDNS con su ícono */
.nav-links .nav-prod{display:inline-flex;align-items:center;gap:6px}
.nav-links .nav-prod img{width:20px;height:20px;object-fit:contain;flex:none}
@media(min-width:1021px) and (max-width:1100px){.nav-links{gap:16px}.nav-links .nav-prod img{display:none}}
/* logo según el tema: texto oscuro sobre fondo claro, texto blanco sobre fondo oscuro */
.logo-on-dark{display:none!important}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo-on-light{display:none!important}
  :root:not([data-theme="light"]) .logo-on-dark{display:block!important}}
:root[data-theme="dark"] .logo-on-light{display:none!important}
:root[data-theme="dark"] .logo-on-dark{display:block!important}
/* sección FerroDNS */
.fdns-logo{display:block;margin:0 0 14px}
.fdns-logo img{display:block;height:52px;width:auto}
.fdns-copy .eyebrow{color:var(--cta-ink)}
@media(max-width:560px){.fdns-logo img{height:44px}}
/* tarjeta de Integraciones */
.integ-dns .integ-ico img{width:30px;height:30px;object-fit:contain}
/* Inicio: los enlaces del header son blancos sobre el hero, pero el desplegable móvil tiene fondo claro */
@media(max-width:1020px){
  .pg-inicio header .nav-links a{color:var(--ink)}
  .pg-inicio header .nav-links a:hover{color:var(--brand)}
}

/* ============ FerroDNS: flujo Consulta → Análisis → Resultado (bifurcado) ============ */
.fdns-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:12px}
.fdns-flow>.fdns-arrow{align-self:center}
.fdns-flow>.fdns-arrow:nth-of-type(2){grid-column:1/-1;justify-self:center;transform:rotate(90deg)}
.fdns-step{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 14px 18px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 28px -24px rgba(20,20,70,.45)}
.fdns-step .fdns-ico{display:block;width:60px;height:60px;margin-bottom:4px}
.fdns-step b{font-size:14.5px;color:var(--ink)}
.fdns-step span{font-size:12.8px;line-height:1.45;color:var(--muted)}
.fdns-arrow{flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--cta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/15px no-repeat;
  box-shadow:0 6px 14px -6px color-mix(in srgb,var(--cta) 70%,transparent)}
.fdns-results{grid-column:1/-1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fdns-results-lbl{grid-column:1/-1;text-align:center;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:-4px 0 -2px}
.fdns-out{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);
  border-left-width:4px;border-radius:14px;box-shadow:0 14px 28px -24px rgba(20,20,70,.45)}
.fdns-out.is-block{border-left-color:#e0523f}
.fdns-out.is-safe{border-left-color:var(--cta)}
.fdns-out .fdns-ico{flex:none;display:block;width:44px;height:44px}
.fdns-out b{display:block;font-size:14px;color:var(--ink)}
.fdns-out span{display:block;font-size:12.5px;line-height:1.4;color:var(--muted)}
/* celular: todo en una columna */
@media(max-width:560px){
  .fdns-flow{grid-template-columns:1fr}
  .fdns-flow>.fdns-arrow{justify-self:center;transform:rotate(90deg)}
  .fdns-results{grid-template-columns:1fr}
  .fdns-step{display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;
    text-align:left;align-items:center;padding:14px 16px}
  .fdns-step .fdns-ico{grid-row:1/3;width:48px;height:48px;margin:0}
  .fdns-step b{align-self:end}
  .fdns-step span{align-self:start}
}
/* bifurcación: línea que parte de "Resultado" y baja a cada opción (se lee como "una u otra") */
.fdns-results-lbl{position:relative;margin-bottom:16px!important}
.fdns-results-lbl::after{content:"";position:absolute;left:25%;right:25%;top:calc(100% + 5px);height:12px;
  border:2px solid color-mix(in srgb,var(--muted) 55%,transparent);border-bottom:0;border-radius:10px 10px 0 0}
.fdns-results-lbl::before{content:"";position:absolute;left:50%;top:calc(100% - 1px);width:2px;height:7px;margin-left:-1px;
  background:color-mix(in srgb,var(--muted) 55%,transparent)}
/* celular: las dos opciones lado a lado, en tarjetas verticales */
@media(max-width:560px){
  .fdns-results{grid-template-columns:1fr 1fr;gap:10px}
  .fdns-out{flex-direction:column;text-align:center;gap:8px;padding:14px 10px;border-left-width:1px;border-top-width:4px}
  .fdns-out.is-block{border-left-color:var(--line);border-top-color:#e0523f}
  .fdns-out.is-safe{border-left-color:var(--line);border-top-color:var(--cta)}
  .fdns-out .fdns-ico{width:40px;height:40px}
  .fdns-out b{font-size:13.5px;margin-bottom:3px}
  .fdns-out span{font-size:12px}
}

/* ============ Cobertura: mapa del Ecuador + panel de vista ampliada ============ */
.cov-band{border-top:0;color:#eef0ff;position:relative;overflow:hidden;--ink:#eef0ff;--muted:#b3bce6;
  background:radial-gradient(620px 460px at 30% 55%,rgba(67,198,255,.18),transparent 70%),linear-gradient(180deg,#08235c,#0a2766 55%,#0a2e74)}
.cov-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(111,208,255,.18) 1.2px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 45%,#000 10%,transparent 75%);mask-image:radial-gradient(70% 70% at 50% 45%,#000 10%,transparent 75%)}
.cov-band .wrap{position:relative;z-index:1}
.cov-head{max-width:60ch;margin:0 auto 22px;text-align:center}
.cov-head .eyebrow{color:#6fd0ff}.cov-head h2{color:#fff}.cov-head h2 em{font-style:normal;color:#43c6ff}
.cov-head p{color:#c3ccef}
.cov-fig{margin:0}
.cov-map{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;cursor:crosshair;touch-action:pan-y}
.cov-l-a,.cov-l-b{stroke-linejoin:round}
.cov-l-a{fill:#1a3787;stroke:#3f67cf;stroke-width:1}
.cov-l-b{fill:#2f63d8;stroke:#bfe9ff;stroke-width:1.3}
.cov-l-a.cov-pl{fill:#16307a;stroke:#5f8ae0;stroke-width:.35}
.cov-l-b.cov-pl{fill:#1e4bab;stroke:#8fd9ff;stroke-width:.55}
.cov-arc{fill:none;stroke:#9fe0ff;stroke-width:1.3;stroke-dasharray:4 5;opacity:.85;animation:covflow 1.4s linear infinite}
@keyframes covflow{to{stroke-dashoffset:-18}}
.cov-dot{fill:#7dffb6;stroke:#fff;stroke-width:1}
.cov-pulse{fill:none;stroke:#7dffb6;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center;animation:covpl 2.4s ease-out infinite}
@keyframes covpl{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.3);opacity:0}}
.cov-hubglow{fill:rgba(67,198,255,.28)}
.cov-hubbox{fill:#fff;stroke:#43c6ff;stroke-width:2}
.cov-hublb{font:800 15px var(--disp);fill:#fff;paint-order:stroke;stroke:#0a2766;stroke-width:5px}
.cov-lead{fill:none;stroke:#9fe0ff;stroke-width:1.2}
.cov-ct{font:800 17px var(--disp);fill:#fff}
.cov-cs{font:600 11.5px var(--mono);fill:#9fe0ff;text-transform:uppercase}
/* recuadro que indica qué zona se está viendo en el panel */
.cov-loc circle{fill:none;stroke:#43c6ff;stroke-width:2.5}
.cov-loc circle.in{stroke:rgba(67,198,255,.35);stroke-width:1.2}
.cov-loc{transition:transform .18s ease-out}
/* panel fijo con la vista ampliada */
.cov-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);border-radius:24px;padding:16px 16px 12px;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.7)}
.cov-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.cov-panel-head span{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9fb0e6}
.cov-panel-head b{font:800 17px var(--disp);color:#43c6ff}
.cov-panel-map{display:block;width:100%;height:auto;border-radius:20px;cursor:grab;touch-action:none}
.cov-panel-map.grabbing{cursor:grabbing}
.cov-panel-map.grabbing #cov-pzoom{transition:none}
.cov-pbg{fill:#081c4c}
.cov-pframe{fill:none;stroke:rgba(67,198,255,.55);stroke-width:2}

.cov-pdot{fill:#7dffb6;stroke:#fff;stroke-width:.4}
.cov-plb{font-family:var(--disp);font-weight:700;fill:#fff;paint-order:stroke;stroke:#071a4a;stroke-width:1.6px;stroke-linejoin:round}
#cov-pzoom{transition:transform .2s ease-out}
.cov-hint{margin:10px 0 0;text-align:center;font:600 11px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#9fb0e6}
.cov-hint .m{display:none}
.cov-hint b{color:#c9dcff}
@media(hover:none){.cov-hint .d{display:none}.cov-hint .m{display:inline}}
.cov-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);text-align:center}
.cov-stats b{display:block;font:800 30px var(--disp);color:#43c6ff;line-height:1}
.cov-stats span{font:500 11px var(--mono);color:#9fb0e6;text-transform:uppercase}
@media(max-width:900px){.cov-map{max-width:420px}}
@media(max-width:560px){.cov-stats{grid-template-columns:1fr 1fr;gap:16px}.cov-stats b{font-size:26px}.cov-panel{padding:12px 12px 10px}}
@media(prefers-reduced-motion:reduce){.cov-arc,.cov-pulse{animation:none}.cov-pulse{display:none}}

/* ============ Quiénes confían + Cobertura: tres zonas en una banda ============ */
.cov-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"map panel" "ops ops";gap:16px}
.cov-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:12px}
.cov-fig{grid-area:map;margin:0;display:grid;place-items:center}
.cov-fig .cov-map{max-width:100%;width:100%}
.cov-panel{grid-area:panel;display:flex;flex-direction:column}
.cov-panel .cov-panel-map{flex:1;max-width:100%;margin:0 auto}
.cov-card-ops{grid-area:ops;padding:16px 18px 14px}
.cov-sep{display:flex;align-items:center;gap:14px;margin:0 0 14px;color:#9fb0e6;font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cov-sep::before,.cov-sep::after{content:"";height:1px;background:rgba(255,255,255,.16);flex:1}
.cov-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.cov-chip{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:14px 8px 12px;border-radius:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.cov-chip:hover{background:rgba(255,255,255,.11);border-color:rgba(111,208,255,.5);transform:translateY(-2px)}
.cov-chip-logo{display:grid;place-items:center;width:100%;height:52px;border-radius:12px;background:#fff;padding:6px;flex:none}
.cov-chip-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cov-chip-logo img{max-height:40px}
.cov-chip b{font:700 14.5px var(--disp);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cov-chip-cta{border-style:dashed;border-color:rgba(111,208,255,.45);background:transparent}
.cov-chip-cta a{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;color:#43c6ff}
.cov-chip-cta .cov-chip-logo{background:rgba(67,198,255,.14);color:#43c6ff}
.cov-chip-cta svg{width:24px;height:24px}
.cov-chip-cta b{color:#43c6ff}
.cov-card-ops .cov-stats{margin-top:16px;padding-top:14px}
@media(max-width:900px){
  .cov-split{grid-template-columns:1fr;grid-template-areas:"map" "panel" "ops"}
  .cov-chips{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cov-fig .cov-map{max-width:420px}
  .cov-panel .cov-panel-map{max-width:420px}}
@media(max-width:560px){
  .cov-card{padding:10px}.cov-card-ops{padding:14px 12px 12px}
  .cov-chips{gap:8px}
  .cov-chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cov-chip{padding:10px 6px 9px;border-radius:13px;gap:6px}
  .cov-chip-logo{height:42px;border-radius:10px}
  .cov-chip-logo img{max-height:32px}

  .cov-chip b{font-size:13px}
  .cov-stats{grid-template-columns:1fr 1fr;gap:14px}}
.form-alt{margin:10px 0 0;font-size:13px;color:var(--muted);text-align:center}
.form-alt a{color:var(--brand);font-weight:600}
/* Planes: las tarjetas de precios son informativas; la compra se hace en "Arma tu plan" */
.plans-note{margin:10px 0 0;color:var(--muted);font-size:15px}
.plans-note a{color:var(--brand);font-weight:600;border-bottom:1.5px solid color-mix(in srgb,var(--brand) 35%,transparent)}
.plans-note a:hover{border-bottom-color:var(--brand)}

/* ============ FerroDNS en banda verde oscura (contraste con ISPilot) ============ */
.fdns-dark{border-top:0;--ink:#eef0ff;--muted:#b7c9c2;--line:rgba(255,255,255,.16);--surface:rgba(255,255,255,.06);
  color:#eef0ff;
  background:radial-gradient(520px 420px at 78% 50%,rgba(37,178,104,.22),transparent 70%),linear-gradient(180deg,#07331f,#06301f 45%,#072c3a)}
.fdns-dark .eyebrow{color:#7dffb6}
.fdns-dark h2{color:#fff}.fdns-dark h2 em{color:#7dffb6}
.fdns-dark .logo-on-light{display:none!important}
.fdns-dark .logo-on-dark{display:block!important}
.fdns-dark .fdns-step b,.fdns-dark .fdns-out b{color:#fff}
.fdns-dark .btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}
.fdns-dark .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px #fff;background:rgba(255,255,255,.08)}
.fdns-dark .fdns-arrow{box-shadow:0 6px 14px -6px rgba(37,178,104,.8)}
.fdns-dark .fdns-results-lbl::after{border-color:rgba(255,255,255,.35)}
.fdns-dark .fdns-results-lbl::before{background:rgba(255,255,255,.35)}
.qz-hint{margin:-4px 0 10px;font-size:13px;color:var(--muted)}