/* VPS Monitoreo Integral · sitio «Guardia nocturna» · A1plus, 22-10-2026
   Tokens: grupo-favinca/vps-monitoreo/guia/tokens.css (aprobados). 70 % Noche (acero) · 20 % Pizarra · 10 % Plata, los dos del escudo (paleta v2, 22-10-2026).
   Botones y acentos en plata (--accent). Ámbar solo para lo que pasa en vivo: la hora, el registro, el reloj, el paso activo y la baliza. Rojo de alarma muy poco y nunca en botones ni titulares. */
:root{
  --noche:#121C27;--noche-2:#1A2735;--linea:#2F4054;--hueso:#EEF1F4;--ceniza:#A7B2BE;
  --pizarra:#243E57;--plata:#C5C6C8;--ok:#46D38E;--alarma:#FF6A5C;--ambar:#FFB21E;
  --bg:var(--noche);--surface:var(--noche-2);--raised:#223244;--ink:var(--hueso);--muted:var(--ceniza);--line:var(--linea);
  --accent:var(--plata);--on-accent:var(--noche);--second:var(--plata);--band-accent:var(--plata);--cifra:var(--ambar);--band:var(--pizarra);--on-band:var(--hueso);--band-muted:#BCC8D6;
  --fd:'Barlow Condensed','Arial Narrow',sans-serif;--ft:'Barlow',system-ui,sans-serif;--fm:'JetBrains Mono',ui-monospace,monospace;
  --r:10px;--gut:clamp(16px,4vw,56px);--max:1320px;
  --e-out:cubic-bezier(.16,1,.3,1);--e-io:cubic-bezier(.65,0,.35,1);
  /* escala tipográfica fija, proporción 1,25 desde el cuerpo de 17 px (brief §10): nota · cuerpo · entradilla · h3 · … · h1 */
  --esc:1.25;--t-n1:calc(var(--t-0) / var(--esc));--t-0:17px;--t-1:calc(var(--t-0) * var(--esc));--t-2:calc(var(--t-1) * var(--esc));
  --t-3:calc(var(--t-2) * var(--esc));--t-4:calc(var(--t-3) * var(--esc));--t-5:calc(var(--t-4) * var(--esc));--t-6:calc(var(--t-5) * var(--esc));--t-7:calc(var(--t-6) * var(--esc));
  --h1:clamp(var(--t-4),6vw,var(--t-7));--h2:clamp(var(--t-3),4.2vw,var(--t-5));--h3:clamp(var(--t-1),2vw,var(--t-2));
  --barra-h:68px;--estado-h:32px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--barra-h) + 16px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-0)/1.6 var(--ft);font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:1px}
p{margin:0 0 1em;text-wrap:pretty}
h3{text-wrap:balance}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--noche)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:12px;top:-60px;z-index:100;background:var(--accent);color:var(--noche);padding:12px 18px;border-radius:var(--r);font-weight:600;text-decoration:none;transition:top .2s}
.saltar:focus{top:12px}
/* grano de película: fijo, sin eventos, nunca sobre un contenedor que hace scroll */
body::after{content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── Tipografía ─────────────────────────────────────────────────────────── */
.d{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:.96;margin:0;text-wrap:balance}
h1.d{font-size:var(--h1)}
h2.d{font-size:var(--h2);margin-bottom:.28em}
h3.d{font-size:var(--h3);line-height:1.05;margin-bottom:.4em}
.eti{display:flex;align-items:center;gap:10px;font:500 12px/1.3 var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}
.eti::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.eti.ok{color:var(--ok)}
.eti.plano::before{display:none}
.eti svg{width:16px;height:16px;flex:none}
.eti:has(svg)::before{display:none}
.mono{font-family:var(--fm);font-weight:500;letter-spacing:.04em}
.lead{font-size:clamp(18px,1.5vw,var(--t-1));line-height:1.5;color:var(--ink);max-width:60ch}
/* ── Títulos a dos líneas (brief §10). Cada línea es un bloque y comparte un tamaño: el del título (su tope) o menos, para que la
   línea más larga (--w, en em, medida con la fuente en construir.py) quepa en el ancho del título. Piso: 30 px el h1, 26 px el h2.
   Sin máscaras: la entrada anima cada línea con opacidad y desplazamiento, así ninguna tilde ni coma queda recortada. ── */
.t2{container-type:inline-size;line-height:1.04;text-wrap:wrap}
.t2 .t-l{display:block;font-size:max(var(--piso,26px),min(1em,100cqi / var(--w) * .97))}
h1.t2{--piso:30px}
.t2 .t-i{display:block}
.t2 .t-l+.t-l{color:var(--second)}
.banda .t2 .t-l+.t-l{color:var(--band-accent)}
.muted{color:var(--muted)}
.pequeno{font-size:14px;line-height:1.5}
.ambar{color:var(--accent)}
em.m{font-style:normal;color:var(--accent)}
.cifra{font:700 clamp(54px,7vw,104px)/.86 var(--fd);letter-spacing:-.01em;color:var(--cifra);font-variant-numeric:lining-nums tabular-nums}
.linea-mask{display:block;overflow:clip;padding-block:.06em .12em;margin-block:-.06em -.12em}

/* ── Contenedores ───────────────────────────────────────────────────────── */
.in{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,10vw,148px);position:relative}
.sec.compacta{padding-block:clamp(48px,6vw,88px)}
.sec.surface{background:var(--surface)}
.sec.raised{background:var(--raised)}
.sec.banda{background:var(--band);color:var(--on-band)}
.banda .muted,.banda .lead{color:var(--band-muted)}
.banda .eti{color:var(--accent)}
.borde-t{border-top:1px solid var(--line)}
.cab-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 64px;margin-bottom:clamp(36px,5vw,64px);align-items:end}
@media (min-width:1100px){.cab-sec{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.cab-sec.ancha{grid-template-columns:minmax(0,1fr)}}
.cab-sec p{margin:0}

/* ── Botones ────────────────────────────────────────────────────────────── */
.b{--h:52px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:var(--r);font:700 16px/1 var(--fd);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border:1.5px solid transparent;cursor:pointer;transition:transform .18s var(--e-out),background-color .2s,border-color .2s,box-shadow .25s var(--e-out);-webkit-tap-highlight-color:transparent}
.b:active{transform:translateY(1px) scale(.985)}
.b svg{width:20px;height:20px;flex:none}
.b-wa{background:var(--accent);color:var(--noche);box-shadow:0 0 0 0 rgba(197,198,200,.0)}
.b-wa:hover{box-shadow:0 0 0 6px rgba(197,198,200,.16)}
.b-2{border-color:color-mix(in srgb,var(--hueso) 55%,transparent);color:var(--hueso);background:transparent}
.b-2:hover{border-color:var(--hueso);background:rgba(238,241,244,.05)}
.b-3{min-height:44px;padding:0;color:var(--accent);font:600 15px var(--ft);letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:5px}
.b-3:hover{color:var(--hueso)}
.b-ch{--h:44px;padding:0 16px;font-size:15px}
.botones{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.flecha{display:inline-block;transition:transform .25s var(--e-out)}
a:hover>.flecha{transform:translateX(4px)}

/* ── Barra de estado + cabecera ─────────────────────────────────────────── */
.estado{position:relative;z-index:41;height:var(--estado-h);display:flex;align-items:center;gap:12px;padding-inline:var(--gut);background:#0E1620;border-bottom:1px solid var(--line);font:500 11px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.punto{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;box-shadow:0 0 0 0 rgba(70,211,142,.55);animation:late 2s infinite}
@keyframes late{70%{box-shadow:0 0 0 8px rgba(70,211,142,0)}100%{box-shadow:0 0 0 0 rgba(70,211,142,0)}}
.estado .x{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.estado .der{margin-left:auto;display:flex;align-items:center;gap:18px;white-space:nowrap}
.estado .der a{color:var(--hueso);text-decoration:none;display:none}
.estado .der a:hover{color:var(--accent)}
.estado time{color:var(--ambar);font-variant-numeric:tabular-nums}
@media (min-width:768px){.estado .der a{display:inline}}
@media (max-width:420px){.estado .largo{display:none}}

.barra{position:sticky;top:0;z-index:40;height:var(--barra-h);display:flex;align-items:center;gap:18px;padding-inline:var(--gut);background:rgba(18,28,39,.82);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.barra.con-borde{border-bottom-color:var(--line);background:rgba(18,28,39,.92)}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;min-height:44px}
.marca svg{width:40px;height:44px}
.marca b{font:700 19px/1 var(--fd);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.marca small{display:block;font:500 10px/1.2 var(--fm);letter-spacing:.16em;color:var(--muted);margin-top:4px;text-transform:uppercase}
.nav{margin-left:auto;display:none;align-items:center;gap:4px}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px}
.nav>ul>li{position:relative}
.nav a,.nav .abre{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;font:600 15px/1 var(--fd);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;background:none;border:0;cursor:pointer;border-radius:8px;transition:color .2s}
.nav a:hover,.nav .abre:hover,.nav a[aria-current="page"],.nav .abre[aria-expanded="true"],.nav .abre.activo{color:var(--hueso)}
.nav a[aria-current="page"]::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent)}
.abre svg{width:12px;height:12px;transition:transform .25s var(--e-out)}
.abre[aria-expanded="true"] svg{transform:rotate(180deg)}
.panel-sol{position:absolute;top:calc(100% + 10px);left:-12px;width:min(560px,80vw);display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 60px -20px rgba(0,0,0,.6);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:18% 0;transition:opacity .2s var(--e-out),transform .2s var(--e-out),visibility 0s .2s}
.panel-sol.abierto{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--e-out),transform .2s var(--e-out)}
.panel-sol a{display:grid;gap:4px;min-height:auto;padding:14px 14px 14px;border-radius:10px;font:inherit;text-transform:none;letter-spacing:0;color:var(--hueso)}
.panel-sol a:hover,.panel-sol a:focus-visible{background:var(--raised)}
.panel-sol a b{font:700 17px/1 var(--fd);letter-spacing:.06em;text-transform:uppercase}
.panel-sol a span{font-size:14px;line-height:1.4;color:var(--muted);white-space:normal}
.panel-sol a i{font:500 11px var(--fm);font-style:normal;letter-spacing:.12em;color:var(--accent)}
.barra .b-wa{--h:44px;padding:0 16px;font-size:15px}
.barra-acc{display:flex;align-items:center;gap:8px;margin-left:auto}
.icono-b{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:var(--r);border:1px solid var(--line);background:transparent;color:var(--hueso);cursor:pointer;text-decoration:none}
.icono-b svg{width:22px;height:22px}
.icono-b.wa{background:var(--accent);border-color:var(--accent);color:var(--noche)}
.solo-desk{display:none}
@media (min-width:1100px){.nav{display:flex}.barra-acc{margin-left:8px}.solo-movil{display:none!important}.solo-desk{display:inline-flex}}
@media (max-width:380px){.marca small{display:none}}

/* menú móvil */
.menu{position:fixed;inset:0;z-index:60;background:var(--noche);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .3s var(--e-out),visibility 0s .3s}
.menu.abierto{opacity:1;visibility:visible;transition:opacity .3s var(--e-out)}
.menu-cab{height:calc(var(--barra-h) + var(--estado-h));display:flex;align-items:flex-end;padding:0 var(--gut) 12px;gap:12px;border-bottom:1px solid var(--line)}
.menu-cab .icono-b{margin-left:auto}
.menu nav{flex:1;overflow-y:auto;padding:12px var(--gut) 24px}
.menu ul{list-style:none;margin:0;padding:0}
.menu li{border-bottom:1px solid var(--line)}
.menu nav a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;font:700 clamp(24px,7vw,34px)/1 var(--fd);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.menu nav a small{font:500 11px var(--fm);letter-spacing:.12em;color:var(--muted)}
.menu nav a[aria-current="page"]{color:var(--accent)}
.menu .grupo{font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);padding:22px 0 6px}
.menu-pie{padding:16px var(--gut) calc(16px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--line)}
.menu-pie .b{--h:52px;padding:0 10px}

/* barra inferior móvil: WhatsApp y llamada siempre a un toque */
.abajo{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(18,28,39,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .28s var(--e-out)}
.abajo.visible{transform:none}
.abajo .b{--h:48px;padding:0 10px;font-size:15px}
@media (min-width:768px){.abajo{display:none}}

/* ── Héroe de la portada (video) ────────────────────────────────────────── */
.heroe{position:relative;min-height:calc(100svh - var(--barra-h) - var(--estado-h));display:grid;align-items:end;overflow:clip;isolation:isolate;background:var(--noche)}
.heroe-medio{position:absolute;inset:0;z-index:-2;overflow:hidden}
.heroe-medio video,.heroe-medio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.heroe-medio .vid{position:absolute;inset:0;transform-origin:50% 40%;will-change:transform}
.heroe-medio video{opacity:0;transition:opacity 1s var(--e-out)}
.heroe-medio video.vivo{opacity:1}
/* etalonaje v2: las fotos y el video de kie salieron con luz de sodio; una capa pizarra en modo «color» las enfría hacia el acero del escudo sin regenerarlas */
.heroe-medio::after,.cam::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--pizarra);mix-blend-mode:color;opacity:.42}
.cam::before{opacity:.34}
.heroe::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(18,28,39,.92) 0%,rgba(18,28,39,.62) 38%,rgba(18,28,39,.08) 70%),
  linear-gradient(0deg,rgba(18,28,39,.96) 0%,rgba(18,28,39,0) 46%),
  linear-gradient(180deg,rgba(18,28,39,.55) 0%,rgba(18,28,39,0) 22%)}
.heroe-in{width:100%;max-width:var(--max);margin:0 auto;padding:clamp(72px,12vh,140px) var(--gut) clamp(28px,5vh,56px);display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:end}
@media (min-width:1100px){.heroe-in{grid-template-columns:minmax(0,7.2fr) minmax(0,4.8fr);gap:56px}}
/* velo detrás del texto del héroe: sigue al bloque de texto (no a la altura del video) para que el titular, la entradilla y la
   confianza queden en ≥ 4,5:1 sobre la parte más clara de cualquier escena del video, en todos los anchos */
.heroe-txt{position:relative;z-index:0}
.heroe-txt::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:-110px calc(-1 * var(--gut)) -36px;background:rgba(18,28,39,.84);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 110px);mask-image:linear-gradient(180deg,transparent 0,#000 110px)}
@media (min-width:1100px){.heroe-txt::before{inset:-120px -22% -40px calc(-1 * var(--gut) - 40px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 40px),transparent),linear-gradient(90deg,#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 120px,#000 calc(100% - 40px),transparent),linear-gradient(90deg,#000 70%,transparent);mask-composite:intersect}}
.heroe h1{margin-bottom:22px}
.heroe .lead{color:#E2E7EC;margin-bottom:28px;max-width:46ch}
.confianza{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font:500 12px/1.4 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.confianza span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.confianza b{color:var(--hueso);font-weight:500}
.estrellas{color:var(--accent);letter-spacing:.06em}
.heroe-hud{position:absolute;top:18px;right:var(--gut);z-index:1;display:flex;gap:14px;align-items:center;font:500 11px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:rgba(238,241,244,.78)}
.rec{display:inline-flex;align-items:center;gap:7px}
.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--alarma);animation:parpadeo 1.6s steps(1) infinite}
@keyframes parpadeo{50%{opacity:.15}}
.heroe-pausa{position:absolute;right:var(--gut);bottom:14px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(238,241,244,.3);background:rgba(18,28,39,.5);color:var(--hueso);cursor:pointer}
.heroe-pausa svg{width:16px;height:16px}
@media (min-width:1100px){.heroe-pausa{bottom:22px}}

/* registro de eventos (se escribe línea a línea) */
.registro{background:rgba(26,39,53,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(36,62,87,.9);border-radius:var(--r);box-shadow:inset 0 1px 0 rgba(238,241,244,.06);font:500 13px/1.35 var(--fm);overflow:hidden}
.registro-cab{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.registro-cab time{margin-left:auto;color:var(--ambar);font-variant-numeric:tabular-nums}
.registro ol{list-style:none;margin:0;padding:6px 16px;min-height:calc(4 * 41px + 12px)}
.registro li{display:grid;grid-template-columns:auto 8px minmax(0,1fr);align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);color:var(--hueso)}
.registro li:last-child{border-bottom:0}
.registro li time{color:var(--ambar);font-variant-numeric:tabular-nums}
.registro li .p{width:8px;height:8px;border-radius:50%;background:var(--plata)}
.registro li .p.al{background:var(--alarma)}.registro li .p.ok{background:var(--ok)}.registro li .p.am{background:var(--ambar)}
.registro li span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.registro li.nueva{animation:linea .45s var(--e-out)}
.registro ol::after{content:"";display:block;width:9px;height:15px;margin:12px 0 4px;background:var(--ambar);animation:parpadeo 1.1s steps(1) infinite}
@keyframes linea{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.registro-pie{padding:10px 16px 12px;border-top:1px solid var(--line);font:400 12px/1.4 var(--ft);color:var(--muted)}
@media (max-width:767px){.registro ol{min-height:calc(3 * 41px + 12px)}.registro li:nth-child(n+4){display:none}}

/* ── Franja de prueba ───────────────────────────────────────────────────── */
.prueba{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prueba>div{padding:28px var(--gut);border-bottom:1px solid var(--line)}
.prueba>div:last-child{border-bottom:0}
@media (min-width:768px){.prueba{grid-template-columns:1.5fr 1fr 1fr}.prueba>div{border-bottom:0;border-right:1px solid var(--line);padding:34px clamp(20px,3vw,40px)}.prueba>div:last-child{border-right:0}}
.prueba .lbl{font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.prueba blockquote{margin:0 0 12px;font:600 clamp(21px,2vw,26px)/1.22 var(--fd);letter-spacing:.005em}
.prueba .num{font:700 clamp(40px,4.4vw,60px)/.9 var(--fd);color:var(--cifra);margin:0 0 8px}
.prueba .num small{font-size:.5em;color:var(--hueso);margin-left:6px}
.prueba p{margin:0;color:var(--muted);font-size:15px}
.prueba a{color:var(--hueso)}

/* ── Zonas (tipos de cliente) ───────────────────────────────────────────── */
.zonas{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (min-width:768px){.zonas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.zonas{grid-template-columns:1.25fr 1fr 1fr 1.1fr}}
.zona{position:relative;display:flex;flex-direction:column;gap:14px;min-height:340px;padding:28px 26px 26px;background:var(--noche);text-decoration:none;transition:background-color .2s var(--e-out)}
.zona:hover,.zona:focus-visible{background:var(--surface)}
.zona .z{display:flex;justify-content:space-between;font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.zona .z b{font-weight:500;display:inline-flex;align-items:center;gap:8px;color:var(--ok)}
.zona .z b::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.zona h3{font:700 clamp(30px,2.8vw,40px)/.95 var(--fd);text-transform:uppercase;letter-spacing:.01em;margin:auto 0 0}
.zona p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.5}
.zona .srv{font:500 12px/1.5 var(--fm);letter-spacing:.04em;color:var(--hueso)}
.zona .ir{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line);font:700 15px var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.zona-f{position:relative;display:block;margin:-28px -26px 6px;aspect-ratio:16/10;overflow:hidden;background:#0B121A;border-bottom:1px solid var(--line)}
.zona-f img,.col-f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);filter:saturate(.8) brightness(.82);transition:transform .6s var(--e-out),filter .3s var(--e-out)}
.zona-f::after,.col-f::after{content:"";position:absolute;inset:0;background:var(--pizarra);mix-blend-mode:color;opacity:.34;pointer-events:none}
.zona-f::before,.col-f::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(18,28,39,.55),transparent 55%);pointer-events:none}
@media (hover:hover){.zona:hover .zona-f img{transform:scale(1.035);filter:saturate(.9) brightness(.95)}}
.col-f{position:relative;margin:-26px -26px 22px;aspect-ratio:16/8;overflow:hidden;border-bottom:1px solid var(--line)}
.plano-sec{margin-top:clamp(28px,4vw,44px)}
/* columnas de ancho distinto: altura fija para que las fotos queden alineadas */
@media (min-width:768px){.zona-f{aspect-ratio:auto;height:clamp(150px,15vw,200px)}}
@media (min-width:900px){.col-f{aspect-ratio:auto;height:clamp(200px,21vw,290px)}}
.zona svg.ico{width:44px;height:44px;color:var(--plata)}
.zona:hover .z b,.zona:focus-visible .z b{color:var(--accent)}

/* ── Insignia: «Qué pasa cuando suena» ──────────────────────────────────── */
.ins{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (min-width:1100px){.ins{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.ins-texto dl{margin:28px 0 0;display:grid;gap:18px}
.ins-texto dt{font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ins-texto dd{margin:6px 0 0;color:var(--muted)}
.consola{background:var(--noche);border:1px solid var(--pizarra);border-radius:14px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.7),inset 0 1px 0 rgba(238,241,244,.05)}
.consola-cab{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 18px;border-bottom:1px solid var(--line);background:#0E1620}
.consola-cab .t{font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.modos{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:10px;gap:2px}
.modos button{min-height:38px;padding:0 14px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:600 14px var(--fd);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.modos button[aria-pressed="true"]{background:var(--raised);color:var(--hueso)}
.reloj{margin-left:auto;font:500 clamp(22px,2.4vw,28px)/1 var(--fm);color:var(--ambar);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.chip-estado{display:inline-flex;align-items:center;gap:8px;min-height:30px;padding:0 12px;border-radius:999px;border:1px solid currentColor;font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--ok);white-space:nowrap;transition:color .3s}
.chip-estado::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.chip-estado[data-e="alarma"]{color:var(--alarma)}.chip-estado[data-e="atencion"]{color:var(--ambar)}.chip-estado[data-e="camino"]{color:var(--ambar)}
.consola-cuerpo{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.consola-cuerpo{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}}
.consola .plano{position:relative;border-bottom:1px solid var(--line);background:radial-gradient(120% 90% at 30% 20%,#16212C 0%,#0D151E 70%)}
@media (min-width:768px){.consola .plano{border-bottom:0;border-right:1px solid var(--line)}}
.plano svg{width:100%;height:auto}
.plano .lbl{font:500 9px var(--fm);letter-spacing:.12em;fill:var(--muted);text-transform:uppercase}
.plano .muro{fill:none;stroke:#3D5068;stroke-width:3}
.plano .muro-f{fill:none;stroke:#33455A;stroke-width:1.5}
.plano .zona-p{fill:rgba(70,211,142,.05);stroke:rgba(70,211,142,.35);stroke-width:1;transition:fill .3s,stroke .3s}
.plano .zona-p.al{fill:rgba(255,106,92,.18);stroke:var(--alarma);animation:zonal 1s steps(1) infinite}
@keyframes zonal{50%{fill:rgba(255,106,92,.05)}}
.plano .cono{fill:rgba(255,178,30,.16);stroke:rgba(255,178,30,.6);stroke-width:1;opacity:0;transition:opacity .4s}
.plano .cono.on{opacity:1}
.plano .ruta{fill:none;stroke:var(--ambar);stroke-width:2.5;stroke-dasharray:6 6;opacity:.25}
.plano .ruta-viva{fill:none;stroke:var(--ambar);stroke-width:2.5;stroke-linecap:round}
.plano .unidad{fill:var(--ambar)}
.plano .tel{opacity:0;transition:opacity .3s}.plano .tel.on{opacity:1}
.plano .tel.on .onda{animation:onda 1s var(--e-out) infinite}
@keyframes onda{from{opacity:.9;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}
.plano .onda{transform-box:fill-box;transform-origin:center}
.vista-cam{position:absolute;right:12px;top:12px;width:38%;aspect-ratio:16/9;border:1px solid var(--ambar);border-radius:6px;overflow:hidden;opacity:0;transform:scale(.94);transition:opacity .35s,transform .35s var(--e-out);background:#000}
.vista-cam.on{opacity:1;transform:none}
.vista-cam img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.05)}
.vista-cam span{position:absolute;left:6px;top:5px;font:500 9px var(--fm);letter-spacing:.1em;color:var(--hueso);text-shadow:0 1px 2px #000}
.pasos{list-style:none;margin:0;padding:10px;display:grid;gap:6px;align-content:start}
.paso{display:grid;grid-template-columns:62px minmax(0,1fr);gap:2px 12px;padding:12px 14px;border-radius:10px;background:var(--surface);opacity:.38;transition:opacity .35s var(--e-out),box-shadow .35s var(--e-out),background-color .35s}
.paso.on{opacity:1;box-shadow:inset 3px 0 0 var(--ambar)}
.paso.actual{background:var(--raised)}
.paso time{grid-row:span 2;font:500 13px var(--fm);color:var(--ambar);padding-top:2px;font-variant-numeric:tabular-nums}
.paso b{font:700 18px/1.15 var(--fd);letter-spacing:.04em;text-transform:uppercase}
.paso span{color:var(--muted);font-size:14.5px;line-height:1.45}
.consola-pie{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:14px 18px;border-top:1px solid var(--line)}
.consola-pie .nota{flex:1 1 240px;margin:0;font-size:13px;color:var(--muted)}
.progreso{height:2px;background:var(--line);position:relative;overflow:hidden}
.progreso i{position:absolute;inset:0;background:var(--ambar);transform-origin:0 50%;transform:scaleX(0)}
.b-sim{--h:48px}
.b-sim[data-corriendo]{background:var(--raised);color:var(--hueso);border-color:var(--line)}
.de-muestra{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px dashed var(--ceniza);border-radius:6px;font:500 10.5px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--ceniza);white-space:nowrap}

/* ── Objeción en dos columnas (cámara sola / con central) ──────────────── */
.versus{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:900px){.versus{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.col-v{border:1px solid var(--line);border-radius:14px;padding:26px;background:var(--noche);overflow:hidden}
.col-v.con{border-color:var(--pizarra);background:linear-gradient(180deg,rgba(36,62,87,.28),rgba(36,62,87,.06))}
.col-v h3{display:flex;align-items:center;gap:10px}
.col-v h3 svg{width:24px;height:24px;flex:none;color:var(--accent)}
.col-v ol{list-style:none;margin:18px 0 0;padding:0;font:500 13.5px/1.45 var(--fm)}
.col-v li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px dashed var(--line)}
.col-v li time{color:var(--muted)}
.col-v.con li time{color:var(--ambar)}
.col-v .fin{margin:16px 0 0;font:600 18px/1.3 var(--fd);letter-spacing:.03em;text-transform:uppercase}

/* ── Cortes de luz: reloj de 24 horas ───────────────────────────────────── */
.luz{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (min-width:1000px){.luz{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.anillo{position:relative;max-width:460px;margin-inline:auto;width:100%}
.anillo svg{width:100%;height:auto}
.anillo .seg{fill:none;stroke-width:34;transition:stroke .5s}
.anillo .seg.luz-on{stroke:#2A3A4C}
.anillo .seg.corte{stroke:var(--noche);stroke-dasharray:none}
.anillo .seg.puede{stroke:url(#rayado)}
.anillo .h{font:500 10px var(--fm);fill:var(--muted);letter-spacing:.06em}
.anillo-centro{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.anillo-centro .cifra{font-size:clamp(56px,7vw,88px)}
.anillo-centro p{margin:6px 0 0;font:500 11px/1.4 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.datos-luz{list-style:none;margin:0;padding:0;display:grid;gap:0}
.datos-luz li{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid var(--line);align-items:baseline}
.datos-luz b{font:700 clamp(34px,3.4vw,46px)/.9 var(--fd);color:var(--hueso)}
.datos-luz p{margin:0;color:var(--muted);font-size:15.5px}
.datos-luz cite{display:block;margin-top:6px;font:500 11px var(--fm);font-style:normal;letter-spacing:.06em;color:var(--ceniza)}
.datos-luz cite a{color:inherit}
.pregunta{margin-top:28px;padding:22px 24px;border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--r) var(--r) 0}
.pregunta p{margin:0 0 14px}
.pendiente{display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border:1px dashed var(--accent);border-radius:6px;font:500 11px/1.3 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:rgba(197,198,200,.05)}
.pendiente::before{content:"";width:10px;height:10px;border:1.5px solid currentColor;border-radius:2px;flex:none}

/* ── Servicios: panel de módulos ────────────────────────────────────────── */
.modulos{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (min-width:640px){.modulos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:640px) and (max-width:1099px){.modulos .m:first-child{grid-column:span 2}}
@media (min-width:1100px){.modulos{grid-template-columns:repeat(4,minmax(0,1fr))}.modulos .m:first-child{grid-column:span 2;grid-row:span 2}.modulos .m:nth-child(6),.modulos .m:nth-child(7){grid-column:span 2}}
.modulos .m{display:flex;flex-direction:column;gap:10px;padding:24px;background:var(--noche);text-decoration:none;min-height:200px;transition:background-color .25s}
.modulos .m:hover,.modulos .m:focus-visible{background:var(--surface)}
.modulos .m .cod span:first-child{white-space:nowrap}
.modulos .m .cod{display:flex;justify-content:space-between;gap:14px;text-align:right;font:500 11px var(--fm);letter-spacing:.14em;color:var(--muted)}
.modulos .m :is(h3,.t){font:700 24px/1 var(--fd);letter-spacing:.03em;text-transform:uppercase;margin:auto 0 0}
.modulos .m p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.modulos .m:first-child :is(h3,.t){font-size:clamp(30px,3vw,44px)}
.modulos .m:first-child p{font-size:17px;max-width:40ch}
.modulos .m svg{width:40px;height:40px;color:var(--plata)}
.modulos .m:first-child svg{width:64px;height:64px;color:var(--accent)}

/* ── Reseñas ────────────────────────────────────────────────────────────── */
.resenas{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:900px){.resenas{grid-template-columns:1.6fr 1fr 1fr}.resenas .r:first-child{grid-row:span 2}.resenas .r:nth-child(4):last-child{grid-column:span 2}}
.r{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:14px;border:1px solid var(--line);background:var(--noche);margin:0}
.r blockquote{margin:0;font:600 clamp(22px,2vw,27px)/1.2 var(--fd);letter-spacing:.005em}
.r:first-child blockquote{font-size:clamp(28px,3.2vw,44px);line-height:1.08}
.r figcaption{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font:500 12px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.r figcaption b{color:var(--hueso);font-weight:500}
.total-r{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:22px;color:var(--muted);font-size:15px}

/* ── Expediente (credenciales) ──────────────────────────────────────────── */
.exp{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--noche)}
.exp-f{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 24px;padding:18px 22px;border-top:1px solid var(--line);align-items:center}
.exp-f:first-child{border-top:0}
@media (min-width:768px){.exp{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,1.7fr) auto}.exp-f{grid-column:1/-1;grid-template-columns:subgrid}}
.exp-f .k{font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.exp-f .v{font-weight:600}
.exp-f .v small{display:block;font-weight:400;color:var(--muted);font-size:14px;margin-top:2px}
.exp-f .s{justify-self:start}
.ok-chip{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--ok)}
.ok-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.al-chip{display:inline-flex;align-items:center;gap:6px;font:500 11px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--ambar)}
.al-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}

/* ── Cierre con WhatsApp por tipo ───────────────────────────────────────── */
.cierre{position:relative;overflow:clip}
.cierre-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:end}
@media (min-width:1100px){.cierre-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.tipos{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:520px){.tipos{grid-template-columns:1fr 1fr}}
.tipo{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;padding:12px 18px;border:1px solid color-mix(in srgb,var(--hueso) 22%,transparent);border-radius:var(--r);text-decoration:none;font:700 18px/1.1 var(--fd);letter-spacing:.05em;text-transform:uppercase;transition:background-color .2s,border-color .2s,color .2s}
.tipo small{display:block;font:400 13px/1.3 var(--ft);letter-spacing:0;text-transform:none;color:var(--band-muted);margin-top:3px}
.tipo svg{width:22px;height:22px;flex:none;color:var(--accent)}
.tipo:hover,.tipo:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--noche)}
.tipo:hover small,.tipo:focus-visible small{color:rgba(18,28,39,.75)}
.tipo:hover svg,.tipo:focus-visible svg{color:var(--noche)}
.telefonos{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:4px}
.telefonos a{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-height:44px;padding:8px 0;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--hueso) 14%,transparent)}
.telefonos span{font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted);min-width:110px}
.telefonos b{font:500 clamp(18px,1.8vw,22px) var(--fm);letter-spacing:.02em}
.telefonos a:hover b{color:var(--accent)}

/* ── Páginas internas: cabecera tipo expediente ─────────────────────────── */
.cab-p{position:relative;padding-block:clamp(40px,7vw,96px) clamp(48px,7vw,104px);overflow:clip;isolation:isolate}
.cab-p-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
@media (min-width:1100px){.cab-p-grid{grid-template-columns:minmax(0,6.4fr) minmax(0,5.6fr)}.cab-p-grid.sin-img{grid-template-columns:minmax(0,9fr) minmax(0,3fr)}}
.migas{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0 0 26px;padding:0;font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.migas li+li::before{content:"/";margin-right:10px;color:var(--line)}
.migas li{display:inline-flex;align-items:center}
.migas a,.migas span{text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.migas a:hover{color:var(--hueso)}
.cab-p h1{margin-bottom:18px}
.cab-p .lead{margin-bottom:30px}
.cab-p .datos{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;font:500 12px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* cuadro de cámara: imagen con rótulos de monitor (encuadre de la central) */
.cam{position:relative;margin:0;border-radius:12px;overflow:hidden;background:#0B121A;border:1px solid var(--line);aspect-ratio:var(--ar,16/10);isolation:isolate}
.cam img,.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.cam::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(18,28,39,.55) 100%),linear-gradient(0deg,rgba(18,28,39,.6) 0%,transparent 26%)}
.cam .hud{position:absolute;inset:0;z-index:2;pointer-events:none;padding:14px 16px;display:flex;flex-direction:column;justify-content:space-between;font:500 11px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:rgba(238,241,244,.85)}
.cam .hud div{display:flex;justify-content:space-between;gap:12px}
.cam .hud time{color:var(--ambar);font-variant-numeric:tabular-nums}
.cam .esq{position:absolute;z-index:2;width:18px;height:18px;border-color:rgba(238,241,244,.55);border-style:solid;pointer-events:none}
.cam .esq.a{top:10px;left:10px;border-width:1.5px 0 0 1.5px}.cam .esq.b{top:10px;right:10px;border-width:1.5px 1.5px 0 0}
.cam .esq.c{bottom:10px;left:10px;border-width:0 0 1.5px 1.5px}.cam .esq.d{bottom:10px;right:10px;border-width:0 1.5px 1.5px 0}

/* diagrama en lugar de foto (páginas sin imagen propia todavía) */
.diag{position:relative;border:1px solid var(--line);border-radius:12px;background:radial-gradient(120% 100% at 20% 0%,#17222E 0%,#0D151E 70%);overflow:hidden;aspect-ratio:var(--ar,16/11)}
.diag svg{width:100%;height:100%}
.diag .tx{font:500 10px var(--fm);letter-spacing:.12em;fill:var(--muted);text-transform:uppercase}
.diag .tx-a{fill:var(--accent)}
.diag .tr{fill:none;stroke:#3D5068;stroke-width:1.5}
.diag .tr-p{fill:none;stroke:var(--pizarra);stroke-width:1.5}
.diag .tr-a{fill:none;stroke:var(--accent);stroke-width:2}
.diag .rel{fill:rgba(36,62,87,.25);stroke:var(--pizarra)}

/* ── Bloques de contenido ───────────────────────────────────────────────── */
.dos{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
@media (min-width:1000px){.dos{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.dos.inv{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.dos.mitad{grid-template-columns:1fr 1fr}}
.sticky-col{position:sticky;top:calc(var(--barra-h) + 32px)}
@media (max-width:999px){.sticky-col{position:static}}
.lista-p{list-style:none;margin:0;padding:0;counter-reset:p}
.lista-p>li{counter-increment:p;display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 18px;padding:26px 0;border-top:1px solid var(--line)}
.lista-p>li::before{content:counter(p,decimal-leading-zero);grid-row:span 2;font:500 13px var(--fm);color:var(--accent);padding-top:6px}
.lista-p h3{font:700 clamp(22px,2vw,28px)/1.05 var(--fd);text-transform:uppercase;letter-spacing:.02em;margin:0 0 6px}
.lista-p p{margin:0;color:var(--muted)}
.lista-p>li>*{grid-column:2}
.check{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.check li{position:relative;padding-left:30px}
.check li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.consejo{position:relative;padding:28px 28px 26px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.consejo .hash{font:500 12px var(--fm);letter-spacing:.1em;color:var(--accent);margin:0 0 12px}
.consejo blockquote{margin:0 0 12px;font:600 clamp(22px,2.2vw,30px)/1.2 var(--fd);letter-spacing:.01em}
.consejo p:last-child{margin:0;color:var(--muted);font-size:14px}
.obj{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (min-width:800px){.obj{grid-template-columns:1fr 1fr}}
.obj>div{padding:26px;background:var(--noche)}
.obj .q{font:700 clamp(21px,2vw,26px)/1.12 var(--fd);text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px}
.obj p{margin:0;color:var(--muted)}
.obj a{color:var(--hueso)}

/* tablero de apertura y cierre (varias sedes) */
.tablero{border:1px solid var(--pizarra);border-radius:14px;overflow:hidden;background:var(--noche)}
.tablero-cab{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:#0E1620}
.tablero-cab .t{font:500 11px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tabla-ac{width:100%;border-collapse:collapse;font:500 12.5px var(--fm)}
.tabla-ac th,.tabla-ac td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.tabla-ac th{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tabla-ac th[scope="row"]{text-align:left;color:var(--hueso);padding-left:18px}
.tabla-ac td span{display:block;line-height:1.5}
.tabla-ac td .a{color:var(--ok)}.tabla-ac td .c{color:var(--plata)}
.tabla-ac td.fuera{background:rgba(255,178,30,.08)}
.tabla-ac td.fuera .a{color:var(--ambar)}
.tabla-ac button{all:unset;cursor:pointer;display:block;padding:2px 4px;border-radius:6px}
.tabla-ac button:focus-visible{outline:2px solid var(--accent)}
.tabla-ac button:hover{background:rgba(238,241,244,.06)}
.tabla-ac button[aria-pressed="true"]{background:rgba(36,62,87,.55);box-shadow:inset 0 0 0 1px var(--pizarra)}
.tablero-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sms{padding:16px 18px;border-top:1px solid var(--line);display:grid;gap:8px;font:500 13px/1.45 var(--fm)}
.sms p{margin:0;display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px}
.sms time{color:var(--ambar)}
.sms .alerta{color:var(--ambar)}

/* empresa: firma del escudo, hitos y valores */
.firma-caja{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:radial-gradient(70% 70% at 50% 40%,rgba(36,62,87,.42),transparent 72%),var(--noche)}
.firma-caja::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(238,241,244,.025) 0 1px,transparent 1px 4px);pointer-events:none}
.firma-caja .firma{width:min(52%,260px);height:auto;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
.firma-caja .pie-f{position:absolute;left:18px;right:18px;bottom:14px;display:flex;justify-content:space-between;gap:12px;font:500 10.5px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hitos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line)}
@media (min-width:900px){.hitos{grid-template-columns:repeat(4,minmax(0,1fr));border-top:0}}
.hitos li{position:relative;padding:22px 0 26px;border-bottom:1px solid var(--line)}
@media (min-width:900px){.hitos li{padding:30px 26px 0 0;border-bottom:0;border-top:1px solid var(--line)}.hitos li::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;background:var(--noche);border:1.5px solid var(--accent)}}
.hitos .a{display:block;font:700 clamp(40px,4.4vw,60px)/.9 var(--fd);color:var(--hueso);margin-bottom:12px}
.hitos li:nth-child(2) .a{color:var(--accent)}
.hitos p{margin:0;color:var(--muted);font-size:15.5px}
.valores{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:22px 0 0;padding:0}
.valores li{padding:10px 16px;border:1px solid var(--line);border-radius:999px;font:700 15px var(--fd);letter-spacing:.08em;text-transform:uppercase}

/* ── Formularios (validan y muestran éxito; no envían) ──────────────────── */
.form{display:grid;gap:18px}
.form .fila{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
@media (min-width:640px){.form .fila{grid-template-columns:1fr 1fr}}
.campo{display:grid;gap:8px}
.campo label,.campo legend{font-weight:600;font-size:15px;padding:0}
.campo .ayuda{font-size:13.5px;color:var(--muted);margin:0}
.campo input,.campo select,.campo textarea{width:100%;font:400 16px/1.4 var(--ft);color:var(--ink);background:var(--noche);border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px;min-height:50px;transition:border-color .2s,box-shadow .2s;appearance:none;-webkit-appearance:none}
.campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A59D90' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:40px}
.campo textarea{min-height:120px;resize:vertical}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:#44566B}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(197,198,200,.22)}
.campo [aria-invalid="true"]{border-color:var(--alarma)}
.campo .error{display:none;margin:0;font-size:14px;color:var(--alarma)}
.campo.mal .error{display:block}
.opciones{display:flex;flex-wrap:wrap;gap:8px;border:0;margin:0;padding:0}
.opciones legend{margin-bottom:8px}
.opcion{position:relative}
.opcion input{position:absolute;opacity:0;width:1px;height:1px}
.opcion span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1.5px solid var(--line);border-radius:var(--r);font:600 15px var(--fd);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.opcion input:checked+span{border-color:var(--accent);background:rgba(197,198,200,.1);color:var(--accent)}
.opcion input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.acepto{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:14.5px;color:var(--muted)}
.campo .acepto input{width:22px;height:22px;min-height:0;padding:0;margin:1px 0 0;border-radius:4px;appearance:auto;-webkit-appearance:checkbox;accent-color:var(--accent);background:none}
.form .b[type="submit"]{justify-self:start}
.form[data-enviando] .b[type="submit"]{opacity:.7;pointer-events:none}
.exito{display:none;padding:26px;border:1px solid var(--ok);border-radius:14px;background:rgba(70,211,142,.06)}
.exito.on{display:block;animation:linea .5s var(--e-out)}
.exito h3{display:flex;align-items:center;gap:10px;color:var(--ok);font:700 24px/1.1 var(--fd);text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px}
.exito p{margin:0 0 14px;color:var(--hueso)}
.exito .mono{font-size:13px;color:var(--muted)}
.aviso-demo{font-size:13px;color:var(--muted);margin:0}
.caja-form{padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:14px;background:var(--surface)}

/* pestañas (clientes) */
.pest{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.pest button{min-height:48px;padding:0 18px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font:700 16px var(--fd);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;margin-bottom:-1px;white-space:nowrap}
.pest button[aria-selected="true"]{color:var(--hueso);border-bottom-color:var(--accent)}
.pest button:hover{color:var(--hueso)}
[role="tabpanel"][hidden]{display:none}

/* ── Blog (Consejos VPS) ────────────────────────────────────────────────── */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(18px,2vw,26px)}
@media (min-width:700px){.art-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.art-grid{grid-template-columns:1.4fr 1fr 1fr}.art-grid .tarj:first-child{grid-row:span 2}.art-grid.tres .tarj:first-child{grid-row:auto}}
.tarj{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;background:var(--noche);transition:border-color .2s,transform .25s var(--e-out)}
.tarj:hover,.tarj:focus-visible{border-color:#4E6177;transform:translateY(-3px)}
.tarj .cam,.tarj .diag{border:0;border-radius:0;border-bottom:1px solid var(--line)}
.tarj-t{display:flex;flex-direction:column;gap:10px;padding:22px 22px 24px;flex:1}
.tarj-t .meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 11px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tarj-t .meta b{color:var(--accent);font-weight:500}
.tarj-t h3{font:700 clamp(22px,2vw,27px)/1.05 var(--fd);text-transform:uppercase;letter-spacing:.02em;margin:0}
.art-grid .tarj:first-child .tarj-t h3{font-size:clamp(26px,2.8vw,38px)}
.tarj-t p{margin:0;color:var(--muted);font-size:15.5px}
.tarj-t .ir{margin-top:auto;padding-top:10px;font:700 14px var(--fd);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}

.articulo{max-width:760px}
.articulo h2{font:700 clamp(var(--t-2),3vw,var(--t-3))/1.04 var(--fd);text-transform:uppercase;letter-spacing:.015em;margin:1.8em 0 .5em}
.articulo h3{font:700 22px/1.15 var(--fd);text-transform:uppercase;letter-spacing:.03em;margin:1.6em 0 .4em}
.articulo p,.articulo li{font-size:18.5px;line-height:1.7;color:#DCE2E8}
.articulo ul,.articulo ol{padding-left:1.2em;margin:0 0 1.2em}
.articulo li{margin-bottom:.5em}
.articulo li::marker{color:var(--accent)}
.articulo blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:3px solid var(--accent);font:600 clamp(22px,2.4vw,28px)/1.25 var(--fd);letter-spacing:.01em}
.articulo blockquote cite{display:block;margin-top:10px;font:500 12px var(--fm);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.articulo a{color:var(--accent)}
.articulo .dato{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:baseline;margin:1.6em 0;padding:22px 24px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.articulo .dato b{font:700 clamp(40px,5vw,60px)/.9 var(--fd);color:var(--cifra)}
.articulo .dato p{margin:0;font-size:16px;color:var(--muted)}
.articulo .dato cite{display:block;margin-top:6px;font:500 11px var(--fm);font-style:normal;letter-spacing:.06em}
.articulo .lista-ver{list-style:none;padding:0;counter-reset:v}
.articulo .lista-ver li{counter-increment:v;position:relative;padding:14px 0 14px 54px;border-top:1px solid var(--line);margin:0}
.articulo .lista-ver li::before{content:counter(v,decimal-leading-zero);position:absolute;left:0;top:16px;font:500 13px var(--fm);color:var(--accent)}
.art-lado{display:grid;gap:18px;align-content:start}
.fuentes{margin-top:48px;padding-top:22px;border-top:1px solid var(--line)}
.fuentes .fuentes-t{color:var(--muted);margin:0 0 12px}
.fuentes ol{padding-left:1.2em}
.fuentes li{font-size:14px!important;line-height:1.5!important;color:var(--muted)!important}
.fuentes a{color:var(--hueso)!important;word-break:break-word}
.art-cab .meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font:500 12px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie{background:var(--band);color:var(--on-band);padding:clamp(56px,7vw,96px) 0 calc(28px + env(safe-area-inset-bottom))}
@media (max-width:767px){.pie{padding-bottom:110px}}
.pie-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:768px){.pie-grid{grid-template-columns:1.2fr 1fr 1fr}}
@media (min-width:1100px){.pie-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}}
.pie .marca svg{width:56px;height:62px}
.pie .marca b{font-size:22px}
.pie .marca small{color:var(--band-muted)}
.pie p{color:var(--band-muted);font-size:15px}
.pie-t{font:500 11px var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pie ul a{display:inline-flex;align-items:center;min-height:40px;text-decoration:none;color:var(--hueso);font-size:15.5px;white-space:nowrap}
.pie ul a:hover{color:var(--accent)}
.pie-contacto a{display:flex;flex-direction:column;min-height:44px;justify-content:center;text-decoration:none;padding:4px 0}
.pie-contacto a span{font:500 10.5px var(--fm);letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted)}
.pie-contacto a b{font:500 16px var(--fm);color:var(--hueso);white-space:nowrap}
.pie-contacto a:hover b{color:var(--accent)}
.pie-legal{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;margin-top:56px;padding-top:22px;border-top:1px solid rgba(238,241,244,.16);font-size:13.5px;color:var(--band-muted)}
.pie-prop{white-space:nowrap}
@media (max-width:699px){.pie-sep{display:none}.pie-prop{display:block}}
.pie-legal ul{display:flex;flex-wrap:wrap;gap:4px 22px}
.pie-legal ul a{min-height:36px;font-size:13.5px;color:var(--band-muted)}
.pie-grupo{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font:500 11px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--band-muted)}

/* ── Revelados ──────────────────────────────────────────────────────────── */
html.js [data-rev]{opacity:0;transform:translateY(22px)}
html.js [data-rev].visto{opacity:1;transform:none;transition:opacity .8s var(--e-out),transform .9s var(--e-out);transition-delay:calc(var(--i,0) * 70ms)}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
.barra{view-transition-name:barra}
.estado{view-transition-name:estado}

/* 404 */
.e404{min-height:calc(100svh - var(--barra-h) - var(--estado-h));display:grid;align-items:center}
.e404 .cifra{font-size:clamp(120px,22vw,300px);color:var(--line)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js [data-rev]{opacity:1;transform:none}
  .punto{animation:none}
  .heroe-medio .vid{transform:none!important}
}
@media print{.estado,.barra,.abajo,.menu,.heroe-medio,body::after{display:none!important}body{background:#fff;color:#000}}

/* holgura de la máscara de SplitText: con interlineado < 1 cortaba g, y, p y las tildes */
.d .ln-mask,.d [class*="-mask"]{padding-block:.08em .16em;margin-block:-.08em -.16em}

/* pulido: respuesta al toque y sin «hover pegado» en pantallas táctiles */
.tipo:active,.zona:active,.modulos .m:active,.tarj:active,.tabla-ac button:active{transform:scale(.985)}
.tipo,.zona,.modulos .m{transition-property:background-color,border-color,color,transform;transition-duration:.2s;transition-timing-function:var(--e-out)}
@media (hover:none){
  .tarj:hover{transform:none;border-color:var(--line)}
  a:hover>.flecha{transform:none}
  .b-wa:hover{box-shadow:none}
}