@font-face{font-family:"Geist";src:url("/fuentes/geist.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fuentes/jetbrains-mono.woff2") format("woff2");font-weight:100 800;font-display:swap}
:root{
  --bg:#020617;--p1:rgba(15,23,42,.86);--p2:rgba(30,41,59,.92);
  --line:rgba(6,182,212,.30);--hair:rgba(148,163,184,.16);
  --cy:#06b6d4;--cy2:#22d3ee;--blue:#0ea5e9;--ok:#22c55e;--vi:#9e74ff;--amb:#f59e0b;
  --tx:#e2e8f0;--tx-s:#f8fafc;--mu:#94a3b8;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:4px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s6:24px;--s8:32px;--s12:48px;--s16:64px;--s24:96px;
  --glow:0 0 20px rgba(6,182,212,.20);--glow-h:0 0 32px rgba(6,182,212,.42);
  --ease:cubic-bezier(.23,1,.32,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:#164e63 var(--bg)}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;color:var(--tx);caret-color:var(--cy2);
  font:400 1rem/1.65 "Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:radial-gradient(900px 520px at 12% -8%,rgba(6,182,212,.13),transparent 60%),radial-gradient(700px 480px at 100% 4%,rgba(158,116,255,.08),transparent 60%),var(--bg);background-repeat:no-repeat}
::selection{background:var(--cy2);color:#020617}
a{color:var(--cy2);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--cy2);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--s4)}
.mono,.lab{font-family:var(--mono)}
.lab{font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.skip{position:absolute;left:-999px;top:var(--s2);background:var(--cy2);color:#020617;padding:var(--s2) var(--s4);border-radius:2px;z-index:20;font-family:var(--mono)}
.skip:focus{left:var(--s2)}

/* barra superior */
header.top{position:sticky;top:0;z-index:10;border-bottom:1px solid var(--line);background:rgba(2,6,23,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
@media (prefers-reduced-transparency:reduce){header.top{background:var(--bg);backdrop-filter:none}}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px;flex-wrap:wrap;padding-block:var(--s2)}
.brand{display:inline-flex;align-items:center;gap:var(--s3);font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;color:var(--tx-s);text-decoration:none}
.brand svg{width:24px;height:24px;flex:none;filter:drop-shadow(0 0 6px rgba(34,211,238,.6))}
.brand .t span{color:var(--cy2)}
nav.main{display:flex;gap:0 var(--s6);flex-wrap:wrap}
nav.main a{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tx);text-decoration:none;padding:var(--s3) 0;border-bottom:1px solid transparent;transition:color 140ms var(--ease),text-shadow 140ms var(--ease)}
nav.main a:hover,nav.main a[aria-current]{color:var(--cy2);text-shadow:0 0 12px rgba(34,211,238,.7);border-bottom-color:var(--cy2)}
@media(max-width:560px){nav.main .x{display:none}nav.main{gap:0 var(--s3)}nav.main a{font-size:.6875rem;letter-spacing:.08em}}

main{flex:1;padding-block:var(--s12) var(--s24)}
h1,h2,h3{line-height:1.1;letter-spacing:-.025em;text-wrap:balance;margin:0;color:var(--tx-s)}
h1{font-size:clamp(2.1rem,5.6vw,4.4rem);font-weight:700}
h1 em{font-style:normal;color:var(--cy2);text-shadow:0 0 28px rgba(34,211,238,.45)}
h2{font-size:clamp(1.35rem,2.8vw,1.85rem);font-weight:650;margin-top:var(--s24)}
h2::before{content:"";display:block;width:32px;height:2px;background:var(--cy2);box-shadow:0 0 12px rgba(34,211,238,.8);margin-bottom:var(--s4)}
h3{font-size:1.125rem;font-weight:650;margin-top:var(--s8)}
p{max-width:68ch;margin:var(--s3) 0 0}
.lead{font-size:1.2rem;color:var(--mu);max-width:54ch;margin-top:var(--s4);line-height:1.55}
.meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--mu);margin-top:var(--s3)}

/* botones */
.btns{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s8)}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--s6);border-radius:2px;font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform 140ms var(--ease),box-shadow 140ms var(--ease),background-color 140ms var(--ease)}
.btn.p{border:2px solid var(--cy);color:var(--cy2);background:transparent;box-shadow:0 0 12px rgba(6,182,212,.4)}
.btn.s{border:1px solid var(--hair);color:var(--tx);background:transparent}
.btn:active{transform:scale(.97)}
.btn.p:active{box-shadow:0 0 6px rgba(6,182,212,.5);background:rgba(6,182,212,.2)}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
@media (hover:hover) and (pointer:fine){.btn.p:hover{background:rgba(6,182,212,.12);box-shadow:0 0 24px rgba(6,182,212,.6)}.btn.s:hover{border-color:var(--cy);color:var(--cy2)}}
button.btn{font-family:var(--mono)}

/* panel HUD con esquinas en L */
.panel{position:relative;background:var(--p1);border:1px solid var(--line);border-radius:var(--r);padding:var(--s6);box-shadow:var(--glow);transition:box-shadow 160ms var(--ease),border-color 160ms var(--ease)}
.panel::before{content:"";position:absolute;inset:-1px;pointer-events:none;border-radius:var(--r);
  --c:var(--cy2);
  background:
   linear-gradient(var(--c),var(--c)) top left/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) top left/2px 16px no-repeat,
   linear-gradient(var(--c),var(--c)) top right/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) top right/2px 16px no-repeat,
   linear-gradient(var(--c),var(--c)) bottom left/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/2px 16px no-repeat,
   linear-gradient(var(--c),var(--c)) bottom right/16px 2px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/2px 16px no-repeat}
@media (hover:hover) and (pointer:fine){a.panel:hover,.panel.vivo:hover{border-color:rgba(34,211,238,.65);box-shadow:var(--glow-h)}}
a.panel{display:block;color:var(--tx);text-decoration:none}

/* luz de estado */
.luz{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mu)}
.luz i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.luz i::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--ok);animation:pulso 2s ease-out infinite}
@keyframes pulso{from{transform:scale(1);opacity:.9}to{transform:scale(3);opacity:0}}

/* portada */
.hero{display:grid;gap:var(--s12);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hero{grid-template-columns:1.05fr .95fr;gap:var(--s16)}}
.hero .luz{margin-bottom:var(--s6)}
.lecturas{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:var(--s8);margin:var(--s12) 0 0;padding:0}
.lecturas div{display:flex;flex-direction:column;gap:2px}
.lecturas dt{order:2;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.lecturas dd{order:1;margin:0;font-family:var(--mono);font-size:clamp(1.5rem,3.4vw,2.25rem);font-weight:700;color:var(--cy2);font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(34,211,238,.4)}

/* radar de ciudad (firma) */
.radar{padding:var(--s3);overflow:hidden}
.radar .cuadro{position:relative;overflow:hidden;border-radius:2px;background:radial-gradient(circle at 50% 45%,rgba(6,182,212,.08),transparent 70%)}
.mapa{display:block;width:100%;height:auto;max-height:min(70vh,640px)}
.m-borde{fill:none;stroke:rgba(34,211,238,.34);stroke-width:.8;stroke-linejoin:round}
.m-rest{fill:none;stroke:var(--vi);stroke-width:2.6;stroke-linecap:round;opacity:.78}
.m-ferr{fill:none;stroke:var(--cy2);stroke-width:3.2;stroke-linecap:round}
.barrido{position:absolute;inset:0;overflow:hidden;pointer-events:none;mix-blend-mode:screen}
.barrido::before{content:"";position:absolute;left:50%;top:50%;width:170%;aspect-ratio:1;margin:-85% 0 0 -85%;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 296deg,rgba(34,211,238,.16) 340deg,rgba(34,211,238,.55) 360deg);
  animation:giro 7s linear infinite}
.radar.fuera .barrido::before{animation-play-state:paused}
@keyframes giro{to{transform:rotate(360deg)}}
.radar .pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);padding:var(--s3) var(--s2) var(--s1)}
.leyenda{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:var(--tx);text-transform:uppercase}
.leyenda i{width:8px;height:8px;border-radius:50%;display:inline-block}
.leyenda .a{background:var(--cy2);box-shadow:0 0 8px var(--cy2)}
.leyenda .b{background:var(--vi);box-shadow:0 0 8px var(--vi)}

/* categorías con barras de escaneo */
.cats{display:grid;gap:var(--s4);grid-template-columns:1fr;margin-top:var(--s6)}
@media(min-width:760px){.cats{grid-template-columns:1fr 1fr}}
.cat strong{display:block;font-size:1.5rem;letter-spacing:-.02em;color:var(--tx-s)}
.cat .num{font-family:var(--mono);font-size:2.25rem;font-weight:700;color:var(--cy2);font-variant-numeric:tabular-nums;margin-top:var(--s3);display:block;text-shadow:0 0 16px rgba(34,211,238,.35)}
.cat .u{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.bars{display:grid;gap:var(--s3);margin-top:var(--s6)}
.bar{display:grid;grid-template-columns:7.5rem 1fr 3rem;align-items:center;gap:var(--s3);font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mu)}
.bar b{font-weight:700;color:var(--tx);text-align:right;font-variant-numeric:tabular-nums}
.bar .pista{height:6px;border-radius:2px;background:rgba(6,182,212,.15);overflow:hidden;position:relative}
.bar .pista i{display:block;height:100%;width:var(--v);min-width:2px;background:linear-gradient(90deg,var(--cy),var(--cy2));position:relative;overflow:hidden}
.bar .pista i::after{content:"";position:absolute;inset:0;width:24px;background:rgba(255,255,255,.4);transform:translateX(-30px);animation:scan 3s ease-in-out infinite}
@keyframes scan{0%{transform:translateX(-30px)}60%,100%{transform:translateX(220px)}}
.nota{font-size:.875rem;color:var(--mu);max-width:none}

/* búsqueda */
.search{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s8);max-width:600px}
.search label{font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cy2)}
input,textarea{font:inherit;color:var(--tx-s);background:rgba(2,6,23,.7);border:1px solid var(--line);border-radius:2px;min-height:52px;padding:0 var(--s4);transition:border-color 140ms var(--ease),box-shadow 140ms var(--ease)}
textarea{padding:var(--s3) var(--s4)}
input::placeholder,textarea::placeholder{color:var(--mu)}
input:focus,textarea:focus{outline:none;border-color:var(--cy2);box-shadow:0 0 0 1px var(--cy2),0 0 18px rgba(34,211,238,.35)}

/* listas */
ul.lista{list-style:none;margin:var(--s6) 0 0;padding:0;border-top:1px solid var(--hair)}
ul.lista li{border-bottom:1px solid var(--hair)}
ul.lista a{display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline;padding:var(--s3) var(--s3);text-decoration:none;color:var(--tx);transition:background-color 140ms var(--ease)}
ul.lista strong{font-weight:600;transition:color 140ms var(--ease)}
ul.lista small{color:var(--mu);text-align:right;font-family:var(--mono);font-size:.75rem;letter-spacing:.02em}
@media (hover:hover) and (pointer:fine){ul.lista a:hover{background:rgba(6,182,212,.08)}ul.lista a:hover strong{color:var(--cy2)}}
@media(max-width:560px){ul.lista a{flex-direction:column;gap:2px}ul.lista small{text-align:left}}
.more{margin-top:var(--s6)}
ul.puntos{max-width:68ch;margin:var(--s3) 0 0;padding-left:1.25rem}
ul.puntos li{margin:var(--s2) 0}
ul.puntos li::marker{color:var(--cy2)}
article.guia p,article.guia ul.puntos{font-size:1.0625rem;line-height:1.75}
article.guia h2{margin-top:var(--s16)}

/* tablas */
table{border-collapse:collapse;width:100%;max-width:640px;margin-top:var(--s4)}
th,td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--hair)}
th{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);font-weight:700}
td:last-child,th:last-child{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--cy2)}

/* ficha */
.ficha dl{display:grid;grid-template-columns:max-content 1fr;gap:var(--s3) var(--s6);margin:var(--s6) 0 0;max-width:640px}
.ficha dt{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mu);padding-top:.3em}
.ficha dd{margin:0}
.vacio{color:var(--mu)}
.crumbs{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mu);margin-bottom:var(--s6)}
.crumbs a{color:var(--mu)}

/* avisos (advertencia = ámbar) */
.aviso{margin-top:var(--s8);padding:var(--s4) var(--s6);background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.38);border-radius:var(--r);max-width:68ch}
.aviso p{margin:0}
.aviso strong{color:var(--amb)}
form.reclamar{display:grid;gap:var(--s4);max-width:520px;margin-top:var(--s6)}
form.reclamar label{display:flex;flex-direction:column;gap:var(--s2);font-family:var(--mono);font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cy2)}
form.reclamar label input{font-family:"Geist",system-ui,sans-serif;font-size:1rem;letter-spacing:0;text-transform:none}

footer.pie{border-top:1px solid var(--line);padding-block:var(--s8);color:var(--mu);font-size:.875rem}
footer.pie .wrap{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s8);justify-content:space-between}
footer.pie p{margin:0;max-width:60ch}
footer.pie nav{display:flex;gap:var(--s6);flex-wrap:wrap}
footer.pie nav a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase}
.ad-slot{margin:var(--s12) 0 0;min-height:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .barrido{display:none}
}