@import url('fonts.css');

/* =====================================================================
   ZUIAURA · sistema de diseño
   ===================================================================== */
:root{
  /* tinta */
  --ink:#12252E;
  --ink-soft:#415763;      /* texto secundario — contraste AA sobre papel */
  --ink-mute:#6A7F8B;      /* sólo rótulos grandes, nunca texto corrido */

  /* papel */
  --paper:#FCFBF8;
  --paper-warm:#F5F2EA;
  --paper-cool:#EDF3F6;

  /* agua */
  --w050:#EAF4F9;
  --w100:#D3E7F1;
  --w300:#7FB8D4;
  --w500:#2E86AE;
  --w600:#17708F;
  --w800:#0E4560;
  --w900:#082F44;

  /* acentos */
  --sand:#B5842A;
  --sand-050:#F8EFDC;
  --sand-200:#EBD5A6;
  --clay:#B4472C;
  --moss:#2F7057;

  --line:#E2E0D8;
  --line-cool:#D3E0E8;

  --r-sm:10px;
  --r:16px;
  --r-lg:24px;

  --sh-sm:0 1px 2px rgba(14,69,96,.05);
  --sh:0 2px 4px rgba(14,69,96,.04), 0 12px 32px -8px rgba(14,69,96,.10);
  --sh-lg:0 4px 8px rgba(14,69,96,.05), 0 24px 60px -16px rgba(14,69,96,.16);

  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.72;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}

/* ---------- tipografía ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:600;line-height:1.15;
  letter-spacing:-.015em;margin:0 0 .55em;
}
h2{font-size:clamp(1.85rem,4vw,2.9rem)}
h3{font-size:clamp(1.15rem,2.2vw,1.4rem)}
p{margin:0 0 1.1em}
strong{font-weight:600}
a{color:var(--w800);text-underline-offset:.18em;text-decoration-thickness:.07em}
a:hover{color:var(--w600)}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.wide{max-width:1500px}
.narrow{max-width:760px}

.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;background:#fff;padding:12px 20px;z-index:99;border-radius:10px;box-shadow:var(--sh)}
:focus-visible{outline:3px solid var(--w500);outline-offset:3px;border-radius:4px}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1200px 520px at 78% -12%, rgba(127,184,212,.42), transparent 62%),
    linear-gradient(168deg,#082F44 0%,#0E4560 46%,#17708F 100%);
  padding:clamp(48px,8vw,88px) 0 0;
}
.hero::after{
  content:"";position:absolute;inset:auto 0 -1px 0;height:70px;
  background:
    radial-gradient(70% 80px at 20% 100%, var(--paper) 99%, transparent 100%),
    radial-gradient(60% 66px at 62% 100%, var(--paper) 99%, transparent 100%),
    radial-gradient(70% 86px at 98% 100%, var(--paper) 99%, transparent 100%);
}
.hero .wrap{position:relative;z-index:2;padding-bottom:clamp(62px,10vw,112px)}

.brand{display:flex;align-items:center;gap:15px;margin-bottom:clamp(28px,5vw,46px)}
.drop{
  width:36px;height:36px;flex:none;background:#fff;
  border-radius:50% 50% 50% 5px;transform:rotate(-45deg);
  box-shadow:inset -5px 5px 0 rgba(23,112,143,.24);
}
.brand h1{font-size:clamp(1.5rem,3.2vw,1.9rem);margin:0;font-weight:600;letter-spacing:.005em}
.eyebrow{
  font-family:var(--sans);font-size:.73rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.19em;color:var(--w300);margin:0 0 .8em;
}
.hero-h{
  font-size:clamp(2.3rem,6.4vw,4.4rem);line-height:1.05;margin:0 0 .4em;
  font-weight:600;letter-spacing:-.028em;max-width:17ch;
}
.hero-h em{font-style:italic;color:var(--w300)}
.lede{
  max-width:56ch;font-size:clamp(1.05rem,2vw,1.26rem);line-height:1.62;
  color:rgba(255,255,255,.9);margin-bottom:1.5em;
}
.hero-src{
  display:inline-flex;align-items:center;gap:11px;font-size:.88rem;
  color:rgba(255,255,255,.84);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 19px;
}
.hero-src b{color:#fff;font-weight:600}

.jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(30px,5vw,46px)}
.jump a{
  color:rgba(255,255,255,.9);text-decoration:none;font-size:.86rem;font-weight:500;
  padding:9px 17px;border:1px solid rgba(255,255,255,.26);border-radius:999px;
  transition:background .18s,border-color .18s,color .18s;
}
.jump a:hover{background:#fff;border-color:#fff;color:var(--w800)}

/* =====================================================================
   SECCIONES
   ===================================================================== */
.section{padding:clamp(56px,8.5vw,100px) 0;position:relative}
.section.warm{background:var(--paper-warm)}
.section.cool{background:var(--paper-cool)}
.section.warm,.section.cool{border-block:1px solid var(--line)}

.s-head{max-width:66ch;margin-bottom:clamp(28px,4vw,44px)}
.s-num{
  display:block;font-family:var(--sans);font-size:.73rem;font-weight:700;
  letter-spacing:.2em;color:var(--w600);margin-bottom:1.2em;
}
.s-num::before{content:"";display:inline-block;width:26px;height:1px;background:var(--w300);vertical-align:middle;margin-right:11px}
.intro{color:var(--ink-soft);font-size:clamp(1rem,1.8vw,1.1rem);max-width:64ch;margin:0}

/* =====================================================================
   KPIs
   ===================================================================== */
.kpis{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(192px,1fr));margin:0 0 28px}
.kpi{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 22px 22px;box-shadow:var(--sh-sm);position:relative;overflow:hidden;
}
.kpi::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--w500)}
.kpi .n{
  font-family:var(--serif);font-size:clamp(1.95rem,4.2vw,2.5rem);font-weight:600;
  color:var(--w800);line-height:1;letter-spacing:-.03em;
}
.kpi .n small{font-size:.42em;font-weight:500;margin-left:.14em;font-family:var(--sans);letter-spacing:0}
.kpi .l{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-soft);margin-top:14px;font-weight:600;line-height:1.45;
}
.kpi .s{font-size:.86rem;color:var(--ink-soft);margin-top:9px;line-height:1.55}
.kpi.alarma::before{background:var(--clay)}
.kpi.alarma .n{color:var(--clay)}

/* =====================================================================
   BLOQUE «CUELLO DE BOTELLA» · aforador de Santa Marina
   ===================================================================== */
.cuello{
  display:grid;gap:clamp(26px,4vw,46px);align-items:center;
  background:linear-gradient(150deg,#0E4560,#17708F);color:#fff;
  border-radius:var(--r-lg);padding:clamp(28px,5vw,46px);box-shadow:var(--sh-lg);
}
@media(min-width:920px){.cuello{grid-template-columns:1fr 1fr}}
.cuello h3{color:#fff;font-size:clamp(1.3rem,2.6vw,1.8rem);margin-bottom:.55em}
.cuello p{color:rgba(255,255,255,.87);font-size:.97rem;margin-bottom:.9em;line-height:1.65}
.cuello p:last-child{margin-bottom:0}
.cuello b{color:#fff;font-weight:600}

.aforador{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:clamp(20px,3vw,26px)}
.af-row{margin-bottom:22px}
.af-row:last-child{margin-bottom:0}
.af-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:9px}
.af-lab{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--w300);font-weight:600}
.af-val{font-family:var(--serif);font-size:1.35rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.af-bar{height:24px;border-radius:6px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.af-fill{position:absolute;inset:0 auto 0 0;border-radius:6px}
.af-fill.nominal{background:repeating-linear-gradient(115deg,rgba(255,255,255,.18) 0 7px,rgba(255,255,255,.07) 7px 14px)}
.af-fill.real{background:linear-gradient(90deg,#7FB8D4,#A9D6EA)}
.af-fill.salida{background:linear-gradient(90deg,#DE8163,#CE5B41)}
.af-note{font-size:.79rem;color:rgba(255,255,255,.66);margin-top:9px;line-height:1.5}

/* =====================================================================
   DESTACADO
   ===================================================================== */
.callout{
  background:var(--w050);border:1px solid var(--w100);border-left:4px solid var(--w500);
  border-radius:0 var(--r) var(--r) 0;padding:clamp(22px,3.5vw,32px);margin-top:28px;
}
.callout h3{
  font-family:var(--sans);font-size:.73rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--w600);margin-bottom:1em;font-weight:700;
}
.callout p{margin:0;font-size:clamp(1.01rem,1.9vw,1.13rem);line-height:1.68;color:var(--ink)}

/* =====================================================================
   RED · leyenda + esquema
   ===================================================================== */
.leyenda{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 20px;font-size:.84rem;color:var(--ink-soft)}
.leyenda span{display:inline-flex;align-items:center;gap:9px}
.sw{width:14px;height:14px;border-radius:4px;display:inline-block}
.sw-captacion{background:#17708F}
.sw-sondeo{background:#4A6B7C}
.sw-deposito{background:#0E4560}
.sw-nucleo{background:#EBD5A6;border:1.5px solid #C9AE6B}

.red-layout{display:grid;gap:20px;grid-template-columns:1fr}
@media(min-width:1140px){.red-layout{grid-template-columns:minmax(0,1fr) 340px;align-items:start}}

.red-svg-box{background:#fff;border:1px solid var(--line-cool);border-radius:var(--r);padding:14px;box-shadow:var(--sh)}
#red-svg{width:100%;height:auto;display:block}

/* --- nodos SVG: contraste alto, sin grises débiles --- */
.nodo{cursor:pointer}
.nodo .caja{transition:filter .16s}
.nodo:hover .caja{filter:brightness(1.12)}
.nodo:focus{outline:none}
.nodo:focus-visible .caja,.nodo.sel .caja{stroke:var(--ink);stroke-width:3.5}
.nodo text{pointer-events:none;font-family:var(--sans)}
.n-nombre{font-size:16px;font-weight:600}
.n-sub{font-size:13.5px;font-weight:500}

/* etiquetas de tubería: tinta media + halo blanco para leerse sobre cualquier fondo */
.tub-label{
  font-size:13px;font-weight:600;fill:#3C525E;font-family:var(--sans);
  paint-order:stroke fill;stroke:#fff;stroke-width:4px;stroke-linejoin:round;
}
.tuberia{fill:none;stroke:#8FB9CE;stroke-width:2.6;stroke-linejoin:round}
.tuberia.principal{stroke:#2E86AE;stroke-width:4.5;stroke-linejoin:round}
.trunk{fill:none;stroke:#17708F;stroke-width:6;stroke-linecap:round}
.zona{fill:rgba(181,132,42,.05);stroke:#C9AE6B;stroke-width:1.6;stroke-dasharray:8 6}
.zona-label{
  font-size:12px;fill:#8A6420;font-weight:700;letter-spacing:.14em;font-family:var(--sans);
  paint-order:stroke fill;stroke:#fff;stroke-width:4px;stroke-linejoin:round;
}

/* =====================================================================
   RED · vista de tarjetas (pantallas estrechas)
   ===================================================================== */
.red-flow{display:none}
.etapa{margin-bottom:6px}
.etapa-h{
  display:flex;align-items:center;gap:12px;margin:0 0 12px;
  font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--w600);
}
.etapa-h::after{content:"";flex:1;height:1px;background:var(--line-cool)}
.etapa-cards{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
.etapa-flecha{display:block;text-align:center;color:var(--w300);font-size:1.15rem;line-height:1;margin:16px 0 18px}

.ncard{
  width:100%;text-align:left;font:inherit;cursor:pointer;display:block;
  border:1px solid var(--line-cool);border-radius:var(--r-sm);background:#fff;
  padding:15px 17px;box-shadow:var(--sh-sm);transition:border-color .16s,box-shadow .16s;
}
.ncard:hover{border-color:var(--w500)}
.ncard[aria-expanded="true"]{border-color:var(--w600);box-shadow:var(--sh)}
.nc-top{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.nc-dot{width:11px;height:11px;border-radius:3px;flex:none}
.nc-tipo{font-size:.64rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--ink-soft)}
.nc-nom{font-family:var(--serif);font-size:1.05rem;font-weight:600;letter-spacing:-.01em;color:var(--ink);display:block}
.nc-sub{font-size:.83rem;color:var(--ink-soft);margin-top:3px}
.nc-body{margin-top:14px;padding-top:14px;border-top:1px solid var(--line-cool)}
.nc-body[hidden]{display:none}
.nc-body .p-tipo{display:none}
.nc-body h3{font-size:1.02rem;margin-bottom:10px}

/* =====================================================================
   PANEL de detalle
   ===================================================================== */
.panel{
  background:#fff;border:1px solid var(--line-cool);border-radius:var(--r);
  padding:26px;box-shadow:var(--sh);position:sticky;top:20px;
}
.panel-empty{color:var(--ink-soft);font-size:.92rem}
.panel-empty strong{color:var(--ink);font-family:var(--serif);font-size:1.05rem;display:block;margin-bottom:.45em}
.p-tipo{font-size:.69rem;text-transform:uppercase;letter-spacing:.15em;font-weight:700;color:var(--w600);margin:0 0 6px}
.panel h3{margin:0 0 16px;font-size:1.4rem}
.p-datos{list-style:none;padding:0;margin:0 0 16px;border-top:1px solid var(--line-cool)}
.p-datos li{
  display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--line-cool);font-size:.89rem;
}
.p-datos .k{color:var(--ink-soft)}
.p-datos .v{font-weight:600;text-align:right;white-space:nowrap;color:var(--ink)}
.p-datos.conex{margin-top:16px}
.p-datos.conex li{display:block;color:var(--ink-soft);font-size:.85rem}
.p-texto{font-size:.91rem;color:var(--ink-soft);margin:0;line-height:1.65}
.p-nota{
  margin:16px 0 0;padding:14px 16px;background:var(--sand-050);
  border-left:3px solid var(--sand);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.85rem;color:#6B5324;line-height:1.6;
}
.chip-dudoso{
  display:inline-block;background:var(--sand-050);color:#7A5C18;border:1px solid var(--sand-200);
  font-size:.64rem;font-weight:700;padding:3px 10px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.09em;vertical-align:middle;font-family:var(--sans);
}

/* =====================================================================
   GRÁFICO
   ===================================================================== */
.chart-controls{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.chart-controls button{
  font:inherit;font-size:.86rem;font-weight:500;cursor:pointer;
  padding:9px 20px;border-radius:999px;border:1px solid var(--line-cool);
  background:#fff;color:var(--ink-soft);transition:.16s;
}
.chart-controls button:hover{border-color:var(--w500);color:var(--w800)}
.chart-controls button.on{background:var(--w800);border-color:var(--w800);color:#fff;font-weight:600}
.chart-box{
  position:relative;background:#fff;border:1px solid var(--line-cool);
  border-radius:var(--r);padding:20px 16px 10px;box-shadow:var(--sh);
}
#chart{width:100%;height:auto;display:block}
.barra{cursor:pointer;transition:opacity .12s}
.barra:hover{opacity:.75}
.eje{stroke:#E4EBEF;stroke-width:1}
.eje-txt{font-size:12px;fill:#5C7180;font-family:var(--sans);font-weight:500}
.mes-txt{font-size:13px;fill:var(--ink);font-weight:600;font-family:var(--sans)}
.media-line{stroke:var(--clay);stroke-width:1.8;stroke-dasharray:7 5}
.media-txt{
  font-size:12px;fill:var(--clay);font-weight:700;font-family:var(--sans);
  paint-order:stroke fill;stroke:#fff;stroke-width:4px;stroke-linejoin:round;
}
.tope-line{stroke:var(--w800);stroke-width:1.6;stroke-dasharray:2 4}
.tope-txt{
  font-size:12px;fill:var(--w800);font-weight:700;font-family:var(--sans);
  paint-order:stroke fill;stroke:#fff;stroke-width:4px;stroke-linejoin:round;
}
.tooltip{
  position:absolute;pointer-events:none;background:var(--ink);color:#fff;
  padding:10px 14px;border-radius:var(--r-sm);font-size:.82rem;line-height:1.45;
  transform:translate(-50%,-118%);white-space:nowrap;z-index:5;
  box-shadow:0 10px 28px rgba(0,0,0,.28);font-weight:500;
}
.tooltip b{font-family:var(--serif);font-size:1.05rem;font-weight:600;display:block}

.stats-mes{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));margin:18px 0 0}
.st{background:#fff;border:1px solid var(--line-cool);border-radius:var(--r-sm);padding:16px 18px}
.st .sn{font-family:var(--serif);font-size:1.38rem;font-weight:600;color:var(--w800);letter-spacing:-.02em;line-height:1.1}
.st .sl{font-size:.71rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft);font-weight:600;margin-top:6px;line-height:1.4}

.nota-datos{
  margin-top:24px;font-size:.89rem;color:var(--ink-soft);line-height:1.65;
  background:#fff;border:1px solid var(--line-cool);border-radius:var(--r);padding:22px 24px;
}
.nota-datos p:last-child{margin-bottom:0}
.nota-datos strong{color:var(--ink)}

/* =====================================================================
   CRONOLOGÍA
   ===================================================================== */
.timeline{list-style:none;padding:0;margin:0;position:relative;max-width:78ch}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:1.5px;background:var(--line-cool)}
.timeline li{position:relative;padding:0 0 30px 38px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--w500);z-index:1;
}
.section.warm .timeline li::before{background:var(--paper-warm)}
.section.cool .timeline li::before{background:var(--paper-cool)}
.timeline li.hito::before{border-color:var(--moss);background:var(--moss);box-shadow:0 0 0 4px rgba(47,112,87,.14)}
.timeline li.descartado::before{border-color:#9BABB4}
.timeline li.pendiente::before{border-color:var(--sand)}
.timeline li.actual::before{border-color:var(--clay);background:var(--clay);box-shadow:0 0 0 5px rgba(180,71,44,.15)}
.tl-anio{font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--w600)}
.timeline li.hito .tl-anio{color:var(--moss)}
.timeline li.actual .tl-anio{color:var(--clay)}
.timeline li.pendiente .tl-anio{color:#8A6420}
.timeline li.descartado .tl-anio{color:#5F707A}
.tl-tit{font-family:var(--serif);font-size:1.18rem;font-weight:600;margin:5px 0 7px;letter-spacing:-.012em}
.tl-txt{margin:0;color:var(--ink-soft);font-size:.93rem;line-height:1.68}

/* =====================================================================
   DINERO
   ===================================================================== */
.big-money{
  display:grid;gap:10px 36px;align-items:center;margin:0 0 28px;
  background:linear-gradient(140deg,#082F44,#17708F);color:#fff;
  border-radius:var(--r-lg);padding:clamp(28px,5vw,44px);box-shadow:var(--sh-lg);
}
@media(min-width:760px){.big-money{grid-template-columns:auto 1fr}}
.bm-cifra{
  font-family:var(--serif);font-size:clamp(2.3rem,6.2vw,3.6rem);font-weight:600;
  letter-spacing:-.035em;line-height:1;
}
.bm-desc{font-size:.96rem;line-height:1.62;color:rgba(255,255,255,.87)}
.bm-desc b{color:#fff;font-weight:600}

.tabla-box{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.87rem}
caption{text-align:left;padding:18px 20px 6px;font-size:.78rem;color:var(--ink-soft);font-weight:500}
th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
thead th{
  font-size:.69rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--ink-soft);background:var(--paper-warm);font-weight:700;
}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr.dest{background:var(--w050)}
tr.dest td{font-weight:600;color:var(--w800)}
tbody tr:last-child td{border-bottom:none}

/* =====================================================================
   CUESTIONES
   ===================================================================== */
.cuestiones{display:grid;gap:10px;max-width:82ch}
.cuestiones details{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-sm);overflow:hidden;transition:box-shadow .18s;
}
.cuestiones details[open]{box-shadow:var(--sh)}
.cuestiones summary{
  cursor:pointer;padding:18px 22px;font-weight:600;font-size:1rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--serif);letter-spacing:-.01em;
}
.cuestiones summary::-webkit-details-marker{display:none}
.cuestiones summary::after{
  content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--w500);
  border-bottom:2px solid var(--w500);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s;
}
.cuestiones details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.cuestiones summary:hover{color:var(--w800)}
.cuestiones .c-body{padding:0 22px 20px;color:var(--ink-soft);font-size:.92rem;line-height:1.7}

/* =====================================================================
   PROPUESTA
   ===================================================================== */
.pide{background:#fff;border:1px solid var(--line-cool);border-radius:var(--r);padding:clamp(24px,4vw,34px);margin-top:28px}
.pide h3{margin-top:0;color:var(--w800)}
.pide ol{margin:0;padding-left:1.35em}
.pide li{margin-bottom:11px;color:var(--ink-soft)}
.pide li::marker{color:var(--w500);font-weight:700}
.pide li:last-child{margin-bottom:0}
.pide li strong{color:var(--ink)}

/* =====================================================================
   FUENTES / FIGURAS
   ===================================================================== */
.fuente-det{margin-top:28px;border-top:1px solid var(--line-cool);padding-top:18px}
.fuente-det summary{
  cursor:pointer;font-size:.85rem;font-weight:600;color:var(--w800);
  list-style:none;display:inline-flex;align-items:center;gap:9px;
}
.fuente-det summary::-webkit-details-marker{display:none}
.fuente-det summary::before{content:"▸";color:var(--w500);transition:transform .2s;display:inline-block}
.fuente-det[open] summary::before{transform:rotate(90deg)}
.fuente-det figure{margin:18px 0 0}
.fuente-det img{width:100%;height:auto;border-radius:var(--r-sm);border:1px solid var(--line);display:block}
.fuente-det figcaption{font-size:.8rem;color:var(--ink-soft);margin-top:10px;line-height:1.55}
.dos-figs{display:grid;gap:20px;grid-template-columns:1fr;margin-top:18px}
@media(min-width:740px){.dos-figs{grid-template-columns:1fr 1fr}}
.dos-figs figure{margin:0}

/* =====================================================================
   PIE
   ===================================================================== */
.footer{background:var(--ink);color:#AEC2CE;padding:clamp(52px,8vw,84px) 0 44px;font-size:.91rem;line-height:1.72}
.footer h2{color:#fff;font-size:clamp(1.3rem,2.6vw,1.7rem)}
.footer p{max-width:72ch}
.footer strong{color:#fff;font-weight:600}
.foot-msg{max-width:74ch}
.foot-msg h2{margin-bottom:.5em}
.foot-msg p{margin-bottom:1em}
.foot-msg p:last-child{margin-bottom:0}
.foot-cierre{font-size:.87rem;color:#94A9B6;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
.footer .warn{
  background:rgba(181,132,42,.14);border-left:3px solid var(--sand);
  padding:16px 20px;border-radius:0 var(--r-sm) var(--r-sm) 0;color:#DACDB0;font-size:.87rem;
}
.footer .warn .chip-dudoso{background:rgba(0,0,0,.3);color:#E5C889;border-color:#6E5C31}
.footer .meta{font-size:.82rem;color:#8398A5;margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1)}

/* =====================================================================
   RESPONSIVE · conmutación esquema ↔ tarjetas
   ===================================================================== */
@media(max-width:900px){
  .red-svg-box{display:none}
  .red-flow{display:block}
  .panel{display:none}
  .leyenda{display:none}
}
@media(max-width:620px){
  body{font-size:17px}
  .etapa-cards{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  .stats-mes{grid-template-columns:1fr 1fr}
  .chart-box{padding:16px 8px 8px}
  .af-top{flex-direction:column;align-items:flex-start;gap:2px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* =====================================================================
   CALIDAD DEL AGUA
   ===================================================================== */
.aviso-critico{
  background:var(--clay-050,#FAEDE8);border:1px solid #E8C4B8;border-left:4px solid var(--clay);
  border-radius:0 var(--r) var(--r) 0;padding:clamp(22px,3.5vw,30px);margin-bottom:30px;
}
.aviso-critico h3{color:#8E3520;font-size:1.15rem;margin-bottom:.7em}
.aviso-critico p{font-size:.95rem;color:#5C3227;margin-bottom:.9em;line-height:1.68}
.aviso-critico p:last-child{margin-bottom:0}
.aviso-critico strong{color:#7A2D1B}
.aviso-critico a{color:#8E3520}

.calidad-grid{display:grid;gap:18px;grid-template-columns:1fr;margin-bottom:38px}
@media(min-width:880px){.calidad-grid{grid-template-columns:1fr 1fr}}

.lectura-card{
  background:linear-gradient(150deg,#0E4560,#17708F);color:#fff;
  border-radius:var(--r-lg);padding:clamp(26px,4vw,36px);box-shadow:var(--sh-lg);
  display:flex;flex-direction:column;justify-content:center;
}
.lc-eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--w300);font-weight:700;margin:0 0 14px}
.lc-valor{font-family:var(--serif);font-size:clamp(3.2rem,9vw,4.6rem);font-weight:600;line-height:.95;letter-spacing:-.04em}
.lc-valor small{font-size:.28em;font-weight:500;font-family:var(--sans);letter-spacing:.02em;margin-left:.2em}
.lc-banda{
  display:inline-flex;align-items:center;gap:9px;margin-top:18px;align-self:flex-start;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:7px 16px;font-size:.85rem;font-weight:600;
}
.lc-punto{width:10px;height:10px;border-radius:50%;flex:none}
.lc-meta{font-size:.87rem;color:rgba(255,255,255,.8);margin:16px 0 0;line-height:1.6}
.lc-meta b{color:#fff;font-weight:600}

.instrumento{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3.5vw,30px);box-shadow:var(--sh-sm);
}
.instrumento h3{font-size:1.1rem;margin-bottom:.6em}
.instrumento dl{margin:0;font-size:.89rem}
.instrumento dt{font-size:.71rem;text-transform:uppercase;letter-spacing:.11em;color:var(--w600);font-weight:700;margin-top:15px}
.instrumento dt:first-child{margin-top:0}
.instrumento dd{margin:5px 0 0;color:var(--ink-soft);line-height:1.6}

.sub-h{font-size:clamp(1.2rem,2.4vw,1.5rem);margin:0 0 .4em}
.sub-p{margin-bottom:20px!important}

.escala{display:grid;gap:8px;margin-bottom:38px}
.banda{
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:14px 18px;position:relative;overflow:hidden;
}
.banda::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--bcol)}
.banda.activa{border-color:var(--bcol);box-shadow:0 0 0 2px color-mix(in srgb,var(--bcol) 22%,transparent)}
.banda-rango{
  font-family:var(--serif);font-weight:600;font-size:1.02rem;color:var(--ink);
  white-space:nowrap;grid-row:span 2;align-self:center;min-width:96px;
}
.banda-tit{font-weight:600;font-size:.93rem}
.banda-desc{font-size:.86rem;color:var(--ink-soft);line-height:1.55;grid-column:2}
.banda-aqui{
  display:inline-block;margin-left:9px;background:var(--w800);color:#fff;font-family:var(--sans);
  font-size:.62rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;vertical-align:middle;
}
@media(max-width:560px){
  .banda{grid-template-columns:1fr}
  .banda-rango{grid-row:auto;min-width:0}
  .banda-desc{grid-column:1}
}

.dos-col{display:grid;gap:26px;grid-template-columns:1fr;margin-bottom:38px}
@media(min-width:880px){.dos-col{grid-template-columns:1.15fr .85fr;gap:40px}}
.dos-col p{font-size:.95rem;color:var(--ink-soft);line-height:1.7}
.dos-col strong{color:var(--ink)}
.mecanismo{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3.5vw,28px);box-shadow:var(--sh-sm);align-self:start}
.mecanismo h4{font-size:1rem;margin-bottom:.9em}
.mecanismo ol{margin:0;padding-left:1.3em}
.mecanismo li{font-size:.88rem;color:var(--ink-soft);margin-bottom:10px;line-height:1.55}
.mecanismo li:last-child{margin-bottom:0}
.mecanismo li::marker{color:var(--w500);font-weight:700}
.mecanismo strong{color:var(--ink)}

.refs{display:grid;gap:10px;margin-bottom:8px}
.ref{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 20px;transition:border-color .16s;
}
.ref:hover{border-color:var(--w500)}
.ref-autor{font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;color:var(--w600);font-weight:700}
.ref-tit{display:block;font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--ink);margin:5px 0 6px;text-decoration:none;letter-spacing:-.01em}
.ref-tit:hover{color:var(--w600);text-decoration:underline}
.ref-tit::after{content:"↗";font-family:var(--sans);font-size:.75em;margin-left:6px;color:var(--w500)}
.ref-desc{font-size:.86rem;color:var(--ink-soft);margin:0;line-height:1.6}

/* métricas dentro de la ficha del esquema */
.p-metrica{
  margin:16px 0 0;background:var(--w050);border:1px solid var(--w100);
  border-radius:var(--r-sm);padding:14px 16px;
}
.p-metrica .pm-h{font-size:.68rem;text-transform:uppercase;letter-spacing:.13em;font-weight:700;color:var(--w600);margin:0 0 9px}
.p-metrica .pm-fila{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:.87rem;padding:5px 0}
.p-metrica .pm-val{font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--w800);white-space:nowrap}
.p-metrica .pm-fecha{color:var(--ink-soft);font-size:.8rem}
.p-metrica .pm-banda{font-size:.78rem;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:7px}
.p-metrica .pm-vacio{font-size:.85rem;color:var(--ink-soft);margin:0;line-height:1.55}

/* =====================================================================
   TABLAS DE DATOS
   ===================================================================== */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.tabs button{
  font:inherit;font-size:.85rem;font-weight:500;cursor:pointer;
  padding:9px 18px;border-radius:999px;border:1px solid var(--line-cool);
  background:#fff;color:var(--ink-soft);transition:.16s;
}
.tabs button:hover{border-color:var(--w500);color:var(--w800)}
.tabs button.on{background:var(--w800);border-color:var(--w800);color:#fff;font-weight:600}

#tabla-datos table{min-width:560px}
#tabla-datos th{cursor:pointer;user-select:none;white-space:nowrap}
#tabla-datos th:hover{color:var(--w800)}
#tabla-datos th .ord{opacity:.35;margin-left:5px;font-size:.85em}
#tabla-datos th.asc .ord,#tabla-datos th.desc .ord{opacity:1;color:var(--w600)}
.tabla-pie{font-size:.82rem;color:var(--ink-soft);margin-top:14px}
.pill{
  display:inline-block;font-size:.7rem;font-weight:600;padding:3px 10px;
  border-radius:999px;letter-spacing:.03em;white-space:nowrap;
}
.pill-ok{background:#E6F0EA;color:#1F5A42;border:1px solid #B9D6C7}
.pill-warn{background:var(--sand-050);color:#7A5C18;border:1px solid var(--sand-200)}
.celda-vacia{color:var(--ink-mute);font-style:italic}

/* =====================================================================
   DINERO · el cero de ejecución
   ===================================================================== */
.cero{
  display:grid;gap:clamp(20px,3.5vw,36px);align-items:start;margin-bottom:44px;
  background:#fff;border:1px solid #E8C4B8;border-left:5px solid var(--clay);
  border-radius:0 var(--r-lg) var(--r-lg) 0;padding:clamp(26px,4vw,38px);box-shadow:var(--sh);
}
@media(min-width:800px){.cero{grid-template-columns:auto 1fr;gap:44px}}
.cero-num{
  font-family:var(--serif);font-size:clamp(3.4rem,9vw,5rem);font-weight:600;
  color:var(--clay);line-height:.9;letter-spacing:-.04em;
}
.cero h3{font-size:clamp(1.15rem,2.3vw,1.45rem);margin-bottom:.6em;color:#8E3520}
.cero p{font-size:.95rem;color:var(--ink-soft);line-height:1.68;margin-bottom:.9em}
.cero b{color:var(--ink);font-weight:600}
.cero-links{margin:0!important}
.cero-links a{font-weight:600;font-size:.9rem;color:var(--clay);text-decoration:none}
.cero-links a:hover{text-decoration:underline}

/* tarjetas de partidas presupuestarias */
.partidas{display:grid;gap:12px}
.partida{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--sh-sm);
  display:grid;gap:6px 26px;grid-template-columns:1fr;
}
@media(min-width:760px){.partida{grid-template-columns:1fr auto;align-items:start}}
.partida.destacada{border-color:var(--w300);background:linear-gradient(180deg,var(--w050),#fff)}
.pa-cab{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:4px}
.pa-tit{font-family:var(--serif);font-size:1.13rem;font-weight:600;letter-spacing:-.012em;margin:0}
.pa-det{font-size:.89rem;color:var(--ink-soft);margin:6px 0 0;line-height:1.62;max-width:70ch}
.pa-nota{
  font-size:.85rem;color:#6B5324;background:var(--sand-050);border-left:3px solid var(--sand);
  border-radius:0 8px 8px 0;padding:11px 14px;margin:12px 0 0;line-height:1.6;max-width:70ch;
}
.pa-cifra{
  font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,1.95rem);font-weight:600;
  color:var(--w800);letter-spacing:-.03em;white-space:nowrap;line-height:1.1;
}
.pa-meta{font-size:.78rem;color:var(--ink-soft);margin-top:5px;text-align:left}
@media(min-width:760px){.pa-cifra,.pa-meta{text-align:right}}
.pa-fuentes{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;grid-column:1/-1}
.pa-fuente{
  display:inline-flex;align-items:center;gap:6px;font-size:.79rem;font-weight:500;
  color:var(--w800);text-decoration:none;background:var(--w050);border:1px solid var(--w100);
  border-radius:999px;padding:6px 14px;transition:.16s;
}
.pa-fuente:hover{background:var(--w800);border-color:var(--w800);color:#fff}
.pa-fuente::after{content:"↗";font-size:.9em;opacity:.7}
.pa-fuente.sin-url{background:var(--paper-warm);border-color:var(--line);color:var(--ink-soft)}
.pa-fuente.sin-url::after{content:""}

.estado{
  display:inline-block;font-size:.67rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:4px 11px;border-radius:999px;white-space:nowrap;
}
.estado-sin-iniciar{background:#FAEDE8;color:#8E3520;border:1px solid #E8C4B8}
.estado-proyecto{background:var(--sand-050);color:#7A5C18;border:1px solid var(--sand-200)}
.estado-ejecutado{background:#E6F0EA;color:#1F5A42;border:1px solid #B9D6C7}
.estado-aprobado,.estado-convenio{background:var(--w050);color:var(--w800);border:1px solid var(--w100)}

/* =====================================================================
   BIBLIOGRAFÍA
   ===================================================================== */
.biblio{display:grid;gap:34px}
.biblio-lista{display:grid;gap:2px}
.bib-tipo{
  font-weight:600;color:var(--ink-soft);text-transform:uppercase;
  letter-spacing:.08em;font-size:.72rem;
}
.bib{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:18px 22px;transition:border-color .16s,transform .16s;
  display:grid;grid-template-columns:auto 1fr;gap:0 18px;
}
.bib:hover{border-color:var(--w500)}
.bib-num{
  font-family:var(--serif);font-size:1.05rem;font-weight:600;
  color:var(--w500);grid-row:span 3;padding-top:1px;min-width:34px;
}
.bib-num::before{content:"["}
.bib-num::after{content:"]"}
.bib:target{border-color:var(--w600);box-shadow:0 0 0 3px rgba(46,134,174,.2);scroll-margin-top:90px}
.bib:target .bib-num{color:var(--w800)}
.bib-autor{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);font-weight:600}
.bib-tit{
  font-family:var(--serif);font-size:1.03rem;font-weight:600;color:var(--ink);
  margin:5px 0 0;letter-spacing:-.012em;line-height:1.35;text-decoration:none;display:block;
}
a.bib-tit:hover{color:var(--w600);text-decoration:underline}
a.bib-tit::after{content:"↗";font-family:var(--sans);font-size:.72em;margin-left:7px;color:var(--w500)}
.bib-fecha{font-size:.8rem;color:var(--w600);font-weight:600;margin-top:5px}
.bib-desc{font-size:.87rem;color:var(--ink-soft);margin:8px 0 0;line-height:1.62;max-width:74ch}
.bib-sinurl{
  display:inline-block;margin-top:10px;font-size:.74rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;background:var(--paper-warm);border:1px solid var(--line);
  color:var(--ink-soft);border-radius:999px;padding:4px 12px;
}
@media(max-width:560px){
  .bib{grid-template-columns:1fr;gap:0}
  .bib-num{grid-row:auto;margin-bottom:6px}
}

/* =====================================================================
   PREDICCIONES · modelado a partir de la serie histórica
   ===================================================================== */
.aviso-modelo{
  background:var(--sand-050);border:1px solid var(--sand-200);border-radius:var(--r);
  padding:clamp(20px,3vw,28px);margin-bottom:clamp(34px,5vw,52px);
}
.aviso-modelo h3{font-size:1.02rem;margin-bottom:.5em}
.aviso-modelo p{font-size:.89rem;color:var(--ink-soft);line-height:1.66;max-width:78ch;margin-bottom:.7em}
.aviso-modelo p:last-child{margin-bottom:0}
.am-repro{font-size:.83rem !important}
.am-repro code{
  background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:1px 6px;font-size:.92em;color:var(--w800);
}

.m-bloque{margin-bottom:clamp(40px,6vw,64px)}
.m-bloque:last-child{margin-bottom:0}
.m-h{
  font-size:clamp(1.2rem,2.4vw,1.55rem);margin-bottom:.45em;
  padding-bottom:.4em;border-bottom:1px solid var(--line);
}
.m-lede{font-size:.95rem;color:var(--ink-soft);line-height:1.7;max-width:74ch;margin-bottom:1.4em}
.m-nota{
  font-size:.86rem;color:var(--ink-soft);line-height:1.66;max-width:78ch;
  margin:18px 0 0;padding-left:16px;border-left:2px solid var(--w300);
}
.m-nota b{color:var(--ink)}

/* inventario */
.inv-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.inv{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px}
.inv-ok{border-left:3px solid var(--moss)}
.inv-medio{border-left:3px solid var(--sand)}
.inv-falta{border-left:3px solid var(--clay)}
.inv-chip{
  display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;border-radius:999px;padding:3px 10px;margin-bottom:9px;
  background:var(--paper-warm);border:1px solid var(--line);color:var(--ink-soft);
}
.inv-ok .inv-chip{background:#E6F0EA;color:#1F5A42;border-color:#B9D6C7}
.inv-medio .inv-chip{background:var(--sand-050);color:#7A5C18;border-color:var(--sand-200)}
.inv-falta .inv-chip{background:#FBEDE9;color:#8A3A22;border-color:#EBC8BC}
.inv h4{font-size:.97rem;margin:0 0 .45em;line-height:1.35}
.inv-det{font-size:.85rem;color:var(--ink-soft);line-height:1.58;margin:0 0 .7em}
.inv-lim{font-size:.83rem;color:var(--ink-soft);line-height:1.55;margin:0;padding-top:8px;border-top:1px solid var(--line)}
.inv-lim b{color:var(--ink)}

/* regímenes */
.regs{display:grid;gap:9px}
.reg{display:grid;grid-template-columns:200px 1fr 66px;gap:0 16px;align-items:center}
.reg-lab b{display:block;font-size:.9rem;color:var(--ink);line-height:1.25}
.reg-lab span{display:block;font-size:.76rem;color:var(--ink-soft);line-height:1.3;margin-top:2px}
.reg-bar{position:relative;height:34px;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.reg-fill{position:absolute;inset:0 auto 0 0;background:var(--w500);border-radius:5px 0 0 5px}
.reg-corte .reg-fill{background:var(--moss)}
.reg-media .reg-fill{background:var(--sand)}   /* medidas de uso, sin cortes */
.reg-ic{position:absolute;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.65)}
.reg-ic::before,.reg-ic::after{content:"";position:absolute;top:-5px;width:2px;height:12px;background:rgba(255,255,255,.65)}
.reg-ic::before{left:0}
.reg-ic::after{right:0}
.reg-n{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-family:var(--serif);font-size:.94rem;font-weight:600;color:var(--ink);
}
.reg-obs{font-size:.78rem;color:var(--ink-soft);text-align:right}

.efecto{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.ef-item{
  flex:1 1 250px;background:#fff;border:1px solid var(--line-cool);
  border-radius:var(--r-sm);padding:18px 20px;
}
.ef-n{font-family:var(--serif);font-size:clamp(1.7rem,3.6vw,2.2rem);font-weight:600;line-height:1;letter-spacing:-.03em;display:block}
.ef-n.baja{color:var(--moss)}
.ef-n.sube{color:var(--clay)}
.ef-l{display:block;font-size:.85rem;color:var(--ink-soft);line-height:1.5;margin-top:9px;max-width:34ch}

/* umbrales */
.umbrales{display:grid;gap:10px}
.umb{
  display:grid;grid-template-columns:270px 1fr 190px;gap:0 18px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 20px;
}
.umb-cab b{display:block;font-size:.92rem;line-height:1.3}
.umb-cab span{display:block;font-size:.77rem;color:var(--ink-soft);margin-top:2px}
.umb-bar{height:12px;background:var(--paper-warm);border-radius:999px;overflow:hidden}
.umb-fill{height:100%;background:var(--w500);border-radius:999px}
.umb-fill.critico{background:var(--clay)}
.umb-n b{font-family:var(--serif);font-size:1.25rem;font-weight:600;color:var(--w800);margin-right:8px}
.umb-n span{font-size:.77rem;color:var(--ink-soft)}

/* escenarios */
.esc-tabla td,.esc-tabla th{vertical-align:middle}
.esc-tabla th small{font-weight:400;color:var(--ink-soft);letter-spacing:0;text-transform:none}
.esc-ent b{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--w800)}
.esc-ent span{display:block;font-size:.78rem;color:var(--ink-soft);line-height:1.35;margin-top:2px}
.esc-cel b{display:block;font-family:var(--serif);font-size:1.2rem;font-weight:600;line-height:1.1}
.esc-cel span{display:block;font-size:.75rem;color:var(--ink-soft);margin-top:3px}
.esc-cel.critico{background:#FBEDE9}
.esc-cel.critico b{color:#8A3A22}
.esc-cel.alerta{background:var(--sand-050)}
.esc-cel.alerta b{color:#7A5C18}
.esc-cel.holgado{background:#F1F7F3}
.esc-cel.holgado b{color:#1F5A42}

/* serie con anomalías */
#m-serie{width:100%;height:auto;display:block}
.ml-grid{stroke:var(--line);stroke-width:1}
.ml-mes{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
.ml-tope{stroke:var(--clay);stroke-width:1.5;stroke-dasharray:6 4}
.ml-tope-txt{fill:var(--clay);font-size:12px;font-weight:600;font-family:var(--sans)}
.ml-ytxt,.ml-mtxt{fill:var(--ink-soft);font-size:12px;font-family:var(--sans)}
.ml-mtxt{text-anchor:start}
.ml-linea{fill:none;stroke:var(--w500);stroke-width:2;stroke-linejoin:round}
.ml-hueco{stroke:var(--w300);stroke-width:1.5;stroke-dasharray:2 5;opacity:.7}
.ml-huecotxt{
  fill:var(--ink-mute);font-size:11px;font-style:italic;font-family:var(--sans);
  paint-order:stroke fill;stroke:#F5F2EA;stroke-width:4px;
}
.ml-pt{fill:#fff;stroke:var(--w500);stroke-width:1.5}
.ml-ano{fill:none;stroke-width:2.5}
.ml-ano-conocida{stroke:var(--moss)}
.ml-ano-sin-explicar{stroke:var(--clay)}
.ml-anotxt{
  fill:var(--ink);font-size:12px;font-weight:600;font-family:var(--sans);
  paint-order:stroke fill;stroke:#F5F2EA;stroke-width:4px;
}

.anos{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:8px}
.ano{
  display:grid;grid-template-columns:62px 92px 1fr;gap:0 16px;align-items:baseline;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 18px;
}
.ano-conocida{border-left:3px solid var(--moss)}
.ano-sin-explicar{border-left:3px solid var(--clay)}
.ano-f{font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--w800)}
.ano-s{font-size:.87rem;font-weight:600}
.ano-conocida .ano-s{color:var(--moss)}
.ano-sin-explicar .ano-s{color:var(--clay)}
.ano b{font-size:.88rem}
.ano p{font-size:.84rem;color:var(--ink-soft);line-height:1.55;margin:3px 0 0;max-width:72ch}

/* suelo de la red */
.suelo-barra{display:flex;height:56px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line)}
.su-dom,.su-res{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.92rem}
.su-dom{background:var(--w500);color:#fff}
.su-res{flex:1;background:var(--clay);color:#fff}
.suelo-leyenda{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:14px}
.sl{font-size:.84rem;color:var(--ink-soft);display:flex;align-items:baseline;gap:8px;max-width:44ch;line-height:1.5}
.sl::before{content:"";width:11px;height:11px;border-radius:3px;flex:none;transform:translateY(1px)}
.sl-dom::before{background:var(--w500)}
.sl-res::before{background:var(--clay)}

/* lo que no se puede modelar */
.no-modelo{
  background:linear-gradient(150deg,#0E4560,#17708F);color:#fff;
  border-radius:var(--r-lg);padding:clamp(26px,4.5vw,42px);
  margin-bottom:clamp(40px,6vw,64px);box-shadow:var(--sh-lg);
}
.no-modelo h3{color:#fff;font-size:clamp(1.25rem,2.6vw,1.65rem);margin-bottom:.6em}
.no-modelo p{color:rgba(255,255,255,.88);font-size:.95rem;line-height:1.7;max-width:76ch;margin-bottom:1em}
.no-modelo p:last-child{margin-bottom:0}
.no-modelo strong,.no-modelo b{color:#fff;font-weight:600}

/* necesidades */
.necs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nec{
  display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:17px 20px;
}
.nec-n{
  font-family:var(--serif);font-size:1.15rem;font-weight:600;color:var(--w500);
  min-width:26px;line-height:1.3;
}
.nec h4{font-size:.97rem;margin:0 0 .4em;line-height:1.4;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.nec-coste{
  font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:3px 10px;font-family:var(--sans);
}
.c-muy-bajo,.c-bajo{background:#E6F0EA;color:#1F5A42;border:1px solid #B9D6C7}
.c-medio{background:var(--sand-050);color:#7A5C18;border:1px solid var(--sand-200)}
.nec p{font-size:.86rem;color:var(--ink-soft);line-height:1.6;margin:0;max-width:78ch}

@media(max-width:820px){
  .reg{grid-template-columns:1fr;gap:5px}
  .reg-obs{text-align:left}
  .umb{grid-template-columns:1fr;gap:9px}
  .ano{grid-template-columns:1fr;gap:3px}
}

/* =====================================================================
   ESTADO · qué restricciones están en vigor (portada)
   ===================================================================== */
.panel-estado{
  background:#fff;border:1px solid var(--line-cool);border-radius:var(--r);
  padding:clamp(22px,3.4vw,32px);box-shadow:var(--sh-sm);margin-top:26px;
}
.est-head{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:4px 20px;
}
.est-head h2{font-size:clamp(1.15rem,2.4vw,1.45rem);margin:0}
.est-fecha{font-size:.78rem;color:var(--ink-soft);font-weight:500}
.est-lede{
  font-family:var(--serif);font-size:clamp(1.15rem,2.6vw,1.5rem);font-weight:600;
  color:var(--w800);line-height:1.3;letter-spacing:-.02em;
  margin:14px 0 20px;padding-bottom:18px;border-bottom:1px solid var(--line-cool);
}
.est-lista{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.est-item{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start}
.est-chip{
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:5px 12px;white-space:nowrap;min-width:104px;text-align:center;
}
.est-levantada .est-chip{background:#E6F0EA;color:#1F5A42;border:1px solid #B9D6C7}
.est-vigente .est-chip{background:var(--sand-050);color:#7A5C18;border:1px solid var(--sand-200)}
.est-sin-aclarar .est-chip{background:#FBEDE9;color:#8A3A22;border:1px solid #EBC8BC}
.est-aviso .est-chip{background:var(--w050);color:var(--w800);border:1px solid var(--w100)}
.est-tit{font-weight:600;color:var(--ink);font-size:.95rem;display:block;line-height:1.35}
.est-txt{font-size:.86rem;color:var(--ink-soft);line-height:1.6;margin:4px 0 0;max-width:72ch}
.est-base{
  margin-top:22px;padding:14px 18px;background:var(--w050);
  border:1px solid var(--w100);border-radius:var(--r-sm);
}
.est-base-r{
  display:block;font-size:.67rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--w600);margin-bottom:5px;
}
.est-base p{font-size:.87rem;color:var(--ink-soft);line-height:1.55;margin:0;max-width:74ch}
.est-base a{font-weight:600;color:var(--w800)}
.est-pie{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:6px 20px;margin-top:18px;
}
.est-rev{font-size:.78rem;color:var(--ink-mute)}
.est-mas{
  display:inline-block;font-size:.85rem;font-weight:600;
  color:var(--w600);text-decoration:none;
}
.est-mas::after{content:" →"}
.est-mas:hover{text-decoration:underline}
@media(max-width:560px){
  .est-item{grid-template-columns:1fr;gap:6px}
  .est-chip{justify-self:start;min-width:0}
}

/* =====================================================================
   SOLUCIONES · tarjetas: problema · propuesta · bloqueo · qué vigilar
   ===================================================================== */
.sols{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
}
.sol{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 26px 0;box-shadow:var(--sh-sm);overflow:hidden;
  transition:box-shadow .18s,transform .18s;
}
.sol:hover{box-shadow:var(--sh);transform:translateY(-2px)}
.sol-cab{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:16px;
}
.sol-chip{
  font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-radius:999px;padding:5px 13px;white-space:nowrap;
}
.sol-mal .sol-chip{background:#FBEDE9;color:#8A3A22;border:1px solid #EBC8BC}
.sol-medio .sol-chip{background:var(--sand-050);color:#7A5C18;border:1px solid var(--sand-200)}
.sol-desde{font-size:.74rem;color:var(--ink-mute);white-space:nowrap}
.sol-prob{
  font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-mute);line-height:1.45;margin:0 0 .7em;
}
.sol-prob::before{content:"↳ ";color:var(--w300)}
.sol-mismo{
  font-size:.79rem;color:var(--ink-soft);line-height:1.5;margin:-.3em 0 .9em;
  padding-left:11px;border-left:2px solid var(--line-cool);
}
.sol-tit{font-size:1.12rem;margin:0 0 .45em;line-height:1.3}
.sol-det{font-size:.86rem;color:var(--ink-soft);line-height:1.6;margin:0 0 16px}
.sol-et{
  display:block;font-size:.63rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:5px;
}
.sol-bloq{padding:13px 0;border-top:1px solid var(--line)}
.sol-bloq .sol-et{color:var(--clay)}
.sol-medio .sol-bloq .sol-et{color:var(--sand)}
.sol-bloq p{font-size:.83rem;color:var(--ink-soft);line-height:1.55;margin:0}
.sol-seg{
  margin:auto -26px 0;padding:15px 26px 18px;
  background:var(--w050);border-top:1px solid var(--w100);
}
.sol-seg .sol-et{color:var(--w600)}
.sol-seg .sol-et::before{content:"◉ "}
.sol-seg p{font-size:.85rem;color:var(--w800);font-weight:500;line-height:1.55;margin:0}
.sol-plan{
  display:inline-block;margin-top:10px;font-size:.81rem;font-weight:600;
  color:var(--w600);text-decoration:none;
}
.sol-plan::after{content:" →"}
.sol-plan:hover{text-decoration:underline}
.sols-pie{font-size:.86rem;color:var(--ink-soft);line-height:1.65;margin:22px 0 0;max-width:78ch}

/* ---- propuesta propia dentro de una tarjeta ---- */
.sol-nuestra{
  margin:16px -26px 0;padding:16px 26px;
  background:var(--sand-050);border-top:1px solid var(--sand-200);
}
.sol-nuestra .sol-et{color:#7A5C18}
.sol-nuestra .sol-et::before{content:"✎ "}
.sn-txt{font-size:.83rem;color:var(--ink-soft);line-height:1.58;margin:0 0 12px}
.sn-costes{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.sn-costes li{display:grid;gap:2px}
.sn-costes b{
  font-family:var(--serif);font-size:1.18rem;font-weight:600;
  color:#7A5C18;letter-spacing:-.02em;line-height:1.1;
}
.sn-costes span{font-size:.79rem;color:var(--ink-soft);line-height:1.5}
.sn-cav{
  font-size:.79rem;color:var(--ink-soft);line-height:1.55;margin:0 0 10px;
  padding-left:11px;border-left:2px solid var(--sand-200);
}
.sn-fin{font-size:.82rem;color:var(--ink);font-weight:500;line-height:1.55;margin:0}

/* =====================================================================
   COMUNICACIONES · listado de avisos
   ===================================================================== */
.franja-estado{padding-top:clamp(26px,4vw,40px);padding-bottom:0}
.franja-estado .panel-estado{margin-top:0}

.aviso-fechas{
  background:var(--sand-050);border:1px solid var(--sand-200);
  border-radius:var(--r);padding:clamp(20px,3vw,28px);margin-bottom:28px;
}
.aviso-fechas h3{font-size:1.05rem;margin-bottom:.5em}
.aviso-fechas p{font-size:.89rem;color:var(--ink-soft);line-height:1.66;margin-bottom:.8em;max-width:76ch}
.fechas-leyenda{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.fechas-leyenda li{
  font-size:.85rem;color:var(--ink-soft);line-height:1.55;
  display:grid;grid-template-columns:132px 1fr;gap:0 14px;align-items:start;
}
.fechas-leyenda .com-cert{justify-self:start;cursor:default}
@media(max-width:620px){
  .fechas-leyenda li{grid-template-columns:1fr;gap:5px}
}

.falta{
  margin-top:30px;background:#fff;border:1px solid var(--line-cool);
  border-left:3px solid var(--clay);border-radius:var(--r);
  padding:clamp(20px,3vw,30px);
}
.falta h3{font-size:1.05rem;margin-bottom:.6em}
.falta ul{margin:0;padding-left:1.15em;display:grid;gap:9px}
.falta li{font-size:.89rem;color:var(--ink-soft);line-height:1.62;max-width:78ch}
.falta li::marker{color:var(--clay)}

.coms{display:grid;gap:14px}
.com{
  display:grid;grid-template-columns:190px 1fr;gap:0 28px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:22px 26px;transition:border-color .16s;
}
.com:hover{border-color:var(--w500)}
.com.destacada{border-left:3px solid var(--w600)}
.com-meta{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.com-fnota{
  font-size:.75rem;color:var(--ink-mute);line-height:1.5;margin:2px 0 0;
  padding-top:8px;border-top:1px solid var(--line);
}
.com-fecha{
  font-family:var(--serif);font-size:1rem;font-weight:600;color:var(--w800);
  line-height:1.3;letter-spacing:-.01em;
}
.com-cert{
  font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  border-radius:999px;padding:3px 10px;cursor:help;
}
.cert-exacta{background:#E6F0EA;color:#1F5A42;border:1px solid #B9D6C7}
.cert-contrastada{background:var(--w050);color:var(--w800);border:1px solid var(--w100)}
.cert-acotada{background:var(--paper-warm);color:var(--ink-soft);border:1px solid var(--line)}
.com-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.com-tipo,.com-emisor{
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.com-tipo{color:var(--w600)}
.com-emisor{color:var(--ink-mute)}
.com-emisor::before{content:"· "}
.com-body h3{font-size:1.05rem;margin:0 0 .45em;line-height:1.32}
.com-res{font-size:.9rem;color:var(--ink-soft);line-height:1.65;margin:0;max-width:76ch}
.com-cita{
  margin:14px 0 0;padding:12px 18px;border-left:3px solid var(--w300);
  background:var(--w050);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-family:var(--serif);font-size:.95rem;font-style:italic;color:var(--w800);line-height:1.55;
}
.com-cita::before{content:"«"}
.com-cita::after{content:"»"}
.com-nota{
  font-size:.84rem;color:var(--ink-soft);line-height:1.6;margin:12px 0 0;
  padding-left:16px;border-left:2px solid var(--sand-200);max-width:74ch;
}
.com-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;align-items:baseline}
.com-link{font-size:.82rem;font-weight:600;color:var(--w600);text-decoration:none}
.com-link::after{content:"↗";font-size:.78em;margin-left:5px}
.com-link:hover{text-decoration:underline}
.com-link.secundario{font-weight:500;color:var(--ink-soft)}
@media(max-width:820px){
  .com{grid-template-columns:1fr;gap:12px 0}
  .com-meta{flex-direction:row;align-items:center;gap:8px 12px;flex-wrap:wrap}
  .com-fnota{flex-basis:100%;border-top:none;padding-top:0}
}

/* =====================================================================
   REFERENCIAS · listado numérico idéntico al pie de todas las páginas
   ===================================================================== */
.refs-sec{border-top:1px solid var(--line-cool);background:var(--paper-warm)}
.refs-head{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:8px 20px;margin-bottom:20px;
}
.refs-head h2{
  font-family:var(--sans);font-size:.78rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--w600);margin:0;
}
.refs-head p{font-size:.84rem;color:var(--ink-soft);margin:0;max-width:60ch}
.refs-todas{font-size:.82rem;font-weight:600;color:var(--w600);text-decoration:none;white-space:nowrap}
.refs-todas:hover{text-decoration:underline}
.refs{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:2px 26px;counter-reset:none;
}
.ref{
  display:grid;grid-template-columns:auto 1fr;gap:0 12px;align-items:start;
  padding:9px 12px;border-radius:var(--r-sm);border:1px solid transparent;
  scroll-margin-top:96px;
}
.ref-n{
  font-family:var(--serif);font-size:.92rem;font-weight:600;color:var(--w500);
  min-width:30px;padding-top:1px;
}
.ref-n::before{content:"["}
.ref-n::after{content:"]"}
.ref-b{display:flex;flex-direction:column;gap:2px;min-width:0}
.ref-t{
  font-size:.88rem;font-weight:600;color:var(--ink);line-height:1.4;
  text-decoration:none;
}
a.ref-t:hover{color:var(--w600);text-decoration:underline}
a.ref-t::after{content:"↗";font-size:.72em;margin-left:6px;color:var(--w500)}
.ref-m{font-size:.76rem;color:var(--ink-soft);line-height:1.45}
.ref-tipo{color:var(--ink-mute)}
.ref:target{
  background:#fff;border-color:var(--w600);
  box-shadow:0 0 0 3px rgba(46,134,174,.18);
}
.ref:target .ref-n{color:var(--w800)}
@media(max-width:560px){
  .refs{grid-template-columns:1fr}
}


/* =====================================================================
   CITAS · superíndices enlazados a la bibliografía
   ===================================================================== */
.citas{
  font-size:.62em;line-height:0;font-weight:600;letter-spacing:.02em;
  margin-left:2px;white-space:nowrap;vertical-align:super;
}
.citas .cita{
  color:var(--w600);text-decoration:none;padding:0 1px;
  border-bottom:1px dotted currentColor;transition:color .15s;
}
.citas .cita::before{content:"["}
.citas .cita::after{content:"]"}
.citas .cita:hover{color:var(--clay)}
/* sobre fondos oscuros */
.cuello .citas .cita,.lectura-card .citas .cita,.big-money .citas .cita,
.hero .citas .cita{color:var(--w300)}
.cuello .citas .cita:hover,.lectura-card .citas .cita:hover{color:#fff}
.kpi .l .citas .cita{color:var(--w500)}
.pm-fuente{font-size:.78rem;color:var(--ink-soft);margin:10px 0 0}

/* =====================================================================
   BRECHA · salida por habitante frente a la media estatal
   ===================================================================== */
.brecha{
  margin-top:24px;background:#fff;border:1px solid var(--line-cool);
  border-radius:var(--r);padding:clamp(24px,4vw,34px);box-shadow:var(--sh-sm);
}
.brecha > h3{font-size:1.15rem;margin-bottom:.7em}
.brecha-cifras{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;
  gap:14px 24px;padding-bottom:22px;margin-bottom:20px;border-bottom:1px solid var(--line-cool);
}
.br-item{display:flex;flex-direction:column;gap:5px}
.br-n{font-family:var(--serif);font-size:clamp(1.7rem,4vw,2.3rem);font-weight:600;color:var(--w800);line-height:1;letter-spacing:-.03em}
.br-l{font-size:.79rem;color:var(--ink-soft);line-height:1.4;font-weight:500}
.br-op{font-size:.95rem;color:var(--ink-mute);font-weight:500}
.br-item.destacado .br-n{color:var(--clay)}
.brecha-txt{font-size:.91rem;color:var(--ink-soft);line-height:1.68;margin-bottom:.9em}
.brecha-txt:last-child{margin-bottom:0}
.brecha-txt strong{color:var(--ink)}

/* =====================================================================
   BARRA DE NAVEGACIÓN
   ===================================================================== */
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(252,251,248,.92);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);
}
.tb-in{display:flex;align-items:center;gap:20px;min-height:62px;flex-wrap:wrap}
.tb-brand{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--ink);
  letter-spacing:-.01em;flex:none;
}
.tb-brand .drop{
  width:20px;height:20px;background:var(--w600);
  border-radius:50% 50% 50% 3px;transform:rotate(-45deg);box-shadow:none;
}
.tb-nav{display:flex;flex-wrap:wrap;gap:2px;margin-left:auto}
.tb-nav a{
  font-size:.86rem;font-weight:500;color:var(--ink-soft);text-decoration:none;
  padding:8px 13px;border-radius:8px;transition:background .15s,color .15s;white-space:nowrap;
}
.tb-nav a:hover{background:var(--w050);color:var(--w800)}
.tb-nav a[aria-current="page"]{background:var(--w800);color:#fff;font-weight:600}
.tb-toggle{display:none}

@media(max-width:1080px){
  .tb-in{min-height:56px}
  .tb-toggle{
    display:inline-flex;align-items:center;gap:9px;margin-left:auto;
    font:inherit;font-size:.85rem;font-weight:600;color:var(--ink);cursor:pointer;
    background:#fff;border:1px solid var(--line-cool);border-radius:999px;padding:8px 16px;
  }
  .tb-bars,.tb-bars::before,.tb-bars::after{
    display:block;width:15px;height:2px;background:var(--w600);border-radius:2px;position:relative;
  }
  .tb-bars::before,.tb-bars::after{content:"";position:absolute;left:0}
  .tb-bars::before{top:-5px}
  .tb-bars::after{top:5px}
  .tb-nav{
    display:none;width:100%;margin:0 0 12px;flex-direction:column;gap:1px;
    border-top:1px solid var(--line);padding-top:10px;
  }
  .tb-nav.abierta{display:flex}
  .tb-nav a{padding:11px 14px;font-size:.95rem}
}

/* cabecera de página interior */
.page-banner{
  background:linear-gradient(150deg,#082F44,#0E4560 55%,#17708F);color:#fff;
  padding:clamp(34px,6vw,60px) 0 clamp(30px,5vw,52px);
}
.pb-eyebrow{
  font-size:.71rem;font-weight:600;text-transform:uppercase;letter-spacing:.19em;
  color:var(--w300);margin:0 0 .7em;
}
.pb-h{
  font-family:var(--serif);font-size:clamp(1.9rem,5vw,3.1rem);font-weight:600;
  letter-spacing:-.028em;line-height:1.08;margin:0;max-width:20ch;
}
/* en páginas interiores la primera sección no repite el titular */
.page-banner + main .section:first-child .s-head h2{
  font-size:clamp(1.45rem,3vw,2rem);
}

/* la portada ya no lleva barra de secciones dentro del hero */
.hero{padding-top:clamp(40px,7vw,72px)}

/* tarjetas de la portada */
.cards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:26px 26px 22px;text-decoration:none;
  box-shadow:var(--sh-sm);transition:border-color .16s,box-shadow .16s,transform .16s;
}
.card:hover{border-color:var(--w500);box-shadow:var(--sh);transform:translateY(-2px)}
.card-n{
  font-family:var(--serif);font-size:.82rem;font-weight:600;color:var(--w300);
  letter-spacing:.1em;margin-bottom:10px;
}
.card h3{font-size:1.25rem;margin-bottom:.45em;color:var(--ink)}
.card p{font-size:.9rem;color:var(--ink-soft);line-height:1.6;margin:0 0 18px;flex:1}
.card-go{
  font-size:.82rem;font-weight:600;color:var(--w600);letter-spacing:.01em;
}
.card-go::after{content:" →";transition:margin .16s}
.card:hover .card-go::after{margin-left:4px}

/* navegación del pie */
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 6px;margin:26px 0 0}
.foot-nav a{
  font-size:.83rem;color:#AEC2CE;text-decoration:none;padding:6px 12px;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;transition:.15s;
}
.foot-nav a:hover{background:rgba(255,255,255,.1);color:#fff}
.foot-nav a[aria-current="page"]{background:rgba(255,255,255,.14);color:#fff;font-weight:600}

/* =====================================================================
   MÓVIL · ajustes de legibilidad
   ---------------------------------------------------------------------
   Dos problemas propios de pantalla estrecha, arreglados aquí:
   1) los rótulos en versalitas caían por debajo de 12 px y no se leen;
   2) las tablas obligaban a arrastrar en horizontal dentro de la página,
      un gesto que casi nadie descubre. Se apilan en fichas.
   ===================================================================== */
@media(max-width:700px){

  /* --- 1 · ningún rótulo por debajo de 12 px --- */
  .eyebrow,.s-num,.pb-eyebrow{font-size:.82rem;letter-spacing:.13em}
  .est-base-r,.sol-et,.com-tipo,.com-emisor,.est-chip,.sol-chip,.com-cert,
  .inv-chip,.pf-et,.nec-coste,.bib-autor,.pm-h,.lc-eyebrow,.af-lab,
  .ref-tipo,.bib-tipo,.bib-sinurl,.chip,.chip-dudoso,.esc-ent span,
  .sol-desde,.est-fecha{font-size:.79rem !important;letter-spacing:.07em}
  .sol-prob{font-size:.8rem;letter-spacing:.04em}
  .ano-f,.com-fecha{font-size:.95rem}
  .com-fnota,.sn-cav,.sn-costes span,.ref-m,.pf-pie,.tabla-pie,
  .sols-pie,.bib-fecha{font-size:.8rem}
  .citas{font-size:.66em}

  /* --- 2 · tablas apiladas en fichas, sin arrastre horizontal --- */
  .tabla-box{overflow-x:visible;border:none;background:none;border-radius:0}
  .tabla-box table,#tabla-datos table{
    display:block;width:100%;min-width:0;font-size:.88rem;border-collapse:collapse;
  }
  .tabla-box thead{display:none}
  .tabla-box tbody,.tabla-box tr,.tabla-box td{display:block;width:auto}
  .tabla-box tr{
    background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
    margin-bottom:10px;padding:8px 15px 12px;
  }
  .tabla-box tr.dest{border-color:var(--w500);border-width:2px}
  .tabla-box td{
    border:none !important;padding:8px 0 0 !important;text-align:left !important;
    display:grid;grid-template-columns:minmax(92px,36%) 1fr;gap:0 12px;align-items:baseline;
  }
  .tabla-box td::before{
    content:attr(data-lab);
    font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:var(--ink-mute);line-height:1.4;
  }
  .tabla-box td:not([data-lab]){display:block}
  .tabla-box td.num{font-variant-numeric:tabular-nums}
  .esc-tabla td.esc-cel{background:none !important}
  .esc-tabla td.esc-cel b{display:inline;font-size:1.05rem}
  .esc-tabla td.esc-cel span{display:inline;margin-left:6px}

  /* --- 3 · aire --- */
  .sol{padding:20px 20px 0}
  .sol-seg,.sol-nuestra{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}
  .com{padding:18px 20px}
  .refs{gap:0}
  .ref{padding:11px 12px}
}

/* Los SVG se redibujan con geometría propia por debajo de 700 px (ver movil()
   en app.js); aquí sólo se agranda el tipo, que va en unidades del viewBox. */
@media(max-width:700px){
  .eje-txt{font-size:15px}
  .mes-txt{font-size:16px}
  .tope-txt,.media-txt{font-size:16px}
  .ml-ytxt,.ml-mtxt{font-size:15px}
  .ml-tope-txt,.ml-anotxt{font-size:16px}
  .ml-huecotxt{font-size:15px}
}