/* ============================================================================
   GoVisor — Observatorio ciudadano del Gobierno del Perú
   Identidad institucional teal. Estático, sin framework, mobile-first.
   ========================================================================== */

:root{
  /* Marca */
  --brand-900:#005C59;
  --brand-700:#007D79;
  --brand-500:#0A8B87;
  --brand-050:#E8F3F2;
  --brand-025:#F2F8F7;

  /* Superficies y texto */
  --surface:#FFFFFF;
  --surface-soft:#F5F7F7;
  --ink-900:#10212B;
  --ink-700:#17212B;
  --ink-500:#66747F;
  --ink-400:#8B979F;
  --border:#E3E8E8;

  /* Semánticos: verde=verificado, ámbar=pendiente, rojo=alerta, azul=oficial */
  --ok:#0F7B3F;      --ok-bg:#E9F6EE;    --ok-bd:#BFE3CC;
  --warn:#8A6100;    --warn-bg:#FFF6E0;  --warn-bd:#F3DCA4;
  --danger:#B3261E;  --danger-bg:#FDECEA;--danger-bd:#F3C6C2;
  --info:#12558A;    --info-bg:#E8F1F9;  --info-bd:#BBD6EC;
  --none:#5F6B73;    --none-bg:#F1F3F4;  --none-bd:#DFE4E6;

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;

  --shadow-card:0 6px 24px rgba(15,35,40,.06);
  --shadow-pop:0 14px 40px rgba(15,35,40,.14);

  --container:1480px;
  --pad:28px;
  --gap:20px;

  --font:"Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.22,.9,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0; font-family:var(--font); font-size:15px; line-height:1.5;
  background:var(--surface-soft); color:var(--ink-700);
}
h1,h2,h3,h4{ margin:0; line-height:1.18; color:var(--ink-900); }
p{ margin:0; }
a{ color:var(--brand-700); }
img{ max-width:100%; }

.wrap{ width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--pad); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.saltar{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--brand-900); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.saltar:focus{ left:0; }
:focus-visible{ outline:3px solid var(--brand-500); outline-offset:2px; border-radius:6px; }

/* Mejora progresiva: sin JS el contenido se ve igual, nada queda oculto. */
.anim{ opacity:1; transform:none; }
.js .anim{ opacity:0; transform:translateY(14px); }
.js .anim.in{ animation:subir .55s var(--ease) forwards; }
@keyframes subir{ to{ opacity:1; transform:none; } }
.stagger > *{ animation:subir .4s var(--ease) both; animation-delay:calc(var(--i,0) * 32ms); }

/* ══════════════════ CABECERA ══════════════════ */
/* Cabecera verde institucional: contrasta con el cuerpo blanco y separa
   con claridad la identidad del observatorio del contenido que analiza. */
.head{
  position:sticky; top:0; z-index:120;
  background:var(--brand-900);
  border-bottom:1px solid rgba(255,255,255,.14);
}
.head-in{ display:flex; align-items:center; gap:16px; padding:9px var(--pad); }
.marca{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; flex:0 0 auto; }
.marca-logo{ display:grid; place-items:center; }
/* El descriptor va AL COSTADO del nombre, no debajo. */
.marca-txt{ display:flex; flex-direction:row; align-items:baseline; gap:10px; }
.marca-txt b{ font-size:1.06rem; letter-spacing:-.02em; color:#fff; white-space:nowrap; }
.marca-txt small{
  font-size:.72rem; color:rgba(255,255,255,.7); white-space:nowrap;
  padding-left:10px; border-left:1px solid rgba(255,255,255,.24);
}

.nav{ display:flex; align-items:center; gap:1px; margin-left:auto; }
.nav > a{
  font-size:.86rem; font-weight:600; color:rgba(255,255,255,.86); text-decoration:none;
  padding:7px 11px; border-radius:7px; position:relative; transition:.18s;
}
.nav > a:hover{ background:rgba(255,255,255,.14); color:#fff; }
.nav > a.activo{ color:#fff; }
.nav > a.activo::after{
  content:""; position:absolute; left:11px; right:11px; bottom:1px; height:2px;
  background:#fff; border-radius:3px;
}
.nav .cta{
  background:#fff; color:var(--brand-900); border-radius:8px;
  padding:9px 16px; margin-left:10px; font-weight:700;
}
.nav .cta:hover{ background:var(--brand-050); color:var(--brand-900); }
.nav .cta.activo::after{ display:none; }

.icono-btn{
  width:36px; height:36px; display:grid; place-items:center; margin-left:5px;
  background:none; border:0; border-radius:8px; color:rgba(255,255,255,.82);
  cursor:pointer; transition:.18s;
}
.icono-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
/* Selector de idioma: globo blanco + código del idioma activo. */
.idioma{
  display:inline-flex; align-items:center; gap:6px; margin-left:9px;
  padding:7px 11px; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.26);
  font:700 .8rem/1 var(--font); color:#fff; white-space:nowrap; transition:.18s;
}
.idioma:hover{ background:rgba(255,255,255,.2); }
.idioma b{ font-weight:800; letter-spacing:.04em; }

.mas{ position:relative; }
.mas-btn{
  font:600 .86rem/1 var(--font); color:rgba(255,255,255,.86); background:none;
  border:0; cursor:pointer; padding:8px 11px; border-radius:7px;
}
.mas-btn:hover,.mas-btn[aria-expanded="true"]{ background:rgba(255,255,255,.14); color:#fff; }
.mas-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:264px; z-index:130;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-pop); padding:7px; display:grid; gap:1px;
  animation:subir .2s var(--ease);
}
.mas-menu[hidden]{ display:none; }
.mas-menu a{
  font-size:.88rem; font-weight:600; color:var(--ink-700); text-decoration:none;
  padding:10px 12px; border-radius:8px;
}
.mas-menu a:hover{ background:var(--brand-025); color:var(--brand-900); }

.menu-btn{
  display:none; margin-left:auto; width:42px; height:42px; border-radius:9px;
  border:1px solid rgba(255,255,255,.3); background:transparent; cursor:pointer;
}
.menu-ico,.menu-ico::before,.menu-ico::after{
  display:block; width:18px; height:2px; background:#fff;
  border-radius:2px; margin:0 auto; position:relative;
}
.menu-ico::before,.menu-ico::after{ content:""; position:absolute; left:0; }
.menu-ico::before{ top:-6px; } .menu-ico::after{ top:6px; }

.aviso{
  background:var(--warn-bg); border-bottom:1px solid var(--warn-bd);
  color:var(--warn); font-size:.85rem; padding:9px 0;
}

/* ══════════════════ HÉROE ══════════════════ */
.hero{ position:relative; overflow:hidden; background:var(--brand-900); }
/* Panorámica del Perú: Palacio de Gobierno · Andes · Costa Verde.
   El degradado teal queda DEBAJO como respaldo: si la imagen faltara, el
   héroe se sigue viendo correcto y el titular sigue siendo legible. */
.hero-img{
  position:absolute; inset:0;
  background-color:var(--brand-900);
  background-image:
    linear-gradient(115deg, var(--brand-900) 0%, var(--brand-700) 48%, var(--brand-500) 100%);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* Se sirve el ancho más pequeño que cubra cada pantalla. */
@media (max-width:767px){
  .hero-img{ background-image:url("assets/govisor-peru-banner-768.webp"),
    linear-gradient(115deg,var(--brand-900),var(--brand-500)); }
}
@media (min-width:768px) and (max-width:1199px){
  .hero-img{ background-image:url("assets/govisor-peru-banner-1200.webp"),
    linear-gradient(115deg,var(--brand-900),var(--brand-500)); }
}
@media (min-width:1200px) and (max-width:1599px){
  .hero-img{ background-image:url("assets/govisor-peru-banner-1600.webp"),
    linear-gradient(115deg,var(--brand-900),var(--brand-500)); }
}
@media (min-width:1600px){
  .hero-img{ background-image:url("assets/govisor-peru-banner.webp"),
    linear-gradient(115deg,var(--brand-900),var(--brand-500)); }
}
.hero-img{ background-size:cover, cover; background-position:center, center; }
.hero-velo{
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 24%,
    rgba(255,255,255,.34) 48%, rgba(255,255,255,0) 70%);
}
/* `min-height` incluye el padding (box-sizing:border-box), así que este
   valor ES la altura total de la franja. Menos los 68 px que suben las
   tarjetas KPI, la banda visible queda en ~352 px (objetivo: 340–390). */
.hero-in{
  position:relative; min-height:420px;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:20px; padding-top:26px; padding-bottom:76px;
}
/* OJO: `ch` se calcula sobre la fuente del CONTENEDOR (15 px), no sobre la
   del titular. Con 44ch el bloque quedaba en 356 px y el h1 de 54 px caía a
   cuatro líneas. Se fija en píxeles para que el titular respire. */
/* En escritorio el bloque se limita para no invadir la imagen; en móvil
   ocupa todo el ancho (48vw dejaba el titular en 187 px, ilegible). */
.hero-txt{ max-width:560px; }
@media (min-width:768px){ .hero-txt{ max-width:min(560px, 52vw); } }
.hero h1{
  font-size:clamp(2rem,3.4vw,2.9rem); letter-spacing:-.03em; line-height:1.1;
  color:var(--brand-900); font-weight:800;
}
.hero h1 span{ color:var(--ink-900); }
.hero-sub{ margin-top:12px; font-size:1rem; color:var(--ink-700); max-width:400px; }
.hero-nota{
  margin-top:12px; display:inline-flex; align-items:center; gap:7px;
  font-size:.73rem; line-height:1.35; color:var(--ink-500); background:rgba(255,255,255,.85);
  border:1px solid var(--border); border-radius:8px; padding:6px 11px; max-width:52ch;
}
.actualizado{
  display:inline-flex; align-items:center; gap:9px; flex:0 0 auto;
  background:rgba(255,255,255,.94); border:1px solid var(--border);
  border-radius:11px; padding:10px 15px; box-shadow:var(--shadow-card);
  font-size:.78rem; color:var(--ink-700);
}
.actualizado b{ display:block; font-size:.72rem; color:var(--ink-500); font-weight:700; }
.act-hora{ display:block; font-variant-numeric:tabular-nums; color:var(--ink-500); }
.punto{
  width:9px; height:9px; border-radius:50%; background:var(--ok); flex:0 0 9px;
  animation:latido 2.4s infinite;
}
@keyframes latido{
  0%{ box-shadow:0 0 0 0 rgba(15,123,63,.5); }
  70%{ box-shadow:0 0 0 8px rgba(15,123,63,0); }
  100%{ box-shadow:0 0 0 0 rgba(15,123,63,0); }
}

/* ══════════════════ KPI ══════════════════ */
.kpis{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);
  margin-top:-68px; position:relative; z-index:5;
}
.kpi{
  position:relative; display:flex; align-items:flex-start; gap:13px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-card);
  padding:18px 20px; transition:.2s var(--ease);
}
.kpi:hover{ transform:translateY(-3px); box-shadow:var(--shadow-pop); }
.kpi-ico{
  flex:0 0 46px; height:46px; display:grid; place-items:center; font-size:1.2rem;
  background:var(--brand-050); border-radius:12px;
}
.kpi-cuerpo{ min-width:0; flex:1; }
.kpi-rot{
  font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-500);
}
.kpi-val{
  font-size:2.5rem; font-weight:800; line-height:1.05; color:var(--brand-900);
  font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:7px;
}
.kpi-val-sm{ font-size:1.5rem; }
.kpi-val i{ font-size:.82rem; font-style:normal; font-weight:700; color:var(--ink-500); }
.kpi-sub{ font-size:.79rem; color:var(--ink-500); margin-top:2px; }

.anillo{ position:relative; flex:0 0 58px; width:58px; height:58px; display:grid; place-items:center; }
.anillo svg{ width:58px; height:58px; transform:rotate(-90deg); }
.anillo circle{ fill:none; stroke-width:5; }
.ani-b{ stroke:var(--brand-050); }
.ani-f{
  stroke:var(--brand-700); stroke-linecap:round;
  stroke-dasharray:113; stroke-dashoffset:113;
  transition:stroke-dashoffset 1.1s var(--ease);
}
.anillo b{ position:absolute; font-size:.78rem; font-weight:800; color:var(--brand-900); }

/* ══════════════════ SECCIONES / TARJETAS ══════════════════ */
section{ margin:34px 0; scroll-margin-top:86px; }
.sec-cab{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.sec-cab h2{ font-size:1.32rem; letter-spacing:-.02em; }
.sec-cab span{ font-size:.82rem; color:var(--ink-500); }

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:18px;
}
.card-cab{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:13px; }
.card-cab h2,.card-cab h3{ font-size:1rem; letter-spacing:-.015em; }
.card-cab p{ font-size:.75rem; color:var(--ink-500); margin-top:2px; }
.card-ver,.card-mas{ font-size:.78rem; font-weight:700; color:var(--brand-700); text-decoration:none; white-space:nowrap; }
.card-ver:hover,.card-mas:hover{ text-decoration:underline; }
.card-mas{ display:inline-block; margin-top:12px; }
.card-pie{ font-size:.73rem; color:var(--ink-400); margin-top:11px; }

.tablero{ display:grid; grid-template-columns:1fr 1.18fr 1fr .92fr; gap:var(--gap); margin:34px 0; }
.dos{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--gap); }

/* ══════════════════ BADGES ══════════════════ */
.b,.ev{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  font:700 .66rem/1 var(--font); letter-spacing:.03em;
  padding:5px 9px; border-radius:6px;
}
.b-ok,.ev-oficial     { background:var(--ok-bg);   color:var(--ok);   border:1px solid var(--ok-bd); }
.b-pend,.ev-preliminar{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
.b-con,.ev-verificado { background:var(--info-bg); color:var(--info); border:1px solid var(--info-bd); }
.b-eje                { background:var(--brand-050); color:var(--brand-900); border:1px solid #C7E2E0; }
.b-via                { background:#F1EDFB; color:#5B3FA8; border:1px solid #D7CBF2; }
.b-der,.ev-investigacion{ background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-bd); }
.b-neu                { background:var(--none-bg); color:var(--none); border:1px solid var(--none-bd); }

.rs{
  display:inline-flex; align-items:center; gap:5px; text-decoration:none;
  font:600 .72rem/1 var(--font); color:var(--brand-900);
  background:var(--brand-050); border:1px solid #C7E2E0;
  border-radius:7px; padding:6px 10px; transition:.18s var(--ease); cursor:pointer;
}
.rs:hover{ background:var(--brand-900); color:#fff; border-color:var(--brand-900); }
.rs-txt{
  display:inline-flex; align-items:center; gap:5px; font-size:.72rem;
  color:var(--ink-400); border:1px dashed var(--border); border-radius:7px; padding:6px 10px;
}

/* ══════════════════ CHIPS / FILTROS ══════════════════ */
.filtros{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px; }
.chip{
  font:600 .82rem/1 var(--font); padding:9px 15px; border-radius:8px;
  border:1px solid var(--border); background:#fff; color:var(--ink-700);
  cursor:pointer; transition:.18s var(--ease);
}
.chip:hover{ border-color:var(--brand-500); color:var(--brand-900); }
.chip.on{ background:var(--brand-900); border-color:var(--brand-900); color:#fff; }

/* ══════════════════ ¿QUÉ CAMBIÓ? ══════════════════ */
.cambios-lista{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.cambios-lista li{ display:flex; align-items:flex-start; gap:10px; font-size:.85rem; }
.cambios-lista .pip{
  flex:0 0 20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:.62rem; margin-top:1px; background:var(--ok-bg); color:var(--ok);
}
.pip-rojo{ background:var(--danger-bg); color:var(--danger); }
.pip-ambar{ background:var(--warn-bg); color:var(--warn); }
.pip-azul{ background:var(--info-bg); color:var(--info); }
.pip-naranja{ background:var(--brand-050); color:var(--brand-900); }
.cambio-t{ flex:1; min-width:0; }
.cambios-lista b{ display:block; font-size:.85rem; color:var(--ink-900); }
.cambios-lista time{ display:block; font-size:.72rem; color:var(--ink-400); margin-top:1px; }

/* ══════════════════ PROMESAS ══════════════════ */
.cadena3{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.c3{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:11px; background:var(--brand-025); }
.c3-rot{ display:flex; align-items:center; gap:6px; font-size:.7rem; font-weight:800; color:var(--brand-700); margin-bottom:6px; }
.c3-val{ font-size:1.02rem; font-weight:800; color:var(--ink-900); }
.c3-sub{ font-size:.7rem; color:var(--ink-500); margin-top:3px; }

.promesas-lista{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); }
.promesa{
  background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--none-bd);
  border-radius:var(--radius-md); padding:16px; box-shadow:var(--shadow-card);
  transition:.2s var(--ease);
}
.promesa:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pop); }
.promesa.cumplida{ border-left-color:var(--ok); }
.promesa.en_proceso{ border-left-color:#C08A00; }
.promesa.no_iniciada{ border-left-color:var(--none); }
.promesa.incumplida{ border-left-color:var(--danger); }
.promesa h3{ font-size:.95rem; margin:7px 0 3px; }
.cadena{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:11px; }
.eslabon{
  display:flex; gap:8px; align-items:baseline; font-size:.76rem;
  padding:7px 9px; border-radius:7px; background:var(--surface-soft); border:1px solid var(--border);
}
.eslabon b{ font-size:.63rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-400); min-width:74px; }
.eslabon.vacio{ color:var(--ink-400); font-style:italic; }
.n-cab{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sig{
  display:inline-flex; align-items:center; font:800 .64rem/1 var(--font);
  background:var(--brand-050); color:var(--brand-900); border:1px solid #C7E2E0;
  border-radius:6px; padding:5px 8px; letter-spacing:.03em;
}

/* ══════════════════ TIMELINE ══════════════════ */
.tl-mini{ list-style:none; margin:0; padding:0 0 0 17px; position:relative; display:grid; gap:13px; }
.tl-mini::before{ content:""; position:absolute; left:4px; top:5px; bottom:5px; width:2px; background:var(--border); }
.tl-mini li{ position:relative; }
.tl-mini li::before{
  content:""; position:absolute; left:-17px; top:5px; width:9px; height:9px;
  border-radius:50%; background:var(--brand-700); border:2px solid #fff; box-shadow:0 0 0 2px var(--brand-050);
}
.tl-mini li.curso::before{ background:var(--info); box-shadow:0 0 0 2px var(--info-bd); }
.tl-mini .f{ font-size:.72rem; font-weight:800; color:var(--brand-700); }
.tl-mini .t{ font-size:.82rem; color:var(--ink-700); }

.timeline{ list-style:none; margin:0; padding:0 0 0 24px; position:relative; }
.timeline::before{
  content:""; position:absolute; left:5px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--brand-700),var(--border));
}
.tl{ position:relative; padding:0 0 17px 6px; }
.tl::before{
  content:""; position:absolute; left:-23px; top:6px; width:10px; height:10px;
  border-radius:50%; background:var(--brand-700); border:2px solid #fff; box-shadow:0 0 0 2px var(--brand-050);
}
.tl.t-norma::before{ background:var(--info); box-shadow:0 0 0 2px var(--info-bd); }
.tl.t-cese::before{ background:var(--danger); box-shadow:0 0 0 2px var(--danger-bd); }
.tl.t-viaje::before{ background:#5B3FA8; box-shadow:0 0 0 2px #D7CBF2; }
.tl.t-hito::before{ background:var(--ok); box-shadow:0 0 0 2px var(--ok-bd); }
.tl-fecha{ font-size:.7rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-400); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.tl-fecha b{ color:var(--brand-700); }
.tl-t{ font-size:.9rem; font-weight:700; margin:3px 0 2px; }
.tl-d{ font-size:.79rem; color:var(--ink-500); }
.tl-agrupado{
  display:inline-block; margin-top:5px; font-size:.7rem; font-weight:700;
  background:var(--brand-050); color:var(--brand-900); border:1px solid #C7E2E0;
  border-radius:6px; padding:3px 8px;
}

/* ══════════════════ GABINETE ══════════════════ */
.min-mini{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.min-mini li{ display:flex; align-items:center; gap:11px; }
.min-mini b{ display:block; font-size:.84rem; color:var(--ink-900); }
/* `:not(.avatar)`: sin esto, `.min-mini span` (0,1,1) le ganaba a `.avatar`
   (0,1,0) e imponia display:block, con lo que place-items:center no hacia
   nada y las iniciales quedaban arriba a la izquierda del circulo. */
.min-mini span:not(.avatar){ display:block; font-size:.72rem; color:var(--ink-500); }

.avatar{
  flex:0 0 38px; width:38px; height:38px; border-radius:50%;
  display:inline-flex !important; align-items:center; justify-content:center;
  font:700 .78rem/1 var(--font); letter-spacing:.02em; text-align:center;
  background-size:cover; background-position:center;
  background-color:var(--brand-050); color:var(--brand-900); border:1px solid #C7E2E0;
}

.ficha-pres{ margin-bottom:var(--gap); }
.ficha-top{ display:flex; gap:15px; align-items:center; }
.retrato{
  width:62px; height:62px; flex:0 0 62px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-900); color:#fff; font:700 21px/1 var(--font);
  background-size:cover; background-position:center;
}
.rotulo{ font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-700); }
.ficha-top h3{ font-size:1.35rem; letter-spacing:-.025em; margin:2px 0; }
.sub{ font-size:.82rem; color:var(--ink-500); }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.hitos{ display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:14px 0 0; }
.hitos div{ background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; }
.hitos dt{ font-size:.63rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400); }
.hitos dd{ margin:2px 0 0; font-size:.82rem; font-weight:600; }

.estabilidad{ display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-bottom:var(--gap); }
.est{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px 14px; box-shadow:var(--shadow-card); }
.est dt{ font-size:.63rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-400); }
.est dd{ margin:3px 0 0; font-size:1.22rem; font-weight:800; color:var(--brand-900); font-variant-numeric:tabular-nums; }
.est dd small{ font-size:.72rem; font-weight:600; color:var(--ink-500); }

.tabla{ display:grid; gap:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:9px; box-shadow:var(--shadow-card); }
.fila{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:12px;
  padding:11px 12px; border-radius:var(--radius-sm); border-left:3px solid transparent;
  transition:.16s var(--ease);
}
.fila:hover{ background:var(--brand-025); border-left-color:var(--brand-700); }
.fila.activo{ border-left-color:var(--brand-700); }
.fila.cesado{ opacity:.6; border-left-color:var(--none); }
.fila.pendiente .quien{ color:var(--ink-400); font-style:italic; font-weight:500; }
.quien{ font-size:.9rem; font-weight:700; color:var(--ink-900); }
.cart{ font-size:.74rem; color:var(--ink-500); }
.dias{
  font:800 .68rem/1 var(--font); padding:6px 10px; border-radius:6px; white-space:nowrap;
  background:var(--brand-050); color:var(--brand-900); border:1px solid #C7E2E0;
  font-variant-numeric:tabular-nums;
}
.dias.frio{ background:var(--none-bg); color:var(--none); border-color:var(--none-bd); }
.dias.nulo{ background:var(--none-bg); color:var(--ink-400); border-color:var(--none-bd); }

/* ══════════════════ NORMAS ══════════════════ */
.norm-ctl{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.norm-ctl .filtros{ margin-bottom:0; }
.busca{ flex:1 1 260px; max-width:420px; }
.busca input{
  width:100%; font:inherit; font-size:.86rem; padding:10px 14px;
  border:1px solid var(--border); border-radius:9px; background:var(--surface-soft); color:var(--ink-700);
}
.busca input:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(10,139,135,.15); background:#fff; }

.normas{ margin-top:14px; }
.ntab{ width:100%; border-collapse:collapse; font-size:.84rem; }
.ntab th{
  text-align:left; font-size:.66rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-400); font-weight:800; padding:9px 10px; border-bottom:1px solid var(--border);
}
.ntab td{ padding:11px 10px; border-bottom:1px solid var(--border); vertical-align:middle; }
.ntab tr:last-child td{ border-bottom:none; }
.ntab tbody tr{ cursor:pointer; transition:background .15s; }
.ntab tbody tr:hover{ background:var(--brand-025); }
.ntab .n-num{ font-weight:700; color:var(--brand-900); white-space:nowrap; }
.ntab .n-fec{ white-space:nowrap; color:var(--ink-500); font-variant-numeric:tabular-nums; }
.ntab .n-sum{ color:var(--ink-700); }
.normas-pie{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:13px; }
.btn-mas{
  font:700 .82rem/1 var(--font); cursor:pointer; padding:11px 18px; border-radius:9px;
  background:#fff; color:var(--brand-900); border:1px solid var(--border); transition:.18s;
}
.btn-mas:hover{ border-color:var(--brand-500); background:var(--brand-025); }
.normas-cnt{ font-size:.76rem; color:var(--ink-500); }

/* ══════════════════ 100 DÍAS ══════════════════ */
.d100-semaforo{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:13px; }
.sem{
  display:inline-flex; align-items:center; gap:6px;
  font:700 .74rem/1 var(--font); padding:9px 13px; border-radius:8px;
  border:1px solid var(--border); background:var(--surface-soft);
}
.sem b{ font-variant-numeric:tabular-nums; }
.sem-verde{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok); }
.sem-ambar{ background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn); }
.sem-rojo{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger); }

.barra{ height:9px; border-radius:99px; background:var(--surface-soft); border:1px solid var(--border); overflow:hidden; margin-top:12px; }
.barra span{
  display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg,var(--brand-900),var(--brand-500));
  transition:width 1.2s var(--ease);
}
.barra-pie{ margin-top:7px; font-size:.75rem; color:var(--ink-500); }

.medidas{ display:grid; gap:7px; margin-top:14px; }
.medida{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:11px;
  padding:11px; border-radius:var(--radius-sm); background:var(--surface-soft);
  border:1px solid var(--border); border-left:3px solid var(--border);
}
.medida.ejecutada{ border-left-color:var(--ok); }
.medida.en_proceso{ border-left-color:#C08A00; }
.medida.no_iniciada{ border-left-color:var(--danger); }
.medida-t{ font-size:.85rem; font-weight:600; display:block; }
.medida-d{ font-size:.73rem; color:var(--ink-500); display:block; }
.medida-n{ font-size:.7rem; color:var(--ink-500); display:block; margin-top:3px; font-style:italic; }
.medida-t a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--border); }
.medida-t a:hover{ border-bottom-color:currentColor; }

/* Documentación que valida cada promesa */
.prom-doc{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;
  margin-top:10px; padding-top:9px; border-top:1px dashed var(--border);
  font-size:.72rem; line-height:1.5;
}
.prom-doc b{ color:var(--ink-500); font-weight:700; margin-right:2px; }
.prom-doc a{ color:var(--brand-900); text-decoration:none; border-bottom:1px solid var(--border); }
.prom-doc a:hover{ border-bottom-color:currentColor; }

.reloj130{ background:linear-gradient(165deg,var(--brand-025),#fff 62%); border-color:#C7E2E0; }
.r130-cab{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:8px; }
.r130-cab h2{ font-size:1rem; }
.r130-cifra{
  display:flex; align-items:baseline; gap:8px; margin:4px 0;
  font-size:2.7rem; font-weight:800; line-height:1; color:var(--brand-900);
  font-variant-numeric:tabular-nums;
}
.r130-cifra i{ font-size:.82rem; font-style:normal; font-weight:700; color:var(--ink-500); }
.r130-cifra.vencido{ color:var(--danger); }
.r130-txt{ margin-top:7px; font-size:.82rem; color:var(--ink-500); }
.r130-base{ margin-top:11px; padding-top:9px; border-top:1px solid var(--border); font-size:.72rem; color:var(--ink-400); }

/* ══════════════════ LECTURA RÁPIDA ══════════════════ */
.lectura{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.lec{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--brand-700);
  border-radius:var(--radius-sm); padding:15px 17px; box-shadow:var(--shadow-card);
}
.lec h3{ font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-700); margin-bottom:6px; }
.lec p{ font-size:.88rem; }

/* ══════════════════ BLOQUES PLEGABLES ══════════════════
   Cada sección grande se abre y cierra con su flecha, para que la portada
   entre en pantalla sin obligar a un desplazamiento largo. */
.bloque{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-card);
  margin-bottom:12px; overflow:hidden; scroll-margin-top:86px;
}
.bloque > summary{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  cursor:pointer; padding:17px 20px; list-style:none;
  transition:background .18s;
}
.bloque > summary::-webkit-details-marker{ display:none; }
.bloque > summary::after{
  content:"›"; margin-left:auto; font-size:1.5rem; line-height:1;
  color:var(--brand-700); transition:transform .28s var(--ease); align-self:center;
}
.bloque[open] > summary::after{ transform:rotate(90deg); }
.bloque > summary:hover{ background:var(--brand-025); }
.bloque[open] > summary{ border-bottom:1px solid var(--border); }
.bq-t{ font-size:1.12rem; font-weight:700; letter-spacing:-.02em; color:var(--ink-900); }
.bq-s{ font-size:.8rem; color:var(--ink-500); }
.bq-in{ padding:18px 20px 20px; animation:desplegar .3s var(--ease); }
.bloque .card{ box-shadow:none; }

/* ══════════════════ PÁGINAS SECUNDARIAS ══════════════════ */
.pagina{ padding-top:34px; padding-bottom:34px; }
.pagina h1{ font-size:1.7rem; letter-spacing:-.025em; }
.pagina-intro{ font-size:.92rem; color:var(--ink-500); max-width:74ch; margin-bottom:20px; }
.pagina-nota{ margin-top:22px; }
.pagina-nota h2{ font-size:1.02rem; margin-bottom:9px; }
.pasos{ margin:0 0 11px; padding-left:20px; font-size:.87rem; color:var(--ink-500); }
.pasos li{ margin-bottom:5px; }
.grid-f-3{ grid-template-columns:1fr; }
@media (min-width:768px){ .grid-f-3{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .grid-f-3{ grid-template-columns:repeat(3,1fr); } }

/* ══════════════════ SEGUIMIENTO ══════════════════ */
.seg-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--gap); align-items:start; }
.seg-col{ display:grid; gap:11px; }
.acor{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-card); overflow:hidden; }
.acor summary{ display:flex; align-items:center; gap:13px; cursor:pointer; padding:15px 17px; list-style:none; }
.acor summary::-webkit-details-marker{ display:none; }
.acor summary::after{
  content:"›"; margin-left:auto; font-size:1.35rem; color:var(--brand-700);
  transition:transform .28s var(--ease); line-height:1;
}
.acor[open] summary::after{ transform:rotate(90deg); }
.acor summary:hover{ background:var(--brand-025); }
.seg-ico{ flex:0 0 38px; height:38px; display:grid; place-items:center; background:var(--brand-050); border-radius:10px; font-size:1rem; }
.seg-t{ display:flex; flex-direction:column; min-width:0; }
.seg-t b{ font-size:.9rem; color:var(--ink-900); }
.seg-t small{ font-size:.74rem; color:var(--ink-500); }
.seg-cnt{ font-size:.72rem; color:var(--ink-400); white-space:nowrap; }
.acor-in{ padding:0 17px 17px; animation:desplegar .3s var(--ease); }
@keyframes desplegar{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }
.ctx{
  font-size:.76rem; color:var(--warn); background:var(--warn-bg);
  border:1px solid var(--warn-bd); border-radius:8px; padding:9px 11px; margin-bottom:12px;
}

.grid-f{ display:grid; gap:9px; }
.fuente{
  display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit;
  background:var(--surface-soft); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:11px 13px; transition:.18s var(--ease);
}
.fuente:hover{ border-color:var(--brand-500); background:var(--brand-025); }
/* Mismo problema de especificidad que en `.avatar`: `.fuente span` imponia
   display:block sobre el icono y la sigla se iba a la esquina. */
.fuente b{ display:block; font-size:.84rem; color:var(--ink-900); }
.fuente span:not(.fuente-ico):not(.fuente-ext){ display:block; font-size:.72rem; color:var(--ink-500); }
.fuente-ico{
  flex:0 0 36px; width:36px; height:36px; border-radius:9px;
  display:inline-flex !important; align-items:center; justify-content:center;
  font:800 .64rem/1 var(--font); letter-spacing:.02em; text-align:center;
  background:#fff; border:1px solid var(--border); color:var(--brand-900);
}

/* ── Colores alternos para las cajas de iniciales ──────────────────────
   Cinco tintes de la paleta institucional, rotando. Es decoración: el
   significado sigue estando en el texto, nunca solo en el color. */
.min-mini li:nth-child(5n+1) .avatar,
.grid-f .fuente:nth-child(5n+1) .fuente-ico{ background:#E8F3F2; color:#005C59; border-color:#C7E2E0; }
.min-mini li:nth-child(5n+2) .avatar,
.grid-f .fuente:nth-child(5n+2) .fuente-ico{ background:#E8F1F9; color:#12558A; border-color:#BBD6EC; }
.min-mini li:nth-child(5n+3) .avatar,
.grid-f .fuente:nth-child(5n+3) .fuente-ico{ background:#E9F6EE; color:#0F7B3F; border-color:#BFE3CC; }
.min-mini li:nth-child(5n+4) .avatar,
.grid-f .fuente:nth-child(5n+4) .fuente-ico{ background:#FFF6E0; color:#8A6100; border-color:#F3DCA4; }
.min-mini li:nth-child(5n+5) .avatar,
.grid-f .fuente:nth-child(5n+5) .fuente-ico{ background:#F1EDFB; color:#5B3FA8; border-color:#D7CBF2; }
.fuente-ext{ margin-left:auto; color:var(--ink-400); font-size:.9rem; }

/* ══════════════════ NOTICIAS / VIDEO ══════════════════ */
.grid-n{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.nota{
  display:block; text-decoration:none; color:inherit; background:var(--surface-soft);
  border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px; transition:.18s var(--ease);
}
.nota:hover{ border-color:var(--brand-500); background:var(--brand-025); }
.nota h3{ font-size:.85rem; font-weight:700; margin-bottom:5px; }
.nota-meta{ font-size:.72rem; color:var(--ink-400); }
.nota-meta b{ color:var(--brand-700); }
.vid{ display:block; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); }
.vid:hover{ border-color:var(--brand-500); }
.vid img{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--border); }
.vid div{ padding:11px; }
.vid h3{ font-size:.82rem; margin-bottom:3px; }
.vid p{ font-size:.7rem; color:var(--ink-400); }

.ytbox{ background:var(--brand-025); border:1px solid #C7E2E0; border-radius:var(--radius-sm); padding:14px; margin-bottom:13px; }
.yt-lab{ display:block; font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--brand-700); margin-bottom:7px; }
.yt-row{ display:flex; gap:7px; flex-wrap:wrap; }
.yt-row input{ flex:1 1 220px; font:inherit; font-size:.85rem; padding:10px 13px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.yt-row input:focus{ outline:none; border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(10,139,135,.15); }
.btn{
  font:700 .82rem/1 var(--font); cursor:pointer; padding:11px 17px; border-radius:8px;
  background:var(--brand-900); color:#fff; border:1px solid var(--brand-900); transition:.18s;
  text-decoration:none; display:inline-flex; align-items:center;
}
.btn:hover{ background:var(--brand-700); border-color:var(--brand-700); color:#fff; }
.btn.ghost{ background:#fff; color:var(--brand-900); }
.btn.ghost:hover{ background:var(--brand-025); color:var(--brand-900); }
.yt-estado{ font-size:.78rem; font-weight:600; margin-top:9px; min-height:1.1em; }
.yt-estado.ok{ color:var(--ok); } .yt-estado.err{ color:var(--danger); }
.fine{ font-size:.74rem; color:var(--ink-500); margin-top:10px; line-height:1.45; }

.meto{ font-size:.85rem; color:var(--ink-500); }
.meto h4{ font-size:.85rem; margin:13px 0 5px; color:var(--ink-900); }
.meto ul{ margin:5px 0; padding-left:19px; }
.meto li{ margin-bottom:4px; }
.mini{ width:100%; border-collapse:collapse; font-size:.8rem; }
.mini th{ text-align:left; font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-400); padding:7px 9px; border-bottom:1px solid var(--border); }
.mini td{ padding:8px 9px; border-bottom:1px solid var(--border); }
.mini tr:last-child td{ border-bottom:none; }
.mini-wrap{ overflow-x:auto; }

/* ══════════════════ VACÍO ══════════════════ */
.vac{
  text-align:center; padding:22px 16px; grid-column:1/-1;
  border:1px dashed var(--border); border-radius:var(--radius-sm);
  background:var(--surface-soft); color:var(--ink-500); font-size:.83rem;
}
.vac b{ display:block; margin-bottom:5px; color:var(--ink-900); }
.vac code{ background:#fff; border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-size:.9em; }

/* ══════════════════ VISOR ══════════════════ */
.visor{ position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:18px; }
.visor[hidden]{ display:none; }
.visor-fondo{ position:absolute; inset:0; background:rgba(16,33,43,.6); backdrop-filter:blur(3px); }
.visor-caja{
  position:relative; z-index:1; width:100%; max-width:1040px; height:min(88vh,920px);
  display:flex; flex-direction:column; overflow:hidden; background:#fff;
  border-radius:var(--radius-md); box-shadow:var(--shadow-pop);
  animation:entrarCaja .26s var(--ease);
}
@keyframes entrarCaja{ from{ opacity:0; transform:translateY(16px) scale(.985);} to{ opacity:1; transform:none;} }
.visor-cab{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:15px 18px; border-bottom:1px solid var(--border); background:var(--brand-025);
}
.visor-cab h2{ font-size:1.05rem; margin:2px 0; }
.visor-sum{ font-size:.79rem; color:var(--ink-500); max-width:62ch; }
.visor-acciones{ display:flex; gap:8px; flex-wrap:wrap; }
.visor-cuerpo{ flex:1; position:relative; background:var(--surface-soft); }
.visor-cuerpo iframe{ width:100%; height:100%; border:0; display:block; background:#fff; }
.visor-cargando{ position:absolute; inset:0; display:grid; place-items:center; font-size:.86rem; color:var(--ink-400); background:var(--surface-soft); z-index:1; }
.visor-cargando.oculto{ display:none; }
.visor-pie{ padding:10px 18px; font-size:.72rem; color:var(--ink-400); border-top:1px solid var(--border); }
body.sin-scroll{ overflow:hidden; }

/* ══════════════════ PIE ══════════════════ */
.pie{ background:var(--brand-900); color:#fff; margin-top:44px; padding:30px 0 22px; }
.pie-in{ display:flex; align-items:flex-start; justify-content:space-between; gap:22px; flex-wrap:wrap; }
.pie-marca b{ font-size:1.2rem; display:block; }
.pie-marca span,.pie-centro span{ font-size:.8rem; color:rgba(255,255,255,.72); display:block; margin-top:3px; }
.pie-centro b{ font-size:.95rem; }
.pie-nav{ display:flex; gap:18px; flex-wrap:wrap; }
.pie-nav a{ color:#fff; font-size:.85rem; font-weight:600; text-decoration:none; }
.pie-nav a:hover{ text-decoration:underline; }
.pie-btn{
  background:none; border:0; padding:0; cursor:pointer;
  color:#fff; font:600 .85rem/1 var(--font); text-decoration:none;
}
.pie-btn:hover{ text-decoration:underline; }
.pie-legal{
  margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.18);
  font-size:.75rem; color:rgba(255,255,255,.66); max-width:96ch;
}
.pie-autor{
  margin-top:12px; font-size:.78rem; color:rgba(255,255,255,.7);
}
.pie-autor a{ color:#fff; font-weight:700; text-decoration:none; }
.pie-autor a:hover{ text-decoration:underline; }

/* ══════════════════ ACERCA DE ══════════════════ */
.acerca-caja{
  position:relative; z-index:1; width:100%; max-width:560px;
  background:#fff; border-radius:var(--radius-md); box-shadow:var(--shadow-pop);
  padding:26px 28px; animation:entrarCaja .26s var(--ease);
}
.acerca-caja h2{ font-size:1.2rem; margin-bottom:12px; }
.acerca-caja p{ font-size:.88rem; color:var(--ink-500); margin-bottom:11px; }
.acerca-caja p b{ color:var(--ink-900); }
.acerca-autor{ padding-top:11px; border-top:1px solid var(--border); }
.acerca-autor a{ color:var(--brand-700); font-weight:700; text-decoration:none; }
.acerca-autor a:hover{ text-decoration:underline; }
.acerca-pie{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width:1199px){
  :root{ --pad:22px; --gap:16px; }
  .tablero{ grid-template-columns:repeat(2,1fr); }
  .lectura{ grid-template-columns:repeat(2,1fr); }
  .seg-grid{ grid-template-columns:1fr; }
  .hitos{ grid-template-columns:repeat(2,1fr); }
  .grid-n{ grid-template-columns:repeat(2,1fr); }
  .nav > a,.mas-btn{ padding:9px 10px; font-size:.87rem; }
  .nav .cta{ padding:10px 15px; margin-left:6px; }
  .marca-txt small{ display:none; }
}

@media (max-width:1023px){
  .kpis{ grid-template-columns:repeat(2,1fr); margin-top:-56px; }
  .dos{ grid-template-columns:1fr; }
  .estabilidad{ grid-template-columns:repeat(2,1fr); }
  .hero-in{ min-height:320px; padding-bottom:84px; }
}

@media (max-width:767px){
  :root{ --pad:16px; --gap:14px; }
  body{ font-size:14.5px; }

  .menu-btn{ display:grid; place-items:center; }
  .nav{
    position:fixed; inset:64px 0 auto 0; margin:0; z-index:119;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-pop); padding:12px 16px 18px; display:none;
    max-height:calc(100dvh - 64px); overflow-y:auto;
  }
  .nav.abierto{ display:flex; }
  /* El panel desplegable es blanco: el texto vuelve a color oscuro. */
  .nav > a{ padding:13px 12px; font-size:1rem; color:var(--ink-700); }
  .nav > a:hover{ background:var(--brand-025); color:var(--brand-900); }
  .nav > a.activo::after{ display:none; }
  .nav > a.activo{ background:var(--brand-025); color:var(--brand-900); }
  .nav .cta{ margin:8px 0 0; text-align:center; padding:14px;
             background:var(--brand-900); color:#fff; }
  .mas{ width:100%; }
  .mas-btn{ width:100%; text-align:left; padding:13px 12px; font-size:1rem; color:var(--ink-700); }
  .mas-btn:hover,.mas-btn[aria-expanded="true"]{ background:var(--brand-025); color:var(--brand-900); }
  .icono-btn{ color:var(--ink-500); }
  .icono-btn:hover{ background:var(--brand-025); color:var(--brand-900); }
  .idioma{ color:var(--ink-500); padding:8px 12px; }
  .mas-menu{ position:static; box-shadow:none; border:0; padding:0 0 0 12px; min-width:0; }

  .hero-in{ min-height:440px; padding-top:26px; padding-bottom:90px; flex-direction:column; }
  .hero-img{ background-position:62% center; }
  .hero-velo{
    background:linear-gradient(180deg,
      rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 52%, rgba(255,255,255,.55) 100%);
  }
  .hero h1{ font-size:2rem; }
  .hero-sub{ font-size:.95rem; }
  .actualizado{ align-self:flex-start; }

  .kpis{ grid-template-columns:repeat(2,1fr); margin-top:-46px; }
  .kpi{ flex-direction:column; gap:9px; padding:15px; }
  .kpi-val{ font-size:2rem; }
  .anillo{ position:absolute; top:13px; right:13px; }

  .tablero,.lectura,.promesas-lista,.grid-n,.estabilidad,.hitos,.cadena,.cadena3{ grid-template-columns:1fr; }

  .fila{ grid-template-columns:auto 1fr; gap:9px 11px; }
  .fila .dias,.fila .rs,.fila .rs-txt{ grid-column:2; justify-self:start; }

  .norm-ctl{ flex-direction:column; align-items:stretch; }
  .busca{ max-width:none; }

  /* Tabla de normas -> tarjetas apiladas, sin desbordar la página */
  .ntab,.ntab tbody,.ntab tr,.ntab td{ display:block; width:100%; }
  .ntab thead{ display:none; }
  .ntab tr{
    border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:12px; margin-bottom:9px; background:var(--surface-soft);
  }
  .ntab td{ border:0; padding:2px 0; }
  .ntab td::before{
    content:attr(data-r); display:block; font-size:.62rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.05em; color:var(--ink-400);
  }
  .ntab td.n-est{ margin-top:7px; }

  .visor{ padding:0; }
  .visor-caja{ height:100dvh; max-width:none; border-radius:0; }
  .pie-in{ flex-direction:column; gap:16px; }
}

/* Solo en pantallas realmente estrechas se pasa a una sola columna: en
   390–412 px (iPhone/Android habituales) dos columnas siguen siendo legibles
   y evitan una portada excesivamente alta. */
@media (max-width:359px){
  .kpis{ grid-template-columns:1fr; }
}

/* ══════════════════ ACCESIBILIDAD / IMPRESIÓN ══════════════════ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .anim,.js .anim{ opacity:1 !important; transform:none !important; }
  .stagger > *{ opacity:1 !important; transform:none !important; }
}

@media print{
  .head,.nav,.filtros,.busca,.ytbox,.pie,.visor,.actualizado{ display:none !important; }
  body{ background:#fff; }
  .anim,.js .anim,.stagger > *{ opacity:1 !important; transform:none !important; }
  .acor-in{ display:block !important; }
  .card,.kpi{ box-shadow:none; break-inside:avoid; }
}