/* Abrigo Venezuela — shared styles Calm public-safety instrument. System fonts, monospace instrument labels, one teal accent for action, amber for caution, red for hard stops. */ :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:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif; --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} /* ── "En vivo" — the live layer's mark ────────────────────────────────────── One slow coral ping = "this is live and changing," honest because /ahora's data genuinely decays by the hour. The pill stays in the neutral header- control family (langtog/themetog) so it adds no noise; the dot alone carries the signal, kept soft and slow for low-glare comfort. The same .live-dot reappears on the homepage entry, tying header → homepage → the /ahora label. */ .live-pill{display:inline-flex;align-items:center;gap:7px;flex:none;border:1px solid var(--stop-line);border-radius:999px;padding:5px 11px 5px 9px;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--stop-ink);text-decoration:none;white-space:nowrap} .live-pill:hover{color:var(--stop-ink);border-color:var(--stop);background:var(--stop-soft)} .live-pill:focus-visible{outline:2px solid var(--stop-ink);outline-offset:2px} .live-pill[aria-current="page"]{color:var(--stop-ink);background:var(--stop-soft);border-color:var(--stop-line)} .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)} .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)} 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
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 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 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

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
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 . 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 — Rosa (warm pink) wash + faint Sonar rings sweeping up from the corner. Pink is distinct from the reserved severity red/amber the 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,.12), transparent 72%), linear-gradient(180deg, rgba(217,138,178,.055) 0, transparent 620px); } /* 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,.16) 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,.16) 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; } /* ============================================================================ BLUEPRINT SKIN — opt-in per page via (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%} .av2-flow{max-width:720px;margin:0 auto} @media (min-width:768px){ .av2-home{padding:0 24px} .av2-flow{max-width:760px} } /* ---- 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:20px 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:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin:0 0 4px} .av2-h2{font-family:var(--serif);font-size:18.5px;margin:0;letter-spacing:-.012em;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:18px 15px 6px} .av2-hero .av2-eyebrow{margin-bottom:6px} .av2-hero h1{font-family:var(--serif);font-size:24px;margin:0 0 8px;letter-spacing:-.018em;line-height:1.15} .av2-lede{font-size:14px;color:var(--muted);margin:0 0 13px;max-width:42ch;line-height:1.45} /* ---- 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
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". */ .av2-router{display:grid;gap:8px} .av2-route{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px; text-decoration:none;color:var(--ink);background:var(--surface); border:1px solid var(--line-strong);border-radius:var(--radius);padding:11px 13px;min-height:58px} .av2-route:hover{border-color:var(--faint)} .av2-route:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px} .av2-route::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:0; background:var(--av2-cat,var(--faint));pointer-events:none} .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} }