/* Abrigo Venezuela — shared styles
   Calm public-safety instrument. Inter (UI/body) + JetBrains Mono (instrument
   labels), one teal accent for action, amber for caution, red for hard stops. */

/* Self-hosted fonts — bundled in /fonts and SW-precached, so NO external calls and
   offline-first stays intact. Inter for warmth/legibility; JetBrains Mono for the
   friendly mono labels (En vivo, nav, chips). font-display:swap paints the system
   fallback instantly, then swaps in once the woff2 loads — never invisible text. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("inter-700.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("jetbrains-mono-400.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url("jetbrains-mono-500.woff2") format("woff2")}

:root {
  /* Soft-dark default — off-white on charcoal, ~10:1 contrast: strong but no glare.
     Toggle to the light theme below via [data-theme="light"]. */
  --paper:#181b22;           /* page floor — deepest layer */
  --surface:#20252d;         /* cards — one step above the page */
  --surface-2:#29323a;
  --ink:#d2d8de;
  --muted:#a6b0b9;
  --faint:#6f7a84;
  --line:#2c353d;
  --line-strong:#3a444d;
  --header:#161a20;          /* sticky header — sits below the page floor */
  --wf-panel:#262c35;        /* opened accordion panel — above the card */

  --accent:#675dd1;          /* action / "do this" — soft violet */
  --accent-ink:#bcb2f2;
  --accent-soft:#272442;
  --accent-line:#403a63;

  --warn:#e0922f;            /* caution */
  --warn-ink:#f0c58a;
  --warn-soft:#2c2410;
  --warn-line:#4a3a18;

  --stop:#e5675c;            /* hard stop / danger */
  --stop-ink:#f2b1aa;
  --stop-soft:#2c1714;
  --stop-line:#4a2620;

  --stale:#cf9080;           /* aged-out / expired — muted clay, NOT alarm red */

  --danger:#d6392b;          /* solid red — the 911 call button, both themes */

  /* section bands — meta-sections alternate value (base ↔ lift) so each reads as
     its own slice, and carry a faint Spell-derived hue for identity. Cards sit one
     value-step above their band (surface on base bands, card-on-b on lift bands). */
  --lift:#222b33;            /* lifted band base value (dark) */
  --card-on-b:#333e49;       /* cards resting on a lifted band — clearly above it */
  --shadow-card:0 1px 2px rgba(0,0,0,.24),0 8px 22px rgba(0,0,0,.22); /* soft elevation */
  --band-base-amt:7%;        /* hue strength over the dark base band */
  --band-lift-amt:9%;        /* hue strength over the lifted band */

  /* Spell palette, deepened for the soft-dark theme — a calm categorical rainbow.
     Shared across themes; band tints and topic tags both read from these. */
  --h-blue:#5aa6dc;          /* sky — data / directory */
  --h-blue-ink:#7fb8e6;      /* readable blue TEXT on dark surfaces (AAA, 7.3:1 on --surface); light theme overrides below */
  --h-violet:#8b7fd6;        /* lilac — guides / interactive */
  --h-indigo:#6f82d4;        /* periwinkle, the "darker blue" — finding people / offline */
  --h-peach:#e0975c;         /* apricot, the "yellow-orange" — giving / maps */
  --h-orchid:#c47ec6;        /* orchid, the "pinkish purple" — health / feedback */
  --h-mint:#54b98a;          /* mint — shelter / safe */

  --radius:14px;
  --radius-sm:8px;
  --maxw:820px;
  --maxw-wide:1040px;
  --serif:"Iowan Old Style","Source Serif 4","Source Serif Pro",Charter,Cambria,Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

:root[data-theme="light"]{
  /* Calm light — softened from stark black/white so it stays easy on the eyes. */
  --paper:#f5f3ed;
  --surface:#fbfaf6;
  --surface-2:#eceae1;
  --ink:#2c343d;
  --muted:#5a6873;
  --faint:#8a95a0;
  --line:#e4e1d8;
  --line-strong:#d3cfc3;
  --header:#f5f3ed;          /* light header = paper (unchanged from before) */
  --wf-panel:#fbfaf6;        /* light accordion panel = surface (unchanged) */

  --accent:#5848c4;
  --accent-ink:#5142b8;
  --accent-soft:#ece9fb;
  --accent-line:#d2cbf3;
  --h-blue-ink:#1a5f9e;      /* readable blue TEXT on light surfaces (overrides the shared hue) */

  --warn:#b45309;
  --warn-ink:#8a3f06;
  --warn-soft:#fbefe0;
  --warn-line:#e6cfa8;

  --stop:#b42318;
  --stop-ink:#8a1a12;
  --stop-soft:#fae9e7;
  --stop-line:#e9c2bc;

  --stale:#9c5a45;           /* aged-out / expired — muted terracotta, NOT alarm red */

  --danger:#c52d20;

  /* lifted band is a gentle warm step below paper; cards are a WARM white (not pure
     #fff, which reads cold against the warm bands) lifted mainly by the soft shadow */
  --lift:#ece8de;
  --card-on-b:#fcfaf6;
  --band-base-amt:6%;
  --band-lift-amt:7%;
  --shadow-card:0 4px 16px rgba(23,36,64,.09); /* soft cool navy shadow (Spell) */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
[data-lang="es"] .en{display:none}
[data-lang="en"] .es{display:none}

a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}

.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.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}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:10px 14px;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- header ---------- */
/* No border-bottom on desktop: the header and the tab bar below it are one connected
   surface (same --header shade), so an interior divider here just reads as a cheap seam.
   The tab bar's own border-bottom is the single outer edge. Re-added ≤720px, where the
   nav lives at the bottom and the header needs its own base line.
   Background is a vertical transition: frosted/see-through (92%, the existing look) through
   the TOP and MIDDLE, going fully SOLID at the BOTTOM edge so it meets the solid tab bar
   below with no frosted-to-solid cut. The backdrop-blur only shows where it's see-through. */
.top{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(180deg, color-mix(in srgb,var(--header) 92%,transparent) 0, color-mix(in srgb,var(--header) 92%,transparent) 55%, var(--header) 100%);backdrop-filter:saturate(1.1) blur(8px)}
.top-row{display:flex;align-items:center;gap:12px;padding:10px 0;max-width:var(--maxw);margin:0 auto;padding-left:20px;padding-right:20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--ink);margin-right:auto;font-size:16px}
.brand img{width:34px;height:34px;border-radius:9px;display:block}
.brand b{font-weight:600}
.brand span{color:var(--muted);font-weight:400}

.langtog{display:inline-flex;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;font-family:var(--mono);font-size:12px}
.langtog button{appearance:none;border:0;background:transparent;color:var(--muted);padding:6px 10px;cursor:pointer;font-family:inherit;font-size:inherit;letter-spacing:.04em}
.langtog button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.themetog{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--muted);cursor:pointer;flex:none;padding:0}
.themetog:hover{color:var(--ink);border-color:var(--faint)}
.themetog svg{width:17px;height:17px;display:block}
.themetog .ic-moon{display:none}
:root[data-theme="light"] .themetog .ic-sun{display:none}
:root[data-theme="light"] .themetog .ic-moon{display:block}

.btn-call{display:inline-flex;align-items:center;gap:6px;background:var(--danger);color:#fff;border-radius:999px;padding:7px 13px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.btn-call svg{width:15px;height:15px}
.btn-call:hover{filter:brightness(1.05);text-decoration:none}

/* ── "Ahora" — the header shortcut to the current-info page ──────────────────
   Renamed from "En vivo" (2026-07-24): /ahora is REVIEWED, dated, per-source
   evidence — its own lede says "no es un canal de noticias" — so a "live/En vivo"
   claim over-signalled a real-time feed AND wore the emergency-red (--stop) hue.
   It's now VIOLET (--accent, the "current info / go here" action hue; red stays
   reserved for 171 / peligro), and its dot is PAIRED with the same violet dot on
   the Ahora nav tab so pill + tab read as one concept with two doors. One slow
   violet ping = "this changes, check it" (disabled under prefers-reduced-motion).
   The bare .live-dot base stays coral for the coral contexts that still use it
   (ahora.html .pulse-tag, the ayudar .livebar) — only the pill's dot goes violet. */
.live-pill{display:inline-flex;align-items:center;gap:7px;flex:none;border:1px solid var(--accent-line);border-radius:999px;padding:5px 11px 5px 9px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--accent-ink);text-decoration:none;white-space:nowrap}
.live-pill:hover{color:var(--accent-ink);border-color:var(--accent);background:var(--accent-soft)}
.live-pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live-pill[aria-current="page"]{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
.live-pill .live-dot,.live-pill .live-dot::after{background:var(--accent)}
.live-dot{position:relative;width:8px;height:8px;flex:none;border-radius:999px;background:var(--stop)}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--stop);animation:live-ping 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes live-ping{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}

/* Homepage entry — the page's single live, clearly-interactive block. Tuned UP
   from a neutral card (Jun 2026) because /ahora grew central: a coral leading
   edge + faint coral wash mark it as "the live layer," a broadcast tag carries
   the now-signal, and a violet action chip ("Ver") makes the affordance
   unmistakable. Still calm — soft coral, no fill, no alarm — for low glare. */
.livebar{position:relative;display:flex;align-items:center;gap:16px;margin:0 0 6px;padding:16px 18px 16px 22px;border:1px solid var(--stop-line);border-radius:var(--radius);background:linear-gradient(90deg,color-mix(in srgb,var(--stop-soft) 55%,transparent),transparent 40%),var(--surface);box-shadow:var(--shadow-card);text-decoration:none;color:var(--ink);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.livebar::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:999px;background:var(--stop)}
.livebar:hover{transform:translateY(-1px);border-color:var(--stop);box-shadow:0 2px 4px rgba(0,0,0,.26),0 12px 30px rgba(0,0,0,.26)}
.livebar:focus-visible{outline:2px solid var(--stop-ink);outline-offset:2px}
.livebar-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.livebar-tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--stop-ink)}
.livebar .live-dot{width:8px;height:8px}
.livebar-title{font-family:var(--serif);font-size:1.16rem;line-height:1.2;color:var(--ink)}
.livebar-sub{font-size:.88rem;line-height:1.4;color:var(--muted)}
.livebar-cta{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-ink);border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:999px;padding:8px 14px;white-space:nowrap}
.livebar-ar{width:16px;height:16px;display:block;transition:transform .18s ease}
.livebar:hover .livebar-cta{border-color:var(--accent)}
.livebar:hover .livebar-ar{transform:translateX(3px)}
/* narrowest phones / heavy zoom: drop the label, keep the dot (aria-label names it) */
@media (max-width:360px){ .live-pill .live-txt{display:none} .live-pill{padding:5px 8px} }

/* ---------- site bar (unified primary nav) ----------
   The SAME five tabs on every page (Inicio · Rescate · Superv. · Comunic. ·
   Donar). Desktop: a sticky top row parked under the header (its top offset is
   synced by app.js). Narrow screens: a fixed bottom tab bar at thumb height.
   The active page carries aria-current="page". */
/* Same --header shade as the top bar (not the lighter --surface) and pulled up 5px so the
   two lock into one continuous panel — no tonal step, no see-through seam. FULLY SOLID:
   the see-through transition lives in the header above (solid at ITS bottom → frosted toward
   its top), so the header→nav junction is solid-to-solid. The border-bottom is the single
   divider under the whole assembly. */
.sitebar{position:sticky;z-index:49;top:52px;margin-top:-5px;background:var(--header);border-bottom:1px solid var(--line)}
.sitebar .sb-inner{display:flex;gap:2px;max-width:var(--maxw);margin:0 auto;padding:0 12px;justify-content:center}
.sitebar a{display:flex;align-items:center;gap:7px;text-decoration:none;color:var(--muted);font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;padding:12px 14px;border-bottom:2px solid transparent;transition:color .15s ease}
.sitebar a:hover{color:var(--ink)}
.sitebar a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
/* Ahora = the most volatile, most decision-relevant non-emergency destination —
   lift it a step above its peer tabs everywhere it appears: a persistent violet
   ink (when not the active page) + a small violet dot, the SAME violet the header
   "Ahora" pill carries, so the two read as one system. Violet, never red. */
.sitebar a[href="ahora.html"]{position:relative}
.sitebar a[href="ahora.html"]:not([aria-current="page"]){color:var(--accent-ink)}
.sitebar a[href="ahora.html"]::after{content:"";position:absolute;top:8px;right:9px;width:5px;height:5px;border-radius:999px;background:var(--accent)}
.sitebar a svg{width:15px;height:15px;flex:none;transition:fill .18s ease}
/* scroll-spy "you are here": the Ayudar tab lights up (heart fills) while #donar shows */
.sitebar a.in-view{color:var(--accent-ink)}
.sitebar a.in-view svg{fill:currentColor}
@media (max-width:720px){
  /* Bottom tab bar: reset the desktop 5px overlap, and give the header back its base line
     (the two are no longer adjacent here). */
  .top{border-bottom:1px solid var(--line)}
  .sitebar{position:fixed;z-index:60;top:auto;bottom:0;left:0;right:0;margin-top:0;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:saturate(1.1) blur(8px);border-bottom:0;border-top:1px solid var(--line)}
  /* Lift the fixed bottom nav clear of the home indicator / rounded corners:
     a small baseline gap PLUS the device safe-area insets (which only apply
     because the viewport meta now has viewport-fit=cover). */
  .sitebar .sb-inner{gap:0;padding:0 calc(env(safe-area-inset-right,0px) + 9px) calc(env(safe-area-inset-bottom,0px) + 4px) calc(env(safe-area-inset-left,0px) + 9px)}
  .sitebar a{flex:1;flex-direction:column;justify-content:center;gap:4px;padding:8px 2px 9px;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.01em;text-transform:none;border-bottom:0;position:relative;min-height:56px}
  .sitebar a svg{width:21px;height:21px}
  .sitebar a[aria-current="page"]{border-bottom:0}
  .sitebar a[aria-current="page"]::before{content:"";position:absolute;top:0;left:18%;right:18%;height:2px;border-radius:0 0 2px 2px;background:var(--accent)}
  /* Stacked icon-over-label tab: sit the Ahora dot at the icon's top-right. */
  .sitebar a[href="ahora.html"]::after{top:7px;right:auto;left:calc(50% + 9px)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
}

/* ---------- section bands ----------
   Each meta-section is wrapped in a full-bleed .band. Bands alternate value
   (base ↔ lift) for a clear "new section" read, and carry a faint Spell hue for
   identity. A hairline at every seam draws the edge (Mux: define edges with line). */
.band{--bg:var(--paper);--card-bg:var(--surface);background:var(--bg)}
.band--base{--bg:var(--paper);--card-bg:var(--surface)}
.band--lift{--bg:var(--lift);--card-bg:var(--card-on-b)}
.band + .band{border-top:1px solid var(--line)}

/* per-band Spell hue tint — amount differs by base vs lift so strength stays even */
.band--base.band--blue  {background:color-mix(in srgb,var(--h-blue)   var(--band-base-amt),var(--bg))}
.band--base.band--violet{background:color-mix(in srgb,var(--h-violet) var(--band-base-amt),var(--bg))}
.band--base.band--peach {background:color-mix(in srgb,var(--h-peach)  var(--band-base-amt),var(--bg))}
.band--base.band--orchid{background:color-mix(in srgb,var(--h-orchid) var(--band-base-amt),var(--bg))}
.band--base.band--indigo{background:color-mix(in srgb,var(--h-indigo) var(--band-base-amt),var(--bg))}
.band--lift.band--blue  {background:color-mix(in srgb,var(--h-blue)   var(--band-lift-amt),var(--bg))}
.band--lift.band--violet{background:color-mix(in srgb,var(--h-violet) var(--band-lift-amt),var(--bg))}
.band--lift.band--peach {background:color-mix(in srgb,var(--h-peach)  var(--band-lift-amt),var(--bg))}
.band--lift.band--orchid{background:color-mix(in srgb,var(--h-orchid) var(--band-lift-amt),var(--bg))}
.band--lift.band--indigo{background:color-mix(in srgb,var(--h-indigo) var(--band-lift-amt),var(--bg))}

/* single-card blocks inside a band lift to that band's --card-bg (one value step
   up). NOT .items — that's a flex container; each .item card lifts on its own, so
   painting the container too would show as a stray panel behind/between the cards. */
.band .form,.band .cardlink{background:var(--card-bg)}

/* ---------- generic blocks ---------- */
main{padding:0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 10px}
h1{font-family:var(--serif);font-size:clamp(2rem,6vw,2.8rem);line-height:1.1;letter-spacing:-.012em;font-weight:600;margin:.1em 0 .35em}
h2{font-family:var(--serif);font-size:clamp(1.4rem,4vw,1.8rem);line-height:1.2;letter-spacing:-.006em;font-weight:600;margin:0 0 .45em}
h3{font-family:var(--serif);font-size:1.18rem;font-weight:600;margin:0 0 .3em;letter-spacing:-.004em}
p{margin:0 0 1em}
.lede{font-size:1.12rem;color:var(--muted);margin-bottom:1.2em}
.hr{height:1px;background:var(--line);border:0;margin:40px 0}
.muted{color:var(--muted)}
.small{font-size:.92rem}

.hero{padding:22px 0 4px}
.stamp{font-family:var(--mono);font-size:11.5px;color:#828c95;letter-spacing:.04em;margin-top:6px} /* lifted from --faint (3.7:1) to 5.0:1 so "current?" is confirmable */
/* Disclaimer: deliberately quiet — plain muted text, NO box and NO amber, so the
   emergency numbers are the page's only amber-bordered element. */
.verifybar{display:flex;gap:8px;align-items:flex-start;background:none;border:0;border-radius:0;padding:0;margin:14px 0 2px;font-size:.86rem;color:var(--muted)}
.verifybar svg{width:15px;height:15px;flex:none;color:var(--faint);margin-top:3px}

.section{padding:44px 0}
.section-tag{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}

/* ---------- time-horizon label ----------
   Which stage of recovery a section serves, so the guide reads as useful today
   or after a future quake. A small pill that sits above the eyebrow / section-tag;
   its tone warms with urgency (now) and cools toward calm (long term). No JS. */
.horizon{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;padding:3px 11px 3px 9px;margin:0 0 12px}
.horizon::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.horizon--now{color:var(--stop-ink);background:var(--stop-soft);border-color:var(--stop-line)}
.horizon--days{color:var(--warn-ink);background:var(--warn-soft);border-color:var(--warn-line)}
.horizon--ongoing{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
/* reserved for the future recovery branch (not placed yet) */
.horizon--weeks{color:var(--accent-ink);background:var(--accent-soft);border-color:var(--accent-line)}
.horizon--long{color:var(--h-mint);background:color-mix(in srgb,var(--h-mint) 13%,var(--surface));border-color:color-mix(in srgb,var(--h-mint) 32%,var(--line-strong))}

/* ---------- wayfinder / situation router ----------
   Each row reads left→right: where you are  →  where that takes you.
   Tapping opens the concrete steps below (accordion via app.js).
   Each path carries its own calm, earthy tone (--tone) so it stays memorable. */
.section--router{padding-top:8px;width:min(var(--maxw-wide), 100vw - 32px);position:relative;left:50%;transform:translateX(-50%)}
/* break a section out to the wider board width (like the wayfinder above),
   so a card directory gets room for more columns than the prose measure. */
.section--wide{width:min(var(--maxw-wide), 100vw - 32px);position:relative;left:50%;transform:translateX(-50%)}
.wf{display:flex;flex-direction:column;gap:14px;margin-top:8px}

.wf-item{--tone:var(--accent);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .15s ease}
.wf-item:hover{border-color:color-mix(in srgb,var(--tone) 50%,var(--line-strong))}
/* Router tones — one balanced, evenly-spaced Spell wheel (green · orange · azure ·
   orchid · violet) instead of the old muddy mix of two greens + a teal. Deepened
   as a set to a 5.4–6.4:1 band so white text (incl. the .92-alpha sub-line) stays
   readable on cheap screens in direct sunlight, not just ≥4.5:1 indoors. */
.tone-safe{--tone:#3a7659}     /* safety — green/mint   · white 5.36:1 */
.tone-signal{--tone:#a8521f}   /* signal / urgent — warm orange · 5.40:1 */
.tone-find{--tone:#3d6096}     /* find people — azure blue · 6.34:1 */
.tone-give{--tone:#834b80}     /* help / give — orchid · 6.40:1 */
.tone-build{--tone:#6a5fbf}    /* build / abroad — violet (off-homepage) */

.wf-head{position:relative;width:100%;display:flex;align-items:stretch;text-align:left;background:transparent;border:0;cursor:pointer;padding:0;font-family:inherit;color:inherit}

/* left — the situation you're in */
.wf-sit{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:14px;padding:16px 14px 16px 18px}
.wf-ico{flex:none;width:46px;height:46px;border-radius:12px;background:color-mix(in srgb,var(--tone) 15%,var(--surface-2));border:1px solid color-mix(in srgb,var(--tone) 32%,var(--line-strong));color:color-mix(in srgb,var(--tone) 52%,var(--ink));display:flex;align-items:center;justify-content:center}
.wf-ico svg{width:24px;height:24px;display:block}
.wf-titles{min-width:0}
.wf-titles b{display:block;font-family:var(--serif);font-weight:600;font-size:1.1rem;line-height:1.2;letter-spacing:-.004em}
.wf-titles small{display:block;color:#b3bcc4;font-size:.92rem;margin-top:2px;line-height:1.3} /* lifted off --muted so it holds up outdoors (8:1 on the card) */

/* the connector — tinted toward where it leads */
.wf-arrow{flex:none;align-self:center;color:color-mix(in srgb,var(--tone) 55%,var(--ink));display:flex;align-items:center;padding:0 6px}
.wf-arrow svg{width:22px;height:22px;display:block}

/* right — where that path leads (the answer), filled in its tone */
.wf-act{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;background:var(--tone);padding:16px 18px}
/* the recommendation (right panel) is the action — heavier + pure white so it wins
   the eye over the muted problem label on the left. */
.wf-act b{font-family:var(--serif);font-weight:700;font-size:1.12rem;line-height:1.2;letter-spacing:-.004em;color:#fff}
.wf-act small{color:rgba(255,255,255,.94);font-size:.9rem;line-height:1.3}

.wf-chev{flex:none;align-self:center;color:var(--faint);padding:0 14px;transition:transform .2s ease}
.wf-chev svg{width:20px;height:20px;display:block}
.wf-head:hover .wf-chev{color:color-mix(in srgb,var(--tone) 55%,var(--ink))}
.wf-head[aria-expanded="true"] .wf-chev{transform:rotate(180deg);color:color-mix(in srgb,var(--tone) 55%,var(--ink))}
.wf-head[aria-expanded="true"] .wf-act{background:color-mix(in srgb,var(--tone) 88%, black 12%)}

.wf-body{padding:2px 18px 18px;border-top:1px solid var(--line);background:var(--wf-panel)} /* opened panel lifts one step above the card */
.wf-body[hidden]{display:none}

/* expanded detail inherits the path's tone (--tone from .wf-item) */
.wf-body ol.steps li::before{background:color-mix(in srgb,var(--tone) 18%,var(--surface-2));color:color-mix(in srgb,var(--tone) 62%,var(--ink));border-color:color-mix(in srgb,var(--tone) 38%,var(--line-strong))}
.wf-body ol.steps li:not(:last-child)::after{background:color-mix(in srgb,var(--tone) 38%,var(--line-strong))}
.wf-body .linkbtn{border-color:color-mix(in srgb,var(--tone) 40%,var(--line-strong));background:color-mix(in srgb,var(--tone) 14%,var(--surface));color:color-mix(in srgb,var(--tone) 60%,var(--ink))}
.wf-body .linkbtn:hover{border-color:var(--tone)}

@media (max-width:640px){
  /* a touch more breathing room at the screen edges on phones */
  .container{padding-left:24px;padding-right:24px}
  .top-row{padding-left:24px;padding-right:24px}
  .wf-head{flex-direction:column;align-items:stretch}
  .wf-sit{padding-right:46px}
  .wf-arrow{align-self:center;transform:rotate(90deg);padding:4px 0}
  .wf-act{border-left:0;border-top:0}
  .wf-chev{position:absolute;top:14px;right:10px;padding:0}
}

ol.steps{margin:14px 0 4px;padding:0;list-style:none;counter-reset:s}
ol.steps li{position:relative;padding:0 0 14px 38px;counter-increment:s}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent-line);font-family:var(--mono);font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center}
ol.steps li:not(:last-child)::after{content:"";position:absolute;left:13px;top:26px;bottom:2px;width:1px;background:var(--accent-line)}

.note{display:flex;gap:9px;align-items:flex-start;font-size:.95rem;color:var(--muted);margin:10px 0 0}
.note svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--faint)}

.callout{display:flex;gap:10px;align-items:flex-start;border-radius:var(--radius-sm);padding:12px 14px;margin:14px 0 0;font-size:.96rem}
.callout svg{width:18px;height:18px;flex:none;margin-top:2px}
.callout b{font-weight:600}
.callout.warn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn-ink)}
.callout.warn svg{color:var(--warn)}
.callout.stop{background:var(--stop-soft);border:1px solid var(--stop-line);color:var(--stop-ink)}
.callout.stop svg{color:var(--stop)}
.callout.calm{background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent-ink)}
.callout.calm svg{color:var(--accent-ink)}

/* hero emergency numbers — the ONE amber-bordered box on the homepage. Deep
   charcoal panel, 4px amber rule, white text; the dial numbers are near-white
   pills with dark digits so they stay legible in direct sunlight. Theme-agnostic
   on purpose (these exact values both themes) — it's the page's hard anchor. */
.callout.emergency{background:#22262d;border:1px solid var(--line-strong);border-left:4px solid #f59e0b;color:#fff;border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.callout.emergency b{color:#fff}
.callout.emergency svg{color:#f59e0b}
.callout.emergency p{color:rgba(255,255,255,.82)}
.emergency .links{gap:9px;margin-top:12px}
.emergency .linkbtn{background:#f1f1f1;border-color:#f1f1f1;color:#1a1a1a;font-weight:700;font-size:1.15rem;padding:9px 16px;letter-spacing:.01em} /* ~+25% size & padding; 15:1 contrast */
.emergency .linkbtn:hover{background:#fff;border-color:#fff;color:#1a1a1a}
/* Protección Civil — the long, important number — gets its own full-width row at
   equal weight, instead of trailing the short pills as a faint runt. */
/* Protección Civil — the long number gets its own full-width chip: a quiet label
   stacked over a big bold number (left-aligned, no separator, never wraps), so
   it scans instantly under stress instead of reading like a table in a pill. */
.emergency .linkbtn.pc{flex-basis:100%;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 24px}
.emergency .linkbtn.pc .pc-label{font-weight:600;font-size:.84rem;letter-spacing:.01em;opacity:.72}
.emergency .linkbtn.pc .pc-num{font-weight:800;font-size:1.4rem;line-height:1.06;letter-spacing:.02em;white-space:nowrap}

/* ---- Install / add-to-home-screen ----
   Hidden by default; app.js reveals it only when the PWA is installable
   (Android) or as a manual hint (iOS), and hides it once installed. Accent
   "do-this" tone — a calm preparedness action that never competes with the
   amber emergency box. ([hidden] needs the explicit rule below, or the
   .install display:flex would override it.) */
.install[hidden],.install-foot[hidden]{display:none}
.install{display:flex;align-items:center;gap:11px;margin:14px 0 0;padding:11px 13px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius-sm);color:var(--accent-ink)}
.install-ic{width:22px;height:22px;flex:none;color:var(--accent-ink)}
.install-go{display:flex;align-items:center;gap:11px;flex:1;min-width:0;background:none;border:0;margin:0;padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.install-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.install-txt b{font-weight:600;font-size:1rem}
.install-txt small{color:var(--muted);font-size:.85rem}
.install--ios{cursor:default}
.install--ios .install-txt{font-size:.92rem}
.install-x{flex:none;background:none;border:0;margin:-6px -4px -6px 0;padding:6px;color:var(--muted);cursor:pointer;border-radius:8px;line-height:0}
.install-x svg{width:16px;height:16px}
.install-x:hover{color:var(--ink)}
.install-foot{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:2px 10px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;font:inherit;font-size:.86rem;cursor:pointer;vertical-align:baseline}
.install-foot:hover{border-color:var(--accent)}

.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.linkbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--accent-line);background:var(--accent-soft);color:var(--accent-ink);border-radius:999px;padding:7px 13px;font-size:.92rem;text-decoration:none;font-weight:500}
.linkbtn:hover{text-decoration:none;border-color:var(--accent)}
.linkbtn svg{width:13px;height:13px;opacity:.7}

/* ---------- decision tree (acute life-safety flows) ----------
   One question at a time → branch → the next correct action. Progressive
   enhancement: without JS every step is visible as a plain top-to-bottom guide;
   app.js adds .dt-on, hides all but the current step, and moves focus on branch. */
.dtree{margin-top:16px}
.dtree:not(.dt-on) .dt-step + .dt-step{margin-top:18px;padding-top:18px;border-top:1px dashed var(--line)}
.dtree:not(.dt-on) .dt-back{display:none}
.dt-step{scroll-margin-top:120px}
.dt-step:focus{outline:none}
.dt-step:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:10px}
.dt-q{font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.25;letter-spacing:-.004em;margin:0 0 13px;color:var(--ink)}
.dt-opts{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.dt-opt{flex:1 1 200px;display:flex;align-items:center;gap:13px;text-align:left;font-family:inherit;font-size:1rem;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--tone,var(--accent)) 12%,var(--card-bg,var(--surface)));border:1px solid color-mix(in srgb,var(--tone,var(--accent)) 47%,var(--line-strong));border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .15s ease,background .15s ease,transform .15s ease,box-shadow .15s ease}
.dt-opt:hover{border-color:var(--tone,var(--accent));background:color-mix(in srgb,var(--tone,var(--accent)) 19%,var(--card-bg,var(--surface)));transform:translateY(-1px);box-shadow:0 7px 20px rgba(0,0,0,.22)}
.dt-opt:active{transform:translateY(0);box-shadow:none}
.dt-opt-ic{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--tone,var(--accent)) 24%,var(--card-bg,var(--surface)));color:color-mix(in srgb,var(--tone,var(--accent)) 62%,var(--ink))}
.dt-opt-ic svg{width:19px;height:19px;display:block}
.dt-opt-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.dt-opt-tx b{font-weight:600;line-height:1.2}
.dt-opt-tx i{font-style:normal;font-weight:400;font-size:.85rem;color:var(--muted);line-height:1.22}
.dt-opt-go{flex:none;margin-left:auto;display:flex;color:var(--muted);opacity:.6;transition:transform .15s ease,opacity .15s ease,color .15s ease}
.dt-opt-go svg{width:18px;height:18px;display:block}
.dt-opt:hover .dt-opt-go{opacity:1;transform:translateX(2px);color:var(--tone,var(--accent))}
/* back = a clear pill, not a faint text link — easy to find, with room beneath */
.dt-back{display:inline-flex;align-items:center;gap:7px;appearance:none;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:999px;color:var(--muted);font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;padding:8px 15px 8px 13px;margin:0 0 18px}
.dt-back svg{width:15px;height:15px}
.dt-back:hover{color:var(--ink);border-color:var(--faint)}
.dt-step ol.steps{margin-top:4px}

/* priority action — a sharper, heavier headline for the one thing to do now.
   Calm amber accent + left rule, no glare (honors the soft-contrast aesthetic). */
.actblock{border:1px solid var(--warn-line);border-left:5px solid var(--warn);background:var(--warn-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:14px 16px;margin:4px 0 14px}
.actblock .lead{display:flex;gap:10px;align-items:center;font-family:var(--serif);font-weight:600;font-size:1.26rem;line-height:1.16;letter-spacing:-.008em;color:var(--warn-ink);margin:0 0 5px}
.actblock .lead svg{width:22px;height:22px;flex:none;stroke-width:2.4}
.actblock p{margin:0;font-size:.98rem;color:var(--ink)}
.actblock p + p{margin-top:6px}

/* rhythm strip — the tap·pause·repeat locating signal, given visual weight */
.rhythm{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:14px 0 4px;padding:15px 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card-bg,var(--surface))}
.rhythm .beat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;min-width:78px}
.rhythm .beat b{font-family:var(--serif);font-size:1.12rem;font-weight:600;line-height:1.05;color:var(--ink)}
.rhythm .beat small{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.rhythm .sep{flex:none;color:color-mix(in srgb,var(--tone,var(--accent)) 58%,var(--faint))}
.rhythm .sep svg{width:18px;height:18px;display:block}

/* ---------- teaching diagram ----------
   A wordless line illustration that teaches an action at a glance — language-
   independent, themeable via currentColor, soft strokes (no glare). Sibling of
   the rhythm strip: a bordered figure that floats methods side by side, each a
   <figure> of icon + bilingual label + dose chip, joined by an "o / or". */
.diagram{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:8px 24px;width:fit-content;max-width:100%;margin:16px auto 4px;padding:18px 26px;border:1px solid var(--line-strong);border-radius:12px;background:var(--card-bg,var(--surface))}
.dia-method{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;min-width:104px;margin:0}
.dia-method svg{width:52px;height:52px;display:block;color:var(--ink)}
.dia-method figcaption{font-family:var(--serif);font-size:1.06rem;font-weight:600;line-height:1.12;color:var(--ink)}
.dia-method .ic-heat{color:var(--warn)}   /* the flame under the pot */
.dia-method .ic-drop{color:var(--accent-ink)} /* the bleach drop */
/* the either/or connector — italic serif (a conjunction, not a "0") */
.dia-or{align-self:center;font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--muted)}

/* solo variant: one iconic figure (drop·cover·hold) over an ordered word
   sequence — the mantra read left→right under the picture */
.diagram--solo{flex-direction:column;align-items:center;gap:11px;padding:18px 26px}
.dia-fig{margin:0;display:flex}
.dia-fig svg{width:134px;height:auto;display:block;color:var(--ink)}
.dia-seq{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:5px 11px;margin:0}
.dia-seq b{font-family:var(--serif);font-size:1.04rem;font-weight:600;line-height:1.1;color:var(--ink)}
.dia-seq .dia-dot{color:var(--faint)}

/* ---------- threshold flourish ---------- */
/* A full-bleed crown-of-thorns vine straddling the colour-change between the
   in-distress content and the "give back" bands (donate, feedback) — extra
   separation beyond the band colour. The host band is position:relative; the
   vine is absolutely centred on the band's top edge (the seam) and spans edge
   to edge. Decorative (aria-hidden), themeable (currentColor in a muted apricot
   "giving" tone), tiled via an SVG <pattern> so it stays a fixed size at any
   width, and faded a touch at the very edges. */
.band--seam{position:relative}
.vine-sep{position:absolute;top:0;left:0;right:0;z-index:2;transform:translateY(-50%);line-height:0;pointer-events:none;opacity:.72;color:color-mix(in srgb,var(--h-peach) 55%,var(--faint));-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.vine-sep svg{display:block;width:100%;height:17px}

/* ---------- resource / item lists ---------- */
/* each entry is its own slightly-elevated card so it reads distinctly off the band */
.items{display:flex;flex-direction:column;gap:10px;margin-top:14px;background:transparent;border:0;overflow:visible}
.item{display:flex;gap:13px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line-strong);border-radius:11px;background:linear-gradient(180deg,color-mix(in srgb,#fff 5%,var(--card-bg,var(--surface))),var(--card-bg,var(--surface)) 62%);box-shadow:var(--shadow-card);transition:border-color .15s ease,transform .15s ease}
.item:hover{border-color:var(--faint)}
.item-main{flex:1;min-width:0}
.item-main a.title,.item-main span.title{font-family:var(--serif);font-weight:600;text-decoration:none;color:var(--ink);font-size:1.06rem}
.item-main a.title:hover{color:var(--accent-ink)}
.item-main p{margin:.15em 0 0;color:var(--muted);font-size:.95rem}
.item-go{flex:none;color:var(--faint);margin-top:3px}
.item-go svg{width:17px;height:17px}
/* Whole-card click target — opt-in via .items--clickable on the list. An overlay
   on the title link covers the entire card, so the body and arrow are clickable
   too, while the <a> stays the real link (keyboard + screen-reader name). Only
   safe where each card has exactly one link, hence opt-in (not global). */
.items--clickable .item{position:relative}
.items--clickable .item:hover{border-color:var(--faint)}
.items--clickable .item:has(a.title):hover{cursor:pointer}
.items--clickable .item:hover .item-main a.title{color:var(--accent-ink)}
.items--clickable .item:hover .item-go{color:var(--accent-ink)}
.items--clickable .item-main a.title::after{content:"";position:absolute;inset:0}

/* ---------- drop-off directory (diaspora) ----------
   Progressive enhancement over the static .dir-sec city cards: JS derives the
   country jump-bar, counts, and a client-side city filter (nothing leaves the
   device). Sky hue (--h-blue) = "data / directory" per the palette. .dir-tools
   stays [hidden] until JS enables it, so no-JS users keep the full static list. */
.dir{margin:30px 0 8px}
.dir .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:color-mix(in srgb,var(--h-blue) 58%,var(--ink));margin-bottom:6px}
.dir-label{display:block;font-size:.92rem;color:var(--muted);margin:15px 0 7px}
.dir-search-wrap{position:relative}
.dir-search-wrap .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--faint);pointer-events:none}
.dir-search{width:100%;box-sizing:border-box;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:12px 44px}
.dir-search::placeholder{color:var(--faint)}
.dir-search::-webkit-search-cancel-button{-webkit-appearance:none}
.dir-search:focus{outline:none;border-color:color-mix(in srgb,var(--h-blue) 55%,var(--line-strong));box-shadow:0 0 0 3px color-mix(in srgb,var(--h-blue) 20%,transparent)}
.dir-clear{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:30px;height:30px;border:0;background:transparent;color:var(--faint);cursor:pointer;border-radius:999px;display:none;align-items:center;justify-content:center}
.dir-clear:hover{color:var(--ink)}
.dir-clear svg{width:16px;height:16px}
.dir-clear.show{display:inline-flex}
.dir-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.dir-chip{display:inline-flex;align-items:center;gap:7px;max-width:100%;border:1px solid color-mix(in srgb,var(--h-blue) 28%,var(--line-strong));background:color-mix(in srgb,var(--h-blue) 12%,var(--surface));color:color-mix(in srgb,var(--h-blue) 60%,var(--ink));border-radius:999px;padding:6px 13px;font-size:.92rem;font-weight:500;text-decoration:none;white-space:nowrap}
.dir-chip .t{min-width:0;overflow:hidden;text-overflow:ellipsis} /* guardrail: a long label truncates instead of breaking the row */
.dir-chip:hover{border-color:color-mix(in srgb,var(--h-blue) 52%,var(--line-strong));text-decoration:none}
.dir-chip .flag{font-size:1.05em;line-height:1}
.dir-chip .n{font-family:var(--mono);font-size:11px;color:var(--faint)}
.dir-chip.is-hidden{display:none}
.dir-count{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--faint);margin:12px 0 0}
.dir-empty{display:none;color:var(--muted);font-size:.96rem;margin:10px 0 0}
.dir-empty.show{display:block}
.dir-legend{margin:12px 0 0;font-size:.88rem;color:var(--muted);line-height:1.85}
.dir-tier{margin:-2px 0 11px}
.dir-band{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--h-blue) 58%,var(--ink));border-top:1px solid var(--line-strong);padding-top:20px;margin:36px 0 2px}
.item.is-hidden,.dir-sec.is-hidden,.dir-band.is-hidden{display:none}

.tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:3px 7px;border-radius:5px;white-space:nowrap;border:1px solid transparent;align-self:flex-start;margin-top:3px}
.tag.trust{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line)}
.tag.community{background:var(--surface-2);color:var(--muted);border-color:var(--line-strong)}
.tag.verify{background:var(--warn-soft);color:var(--warn-ink);border-color:var(--warn-line)}

/* a resource carries two chips side by side: a colored TOPIC tag (what it's for)
   + a trust tag. (Class is .tag--topic, NOT .topic — .topic is the page-block style.) */
.tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-end;flex:none;padding-top:2px}
.tags .tag{margin-top:0}
/* one category chip per comms card sits in the content column, left-aligned */
.item-main .tags{justify-content:flex-start;margin-top:9px;padding-top:0}
.tag--topic{background:color-mix(in srgb,var(--tt) 16%,var(--card-bg,var(--surface)));color:color-mix(in srgb,var(--tt) 62%,var(--ink));border-color:color-mix(in srgb,var(--tt) 34%,var(--line-strong))}
.t-missing{--tt:var(--h-indigo)}
.t-shelter{--tt:var(--h-mint)}
.t-health {--tt:var(--h-orchid)}
.t-data   {--tt:var(--h-blue)}
.t-map    {--tt:var(--h-peach)}
.t-relief {--tt:var(--h-violet)}
.t-transport{--tt:var(--h-violet)}
.t-pets   {--tt:var(--h-mint)}
.t-verify {--tt:var(--h-blue)}
/* comms entry categories: free public access · how-to tip · app/tool */
.t-free{--tt:var(--h-mint)}
.t-tip {--tt:var(--h-violet)}
.t-app {--tt:var(--h-blue)}

/* directory laid out as side-by-side columns (kanban-style) instead of one
   tall list. Cards stack title/desc over tags so they read in a narrow column.
   auto-fill + min() keeps it 1 col on phones, ~2-3 on wider screens. */
/* directory as a kanban-style board: vertical topic lanes side by side.
   Each .dir-col is a lane; its cards stack under the label. Collapses to a
   single lane on narrow screens. Headings are real <h3>s, so the board is
   navigable by heading for screen readers. */
.items--board{display:flex;flex-direction:row;gap:16px;align-items:flex-start}
.dir-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px}
.items--board .item{flex-wrap:wrap}
.items--board .item-main{flex-basis:100%}
.items--board .tags{justify-content:flex-start;width:100%}
.dir-group{margin:0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.dir-col .item + .dir-group{margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
/* On a phone the lanes would collapse into one very long stack. Instead a JS
   enhancement turns the board into a tabbed switcher: a scrollable row of lane
   tabs (.dir-tabs) + one lane shown at a time. .dir-tabs is hidden on wide
   screens; without JS it never appears and the board just stacks (the rule
   below). */
.dir-tabs{display:none}
@media (max-width:720px){
  .items--board{flex-direction:column}
  .dir-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:2px 0 14px;padding-bottom:2px}
  .dir-tabs::-webkit-scrollbar{display:none}
  .dir-tab{flex:0 0 auto;cursor:pointer;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 15px;white-space:nowrap;transition:color .15s ease,border-color .15s ease,background .15s ease}
  .dir-tab:hover{color:var(--ink)}
  .dir-tab[aria-selected="true"]{color:var(--ink);background:color-mix(in srgb,var(--accent) 14%,var(--surface));border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
  .items--board.tabs-on > .dir-col{display:none}
  .items--board.tabs-on > .dir-col.is-active{display:flex}
}
@media (max-width:560px){
  .item{flex-wrap:wrap}
  .item-main{flex-basis:100%}
  .tags{justify-content:flex-start;width:100%}
}

.cardlink{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:20px 22px;text-decoration:none;color:var(--ink);margin-top:14px;box-shadow:var(--shadow-card)}
.cardlink:hover{border-color:var(--accent);text-decoration:none}
.cardlink .ar{margin-left:auto;color:var(--accent-ink)}
.cardlink .ar svg{width:22px;height:22px}
.cardlink b{font-family:var(--serif);font-size:1.16rem;font-weight:600}
.cardlink p{margin:.2em 0 0;color:var(--muted);font-size:.95rem}

/* help chooser — two square cards: donate online vs find a collection point */
.choose{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.choose-card{display:flex;flex-direction:column;align-items:flex-start;gap:7px;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:24px 22px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);transition:border-color .15s ease,transform .15s ease}
.choose-card:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-2px)}
.choose-art{width:100%;max-width:104px;height:auto;color:var(--accent-ink);margin-bottom:4px}
.choose-card b{font-family:var(--serif);font-size:1.24rem;font-weight:600}
.choose-card p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.choose-go{margin-top:6px;color:var(--accent-ink)}
.choose-go svg{width:22px;height:22px}
@media (max-width:560px){.choose{grid-template-columns:1fr}}

/* topic preview grid — a calm "what's inside" funnel into a guide */
.preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:16px}
.ptile{display:flex;align-items:center;gap:11px;padding:12px 13px;background:var(--card-bg,var(--surface));border:1px solid var(--line-strong);border-radius:12px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-card);transition:border-color .15s ease,transform .15s ease}
.ptile:hover{border-color:var(--accent);text-decoration:none}
.ptile-ic{flex:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--h-indigo) 14%,var(--surface-2));border:1px solid color-mix(in srgb,var(--h-indigo) 30%,var(--line-strong));color:color-mix(in srgb,var(--h-indigo) 55%,var(--ink))}
.ptile-ic svg{width:20px;height:20px}
.ptile-lbl{font-weight:600;font-size:.95rem;line-height:1.2;min-width:0}

/* numbered topic blocks (rescate / supervivencia) */
.topic{padding:26px 0;border-top:1px solid var(--line);scroll-margin-top:104px}
.topic:first-of-type{border-top:0}
.topic .num{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--sev-ink,var(--accent-ink));margin-bottom:8px}
/* section anchor: a soft-tinted icon tile — one immediate visual per topic, color-coded
   by severity so the page can be scanned, not read. Reuses the horizon/callout language.
   Inline-flex so pages without an icon (other .topic pages) are visually unchanged. */
.num-ic{display:inline-flex;width:28px;height:28px;vertical-align:middle;margin-right:9px;align-items:center;justify-content:center;border-radius:8px;background:var(--sev-soft,var(--accent-soft));border:1px solid var(--sev-line,var(--accent-line));color:var(--sev-ink,var(--accent-ink))}
.num-ic svg{width:18px;height:18px}
.num--danger{--sev-soft:var(--stop-soft);--sev-line:var(--stop-line);--sev-ink:var(--stop-ink)}
.num--caution{--sev-soft:var(--warn-soft);--sev-line:var(--warn-line);--sev-ink:var(--warn-ink)}
.num--resource{--sev-soft:color-mix(in srgb,var(--h-blue) 13%,var(--surface));--sev-line:color-mix(in srgb,var(--h-blue) 32%,var(--line-strong));--sev-ink:var(--h-blue)}
.num--care{--sev-soft:color-mix(in srgb,var(--h-orchid) 13%,var(--surface));--sev-line:color-mix(in srgb,var(--h-orchid) 32%,var(--line-strong));--sev-ink:var(--h-orchid)}
.num--safe{--sev-soft:color-mix(in srgb,var(--h-mint) 14%,var(--surface));--sev-line:color-mix(in srgb,var(--h-mint) 32%,var(--line-strong));--sev-ink:var(--h-mint)}
/* source trust row — recognizable authority names as quiet chips */
.srcrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 4px}
.srcrow .srclabel{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.srcbadge{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);background:var(--surface-2);border:1px solid var(--line-strong);border-radius:6px;padding:3px 8px}
.topic ul{margin:.4em 0 1em;padding-left:1.15em}
.topic ul li{margin:.3em 0}
.dose{font-family:var(--mono);font-size:.92rem;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;white-space:nowrap}

/* "first 60 seconds" triage checklist — sits above the numbered topics */
.firstaid{margin:20px 0 6px;padding:15px 18px 17px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--radius)}
.firstaid-lbl{display:flex;gap:8px;align-items:center;margin:0 0 11px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.firstaid-lbl svg{width:16px;height:16px;flex:none}
ul.checks{margin:0;padding:0;list-style:none;display:grid;gap:9px}
ul.checks li{position:relative;padding-left:26px;font-size:.99rem;line-height:1.45;color:var(--ink)}
ul.checks li::before{content:"";position:absolute;left:5px;top:2px;width:6px;height:11px;border:solid var(--accent-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}

/* reusable "estoy bien" message template — type or copy it as-is */
.tmpl{margin:16px 0 2px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-card)}
.tmpl-lbl{display:flex;gap:8px;align-items:center;margin:0;padding:11px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--surface-2)}
.tmpl-lbl svg{width:15px;height:15px;flex:none}
.tmpl-body{margin:0;padding:14px 16px;font-family:var(--mono);font-size:.96rem;line-height:1.75;color:var(--ink)}

/* low-frequency "advanced" tip, collapsed by default (DNS) */
details.adv{margin:16px 0 0;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
details.adv > summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:500;font-size:.95rem;color:var(--ink);display:flex;align-items:center;gap:9px}
details.adv > summary::-webkit-details-marker{display:none}
details.adv > summary::before{content:"";width:7px;height:7px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(-45deg);transition:transform .15s ease;flex:none}
details.adv[open] > summary::before{transform:rotate(45deg)}
details.adv .adv-body{padding:0 14px 14px;color:var(--muted);font-size:.95rem;line-height:1.5}
.adv-body .cite-q{display:block;margin:5px 0 0;padding-left:10px;border-left:2px solid var(--line);color:var(--muted);font-size:.88rem;line-height:1.45}
/* "ES" auto-translate badge next to an English-only source */
.adv-body .trlink{display:inline-block;font-size:.72em;font-weight:600;letter-spacing:.02em;line-height:1;padding:.2em .42em;margin-left:.12em;border:1px solid var(--line-strong);border-radius:5px;color:var(--muted);text-decoration:none;vertical-align:.08em;white-space:nowrap}
.adv-body .trlink:hover,.adv-body .trlink:focus-visible{color:var(--accent-ink);border-color:var(--accent-ink);background:var(--surface)}

/* ---------- form ---------- */
.form{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:20px;margin-top:16px;box-shadow:var(--shadow-card)}
.form label{display:block;font-weight:500;font-size:.95rem;margin:14px 0 6px}
.form label:first-child{margin-top:0}
.form select,.form input,.form textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:11px 12px}
.form textarea{min-height:96px;resize:vertical}
.form .hp{position:absolute;left:-9999px}
.form button{margin-top:18px;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:12px 22px;font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit}
.form button:hover{filter:brightness(1.05)}
.priv{font-size:.88rem;color:var(--muted);margin-top:14px;display:flex;gap:8px;align-items:flex-start}
.priv svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--accent)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--surface);padding:30px 0 50px;margin-top:30px}
footer .container{color:var(--muted);font-size:.92rem}
footer .ft-stamp{font-family:var(--mono);font-size:11.5px;color:#828c95;letter-spacing:.03em} /* matches hero .stamp — lifted from --faint (3.5:1) to 4.5:1 on surface */
footer a{color:var(--accent-ink)}
/* social row: calm muted glyphs that warm to accent on hover; padded for low-vision tap targets */
footer .ft-social{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;color:var(--muted)}
footer .ft-social .ft-soc{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);padding:7px;border-radius:9px;line-height:0;transition:color .15s ease,background .15s ease}
footer .ft-social .ft-soc svg{width:19px;height:19px;display:block}
footer .ft-social .ft-soc:hover{color:var(--accent-ink);background:var(--line)}
footer .ft-social .ft-soc:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media (max-width:560px){
  body{font-size:16px}
  .brand span{display:none}
  .top-row{gap:8px}
}

/* ── Situation map (#situacion · "¿Qué pasó?") ─────────────────────────────
   Calm seismic-orientation card. SVG is drawn from data by an inline script in
   index.html; the <figcaption> carries the same facts for no-JS / screen readers.
   Apricot = earthquakes (--h-peach, the system's "maps" hue). */
.quakemap{margin:20px 0 0;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:18px 18px 16px;overflow:hidden}
.quakemap svg{display:block;width:100%;height:auto}
.qm-land{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1.4;stroke-linejoin:round}
.qm-glow{fill:url(#qmGlow);filter:url(#qmBlur)}
.qm-ring{fill:none;stroke:var(--h-peach)}
.qm-core{fill:var(--warn-ink)}
.qm-lbl{fill:var(--muted);font:500 13.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.qm-lbl--mag{fill:var(--warn-ink);font-weight:700;font-size:12px}
.qm-lbl--after{fill:var(--warn-ink);font-weight:600;font-size:11.5px}
.qm-lbl--hit{fill:var(--ink);font-weight:700;font-size:14.5px}
.qm-lbl--city2{fill:var(--ink);font-weight:600;font-size:14px}
.qm-dot{fill:var(--muted)}
.qm-dot--hit{fill:var(--warn-ink)}
.qm-dot--city2{fill:var(--ink)}
.qm-leg-h{fill:var(--faint);font:600 9px/1 var(--mono);letter-spacing:.12em;opacity:.85}
.qm-leg-t{fill:#828d97;font:500 10.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.qm-leg-k{fill:var(--faint);font:500 9.5px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.quakemap figcaption{margin:13px 2px 0}
.quakemap .cap-note{color:var(--faint);font-size:.78rem;font-style:italic;line-height:1.4;margin:0 0 13px}
.quakemap .cap-date{font:600 11.5px/1 var(--mono);letter-spacing:.1em;color:var(--ink);
  text-transform:uppercase;margin:0 0 13px}
.quakemap .cap-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.quakemap .cap-list li{color:var(--muted);font-size:.86rem;line-height:1.45;padding-left:14px;position:relative}
.quakemap .cap-list li::before{content:"";position:absolute;left:2px;top:.5em;width:4px;height:4px;
  border-radius:50%;background:var(--faint);opacity:.9}
.quakemap .cap-list b{color:var(--ink);font-weight:600}
.quakemap .cap-src{color:var(--faint);font-size:.78rem;margin:10px 0 0}

/* ============================================================================
   PAGE ACCENT + SUBSTRATE — lightweight per-surface identity, opt-in via
   <body data-page="…">. Recolors ONLY the content column's accent vars (header,
   nav and footer stay on the neutral palette on purpose) and lays a faint,
   content-themed substrate behind the page. Deliberately lighter than the
   blueprint skin above — no component restyle, just an accent key + texture.

   Two hard rules it never breaks:
   1. Page-identity color ≠ severity color. Red = danger and amber = caution stay
      reserved site-wide; a page accent is never one of them (so /ahora's real
      alert rows keep their meaning). Rosa/apricot are chosen precisely because
      they read as identity, not alarm.
   2. Substrate opacity stays low (calm, no glare — the read is light-sensitive).

   The substrate lives on #main::before (NOT a fixed body layer), so it spans the
   full content height, SCROLLS with the page, and FADES OUT toward the bottom via
   a mask — the color is strongest in the hero and dissolves as you read down.
   Chosen config, ~30% intensity: Ahora = Rosa + Sonar · Rescate = Durazno (apricot).
   ========================================================================== */

body[data-page="rescate"] #main,
body[data-page="ahora"]   #main{ position:relative; z-index:0; }

/* Scrolling, bottom-fading substrate behind the content column. */
body[data-page="rescate"] #main::before,
body[data-page="ahora"]   #main::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  -webkit-mask:linear-gradient(180deg, #000 0, #000 60%, transparent 100%);
          mask:linear-gradient(180deg, #000 0, #000 60%, transparent 100%);
}

/* Rescate — Durazno (apricot): warm color wash felt across the page, no pattern. */
body[data-page="rescate"] #main{
  --accent:#e0975c; --accent-ink:#eab488;
  --accent-soft:rgba(224,151,92,.12); --accent-line:rgba(224,151,92,.32);
}
body[data-page="rescate"] #main::before{
  background:
    radial-gradient(120% 46% at 50% 0%, rgba(224,151,92,.13), transparent 60%),
    linear-gradient(180deg, rgba(224,151,92,.05), rgba(224,151,92,.02) 45%, transparent 82%);
}

/* Ahora page floor: cooled a touch toward blue so the whole surface reads calm and
   cool (Fable-like) instead of warm — the reduced rosa wash below still keeps a subtle
   warm top. Set on the body background directly (NOT via --paper) so components that
   anchor to --paper — e.g. the need router card — keep their own neutral dark. */
body[data-page="ahora"]{ background:#151a24; }

/* Ahora — Rosa (warm pink) wash + faint Sonar rings sweeping up from the corner.
   Softened so the top stays subtly warm (like Fable's live strip) without tinting the
   whole page pink. Pink is distinct from the reserved severity red/amber alert rows use. */
body[data-page="ahora"] #main{
  --accent:#d98ab2; --accent-ink:#edb8d4;
  --accent-soft:rgba(217,138,178,.12); --accent-line:rgba(217,138,178,.34);
  /* Soften the reserved severity red on THIS page to ~60% so it stops fighting the
     rosa wash. Danger still reads — the ⚠ icon, the label and the text all remain;
     color was never the only signal. Scoped to #main, so the header 171 stays loud. */
  --stop:color-mix(in srgb, #e5675c 60%, transparent);
  --stop-ink:color-mix(in srgb, #f2b1aa 82%, transparent);
  /* Rosa top-light WASH lives on #main's own background (the bottom layer): a light
     shining FROM THE TOP that fades down over ~one screen. px stops (not %) fix the
     fade distance regardless of page height, and the gradients self-terminate in
     transparent so no mask is needed. Sitting on #main's background (below the z-index:-1
     ring pseudos) frees ::before + ::after to carry the two ring bands. */
  background:
    radial-gradient(150% 540px at 50% -80px, rgba(217,138,178,.075), transparent 72%),
    linear-gradient(180deg, rgba(217,138,178,.028) 0, transparent 560px);
}
/* OUTER ring band — the biggest, farthest arcs. FINER line (.12px) and a touch less
   blur than the inner band, so the stroke visibly narrows as the wave grows: the rings
   don't just fade, they shrink. Same origin + 26px period as the inner band, so a given
   arc is continuous across the handoff; only its weight changes. Masked to a donut that
   starts where the inner band leaves off (~480px) and dissolves by ~1300px. */
body[data-page="ahora"] #main::before{
  background:repeating-radial-gradient(circle at 96% 2%, rgba(217,138,178,.10) 0 .12px, transparent .12px 26px);
  filter:blur(2px);
  -webkit-mask:
    radial-gradient(circle at 96% 2%, transparent 0, transparent 480px, #000 820px, transparent 1300px),
    linear-gradient(180deg, #000 0, #000 60%, transparent 100%);
  mask:
    radial-gradient(circle at 96% 2%, transparent 0, transparent 480px, #000 820px, transparent 1300px),
    linear-gradient(180deg, #000 0, #000 60%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
/* INNER ring band — the near, small arcs. BLURRED (3px) so they read as soft concentric
   glows rather than crisp hairlines; filter:blur() spreads the .25px ink into soft bands,
   so the alpha is nudged up to compensate. Masked to a donut: a hole over the ring origin,
   full weight through the near field, then faded out by ~750px where the finer OUTER band
   (::before) takes over — so the wave loses energy AND the stroke shrinks outward. */
body[data-page="ahora"] #main::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-radial-gradient(circle at 96% 2%, rgba(217,138,178,.10) 0 .25px, transparent .25px 26px);
  filter:blur(3px);
  -webkit-mask:
    radial-gradient(circle at 96% 2%, transparent 0, transparent 160px, #000 340px, transparent 750px),
    linear-gradient(180deg, #000 0, #000 60%, transparent 100%);
  mask:
    radial-gradient(circle at 96% 2%, transparent 0, transparent 160px, #000 340px, transparent 750px),
    linear-gradient(180deg, #000 0, #000 60%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* MOBILE — drop the two ring bands on narrow viewports. A phone samples only the
   far-field, large-radius arcs of the corner-origin pattern, so instead of a fine
   concentric texture they read as big diagonal streaks slicing through the hero.
   Worse, each band is a full-page-height filter:blur() over a sub-pixel repeating
   gradient — cheap on desktop, but on a mobile GPU it repaints in tiles (pops in on
   scroll), rasterizes coarsely (looks pixelated/banded), and re-blurs every frame
   (janky scroll). The rosa WASH stays (it lives on #main's own background — a plain
   gradient, no blur), so the page keeps its warm identity without the noise. */
@media (max-width:720px){
  body[data-page="ahora"] #main::before,
  body[data-page="ahora"] #main::after{ display:none; }
}

/* ---- LIGHT THEME — the per-page skins above default to DARK values (dark page
   background + accent-ink tuned as readable TEXT on dark surfaces). In light mode
   those become a too-dark floor and low-contrast headings/links, so restore the
   light paper floor, drop the dark-only rosa rings, and swap in AAA-dark accent
   inks that keep each page's identity hue. (Verify light AND dark before every
   publish — this class of bug only shows in the theme you're not looking at.) ---- */
:root[data-theme="light"] body[data-page="ahora"],
:root[data-theme="light"] body[data-skin="blueprint"]{ background:var(--paper); }
:root[data-theme="light"] body[data-page="ahora"] #main{ background:none; }
:root[data-theme="light"] body[data-page="ahora"] #main::before,
:root[data-theme="light"] body[data-page="ahora"] #main::after{ display:none; }

:root[data-theme="light"] body[data-page="rescate"] #main{ --accent:#b4651f; --accent-ink:#9a5416; }
:root[data-theme="light"] body[data-page="ahora"]   #main{ --accent:#b23c84; --accent-ink:#a5397a;
  /* no rosa wash to fight in light → restore SOLID severity reds (the dark-theme
     60%-alpha softening would wash danger out to a weak pink on paper). */
  --stop:#b42318; --stop-ink:#8a1a12; }
:root[data-theme="light"] body[data-skin="blueprint"] #main{ --accent:#1f8a5f; --accent-ink:#1c7a54; }
:root[data-theme="light"] body[data-skin="blueprint"][data-accent="survival"] #main{ --accent:#4b52c0; --accent-ink:#3f45a8; }
:root[data-theme="light"] body[data-skin="blueprint"] .eyebrow{ color:#1c7a54; }
:root[data-theme="light"] body[data-skin="blueprint"][data-accent="survival"] .eyebrow{ color:#3f45a8; }

/* ============================================================================
   BLUEPRINT SKIN — opt-in per page via <body data-skin="blueprint"> (comunicación).
   Brings the WiFi post's visual language to the page: schematic grid substrate,
   registration brackets, mono figure-labels, a green connective accent, and the
   NO/SÍ comparison panel. All scoped under body[data-skin="blueprint"] — the
   header/nav/footer stay on the site's neutral palette on purpose, and no other
   page is affected. Reusable: add the attribute to any page to inherit the look.
   ========================================================================== */
body[data-skin="blueprint"]{ background:#14171d; }

/* Substrate — faint schematic grid + soft top glow, masked so it FADES down each
   screenful (depth, not a glary wallpaper — kept low for the light-sensitive read). */
body[data-skin="blueprint"]::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 68% at 50% -8%, rgba(84,185,138,.07), transparent 60%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/66px 66px,
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0/66px 66px;
  -webkit-mask:radial-gradient(155% 90% at 50% 0%, #000 46%, transparent 100%);
          mask:radial-gradient(155% 90% at 50% 0%, #000 46%, transparent 100%);
}

/* Grid-off variant (data-grid="off") — keep the soft top-glow gradient, drop the
   schematic grid lines. A calmer substrate for content-dense health pages
   (supervivencia) where the grid would fight the reading. */
body[data-skin="blueprint"][data-grid="off"]::before{
  background:radial-gradient(120% 68% at 50% -8%, rgba(84,185,138,.07), transparent 60%);
}

/* Survival accent (data-accent="survival") — supervivencia opts the blueprint skin into a calm
   blue/periwinkle key (blue = resilience, relaxing) instead of comunicación's green connective
   accent. Recolors the accent vars + the few green literals that surface on this page. The
   semantic mint stays only where it MEANS "normal/safe" (the fever "Normal" zone, num--safe). */
body[data-skin="blueprint"][data-accent="survival"] #main{
  --accent:#6f82d4; --accent-ink:#a9bef5;
  --accent-soft:rgba(111,130,212,.14); --accent-line:rgba(111,130,212,.34);
}
body[data-skin="blueprint"][data-accent="survival"][data-grid="off"]::before{
  background:radial-gradient(120% 68% at 50% -8%, rgba(111,130,212,.09), transparent 60%);
}
body[data-skin="blueprint"][data-accent="survival"] .hero::before,
body[data-skin="blueprint"][data-accent="survival"] .hero::after{ border-color:rgba(169,190,245,.5); }
body[data-skin="blueprint"][data-accent="survival"] .eyebrow{ color:#a9bef5; }
body[data-skin="blueprint"][data-accent="survival"] .callout.calm{
  background:linear-gradient(180deg, rgba(111,130,212,.13), transparent 88%), var(--surface);
}

/* Connective accent → green, scoped to the content column (header stays neutral). */
body[data-skin="blueprint"] #main{
  --accent:#54b98a; --accent-ink:#7fd3ab;
  --accent-soft:rgba(84,185,138,.11); --accent-line:rgba(84,185,138,.32);
}

/* Hero — registration brackets + blueprint kicker. */
body[data-skin="blueprint"] .hero{ position:relative; padding:34px 0 14px; }
body[data-skin="blueprint"] .hero::before,
body[data-skin="blueprint"] .hero::after{
  content:""; position:absolute; width:24px; height:24px;
  border:0 solid rgba(127,211,171,.5); pointer-events:none;
}
body[data-skin="blueprint"] .hero::before{ top:8px; left:0; border-top-width:2px; border-left-width:2px; }
body[data-skin="blueprint"] .hero::after{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }
body[data-skin="blueprint"] .eyebrow{ display:inline-flex; align-items:center; gap:9px; color:#7fd3ab; }
body[data-skin="blueprint"] .eyebrow::before{
  content:""; width:8px; height:8px; border:1.5px solid currentColor; border-radius:2px; flex:none;
}
/* Hero meta row — AHORA (time context) and the section label share one line;
   on mobile the label pins to the right edge, balancing AHORA (like the card's
   top-right stamp). Desktop keeps them side by side at the left. */
body[data-skin="blueprint"] .hero-meta{ margin:0 0 12px; }
body[data-skin="blueprint"] .hero-meta .horizon,
body[data-skin="blueprint"] .hero-meta .eyebrow{ margin-bottom:0; }
@media(max-width:720px){
  body[data-skin="blueprint"] .hero-meta{ display:flex; align-items:center; gap:10px; }
  body[data-skin="blueprint"] .hero-meta .eyebrow{ margin-left:auto; }
}

/* Section markers → crisp green mono figure-chips. Scoped to plain .num (comunicación);
   pages whose .num carries a severity modifier (supervivencia's num--danger/caution/…)
   keep their per-topic color-coding instead of being flattened to green. */
body[data-skin="blueprint"] .num:not([class*="num--"]){
  display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
  padding:5px 11px 5px 9px; border:1px solid var(--accent-line); border-radius:7px;
  background:var(--accent-soft); color:var(--accent-ink);
  font-size:11.5px; letter-spacing:.11em;
}

/* Panels that used a translucent accent fill get a solid backing so the grid
   never bleeds through their text. */
body[data-skin="blueprint"] .firstaid{
  background:linear-gradient(180deg, rgba(84,185,138,.11), transparent 82%), var(--surface);
}
body[data-skin="blueprint"] .callout.calm{
  background:linear-gradient(180deg, rgba(84,185,138,.10), transparent 88%), var(--surface);
}

/* Section 01 — three blueprint step-panels (replaces the flat bullet list). */
body[data-skin="blueprint"] .bp-steps{ display:flex; flex-direction:column; gap:12px; margin:.5em 0 1.1em; }
body[data-skin="blueprint"] .bp-step{
  display:flex; gap:15px; padding:15px 17px;
  border:1px solid var(--line-strong); border-left:3px solid var(--accent-line);
  border-radius:12px; background:var(--surface); box-shadow:var(--shadow-card);
}
body[data-skin="blueprint"] .bp-step-n{
  flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  color:var(--accent-ink);
  border:1px solid var(--accent-line); border-radius:9px; background:var(--accent-soft);
}
body[data-skin="blueprint"] .bp-step-n svg{ width:20px; height:20px; }
body[data-skin="blueprint"] .bp-step-b b{
  display:block; font-family:var(--serif); font-size:1.26rem; line-height:1.2;
  margin-bottom:.28em; color:var(--ink); letter-spacing:-.006em;
}
body[data-skin="blueprint"] .bp-step-b p{ margin:0; color:var(--muted); font-size:.95rem; line-height:1.5; }

/* Signature — the NO/SÍ comparison panel, lifted straight from the WiFi post. */
body[data-skin="blueprint"] .bp-compare{ margin:16px 0 2px; }
body[data-skin="blueprint"] .bp-compare-lead{
  display:flex; gap:10px; align-items:flex-start; margin:0 0 13px;
  font-family:var(--mono); font-size:.95rem; line-height:1.55; color:var(--ink);
}
body[data-skin="blueprint"] .bp-compare-lead svg{ width:18px; height:18px; flex:none; margin-top:2px; color:var(--accent-ink); }
body[data-skin="blueprint"] .bp-compare-lead strong{ color:#7fd3ab; font-weight:600; }
body[data-skin="blueprint"] .bp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
body[data-skin="blueprint"] .bp-col{ border:1px solid; border-radius:13px; padding:15px 16px 16px; }
body[data-skin="blueprint"] .bp-col--no{
  border-color:var(--stop-line);
  background:linear-gradient(180deg, rgba(229,103,92,.09), transparent 68%), var(--surface);
}
body[data-skin="blueprint"] .bp-col--si{
  border-color:var(--accent-line);
  background:linear-gradient(180deg, rgba(84,185,138,.10), transparent 68%), var(--surface);
}
body[data-skin="blueprint"] .bp-col-h{
  font-family:var(--mono); font-weight:700; letter-spacing:.16em; font-size:13px; margin:0 0 11px;
}
body[data-skin="blueprint"] .bp-col--no .bp-col-h{ color:var(--stop-ink); }
body[data-skin="blueprint"] .bp-col--si .bp-col-h{ color:#7fd3ab; }
body[data-skin="blueprint"] .bp-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
body[data-skin="blueprint"] .bp-col li{ position:relative; padding-left:25px; font-size:.98rem; line-height:1.35; color:var(--ink); }
body[data-skin="blueprint"] .bp-col li::before{ position:absolute; left:2px; top:0; font-weight:700; font-size:.95rem; }
body[data-skin="blueprint"] .bp-col--no li::before{ content:"\2715"; color:var(--stop); }
body[data-skin="blueprint"] .bp-col--si li::before{ content:"\2713"; color:#7fd3ab; }
@media(max-width:560px){ body[data-skin="blueprint"] .bp-grid{ grid-template-columns:1fr; } }

/* "Prepara ahora" strip — the read-BEFORE layer (amber = do-this-ahead), kept
   distinct from the green do-now layer and the red don't layer. Soft, glare-safe. */
body[data-skin="blueprint"] .bp-prep{
  margin:18px 0 4px; padding:15px 18px 16px;
  border:1px solid var(--warn-line); border-radius:14px;
  background:linear-gradient(180deg, rgba(224,151,92,.09), transparent 76%), var(--surface);
}
body[data-skin="blueprint"] .bp-prep-lbl{
  display:flex; gap:8px; align-items:center; margin:0 0 11px;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--warn-ink);
}
body[data-skin="blueprint"] .bp-prep-lbl svg{ width:16px; height:16px; flex:none; }
body[data-skin="blueprint"] .bp-prep-row{ display:flex; flex-direction:column; gap:10px; }
body[data-skin="blueprint"] .bp-prep-item{
  display:flex; gap:11px; align-items:flex-start; color:var(--ink); font-size:1.02rem; line-height:1.4;
}
body[data-skin="blueprint"] .bp-prep-item svg{ width:20px; height:20px; flex:none; margin-top:1px; color:var(--warn-ink); }
body[data-skin="blueprint"] .bp-prep-item b{ font-weight:600; }
body[data-skin="blueprint"] .bp-prep-note{ margin:12px 0 0; font-size:.9rem; color:var(--muted); }

/* Perishable-claim stamp — marks a dated, expiring status vs permanent advice. */
body[data-skin="blueprint"] .bp-stamp{
  display:inline-flex; align-items:center; gap:5px; vertical-align:middle; margin-left:2px;
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--warn-ink); background:var(--warn-soft); border:1px solid var(--warn-line);
  border-radius:5px; padding:2px 7px;
}
body[data-skin="blueprint"] .bp-stamp svg{ width:11px; height:11px; }

/* Copy button on the template. */
body[data-skin="blueprint"] .bp-copy{
  display:inline-flex; align-items:center; gap:7px; margin-left:auto;
  font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.04em;
  color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent-line);
  border-radius:7px; padding:6px 12px; cursor:pointer;
}
body[data-skin="blueprint"] .bp-copy:hover{ border-color:var(--accent); }
body[data-skin="blueprint"] .bp-copy svg{ width:14px; height:14px; }
body[data-skin="blueprint"] .tmpl-lbl{ align-items:center; }

/* ============================================================================
   FEVER SECTION (supervivencia #fiebre) — the story-link target for the
   fiebre-zonas post. Three pieces mirror the post so the funnel feels
   continuous: a zone scale (Normal/Fiebre/Alta), age brackets, and the
   antipyretic dose cards the card deliberately leaves off. Semantic colors only
   (mint/amber/coral) — the reserved alarm-red is never used here.
   ========================================================================== */
.fever-scale{margin:18px 0 8px}
.fscale{display:flex;gap:7px}
.fseg{flex:1;display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;
  padding:12px 8px;border:1px solid var(--sev-line);border-radius:12px;background:var(--sev-soft)}
.fseg b{font-family:var(--serif);font-size:1.05rem;line-height:1.1;color:var(--sev-ink)}
.fseg-n{font-family:var(--mono);font-size:.82rem;color:var(--muted);white-space:nowrap}
.fseg-ok{--sev-soft:color-mix(in srgb,var(--h-mint) 14%,var(--surface));--sev-line:color-mix(in srgb,var(--h-mint) 32%,var(--line-strong));--sev-ink:var(--h-mint)}
.fseg-warn{--sev-soft:var(--warn-soft);--sev-line:var(--warn-line);--sev-ink:var(--warn-ink)}
.fseg-stop{--sev-soft:var(--stop-soft);--sev-line:var(--stop-line);--sev-ink:var(--stop-ink)}
.fscale-cap{display:flex;gap:8px;align-items:flex-start;margin:10px 2px 0;font-size:.86rem;color:var(--muted);line-height:1.45}
.fscale-cap svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--warn-ink)}
.fscale-cap strong{color:var(--ink);font-weight:600}

/* Age brackets — amber "the younger the baby, the sooner to act" panel. */
.fever-ages{margin:16px 0 2px;padding:14px 16px 15px;border:1px solid var(--warn-line);border-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--warn-soft) 60%,transparent),transparent 78%),var(--surface)}
.fever-ages-h{margin:0 0 11px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warn-ink)}
.fage{display:flex;gap:11px;align-items:flex-start;margin:0;font-size:1rem;line-height:1.4;color:var(--ink)}
.fage + .fage{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.fage-tag{flex:none;min-width:88px;font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--warn-ink);background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:6px;
  padding:3px 8px;text-align:center;white-space:nowrap}
.fage strong{font-weight:600}

/* Antipyretic dose cards — the funnel payload (dosing the triage card omits). */
.fever-sub{margin:22px 0 8px;font-family:var(--serif);font-size:1.28rem;font-weight:600;letter-spacing:-.008em;color:var(--ink)}
.dosetable{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:6px 0 2px}
.dose-card{border:1px solid var(--line-strong);border-radius:13px;padding:14px 16px 15px;background:var(--surface);box-shadow:var(--shadow-card)}
.dose-card-h{margin:0 0 8px;font-weight:600;font-size:1rem;color:var(--ink)}
.dose-card-n{margin:0 0 9px;color:var(--muted);font-size:.9rem}
.dose-card-n .dose{font-size:1rem;color:var(--ink)}
.dose-card ul{margin:0;padding-left:1.05em}
.dose-card li{margin:.28em 0;font-size:.93rem;color:var(--muted);line-height:1.45}
.dose-card li strong{color:var(--ink)}
@media(max-width:560px){.dosetable{grid-template-columns:1fr}.fseg b{font-size:.98rem}.fseg-n{font-size:.76rem}}

/* In-page topic index — jump straight to the section you need, GROUPED BY URGENCY so the eye
   lands on the life-threats first. Only the URGENT tier is lifted (coral + icon-led); the rest
   stay one calm neutral — distinguishing all 13 would just add noise (no rainbow). Non-sticky on
   purpose: the site already has a fixed bottom bar, and a pinned 3-row grid eats mobile height. */
.jump{margin:16px 0 2px}
.jump-lbl{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.jump-lbl svg{width:14px;height:14px;flex:none;color:var(--accent-ink)}
.jump-tier{margin-top:12px}
.jump-tier-h{margin:0 0 7px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.jump-tier--urgent .jump-tier-h{color:var(--stop-ink)}
.jump-row{display:flex;flex-wrap:wrap;gap:7px}
.jump-row a{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;line-height:1;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:8px 13px;text-decoration:none;transition:border-color .15s ease,color .15s ease}
.jump-row a:hover{border-color:var(--accent);color:var(--accent-ink)}
.jump-row a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
/* Urgent tier — the only lifted group: coral chips + icons lead the eye to the life-threats. */
.jump-tier--urgent .jump-row a{border-color:var(--stop-line);background:var(--stop-soft);color:var(--stop-ink)}
.jump-tier--urgent .jump-row a svg{width:15px;height:15px;flex:none;color:var(--stop-ink)}
.jump-tier--urgent .jump-row a:hover{border-color:var(--stop);color:var(--stop-ink)}
#calor{scroll-margin-top:104px}

/* ============================================================================
   SAFE-IA UPDATE (2026-07-08) — the homepage decision funnel, the "Estado
   actual" module, the shared "Cómo verificamos" trust block (index · ahora ·
   mapa), and the /mapa decision-map hub cards. All in existing tokens; hue
   follows the site's one-color-one-meaning coding (coral=live · mint=help ·
   peach=maps · blue=data/verify · warm orange=person-in-need) and color is
   never the only signal — every route carries its icon + label.
   ========================================================================== */

/* --- Decision funnel — the homepage's first-screen router. Four routes; the
   two person-routes (need/give) lead, the two info-routes follow. --- */
.funnel{display:grid;gap:10px;margin:18px 0 4px}
.fl{--tone:var(--accent);display:flex;align-items:center;gap:13px;padding:14px 15px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-card);text-decoration:none;color:var(--ink);transition:border-color .15s ease,transform .06s ease}
.fl:hover{border-color:color-mix(in srgb,var(--tone) 55%,var(--line-strong));text-decoration:none}
.fl:active{transform:translateY(1px)}
.fl:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.fl-ic{width:42px;height:42px;flex:none;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--tone) 14%,var(--surface-2));border:1px solid color-mix(in srgb,var(--tone) 34%,var(--line-strong));color:color-mix(in srgb,var(--tone) 56%,var(--ink))}
.fl-ic svg{width:22px;height:22px;display:block}
.fl-tx{min-width:0}
.fl-tx b{display:flex;align-items:center;gap:8px;font-family:var(--serif);font-size:1.08rem;font-weight:600;line-height:1.2;letter-spacing:-.004em}
.fl-tx small{display:block;margin-top:2px;color:var(--muted);font-size:.86rem;line-height:1.3}
.fl-go{margin-left:auto;flex:none;color:color-mix(in srgb,var(--tone) 55%,var(--ink))}
.fl-go svg{width:18px;height:18px;display:block}
.fl--need{--tone:#a8521f}        /* person in need — warm urgent orange (wayfinder's signal tone) */
.fl--give{--tone:var(--h-mint)}  /* help / logistics — green */
.fl--hoy{--tone:var(--stop)}     /* live layer — the site's coral "now" */
.fl--verif{--tone:var(--h-blue)} /* verify / data — sky */
@media (min-width:620px){
  .funnel{grid-template-columns:repeat(2,1fr)}
}

/* --- Estado actual / Qué cambió hoy — an honest window into /ahora: real rows,
   real sources, real check-times, no invented priority (latest-checked order). --- */
.est-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:12px 0 0;color:var(--muted);font-size:.92rem}
.est-stats b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.est-rows{display:grid;gap:9px;margin-top:12px}
.est-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card-bg,var(--surface));box-shadow:var(--shadow-card);text-decoration:none;color:var(--ink);transition:border-color .15s ease}
.est-row:hover{border-color:var(--faint);text-decoration:none}
.est-row:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}
.est-main{min-width:0;flex:1}
.est-main b{display:block;font-size:1rem;font-weight:600;line-height:1.3}
.est-main small{display:block;margin-top:2px;color:var(--muted);font-size:.85rem;line-height:1.35}
.est-side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.est-chip{font-size:.74rem;font-weight:600;line-height:1;padding:4px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap}
.est-chip--team{border-color:color-mix(in srgb,var(--h-mint) 42%,var(--line-strong))}
.est-ago{font-size:.8rem;color:var(--muted);white-space:nowrap}
.est-fallback{margin:12px 0 0;color:var(--muted);font-size:.95rem}

/* --- "Cómo verificamos / Lo que no publicamos" — the shared trust block. --- */
.verif{display:grid;gap:14px 22px;margin:18px 0 2px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:color-mix(in srgb,var(--surface) 55%,transparent)}
.verif-h{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.verif-h svg{width:14px;height:14px;flex:none;color:var(--accent-ink)}
.verif p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
.verif p + p{margin-top:6px}
@media (min-width:620px){.verif{grid-template-columns:1fr 1fr}}

/* --- /mapa — decision-map hub cards. One card = one question; each states its
   status, source, what it shows / does NOT show, and the next action. --- */
.mcards{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.mcard{--tone:var(--h-blue);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:18px 18px 16px;box-shadow:var(--shadow-card)}
.mc-q{margin:0 0 4px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--tone) 60%,var(--ink))}
.mc-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:0 0 2px}
.mc-head h2{margin:0;font-size:1.32rem}
.mc-status{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:600;line-height:1;padding:5px 11px;border-radius:999px;border:1px solid;white-space:nowrap}
.mc-status .dot{width:7px;height:7px;border-radius:999px;background:currentColor;flex:none}
.mcs-ref{color:var(--h-blue-ink);background:color-mix(in srgb,var(--h-blue) 13%,var(--surface));border-color:color-mix(in srgb,var(--h-blue) 38%,transparent)}
.mcs-cur{color:var(--h-mint);background:color-mix(in srgb,var(--h-mint) 14%,var(--surface));border-color:color-mix(in srgb,var(--h-mint) 40%,transparent)}
.mcs-prep{color:var(--warn-ink);background:var(--warn-soft);border-color:var(--warn-line)}
.mc-shell{margin:14px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.mc-shell svg{display:block;width:100%;max-width:460px;height:auto;margin:0 auto}
.mc-shell figcaption{margin:10px 0 0;color:var(--muted);font-size:.85rem;line-height:1.5}
.mc-shell figcaption b{color:var(--ink);font-weight:600}
.mc-facts{display:grid;gap:8px;margin:14px 0 0}
.mc-fact{display:flex;gap:9px;align-items:flex-start;font-size:.92rem;line-height:1.45;color:var(--muted)}
.mc-fact b{color:var(--ink);font-weight:600}
.mc-fact svg{width:15px;height:15px;flex:none;margin-top:3px}
.mc-fact--si svg{color:var(--h-mint)}
.mc-fact--no svg{color:var(--stop-ink)}
.mc-src{margin:12px 0 0;color:var(--muted);font-size:.82rem}
.mc-recheck{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;color:var(--warn-ink);font-size:.85rem;line-height:1.45}
.mc-recheck svg{width:14px;height:14px;flex:none;margin-top:3px}
.mcard--acopio{--tone:var(--h-mint)}
.mcard--riesgos{--tone:var(--warn)}

/* ===========================================================================
   AV2 — HOME visual-grammar production port  (SITE-VISUAL-GRAMMAR-PRODUCTION-PORT-1
   · Phase 2A, 2026-07-15).  NAMESPACED `.av2-*` so it never collides with the
   production `.t-*` / `.prow` / `.route` / `.router` selectors used by /ahora and
   other pages. Implements: Atmospheric Chapters (dark only) · VM-C band rhythm ·
   CARD-FINAL card language (routes = well + straight inset marker; records = well
   only) · centered letterbox frame · narrow-header + ≥44px emergency target.
   Works in BOTH themes: dark = atmospheric wash; light = flat, strong boundaries.
   =========================================================================== */

/* category tone → --av2-cat (used only by the icon well + the route marker; text
   always carries the meaning, color is never the only signal). --stop/--warn are
   theme-aware (darker on light); the --h-* hues are shared. */
.av2-t-stop  {--av2-cat:var(--stop)}
.av2-t-warn  {--av2-cat:var(--warn)}
.av2-t-mint  {--av2-cat:var(--h-mint)}
.av2-t-blue  {--av2-cat:var(--h-blue)}
.av2-t-indigo{--av2-cat:var(--h-indigo)}
.av2-t-orchid{--av2-cat:var(--h-orchid)}
.av2-t-peach {--av2-cat:var(--h-peach)}

/* ---- centered, capped content frame + letterbox margins (no editorial rail) ---- */
.av2-home{width:100%}
/* Match the site prose column (--maxw 820px, used by .container on every other page)
   so HOME reads at the same scale as ahora/rescate/supervivencia/… instead of a
   shrunken 720px strip. Bands add the 15px side gutters; net text column ≈ the 780px
   the reading pages use. */
.av2-flow{max-width:var(--maxw);margin:0 auto}
@media (min-width:768px){ .av2-home{padding:0 24px} }

/* ---- ATMOSPHERIC CHAPTERS — DARK ONLY (light theme stays flat, high-boundary).
   One continuous wash on the content column: cyan hero → neutral router → warm
   Prioridades → cool green Guides → neutral. Cards keep their solid --surface, so
   the wash only shows in the gutters. No section boxes, no gradients inside cards. */
html:not([data-theme="light"]) .av2-flow{
  background:linear-gradient(180deg,
    rgba(90,178,198,.090) 0%,
    rgba(90,178,198,.045) 9%,
    rgba(90,178,198,0)    22%,
    rgba(90,178,198,0)    34%,
    rgba(216,150,96,.050) 50%,
    rgba(216,150,96,.024) 60%,
    rgba(216,150,96,0)    69%,
    rgba(96,186,158,.038) 80%,
    rgba(96,186,158,0)    93%,
    rgba(96,186,158,0)    100%);
}
html:not([data-theme="light"]) .av2-hero{position:relative;isolation:isolate}
html:not([data-theme="light"]) .av2-hero::before{
  content:"";position:absolute;inset:-10px 0 auto 0;height:150%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 82% at 0% 0%,   rgba(90,178,198,.050), transparent 64%),
    radial-gradient(58% 82% at 100% 0%, rgba(90,178,198,.050), transparent 64%);
}

/* ---- band rhythm (VM-C: spacing + one hairline, no panels) ---- */
.av2-band{padding:26px 15px}
.av2-band + .av2-band{border-top:1px solid var(--line)}
/* Phase 2A.2: tighten the loose hero→router gap (~-24px) while keeping the tonal/
   weight shift as the separator — no divider added. Hero pb 14→6, router pt 20→4. */
.av2-router-band{padding-top:4px}
.av2-sec-head{margin:0 0 13px}
.av2-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 5px}
.av2-h2{font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.5rem);margin:0;letter-spacing:-.01em;line-height:1.2}
.av2-linkall{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--accent-ink);text-decoration:none;margin-top:12px}
.av2-linkall:hover{text-decoration:underline}
.av2-linkall svg{width:13px;height:13px;flex:none}
/* Phase 2A.2: the snapshot band is card-less, so its "see all" link is the band's
   primary action — nudge prominence with subtle type only (larger + heavier + a touch
   more contrast). Stays a text link; must not read as a button or rival the six routes. */
.av2-prio-band .av2-linkall{font-size:13.5px;font-weight:800;color:var(--accent-ink);filter:brightness(1.08)}
.av2-prio-band .av2-linkall svg{width:14px;height:14px}

/* ---- hero ---- */
.av2-hero{padding:24px 15px 6px}
.av2-hero .av2-eyebrow{margin-bottom:7px}
.av2-hero h1{font-family:var(--serif);font-size:clamp(1.85rem,4.2vw,2.5rem);margin:0 0 10px;letter-spacing:-.016em;line-height:1.12}
.av2-lede{font-size:16.5px;color:var(--muted);margin:0 0 16px;max-width:50ch;line-height:1.5}
/* ---- EMERGENCY CALLOUT — designed action card, not a styled info box ----
   Eyebrow (PELIGRO INMEDIATO + alert well) → dominant solid tel:171 action →
   subordinate limitation → disclosure of backup numbers. Calm scoped reds (local
   --emg-* tokens, NOT the global --stop/--danger, so nothing else on the site shifts):
   a muted warm panel + framing left rule, one muted-brick call button as the sole
   dominant red — it leads by size and weight, not saturation. Flat surfaces, no glow.
   Desktop wraps to a compact two-area row (action | disclosure); mobile stacks
   action-first. Color is never the only signal (alert icon + label + phone). */
.av2-emg-clar{--emg-panel:#261c1a;--emg-line:#3a2823;--emg-edge:#b0554a;--emg-ink:#e3a69d;--emg-call:#bf4034;--emg-call-hover:#a83729;--emg-quiet:var(--muted);background:var(--emg-panel);border:1px solid var(--emg-line);border-left:4px solid var(--emg-edge);border-radius:var(--radius-sm);padding:13px 14px}
.av2-emg-eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 11px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--emg-ink)}
.av2-emg-well{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:none;border-radius:7px;background:color-mix(in srgb,var(--emg-edge) 15%,transparent);border:1px solid var(--emg-line);color:var(--emg-ink)}
.av2-emg-well svg{width:15px;height:15px}
.av2-emg-body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:11px 18px}
.av2-emg-act{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:8px}
.av2-emg-call{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:11px 20px;border-radius:10px;background:var(--emg-call);color:#fff;text-decoration:none;font-size:19px;font-weight:700;letter-spacing:.005em;border:1px solid transparent;transition:background .15s ease,transform .12s ease}
.av2-emg-call svg{width:20px;height:20px;flex:none}
.av2-emg-call:hover{background:var(--emg-call-hover);text-decoration:none}
.av2-emg-call:active{transform:translateY(1px)}
.av2-emg-call:focus-visible{outline:3px solid var(--emg-ink);outline-offset:3px}
.av2-emg-limit{margin:0;font-size:12.5px;color:var(--ink);line-height:1.4}
.av2-emg-more{flex:1 1 190px}
.av2-emg-more summary{font-size:11.5px;font-weight:700;color:var(--emg-quiet);cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;min-height:44px}
.av2-emg-more summary::-webkit-details-marker{display:none}
.av2-emg-more summary::before{content:"+";font-weight:800;font-size:13px;line-height:1}
.av2-emg-more[open] summary::before{content:"–"}
.av2-emg-more summary:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px;border-radius:6px}
.av2-emg-more .links{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.av2-emg-note{margin:8px 0 0;font-size:11.5px;color:var(--muted)}
/* ≥44×44 tap targets: emergency disclosure toggle + secondary-number links */
.av2-emg-more .links .linkbtn{min-height:44px;min-width:44px;justify-content:center}
/* closed disclosure must not contribute intrinsic layout width (Chromium 131+ keeps
   closed <details> content at content-visibility:hidden, which can leak into overflow
   math at extreme zoom); force it fully out of layout until opened. */
.av2-emg-more:not([open]) .links,
.av2-emg-more:not([open]) .av2-emg-note{display:none}
/* Light theme: restrained pale warm surface (not a maroon slab, not bright pink),
   deep-brick call button keeps readable white text; --emg-quiet inherits --muted. */
:root[data-theme="light"] .av2-emg-clar{--emg-panel:#f7ece6;--emg-line:#e6cdc4;--emg-edge:#c05948;--emg-ink:#9a3428;--emg-call:#b23a2e;--emg-call-hover:#9d3227}

/* ---- NEEDS ROUTER — CARD-FINAL selectable routes ----
   neutral perimeter + category icon well + straight inset marker + neutral chevron.
   Independently tappable rows; the marker means "selectable route". */
/* HOME — DARK ROWS (design-lock "HOME — DARK ROWS"): hairline directory rows, NO
   per-row box and NO inset marker, so HOME reads lighter than /ahora's FIELD CARDS
   (SHARED PRODUCT RELATIONSHIP — one system, different density). Category color
   survives on the icon well only; the whole row is one target (right chevron). */
.av2-router{display:grid;gap:0;border-top:1px solid var(--line)}
.av2-route{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;
  text-decoration:none;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);border-radius:0;padding:15px 6px;min-height:60px}
.av2-route:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.av2-route:focus-visible{outline:3px solid var(--accent-ink);outline-offset:-3px;border-radius:6px}
.av2-r-tx b{display:block;font-size:14.5px;font-weight:700;line-height:1.2}
.av2-r-tx small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.av2-r-go{color:var(--faint)}
.av2-r-go svg{width:17px;height:17px;display:block}

/* ---- category icon well (shared by routes + priority records) ----
   color LOCATES the category; the glyph carries the meaning. Distinct from any
   status by position (leading) + shape (rounded square). */
.av2-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--av2-cat) 16%,var(--surface));
  color:color-mix(in srgb,var(--av2-cat) 60%,var(--ink));
  border:1px solid color-mix(in srgb,var(--av2-cat) 30%,var(--line-strong))}
.av2-ic svg{width:18px;height:18px;display:block}

/* ---- LO MÁS IMPORTANTE AHORA — CARD-FINAL records (well only, NO marker) ---- */
.av2-trust{font-size:11.5px;color:var(--muted);margin:0 0 12px;line-height:1.5}
.av2-trust a{color:var(--accent-ink);font-weight:700;text-decoration:none}
.av2-trust a:hover{text-decoration:underline}
.av2-prio{display:grid;gap:8px}
.av2-prow{display:grid;grid-template-columns:auto 1fr;gap:11px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:11px 12px}
.av2-prow .av2-ic{width:34px;height:34px}
.av2-p-body{min-width:0}
.av2-p-cat{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0}
.av2-prow h3{font-size:13.5px;margin:2px 0 0;line-height:1.22;font-family:var(--sans)}
.av2-prow h3 a{color:var(--ink);text-decoration:none}
.av2-prow h3 a:hover{text-decoration:underline}
.av2-p-place{font-size:11.5px;color:var(--faint);margin:3px 0 0}
.av2-p-lead{font-size:12px;color:var(--muted);margin:5px 0 0;line-height:1.42}
.av2-p-foot{margin:8px 0 0}
.av2-p-rev{font-size:10.5px;color:var(--faint)}
.av2-prow.lead{padding:13px 13px}
html:not([data-theme="light"]) .av2-prow.lead{background:var(--surface-2)}
.av2-prow.lead .av2-ic{width:38px;height:38px}
.av2-prow.lead .av2-ic svg{width:20px;height:20px}
.av2-prow.lead h3{font-size:15.5px}

/* ---- ESSENTIAL GUIDES — lightweight, lower-chrome, NO category treatment ---- */
.av2-guides{display:flex;flex-direction:column}
.av2-guide{display:flex;align-items:center;gap:11px;padding:11px 2px;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--line);min-height:54px}
.av2-guide:last-child{border-bottom:0}
.av2-guide:hover .av2-g-tx b{text-decoration:underline}
.av2-guide:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px;border-radius:8px}
.av2-g-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.av2-g-ic svg{width:16px;height:16px;display:block}
.av2-g-tx b{display:block;font-size:13.5px;line-height:1.25}
.av2-g-tx small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.35}

/* ---- install prompt band (moved out of the routing path) ---- */
.av2-install-band .install{margin:0}
/* collapse the band entirely when no install card is visible, so it never leaves an
   empty bordered strip between Guides and the footer. */
.av2-install-band:not(:has(.install:not([hidden]))){display:none;padding:0;border-top:0}

/* ---- HOME mobile navigation in NORMAL DOCUMENT FLOW (not a viewport overlay) ----
   Production ships the shared .sitebar as a FIXED bottom tab bar ≤720px, which always
   occludes the bottom ~56px of the viewport — so route rows scroll under it and the
   six-route router reads as split. Body padding only prevents unreachability, not
   occlusion. For HOME only (.sitebar--home) the nav becomes static/in-flow: it reserves
   its own space directly under the header and never covers any content at any scroll
   position. Other pages keep the fixed bottom bar (unchanged). Desktop is untouched
   (>720 falls back to the global sticky top bar). */
@media (max-width:720px){
  .sitebar--home{position:static;inset:auto;z-index:auto;border-top:0;border-bottom:1px solid var(--line);background:var(--surface)}
  body:has(.sitebar--home){padding-bottom:0}
}

/* ===========================================================================
   SHARED HEADER — narrow-brand + emergency touch target
   (applies to the .top header on every page; pure enhancement, no regression)
   =========================================================================== */
/* ≥44px interactive hit area on the emergency control WITHOUT changing the visible
   pill. The transparent extension spans the pill's own box only (left:0;right:0),
   so it never captures brand/wordmark taps to its left. */
.btn-call{position:relative}
.btn-call::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
/* keep "Abrigo Venezuela" on one line at 320px: trim the wordmark + mark a touch.
   Emergencia/171 prominence, "Venezuela", and tap targets are unchanged. */
@media (max-width:360px){
  .top-row{gap:7px}
  .brand{font-size:13.5px;gap:6px;letter-spacing:-.015em}
  .brand img{width:27px;height:27px}
}

/* ===========================================================================
   AV2 accessibility guards
   =========================================================================== */
/* reduced transparency / higher contrast → drop the atmospheric wash so nothing
   competes with text; the page falls back to the flat, fully-usable dark base. */
@media (prefers-reduced-transparency:reduce){
  html:not([data-theme="light"]) .av2-flow{background:none}
  html:not([data-theme="light"]) .av2-hero::before{display:none}
}