@charset "utf-8";
/* WawaInfo · sistema de diseño «Pacífico» (2026-11-08, sigue la «Portada v5» que Fiorella armó en Claude Design;
   reemplaza a «Humboldt»). Arena clara de fondo, tinta casi negra y franjas en azul noche (el mar frente a la costa).
   El logo de curvas de nivel se conserva.
   Reglas que el diseño no rompe:
   - El color (y la trama) identifica el FENÓMENO, nunca un nivel de riesgo. Los niveles de SENAMHI se dicen con palabras
     y con barras de 1 a 4, nunca pintando la página de rojo.
   - Los estados de la información (al día, atrasada, caída, error) usan forma + texto, no solo color.
   - Una sola familia para leer y titular (Archivo, de ancho variable: angosta en cifras) y Newsreader para notas
     que explican. Todas alojadas aquí: ninguna petición a terceros.
   Documentación: producto/17_rediseno_integral.md */

@font-face{font-family:"WI Archivo";src:url("/static/fonts/archivo.woff2") format("woff2");font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"WI Newsreader";src:url("/static/fonts/newsreader.woff2") format("woff2");font-weight:400 600;font-display:swap}
/* Se conservan para páginas que todavía las nombran directamente */
@font-face{font-family:"WI Anybody";src:url("/static/fonts/anybody.woff2") format("woff2");font-weight:100 900;font-stretch:50% 150%;font-display:swap}
@font-face{font-family:"WI Atkinson";src:url("/static/fonts/atkinson-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"WI Atkinson";src:url("/static/fonts/atkinson-700.woff2") format("woff2");font-weight:600 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  /* arena y tinta */
  --paper:#f2eee5; --paper-2:#e9e3d6; --paper-3:#dfd8c9; --sheet:#fbf9f4;
  --ink:#15171b; --ink-2:#3d4046; --ink-3:#5f5e59; --rule:#cfc6b4; --rule-2:#dfd8c9;
  /* noche del Pacífico (franjas) + azul del logo */
  --noche:#0b1f40; --noche-2:#0f2d5c; --noche-line:#3c5a86; --on-noche:#ece7dc; --on-noche-2:#a9bcd6;
  --azul:#0b1f40; --azul-2:#1d4e89; --celeste:#7cc0e3; --celeste-2:#dbe6f6; --on-azul:#ece7dc; --on-azul-2:#a9bcd6;
  --humboldt:#0b1f40; --acento:#1d4e89; --logo:#1d4e89; --veta:#1e3a66;
  --link:#1d4e89; --focus:#1d4e89;
  /* relieve (perfiles de altitud): estratos de arena, nunca fenómeno */
  --e1:#e6dfd0; --e2:#d8cfbc; --e3:#c7bca5; --e4:#b3a78e;
  /* fenómenos (color + trama). Nunca nivel. Validados con la skill dataviz (ver producto/13_rediseno_editorial.md). */
  --f-lluvia:#1052b0; --f-inundacion:#3b46a6; --f-mov_masa:#9c3e3c; --f-erosion:#56692a; --f-incendio:#c4520f;
  --f-calor:#b27d00; --f-frio:#209481; --f-viento:#9b72d6; --f-otro:#5f6268;
  /* tintes de fondo por fenómeno (solo planos, nunca texto) y sus versiones sobre la franja noche */
  --t-lluvia:#dbe6f6; --t-calor:#f6e7bf; --t-frio:#d3efe6; --t-viento:#e9e0f6; --t-mov_masa:#f1dcd9;
  --n-lluvia:#7cc0e3; --n-calor:#e6c35c; --n-frio:#5fd0b0; --n-viento:#c3a6f0; --n-mov_masa:#f0a493;
  /* estados de la información y alertas de sistema */
  --st-info:#1d4e89; --st-info-bg:#dbe6f6; --st-prec:#7a5900; --st-prec-bg:#f3e2b3;
  --st-adv:#9a420e; --st-adv-bg:#f5dcc8; --st-crit:#962020; --st-crit-bg:#f3d6d2;
  --st-ok:#2e6337;
  /* mapa */
  --sea:#dbe3e6; --land:#f7f4ee; --land-line:#b9b09c; --dep-line:#6f6a5f;
  /* tipografía */
  --ff-display:"WI Archivo","Arial Narrow",system-ui,sans-serif;
  --ff-ui:"WI Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ff-text:"WI Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ff-note:"WI Newsreader",Georgia,serif;
  --ff-mono:"WI Archivo",system-ui,sans-serif;
  /* escala (móvil primero; los titulares crecen con la pantalla) */
  --t-xs:12px; --t-sm:14px; --t-md:16px; --t-lg:18px; --t-xl:21px;
  --t-2xl:clamp(24px,4.2vw,32px); --t-3xl:clamp(28px,5.6vw,44px); --t-4xl:clamp(38px,8vw,72px); --t-num:clamp(44px,10vw,88px);
  /* espacio (base 4) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --gut:18px; --maxw:1240px; --read:680px; --r:0px; --r-card:22px; --r-pill:999px;
  --mast-h:60px;
}
@media (min-width:760px){:root{--gut:28px}}
@media (min-width:1100px){:root{--gut:56px}}

/* Pacífico de noche */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --paper:#10141b; --paper-2:#19202b; --paper-3:#252e3b; --sheet:#151b24;
  --ink:#ece7dc; --ink-2:#c4c0b6; --ink-3:#9a988f; --rule:#343d4b; --rule-2:#252e3b;
  --noche:#081730; --noche-2:#0c2449; --noche-line:#2c4a75;
  --azul:#081730; --azul-2:#8fb8ea; --celeste:#7cc0e3; --celeste-2:#16273d;
  --humboldt:#081730; --acento:#8fb8ea; --logo:#8fb8ea; --veta:#2c4a75;
  --link:#9cc4f0; --focus:#9cc4f0;
  --e1:#1c222c; --e2:#232a35; --e3:#2b3340; --e4:#343d4b;
  --f-lluvia:#415ac4; --f-inundacion:#a3acf2; --f-mov_masa:#b6492c; --f-erosion:#b3c67b; --f-incendio:#f2915f;
  --f-calor:#ba8d21; --f-frio:#28ac8c; --f-viento:#a282d0; --f-otro:#a6a9af;
  --t-lluvia:#16273d; --t-calor:#2d2610; --t-frio:#12302a; --t-viento:#251d36; --t-mov_masa:#341b17;
  --st-info:#9cc4f0; --st-info-bg:#14273d; --st-prec:#e6c35c; --st-prec-bg:#2d2610; --st-adv:#f2a070; --st-adv-bg:#36200f;
  --st-crit:#f19a92; --st-crit-bg:#3a1714; --st-ok:#93d39f;
  --sea:#0f1d26; --land:#1a2029; --land-line:#3c4654; --dep-line:#7b8492;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#10141b; --paper-2:#19202b; --paper-3:#252e3b; --sheet:#151b24;
  --ink:#ece7dc; --ink-2:#c4c0b6; --ink-3:#9a988f; --rule:#343d4b; --rule-2:#252e3b;
  --noche:#081730; --noche-2:#0c2449; --noche-line:#2c4a75;
  --azul:#081730; --azul-2:#8fb8ea; --celeste:#7cc0e3; --celeste-2:#16273d;
  --humboldt:#081730; --acento:#8fb8ea; --logo:#8fb8ea; --veta:#2c4a75;
  --link:#9cc4f0; --focus:#9cc4f0;
  --e1:#1c222c; --e2:#232a35; --e3:#2b3340; --e4:#343d4b;
  --f-lluvia:#415ac4; --f-inundacion:#a3acf2; --f-mov_masa:#b6492c; --f-erosion:#b3c67b; --f-incendio:#f2915f;
  --f-calor:#ba8d21; --f-frio:#28ac8c; --f-viento:#a282d0; --f-otro:#a6a9af;
  --t-lluvia:#16273d; --t-calor:#2d2610; --t-frio:#12302a; --t-viento:#251d36; --t-mov_masa:#341b17;
  --st-info:#9cc4f0; --st-info-bg:#14273d; --st-prec:#e6c35c; --st-prec-bg:#2d2610; --st-adv:#f2a070; --st-adv-bg:#36200f;
  --st-crit:#f19a92; --st-crit-bg:#3a1714; --st-ok:#93d39f;
  --sea:#0f1d26; --land:#1a2029; --land-line:#3c4654; --dep-line:#7b8492;
}

/* ---------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--t-md)/1.5 var(--ff-ui);font-kerning:normal;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:700;text-wrap:balance}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--celeste);color:#0b1b33}
.sr,.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;z-index:3000;background:var(--ink);color:var(--paper);padding:8px 12px;font-weight:600}
.skip:focus{top:8px}
.num,.tnum{font-variant-numeric:tabular-nums lining-nums}
.mono{font-family:var(--ff-mono);font-size:.86em;letter-spacing:0}

/* ---------- cabecera: franja noche con la marca y un menú corto (Hoy · Tu calle · Mapa · Más) */
.mast{background:var(--noche);color:var(--on-noche);position:sticky;top:0;z-index:1100;border-bottom:1px solid #1e3a66}
.mast-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:clamp(12px,3vw,40px);min-height:var(--mast-h)}
.mast a{color:inherit}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--on-noche);flex:0 0 auto}
.brand svg{width:28px;height:28px;flex:0 0 auto;color:var(--on-noche)}
.brand .wm{font-family:var(--ff-display);font-size:22px;line-height:1;letter-spacing:-.01em;font-stretch:78%;font-weight:850}
.brand .wm i{font-style:normal;font-weight:400;font-stretch:112%;letter-spacing:0;color:var(--celeste)}
.nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);margin-left:auto;font-size:15px;font-weight:600;white-space:nowrap}
.nav>a,.nav .mas>button{color:var(--on-noche-2);text-decoration:none;padding:6px 0;min-height:44px;display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font:inherit}
.nav>a:hover,.nav .mas>button:hover{color:var(--on-noche)}
.nav>a[aria-current="page"],.nav .mas.on>button{color:var(--on-noche);box-shadow:inset 0 -2px 0 var(--celeste)}
.nav .mas{position:relative}
.nav .mas ul{position:absolute;right:0;top:100%;margin:0;padding:8px 0;list-style:none;min-width:220px;background:var(--noche);border:1px solid var(--noche-line);display:none}
.nav .mas.open ul{display:block}
.nav .mas li a{display:block;padding:10px 18px;color:var(--on-noche);text-decoration:none;font-weight:500}
.nav .mas li a:hover,.nav .mas li a[aria-current="page"]{background:var(--noche-2);color:#fff}
@media (max-width:420px){.brand .wm{font-size:20px}.nav{gap:12px;font-size:14.5px}}

/* ---------- pie */
.foot-site{margin-top:var(--s8);background:var(--noche);color:var(--on-noche)}
.foot-site a{color:var(--on-azul)}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:var(--s6) var(--gut) var(--s7);display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.foot-in{grid-template-columns:2fr 1fr 1fr}}
.foot-site h2{font-family:var(--ff-display);font-size:22px;font-weight:800;font-stretch:70%;color:var(--on-azul);margin-bottom:var(--s2)}
.foot-site p,.foot-site li{font-size:var(--t-sm);color:var(--on-azul-2)}
.foot-site ul{list-style:none;margin:0;padding:0}.foot-site li{padding:3px 0}
.foot-site .about{font-family:var(--ff-text);font-size:var(--t-lg);line-height:1.45;color:var(--on-azul);max-width:46ch}

/* ---------- contenedores */
.page{max-width:var(--maxw);margin:0 auto;padding:var(--s5) var(--gut) var(--s7)}
.read{max-width:var(--read);margin:0 auto;padding:var(--s5) var(--gut) var(--s7)}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}

/* ---------- tipografía editorial */
.kicker{font-family:var(--ff-mono);font-size:11.5px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.kicker b{font-weight:600;color:var(--ink)}
.display{font-family:var(--ff-display);font-weight:800;font-stretch:76%;line-height:.98;letter-spacing:-.012em}
.h-xl{font-family:var(--ff-display);font-weight:800;font-stretch:76%;font-size:var(--t-4xl);line-height:.96;letter-spacing:-.015em}
.h-lg{font-family:var(--ff-display);font-weight:800;font-stretch:80%;font-size:var(--t-3xl);line-height:1;letter-spacing:-.01em}
.h-md{font-family:var(--ff-display);font-weight:750;font-stretch:86%;font-size:var(--t-2xl);line-height:1.08}
.h-sm{font-family:var(--ff-ui);font-weight:700;font-size:var(--t-lg);line-height:1.25}
.lede{font-family:var(--ff-text);font-size:clamp(18px,2.4vw,21px);line-height:1.42;color:var(--ink-2);max-width:58ch}
.prose{font-family:var(--ff-text);font-size:var(--t-lg);line-height:1.55;color:var(--ink)}
.prose p+p{margin-top:.8em}
.small{font-size:var(--t-sm)}
.muted{color:var(--ink-3)}
.bignum{font-family:var(--ff-display);font-weight:800;font-stretch:72%;font-size:var(--t-num);line-height:.86;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}

/* Encabezado de sección numerado: «02 —— Avisos vigentes» */
.sec{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:4px 12px;margin:var(--s7) 0 var(--s4);padding-top:var(--s2);border-top:3px solid var(--ink)}
.sec .no{font-family:var(--ff-mono);font-size:12px;color:var(--ink-3);padding-bottom:3px}
.sec h2{font-family:var(--ff-display);font-weight:800;font-stretch:80%;font-size:var(--t-2xl);line-height:1.05;letter-spacing:-.005em}
.sec .aside{grid-column:1/-1;font-size:var(--t-sm);color:var(--ink-3)}
.sec.thin{border-top-width:1px}
.rule{border:0;border-top:1px solid var(--rule);margin:var(--s5) 0}
.rule.ink{border-top:1px solid var(--ink)}
.rule.thick{border-top:3px solid var(--ink)}

/* ---------- botones (rectos, tinta) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:1.5px solid var(--ink);
  border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font-weight:650;font-size:var(--t-md);line-height:1.15;text-decoration:none;cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--azul);border-color:var(--azul);color:var(--on-azul)}
.btn.line,.btn.ghost{background:transparent;color:var(--ink)}
.btn.line:hover,.btn.ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.sm{min-height:36px;padding:6px 12px;font-size:var(--t-sm)}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link{background:none;border:0;padding:8px 0;min-height:36px;color:var(--link);cursor:pointer;font-size:var(--t-sm);font-weight:650;text-decoration:underline;text-underline-offset:.2em}
.more{font-weight:650;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:1px}
.more::after{content:" \2192";font-family:var(--ff-mono)}

/* segmentado / filtros: casillas rectas con tinta */
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:var(--r);min-width:0;background:transparent}
.seg button{border:0;border-left:1.5px solid var(--ink);background:none;padding:7px 12px;min-height:36px;cursor:pointer;font-size:13.5px;font-weight:650;color:var(--ink);white-space:nowrap}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.seg button:hover:not([aria-pressed="true"]):not([aria-selected="true"]){background:var(--paper-2)}

/* ---------- campos */
.field{display:flex;align-items:stretch;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--sheet)}
.field input{flex:1;min-width:0;border:0;background:transparent;padding:12px 14px;font-size:17px;outline:none}
.field:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.field .btn{border-radius:0;border-width:0 0 0 1.5px;margin:0}
label.lab{display:block;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
select.sel,input.inp{border:1.5px solid var(--ink);border-radius:var(--r);background:var(--sheet);padding:7px 8px;min-height:38px;width:100%;min-width:0}

/* ---------- etiquetas */
.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--ff-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--ink-3);border-radius:var(--r);padding:1px 6px;line-height:1.5;white-space:nowrap;vertical-align:2px}
.tag.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag.azul{border-color:var(--azul-2);color:var(--azul-2)}

/* Trama de fenómeno: muestra de leyenda cartográfica. Color + patrón (se distingue sin color). */
.sw{display:inline-block;width:14px;height:14px;flex:0 0 auto;border:1.5px solid var(--c,var(--ink));vertical-align:-2px;--c:var(--f-otro);background:var(--c)}
.sw.lg{width:22px;height:22px}
/* .pat: la misma trama del fenómeno en cualquier superficie (barras de la agenda, unidades). Nunca nivel. */
.pat{--c:var(--f-otro);border:1.5px solid var(--c);background:var(--c)}
:is(.sw,.pat).f-lluvia,.f-lluvia{--c:var(--f-lluvia)} :is(.sw,.pat).f-lluvia{background:repeating-linear-gradient(135deg,var(--c) 0 1.6px,transparent 1.6px 4.5px)}
:is(.sw,.pat).f-inundacion,.f-inundacion{--c:var(--f-inundacion)} :is(.sw,.pat).f-inundacion{background:repeating-linear-gradient(0deg,var(--c) 0 1.6px,transparent 1.6px 4.5px)}
:is(.sw,.pat).f-mov_masa,.f-mov_masa{--c:var(--f-mov_masa)} :is(.sw,.pat).f-mov_masa{background:radial-gradient(var(--c) 1.2px,transparent 1.5px) 0 0/5px 5px}
:is(.sw,.pat).f-erosion,.f-erosion{--c:var(--f-erosion)} :is(.sw,.pat).f-erosion{background:repeating-linear-gradient(45deg,var(--c) 0 1.4px,transparent 1.4px 5px),repeating-linear-gradient(135deg,var(--c) 0 1.4px,transparent 1.4px 5px)}
:is(.sw,.pat).f-incendio,.f-incendio{--c:var(--f-incendio)} :is(.sw,.pat).f-incendio{background:var(--c)}
:is(.sw,.pat).f-calor,.f-calor{--c:var(--f-calor)} :is(.sw,.pat).f-calor{background:repeating-linear-gradient(90deg,var(--c) 0 1.6px,transparent 1.6px 4px)}
:is(.sw,.pat).f-frio,.f-frio{--c:var(--f-frio)} :is(.sw,.pat).f-frio{background:repeating-linear-gradient(0deg,var(--c) 0 1.2px,transparent 1.2px 5px),repeating-linear-gradient(90deg,var(--c) 0 1.2px,transparent 1.2px 5px)}
:is(.sw,.pat).f-viento,.f-viento{--c:var(--f-viento)} :is(.sw,.pat).f-viento{background:repeating-linear-gradient(0deg,var(--c) 0 1.4px,transparent 1.4px 3px,var(--c) 3px 3.6px,transparent 3.6px 7px)}
:is(.sw,.pat).f-otro{background:transparent}

/* ---------- estado de la información (forma + texto; nunca solo color) */
.state:is(.ok,.info,.prec,.adv,.crit,.off){display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink-2)}
.state:is(.ok,.info,.prec,.adv,.crit,.off)::before{content:"";width:9px;height:9px;flex:0 0 auto;background:var(--sc,var(--ink-3))}
.state.ok{--sc:var(--st-ok)} .state.ok::before{border-radius:50%}
.state.info{--sc:var(--st-info)} .state.info::before{border-radius:50%}
.state.prec{--sc:var(--st-prec)} .state.prec::before{clip-path:polygon(50% 0,100% 100%,0 100%);width:10px;height:10px}
.state.adv{--sc:var(--st-adv)} .state.adv::before{transform:rotate(45deg);width:8px;height:8px}
.state.crit{--sc:var(--st-crit)} .state.crit::before{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.state.off{--sc:transparent} .state.off::before{border:1.5px solid var(--ink-3)}

/* Avisos del sistema (no son alertas meteorológicas): regla izquierda + fondo tenue + texto */
.alert{border-left:4px solid var(--ac,var(--st-info));background:var(--ab,var(--st-info-bg));padding:10px 14px;font-size:var(--t-sm);color:var(--ink);border-radius:0 var(--r) var(--r) 0}
.alert.info{--ac:var(--st-info);--ab:var(--st-info-bg)}
.alert.prec{--ac:var(--st-prec);--ab:var(--st-prec-bg)}
.alert.adv{--ac:var(--st-adv);--ab:var(--st-adv-bg)}
.alert.crit{--ac:var(--st-crit);--ab:var(--st-crit-bg)}
.alert b:first-child{display:block;font-size:var(--t-sm)}

/* nivel oficial (literal de la fuente): barras en tinta, no en colores de semáforo */
.lvl{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-mono);font-size:11.5px;color:var(--ink-2);white-space:nowrap}
.lvl i{display:inline-flex;gap:2px}
.lvl i b{width:5px;height:12px;border:1.2px solid var(--ink);display:block}
.lvl i b.on{background:var(--ink)}

/* ---------- tablas editoriales */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:3px solid var(--ink)}
table.tbl{border-collapse:collapse;width:100%;font-size:var(--t-sm)}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.tbl th:first-child,.tbl td:first-child{padding-left:0}
.tbl thead th{font-family:var(--ff-mono);font-size:11px;font-weight:400;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--ink);vertical-align:bottom}
.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.grp td{font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-top:18px;background:transparent}
.tbl tbody tr:hover td{background:color-mix(in srgb,var(--paper-2) 60%,transparent)}

/* ---------- lista editorial (filas con regla, sin tarjetas) */
.rows{border-top:1px solid var(--ink)}
.rows>*{border-bottom:1px solid var(--rule);padding:12px 0}
.rows .t{font-weight:650}
.rows .s{color:var(--ink-2);font-size:15px;margin-top:2px}

/* ---------- ficha (panel flotante sobre el mapa) */
.sheet{background:var(--sheet);border:1.5px solid var(--ink);border-radius:var(--r)}

/* ---------- detalle desplegable */
details>summary{cursor:pointer;color:var(--link);font-size:13.5px;font-weight:650;list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:32px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"+";font-family:var(--ff-mono);font-weight:400;width:16px;height:16px;border:1px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:12px;line-height:1}
details[open]>summary::before{content:"\2212"}

/* ---------- carga y vacíos */
.loadline{height:3px;background:var(--paper-3);overflow:hidden;position:relative}
.loadline::after{content:"";position:absolute;inset:0;width:30%;background:var(--azul-2);animation:wi-load 1.1s ease-in-out infinite}
@keyframes wi-load{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.skel{display:block;height:12px;background:var(--paper-3);margin:8px 0;animation:wi-pulse 1.4s ease-in-out infinite}
@keyframes wi-pulse{50%{opacity:.5}}
.empty{border:1px dashed var(--ink-3);padding:14px 16px;color:var(--ink-2);font-size:15px}
.empty b{color:var(--ink)}
.err{border-left:4px solid var(--st-crit);background:var(--st-crit-bg);padding:10px 14px;font-size:var(--t-sm)}

/* ---------- gráficos */
.chart text{font-family:var(--ff-mono);font-size:10.5px;fill:var(--ink-3)}
.chart .grid line{stroke:var(--rule-2)}
.chart .axis line,.chart .axis path{stroke:var(--ink)}
.chart .now{stroke:var(--ink);stroke-dasharray:2 3}

/* ---------- mapas (Leaflet integrado en el lenguaje) */
.leaflet-container{background:var(--sea);font:inherit;font-size:13px}
.leaflet-bar{border:1.5px solid var(--ink)!important;border-radius:var(--r)!important;box-shadow:none!important}
.leaflet-bar a,.leaflet-bar a:hover{background:var(--sheet);color:var(--ink);border-bottom:1px solid var(--ink);border-radius:0!important;width:32px;height:32px;line-height:30px}
.leaflet-bar a:last-child{border-bottom:0}
.leaflet-control-attribution{background:color-mix(in srgb,var(--sheet) 88%,transparent)!important;color:var(--ink-3);font-family:var(--ff-mono);font-size:10px}
.leaflet-control-attribution a{color:var(--ink-2)}
.leaflet-popup-content-wrapper{border-radius:var(--r);border:1.5px solid var(--ink);box-shadow:none;background:var(--sheet);color:var(--ink)}
.leaflet-popup-tip{background:var(--sheet);border:1.5px solid var(--ink);box-shadow:none}
.leaflet-popup-content{font-size:13.5px;line-height:1.4;margin:10px 12px}
.mapframe{position:relative;border:1.5px solid var(--ink);background:var(--sea)}
.mapframe .ticks{position:absolute;inset:0;pointer-events:none;z-index:500;
  background:linear-gradient(to right,var(--ink) 1px,transparent 1px) 0 0/48px 6px repeat-x,linear-gradient(to bottom,var(--ink) 1px,transparent 1px) 0 0/6px 48px repeat-y;opacity:.55}
.maplabel{position:absolute;left:8px;top:8px;z-index:600;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--sheet);border:1px solid var(--ink);padding:2px 6px;color:var(--ink)}

/* ---------- movimiento: sutil y opcional */
@media (prefers-reduced-motion:no-preference){
  .reveal{animation:wi-in .35s ease-out both}
  @keyframes wi-in{from{transform:translateY(6px)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---------- utilidades */
.hide-s{display:none}
@media (min-width:760px){.hide-s{display:initial}.hide-l{display:none}}
.stack>*+*{margin-top:var(--s3)}
.row{display:flex;gap:var(--s2) var(--s3);flex-wrap:wrap;align-items:center}
@media print{.mast,.nav,.foot-site{display:none}body{background:#fff}}
@media (max-width:759px){.nav-in{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent);padding-right:40px}}

/* =====================================================================================================
   EDICIÓN DE DATOS (rediseño editorial, 2026-11-03) · producto/13_rediseno_editorial.md
   Cuatro niveles de lectura, cada uno con su forma:
     N1 Lo importante   → .hl (titular que dice el hallazgo) + .fig (cifra protagonista)
     N2 Lo que significa → .means (una o dos frases, serif)
     N3 Los datos        → .viz (gráfico con título-hallazgo, unidad, periodo, fuente)
     N4 Evidencia        → .ref (marca numerada discreta) → sección única «Fuentes y metodología» (.srcs)
   ===================================================================================================== */

/* ---------- N1 · titular de hallazgo y entradilla */
.hl{font-family:var(--ff-display);font-weight:800;font-stretch:76%;font-size:var(--t-3xl);line-height:1;letter-spacing:-.012em;text-wrap:balance}
.hl.xl{font-size:var(--t-4xl);line-height:.95}
.hl.md{font-size:clamp(24px,4.4vw,34px);line-height:1.04;font-stretch:80%}
.hl.sm{font-size:clamp(21px,3.2vw,25px);line-height:1.08;font-stretch:84%}
.dek{font-family:var(--ff-text);font-size:clamp(18px,2.3vw,21px);line-height:1.38;color:var(--ink-2);max-width:56ch;text-wrap:pretty}
.eyebrow{font-family:var(--ff-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eyebrow b{color:var(--ink);font-weight:600}

/* ---------- N1 · cifra protagonista: valor + unidad + periodo + alcance. El valor va en tinta, nunca en color de serie. */
.fig{display:grid;gap:2px;min-width:0}
.fig .q{font-family:var(--ff-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.fig .v{font-family:var(--ff-display);font-weight:800;font-stretch:70%;font-size:var(--t-num);line-height:.84;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums;color:var(--ink)}
.fig .v small{font-size:.36em;font-stretch:90%;font-weight:700;letter-spacing:0;margin-left:.12em}
.fig.md .v{font-size:clamp(40px,7.5vw,60px)}
.fig.sm .v{font-size:clamp(32px,5.5vw,42px)}
.fig .l{font-size:var(--t-sm);color:var(--ink-2);line-height:1.35;max-width:30ch}
.fig .c{font-size:12.5px;color:var(--ink-3);line-height:1.35}

/* ---------- N2 · lo que significa */
.means{font-family:var(--ff-text);font-size:clamp(17px,2vw,19px);line-height:1.42;color:var(--ink);max-width:60ch;text-wrap:pretty}
.means+.means{margin-top:8px}
.means.soft{color:var(--ink-2);font-size:16.5px}
.k-lab{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:4px}

/* ---------- N4 · marca de fuente: un número discreto que lleva a «Fuentes y metodología» */
.ref{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 3px;margin-left:3px;
  font-family:var(--ff-mono);font-size:10px;font-weight:600;line-height:1;color:var(--ink-2);border:1px solid var(--rule);
  border-radius:var(--r);text-decoration:none;vertical-align:.18em;font-style:normal}
.ref:hover,.ref:focus-visible{border-color:var(--ink);color:var(--ink);background:var(--paper-2)}
.refs{white-space:nowrap}

/* ---------- alcance del dato: ¿esto es de mi punto o de un área amplia? Escalera de 4 peldaños (forma + texto). */
.alcance{display:grid;gap:5px}
.alcance ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}
.alcance li{height:6px;background:var(--paper-3)}
.alcance li.on{background:var(--ink)}
.alcance li.in{background:repeating-linear-gradient(90deg,var(--ink-3) 0 2px,transparent 2px 4px)}
.alcance .lbl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.alcance .lbl span.on{color:var(--ink);font-weight:600}
.alcance .say{font-size:12.5px;color:var(--ink-2);line-height:1.35}

/* ---------- resumen visual de la portada personal: señales que se escanean en segundos */
.signals{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);scrollbar-width:none}
.signals::-webkit-scrollbar{display:none}
.sig{scroll-snap-align:start;display:grid;align-content:start;gap:4px;padding:12px 14px 14px;border-left:1px solid var(--rule);text-decoration:none;color:var(--ink);min-height:118px;position:relative}
.sig:first-child{border-left:0;padding-left:0}
.sig::before{content:"";position:absolute;left:0;right:0;top:-1px;height:4px;background:var(--phc,transparent)}
.sig:first-child::before{left:0}
.sig .eyebrow{gap:6px}
.sig .v{font-family:var(--ff-display);font-weight:800;font-stretch:72%;font-size:clamp(30px,5vw,40px);line-height:.92;font-variant-numeric:tabular-nums}
.sig .v small{font-size:.5em;font-weight:700;font-stretch:90%}
.sig .s{font-size:13px;color:var(--ink-2);line-height:1.3}
.sig:hover .s{color:var(--ink)}
.sig.na .v{color:var(--ink-3);font-weight:500}
@media (max-width:640px){.signals{grid-auto-columns:minmax(44%,1fr);margin-right:calc(-1 * var(--gut));padding-right:var(--gut)}}

/* ---------- capítulo: cabecera de sección con número, titular y entradilla corta */
.chap{margin-top:var(--s7);padding-top:var(--s2);border-top:3px solid var(--ink);display:grid;gap:6px 24px;grid-template-columns:minmax(0,1fr);margin-bottom:var(--s3)}
.chap .eyebrow{grid-column:1/-1;margin-bottom:2px}
.chap h2{font-family:var(--ff-display);font-weight:800;font-stretch:78%;font-size:var(--t-2xl);line-height:1.04;text-wrap:balance}
.chap p{font-size:var(--t-sm);color:var(--ink-3);max-width:62ch}
@media (min-width:900px){.chap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end}.chap p{justify-self:end;text-align:right;padding-bottom:3px}}

/* ---------- relato de un fenómeno: texto (titular, significado, acción) + datos al lado. Asimetría 5/7. */
.story{--phc:var(--ink);border-top:6px solid var(--phc);margin-top:var(--s5);padding-top:var(--s4);display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.story{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6)}.story>.data{border-left:1px solid var(--rule);padding-left:var(--s6)}}
.story .head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.story .head .what{font-family:var(--ff-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:600}
.story .head .when{margin-left:auto}
.story .hl{margin-bottom:12px}
.story .local{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--rule)}
.story .local li{padding:8px 0 8px 18px;border-bottom:1px solid var(--rule);position:relative;font-size:15px;color:var(--ink-2)}
.story .local li::before{content:"";position:absolute;left:0;top:15px;width:10px;height:2px;background:var(--phc)}
.story .data{display:grid;gap:var(--s5);align-content:start}
.story .figrow{display:flex;gap:var(--s5) var(--s6);flex-wrap:wrap;align-items:flex-end}
.story .caution{font-size:13.5px;color:var(--ink);border-left:3px solid var(--phc);padding:4px 0 4px 10px;max-width:52ch}
.ph-rain,.c-rain{--phc:var(--f-lluvia)} .ph-heat,.c-heat{--phc:var(--f-calor)} .ph-cold,.c-cold{--phc:var(--f-frio)}
.ph-wind,.c-wind{--phc:var(--f-viento)} .ph-huaico,.c-huaico{--phc:var(--f-mov_masa)} .ph-flood,.c-flood{--phc:var(--f-inundacion)}
.ph-lluvia,.ph-inundacion{--phc:var(--f-lluvia)} .ph-mov_masa{--phc:var(--f-mov_masa)} .ph-erosion{--phc:var(--f-erosion)} .ph-calor{--phc:var(--f-calor)}
.ph-frio{--phc:var(--f-frio)} .ph-viento{--phc:var(--f-viento)} .ph-incendio,.ph-sequia_incendio{--phc:var(--f-incendio)}

/* ---------- qué hacer: una acción visible, el resto plegado. La fuente es una marca, no una frase. */
.todo{border-top:1.5px solid var(--ink);padding-top:10px;margin-top:var(--s4)}
.todo .a{font-weight:650;font-size:16.5px;line-height:1.35;margin-top:2px}
.todo ul{list-style:none;margin:0;padding:0}
.todo li{padding:9px 0;border-bottom:1px solid var(--rule)}
.todo li:last-child{border-bottom:0}
.todo li .a{font-size:15.5px}
.todo .when-tag{font-family:var(--ff-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:block}
.todo .none{color:var(--ink-2);font-size:15px}

/* ---------- N3 · gráfico: figura con titular-hallazgo, nota de unidad/periodo y fuente */
.viz{margin:0;min-width:0}
.viz>.t{font-family:var(--ff-ui);font-weight:700;font-size:15px;line-height:1.3;margin-bottom:2px}
.viz>.u{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.viz figcaption,.viz .cap{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.4}
.viz svg{display:block;width:100%;height:auto;overflow:visible}
.viz text{font-family:var(--ff-mono);font-size:10.5px;fill:var(--ink-3)}
.viz .lab{font-family:var(--ff-ui);font-size:12.5px;fill:var(--ink)}
.viz .lab.b{font-weight:700}
.viz .val{font-family:var(--ff-ui);font-size:12.5px;font-weight:700;fill:var(--ink)}
.viz .gl{stroke:var(--rule-2);stroke-width:1}
.viz .base{stroke:var(--ink);stroke-width:1}
.viz .nowl{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:2 3}
.viz .now-t{font-weight:600;fill:var(--ink)}
.viz .hit{fill:transparent;cursor:default}
.viz .mk{fill:var(--phc,var(--ink))}
.viz .mk-o{fill:var(--sheet);stroke:var(--phc,var(--ink));stroke-width:2}
.viz .dim{opacity:.38}

/* vigencia: columnas de días + franja del periodo + «ahora» */
.vig{--n:5}
.vig .cols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));border-bottom:1px solid var(--ink)}
.vig .d{padding:0 4px 6px;border-left:1px solid var(--rule);min-width:0}
.vig .d:first-child{border-left:0;padding-left:0}
.vig .d span{display:block;font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vig .d.today span{color:var(--ink);font-weight:600}
.vig .d b{display:block;font-size:12px;font-weight:600;line-height:1.2;margin-top:2px;word-break:keep-all;overflow-wrap:normal}
@media (max-width:520px){.vig .d{padding:0 2px 6px}.vig .d b{font-size:10.5px;letter-spacing:-.01em}.vig .d span{font-size:9.5px}}
.vig .track{position:relative;height:16px;margin-top:6px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/var(--n) - 1px),var(--rule-2) calc(100%/var(--n) - 1px) calc(100%/var(--n)))}
.vig .band{position:absolute;top:2px;bottom:2px;background:color-mix(in srgb,var(--phc) 28%,transparent);border:1.5px solid var(--phc)}
.vig .now{position:absolute;top:-6px;bottom:-14px;width:0;border-left:1.5px dashed var(--ink)}
.vig .now i{position:absolute;top:100%;left:4px;font-style:normal;font-family:var(--ff-mono);font-size:10px;font-weight:600;color:var(--ink);text-transform:uppercase;white-space:nowrap}
.vig{padding-bottom:20px}

/* rangos por región (mm/día, km/h): eje común desde cero; tu región en color pleno, las demás atenuadas */
.rng .row,.rng .ax{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,10fr) 118px;gap:10px;align-items:center;padding:5px 0}
.rng .row{border-bottom:1px solid var(--rule-2)}
.rng .lab{font-size:13px;line-height:1.25;min-width:0;overflow-wrap:anywhere}
.rng .row.mine .lab{font-weight:700}
.rng .row.oth .lab,.rng .row.oth .val{color:var(--ink-2)}
.rng .trk{position:relative;height:12px;background:var(--paper-2);outline-offset:3px}
.rng .bar{position:absolute;top:0;bottom:0;background:var(--phc)}
.rng .bar.open{background:repeating-linear-gradient(90deg,var(--phc) 0 6px,transparent 6px 9px);border-left:3px solid var(--phc)}
.rng .row.oth .bar{opacity:.42}
.rng .val{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.rng .ax{border:0;padding-top:2px}
.rng .ticks{position:relative;height:14px}
.rng .ticks i{position:absolute;transform:translateX(-50%);font-style:normal;font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);white-space:nowrap}
.rng .ticks i:first-child{transform:none}
.rng .ticks i:last-child{transform:translateX(-100%)}
@media (max-width:520px){.rng .row,.rng .ax{grid-template-columns:minmax(0,1fr) auto}.rng .lab{grid-column:1/-1}.rng .ax .lab{display:none}.rng .trk,.rng .ticks{grid-column:1}.rng .ax .val{display:none}}

/* rango térmico: mínima — máxima por día */
.trange .row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--rule-2)}
.trange .lab{font-family:var(--ff-mono);font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2)}
.trange .trk{position:relative;height:20px;margin:0 14px}
.trange .trk::before{content:"";position:absolute;left:-14px;right:-14px;top:50%;border-top:1px solid var(--rule)}
.trange .seg{position:absolute;top:7px;height:6px;background:var(--ink-3)}
.trange .pt{position:absolute;top:3px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--sheet);border:2.5px solid var(--ink)}
.trange .pt.mn{border-color:var(--f-frio)}.trange .pt.mx{border-color:var(--f-calor);background:var(--f-calor)}
.trange .pt i{position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-style:normal;font-family:var(--ff-ui);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.trange .row{padding-top:20px}
.trange .key{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);margin-top:8px}
.trange .key span{display:inline-flex;align-items:center;gap:6px}
.trange .key .pt{position:static;margin:0;width:11px;height:11px;display:inline-block}

/* escala de Beaufort (0–12) */
.bft .cells{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:2px}
.bft .c{height:26px;background:var(--paper-2);display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;outline-offset:2px}
.bft .c i{font-style:normal;font-family:var(--ff-mono);font-size:10px;color:var(--ink-3)}
.bft .c.on{background:var(--phc)}
.bft .c.on i{color:var(--sheet);font-weight:600}
.bft .ends{display:flex;justify-content:space-between;font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);text-transform:uppercase;margin-top:4px}

/* emergencias por año (INDECI) */
.yrs .bars{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;align-items:end;height:34px;border-bottom:1px solid var(--ink)}
.yrs .y{height:var(--h);background:var(--phc,var(--ink));min-height:0;outline-offset:2px}
.yrs .y.z{height:1px;background:transparent}
.yrs .ends{display:flex;justify-content:space-between;gap:8px;font-family:var(--ff-mono);font-size:10px;color:var(--ink-3);margin-top:3px}

/* ---------- territorio: libro de registros. Cada peligro, una fila; todas comparten el eje 2003–2025. */
.ledger{border-top:1px solid var(--ink)}
.ledger .axis-h{display:none}
.lrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:center}
.lrow .name{display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;line-height:1.25;min-width:0}
.lrow .name .tag{margin-left:2px}
.lrow .count{text-align:right;line-height:1}
.lrow .count b{font-family:var(--ff-display);font-weight:800;font-stretch:72%;font-size:34px;font-variant-numeric:tabular-nums;display:block}
.lrow .count span{font-size:11.5px;color:var(--ink-3);font-family:var(--ff-mono);letter-spacing:.03em;text-transform:uppercase}
.lrow .lane{grid-column:1/-1;min-width:0}
.lrow .facts{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13.5px;color:var(--ink-2)}
.lrow .facts span{display:inline-flex;align-items:baseline;gap:6px}
.lrow .facts i{font-style:normal;font-family:var(--ff-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.lrow .more-d{grid-column:1/-1}
@media (min-width:900px){
  .lrow{grid-template-columns:minmax(0,3.2fr) 92px minmax(0,6fr);gap:6px 24px}
  .lrow .count{text-align:left}
  .lrow .lane{grid-column:auto}
  .lrow .facts,.lrow .more-d{grid-column:1/-1;padding-left:0}
  .ledger .axis-h{display:grid;grid-template-columns:minmax(0,3.2fr) 92px minmax(0,6fr);gap:24px;padding:6px 0;font-family:var(--ff-mono);font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
}
/* ---------- filas de dato breve (hoy, cambios, escenarios, incógnitas): etiqueta · texto · marca */
.brief{border-top:1px solid var(--ink)}
.brief>div{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 16px;padding:11px 0;border-bottom:1px solid var(--rule)}
@media (min-width:760px){.brief>div{grid-template-columns:150px minmax(0,1fr)}}
.brief .k{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:3px;display:flex;gap:6px;align-items:flex-start}
.brief .x{font-size:15px;line-height:1.42;color:var(--ink)}
.brief .x .s{color:var(--ink-2);font-size:14px;display:block;margin-top:2px}
.cols2{display:grid;gap:var(--s5) var(--s6);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.cols2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- FUENTES Y METODOLOGÍA: una sola capa de evidencia, agrupada por tipo de fuente */
.srcs{margin-top:var(--s8);background:var(--paper-2);border-top:3px solid var(--ink);padding:var(--s5) var(--gut) var(--s6);margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut))}
.srcs .hl{margin-bottom:6px}
.srcs .grp{margin-top:var(--s5)}
.srcs .grp>h3{font-family:var(--ff-mono);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:6px;display:flex;justify-content:space-between;gap:12px}
.srcs .grp>h3 span{font-weight:400;color:var(--ink-3);text-transform:none;letter-spacing:0;font-family:var(--ff-ui);font-size:12.5px}
.srcs ol{list-style:none;margin:0;padding:0}
.srcs li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 10px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:14px;scroll-margin-top:80px}
.srcs li:target{background:var(--celeste-2);outline:2px solid var(--focus);outline-offset:2px}
.srcs li .n{font-family:var(--ff-mono);font-size:11px;font-weight:600;color:var(--ink-2);padding-top:2px}
.srcs li .i{font-weight:700}
.srcs li .d{color:var(--ink-2)}
.srcs li .m{font-size:12.5px;color:var(--ink-3);margin-top:2px;overflow-wrap:anywhere}
.srcs li details{grid-column:2}
.srcs li .det{margin-top:6px;padding:10px 12px;background:var(--sheet);border-left:1px solid var(--ink);font-size:13.5px;color:var(--ink-2)}
.srcs li .det p+p{margin-top:6px}
.srcs .meth{display:grid;gap:var(--s5);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.srcs .meth{grid-template-columns:repeat(2,minmax(0,1fr))}}
.srcs .meth h4{font-family:var(--ff-ui);font-size:14px;font-weight:700;margin-bottom:4px}
.srcs .meth p,.srcs .meth li{font-size:13.5px;color:var(--ink-2)}
.srcs .meth ul{list-style:none;padding:0;margin:0}.srcs .meth ul li{display:block;padding:4px 0;border-bottom:1px solid var(--rule)}
@media (min-width:1100px){.srcs{margin-left:0;margin-right:0;padding-left:var(--s6);padding-right:var(--s6)}}

/* ---------- tooltip compartido (hover, foco o toque) */
.wi-tip{position:fixed;z-index:4000;pointer-events:none;background:var(--ink);color:var(--paper);font-size:12.5px;line-height:1.35;padding:6px 9px;
  border-radius:var(--r);max-width:260px;transform:translate(-50%,calc(-100% - 10px));opacity:0;transition:opacity .08s}
.wi-tip.on{opacity:1}
.wi-tip b{font-weight:700}

/* ---------- índice lateral de la página (escritorio) / saltos (móvil) */
.jump{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--s4)}
.jump a{font-family:var(--ff-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);border:1px solid var(--rule);padding:5px 8px;border-radius:var(--r);display:inline-flex;gap:6px;align-items:center;min-height:32px}
.jump a:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- tipo de dato de un bloque (WI.kind). Forma del borde, no color: nunca indica gravedad. */
.kind-tag{display:inline-flex;align-items:center;font-family:var(--ff-mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  line-height:1;padding:3px 7px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;white-space:nowrap;vertical-align:1px}
.kind-tag.k-aviso{background:var(--ink);color:var(--paper)}
.kind-tag.k-estimacion{border-style:dotted}
.kind-tag.k-escenario{border-style:dashed}
.kind-tag.k-contexto{border-color:var(--ink-3);color:var(--ink-2)}
.kind-tag.k-terreno{border-width:3px;border-style:double;padding:2px 6px}
.kind-tag.k-servicio{border-width:0 0 0 4px}
.kind-tag.k-medida{border-width:0 0 2px 0;padding:3px 0}

/* ---------- «Pacífico» (2026-11-08): etiquetas en frase. Sin mayúsculas ni espaciado de máquina de escribir en todo el
   sitio; los textos ya están escritos en frase, así que solo se quita la transformación. */
:is(.acard .lo-t, .ago, .alcance .lbl, .answer .where, .arz .r.h, .arz h4, .badge, .best .bk, .bft .ends, .bgrp, .bhead, .brief .k, .chain .k, .chain .sk em, .chip, .cmp .r.h, .confirm .q, .day .d, .det h4, .diez .q, .evo figcaption, .eyebrow, .f-when .k, .facts .k, .ficha .tag, .ficha .where, .ficha dt, .fig .q, .filters label, .fresh, .grid .k, .grpt, .hall .q, .hero .k, .jump a, .k-lab, .kicker, .kind, .kind-sub, .kind-tag, .layer .src, .ledger .axis-h, .legend h4, .lrow .count span, .lrow .facts i, .lvtag, .maplabel, .rowh, .s-card>h2, .s-foot h2, .secs h4, .srcs .grp>h3, .st, .story .head .what, .tag, .tbl th, .tbl thead th, .tbl tr.grp td, .tile .lab, .today .k, .todo .when-tag, .tot .k, .trange .lab, .vig .d span, .vig .now i, .viz>.u, .warnbox b, .zones .k, h3, label.lab, th, thead th){text-transform:none!important;letter-spacing:0!important}
td[data-k]::before{text-transform:none!important;letter-spacing:0!important}
/* Pacífico: controles en píldora (buscador con el botón adentro, selectores segmentados) y titulares a ancho normal,
   como la portada. */
.seg{border-radius:var(--r-pill);padding:3px;gap:2px;border-width:1px}
.seg button{border-left:0;border-radius:var(--r-pill)}
.field{border-radius:var(--r-pill);padding:5px}
.field input{padding:10px 16px}
.field .btn{border-radius:var(--r-pill);border:0}
:is(h1,h2,.hl){font-stretch:100%!important;letter-spacing:-.015em}
:root :is(.search){border-radius:var(--r-pill);padding:5px}
:root :is(.search) input{padding:10px 16px}
:root :is(.search) .btn{border-radius:var(--r-pill);border:0}
:root :is(.filters,.tabs){border-radius:var(--r-pill);padding:3px;gap:2px;border-width:1px;overflow:hidden}
:root :is(.filters,.tabs) button{border-left:0;border-radius:var(--r-pill)}
/* Pacífico: cajas con esquina redondeada y borde suave en lugar del recuadro negro (Precios, Mapa, Cortes, Vías, Tu calle). */
:root :is(.acard,.hall a,.diez,.cien,.best button,.hoy,.pron,.confirm,.cands,.chain,.ficha){border:1px solid var(--rule);border-radius:var(--r-card)}
:root :is(.acard,.hall a,.diez,.cien,.best button,.chain){background:var(--paper-2)}
:root :is(.mapwrap,.d-map,.f-map,.mapgrid){border:1px solid var(--rule);border-radius:var(--r-card);overflow:hidden}
:root :is(.tleg,.loadbar,.maphoy .mc,.top .ask,.tip,.ev-tip,.qty){border-width:1px;border-radius:14px}
:root :is(.cv-map svg,.zmap svg){border-color:var(--rule);border-radius:14px}
:root .chip{border-radius:var(--r-pill)}
:root .cands{overflow:hidden}
:root .chap>h2{border-top:0;padding-top:0}