/* Always Worth Living · style.css
   Deep black, ribbon yellow (#FCEE0A) primary, cyan (#00F0FF) as a thin accent.
   HUD corner cuts via clip-path, scanlines + grain overlay, glitch only on the H1 at load.
   Mobile-first (400px), AA contrast, visible focus, honors prefers-reduced-motion. */

:root {
  --bg: #050506;
  --panel: #0e0e12;
  --panel-2: #131318;
  --yellow: #FCEE0A;
  --yellow-line: rgba(252, 238, 10, .32);
  --yellow-soft: rgba(252, 238, 10, .12);
  --cyan: #00F0FF;
  --cyan-soft: rgba(0, 240, 255, .06);
  --text: #F2F2F2;
  --dim: #9AA0A6;
  --faint: #6b7076;
  --danger: #ff7676;
  --head: 'Chakra Petch', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cut: 14px;
  --cut-s: 8px;
  --maxw: 1100px;
  --gutter: 20px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(1100px 560px at 75% -8%, rgba(252, 238, 10, .075), transparent 60%),
    radial-gradient(760px 480px at -8% 32%, rgba(0, 240, 255, .05), transparent 60%);
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  min-height: 100vh;
  overflow-x: hidden;
}
::selection { background: var(--yellow); color: #000; }
a { color: var(--yellow); text-underline-offset: 3px; }
a:hover { color: #fff; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; line-height: 1.08; font-weight: 700; }
p { margin: 0 0 1em; }
.mono { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
/* la barra superior es fija: sin esto, saltar a #crisis deja el encabezado debajo de ella */
[id] { scroll-margin-top: 84px; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -80px; z-index: 100; background: var(--yellow); color: #000; padding: 10px 14px; font-family: var(--mono); text-decoration: none; }
.skip:focus { top: 8px; }

/* ---- overlays: scanlines, grain, vignette ---- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.fx::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.fx::after {
  content: ""; position: absolute; inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 49; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .5) 100%); }

/* ---- HUD panels with corner cuts ---- */
.hud {
  position: relative; isolation: isolate; padding: 1px;
  background: linear-gradient(135deg, rgba(252, 238, 10, .6), rgba(252, 238, 10, .16) 40%, rgba(255, 255, 255, .10) 62%, rgba(0, 240, 255, .28));
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.hud::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--panel);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.hud-in { padding: clamp(18px, 3vw, 32px); }

/* ---- buttons ---- */
.btn {
  --c: var(--cut-s);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 15px/1 var(--head); text-transform: uppercase; letter-spacing: .1em;
  background: var(--yellow); color: #000;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.07); color: #000; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-ghost { position: relative; isolation: isolate; background: var(--yellow-line); color: var(--yellow); }
.btn-ghost::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--bg); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.btn-ghost:hover { background: var(--yellow); color: var(--yellow); }
.btn-xl { padding: 18px 26px; font-size: clamp(17px, 2.3vw, 22px); width: 100%; text-align: center; }
.btn-small { padding: 12px 16px; font-size: 12px; min-height: 44px; }   /* mínimo táctil: 44 px */

/* ---- top bar ---- */
.topbar { position: sticky; top: 0; z-index: 60; background: rgba(5, 5, 6, .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(252, 238, 10, .14); }
.topbar-in { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.mark { font-family: var(--mono); letter-spacing: .18em; color: var(--yellow); text-decoration: none; font-size: 13px; white-space: nowrap; }
.mark::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--yellow); margin-right: 10px; transform: rotate(45deg); vertical-align: 1px; }
.topnav { display: flex; gap: 18px; margin-left: auto; align-items: center; }
.topnav a:not(.btn) { color: var(--dim); text-decoration: none; font: 500 14px var(--body); }
.topnav a:not(.btn):hover { color: var(--text); }
.lang { display: flex; gap: 3px; padding: 3px; border: 1px solid rgba(255, 255, 255, .14); }
.lang button { background: transparent; border: 0; padding: 0 14px; min-height: 44px; min-width: 46px; font: 500 15px var(--mono); letter-spacing: .1em; color: var(--dim); cursor: pointer; white-space: nowrap; }
.lang button:hover { color: var(--text); }
.lang button.active { background: var(--yellow); color: #000; }
@media (max-width: 720px) {
  .topnav a:not(.btn) { display: none; }
  .mark { font-size: 11px; letter-spacing: .12em; }
  /* el boton de ayuda de la barra partia en dos renglones; con la marca acortada cabe entero */
  .topnav .btn-small { padding: 8px 10px; font-size: 11px; white-space: nowrap; }
  .mark { font-size: 0; letter-spacing: 0; }
  .mark::before { margin-right: 0; }
}

/* ---- hero ---- */
.hero { padding: clamp(28px, 4.4vw, 60px) 0 clamp(18px, 2.4vw, 26px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 48px; } }
/* En telefono el liston se queda en 180 px: con 230 el boton de llamar caia a y=808 y no
   entraba en la primera pantalla, que es lo unico que esta pagina no puede permitirse. */
.ribbon-box { position: relative; width: min(42vw, 180px); aspect-ratio: 200 / 260; margin: 0 auto; }
/* el listón se ajusta también al ALTO: en una laptop de 760 px empujaba el número de crisis
   fuera de la pantalla, que es justo lo que esta página no puede permitirse. */
@media (min-width: 860px) { .ribbon-box { width: min(100%, 340px, 30vh); } }
/* Pantalla CORTA (iPhone SE y parecidos): el liston cede lo que haga falta para que el boton
   de llamar entre en el primer pantallazo. La barra fija de abajo lo garantiza igual, pero
   no deberia hacer falta llegar a ella. */
@media (max-width: 859px) and (max-height: 780px) {
  .hero { padding: 12px 0 10px; }
  .hero-grid { gap: 12px; }
  .ribbon-box { width: min(32vw, 134px); }
  .kicker { margin-bottom: 10px; }
  .lead { margin-top: 12px; font-size: 16px; }
  .crisis { margin-top: 12px; }
  .crisis .hud-in { padding: 15px; }
  .crisis-line { margin: 12px 0; }
}
.ribbon-box canvas, .ribbon-box svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ribbon-box svg { overflow: visible; transform-origin: 50% 50%; }
.is-drawn svg { animation: breathe 4.6s ease-in-out infinite; }
.is-drawn #ribbonGlow { animation: glowpulse 4.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes glowpulse { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }
.kicker { color: var(--cyan); font-size: 12px; margin: 0 0 18px; }
.hero h1 { font-size: clamp(34px, 5.2vw, 62px); color: var(--yellow); letter-spacing: .03em; line-height: .98; text-wrap: balance; }
.lead { font-size: clamp(17px, 2.2vw, 21px); color: var(--dim); max-width: 44ch; margin: 22px 0 0; }
@media (max-width: 859px) { .hero-copy { text-align: center; } .lead { margin-inline: auto; } }

/* glitch: H1 only, <= 1s at load, disabled under reduced motion */
.glitch { position: relative; display: inline-block; }
.glitch.is-glitching { animation: gshake .9s steps(2, end) 1; }
.glitch.is-glitching::before, .glitch.is-glitching::after {
  content: attr(data-text); position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen;
}
.glitch.is-glitching::before { left: 3px; color: var(--cyan); animation: g1 .9s steps(1, end) 1; }
.glitch.is-glitching::after { left: -3px; color: #ff2a6d; animation: g2 .9s steps(1, end) 1; }
@keyframes gshake { 0% { transform: translate(0); } 20% { transform: translate(-2px, 1px); } 40% { transform: translate(2px, -1px); } 60% { transform: translate(-1px, 0); } 80% { transform: translate(1px, 1px); } 100% { transform: translate(0); } }
@keyframes g1 { 0% { clip-path: inset(20% 0 65% 0); } 15% { clip-path: inset(60% 0 15% 0); } 30% { clip-path: inset(5% 0 80% 0); } 45% { clip-path: inset(75% 0 5% 0); } 60% { clip-path: inset(35% 0 45% 0); } 75% { clip-path: inset(85% 0 2% 0); } 90% { clip-path: inset(10% 0 70% 0); } 100% { clip-path: inset(0 0 100% 0); } }
@keyframes g2 { 0% { clip-path: inset(70% 0 10% 0); } 15% { clip-path: inset(10% 0 75% 0); } 30% { clip-path: inset(50% 0 30% 0); } 45% { clip-path: inset(2% 0 90% 0); } 60% { clip-path: inset(65% 0 20% 0); } 75% { clip-path: inset(25% 0 55% 0); } 90% { clip-path: inset(80% 0 5% 0); } 100% { clip-path: inset(0 0 100% 0); } }

/* ---- crisis block (always visible) ---- */
/* el numero de crisis tiene que verse sin scroll en una laptop de 900 px */
.crisis { margin-top: clamp(18px, 2.4vw, 26px); }
.crisis-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.crisis h2 { font-size: clamp(20px, 3vw, 28px); color: var(--text); }
.pulse { width: 10px; height: 10px; background: var(--yellow); border-radius: 50%; flex: none; animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(252, 238, 10, .55); } 70% { box-shadow: 0 0 0 12px rgba(252, 238, 10, 0); } 100% { box-shadow: 0 0 0 0 rgba(252, 238, 10, 0); } }
.crisis > .hud-in > p { color: var(--dim); }
.crisis-line { display: grid; gap: 12px; margin: 16px 0; }
.hl-name { font: 600 18px/1.35 var(--body); }
.hl-name .mono { color: var(--cyan); font-size: 12px; margin-left: 8px; }
.hl-meta { color: var(--dim); font-size: 14.5px; }
/* un telefono dentro del detalle tiene que poder pulsarse, no solo leerse */
.hl-meta a.tel, .near-row .meta a.tel { color: var(--yellow); text-decoration: underline; white-space: nowrap; }
.hl-site { font-size: 14px; }
.crisis-links { font-size: 15px; color: var(--dim); margin: 0; }
.crisis-links a { color: var(--dim); }
.crisis-links a:hover { color: var(--yellow); }

/* ---- sections ---- */
.sec { padding: clamp(56px, 9vw, 110px) 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.sec-head { margin-bottom: clamp(24px, 4vw, 40px); }
.sec-label { font-family: var(--mono); color: var(--cyan); font-size: 12px; letter-spacing: .16em; margin: 0 0 10px; text-transform: uppercase; }
.sec-title { font-size: clamp(26px, 4.6vw, 46px); color: var(--text); text-wrap: balance; }
.sec-title em { font-style: normal; color: var(--yellow); }
.sec-sub { color: var(--dim); font-size: clamp(16px, 2vw, 19px); margin: 12px 0 0; max-width: 60ch; }
.rule { height: 1px; background: linear-gradient(90deg, var(--yellow) 0, var(--yellow-line) 40%, transparent); margin: 18px 0 0; max-width: 280px; }

/* ---- video ---- */
.video { position: relative; aspect-ratio: 9 / 16; width: min(100%, 392px); margin-inline: auto; background: #000; overflow: hidden; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
.video-ph { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; background: radial-gradient(60% 60% at 50% 50%, #14141b, #050506); }
.video-ph::before, .video-ph::after { content: ""; position: absolute; width: 34px; height: 34px; border: 1px solid var(--yellow-line); }
.video-ph::before { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.video-ph::after { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }
.play { width: 84px; height: 84px; border: 1px solid var(--yellow-line); display: grid; place-items: center; margin: 0 auto 18px; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.play::before { content: ""; border-left: 22px solid var(--yellow); border-top: 13px solid transparent; border-bottom: 13px solid transparent; margin-left: 5px; }
.video-ph h3 { font-size: clamp(20px, 3.2vw, 32px); color: var(--yellow); }
.video-ph p { color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; margin: 8px 0 0; text-transform: uppercase; }

/* ---- the wall ---- */
.wall-form .hud-in { display: grid; gap: 14px; }
.label { font-size: 12px; color: var(--cyan); }
textarea { width: 100%; min-height: 112px; resize: vertical; background: #08080b; border: 1px solid rgba(255, 255, 255, .14); padding: 14px; color: var(--text); line-height: 1.5; }
textarea:focus { border-color: var(--yellow); outline: none; box-shadow: 0 0 0 1px var(--yellow); }
textarea::placeholder { color: var(--faint); }
.form-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.counter { font-size: 14px; color: var(--dim); }
.counter.warn { color: var(--yellow); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.status { min-height: 1.4em; margin: 0; font-size: 15px; }
.status.ok { color: var(--yellow); }
.status.err { color: var(--danger); }
.notice { display: flex; gap: 10px; align-items: flex-start; color: var(--dim); font-size: 13px; margin: 14px 0 0; }
.notice::before { content: "//"; font-family: var(--mono); color: var(--cyan); flex: none; }
.crisis-inline { margin-top: 6px; }
.crisis-inline h3 { font-size: 20px; color: var(--yellow); margin-bottom: 8px; }
.crisis-inline p { color: var(--dim); }
.wall-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: clamp(24px, 4vw, 40px); }
.wall-empty { color: var(--dim); margin: clamp(24px, 4vw, 40px) 0 -10px; font-size: 15px; }
.card { --cut: 10px; display: flex; flex-direction: column; min-height: 150px; }
.card .hud-in { display: flex; flex-direction: column; height: 100%; padding: 18px 18px 14px; gap: 14px; }
.card-text { font-size: 16px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; flex: 1; margin: 0; }
.card-text::before { content: ""; display: block; width: 26px; height: 2px; background: var(--yellow); margin-bottom: 12px; }
.card.seed .card-text::before { background: var(--cyan); }
.card-meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.card-meta .flag { font-size: 16px; letter-spacing: 0; }
.card-meta .tag { margin-left: auto; color: var(--cyan); white-space: nowrap; }
.wall-foot { display: flex; justify-content: center; margin-top: 24px; }

/* ---- how to help ---- */
.steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); list-style: none; margin: 0; padding: 0; }
.step { --cut: 10px; }
.step .hud-in { padding: 20px; height: 100%; }
.step-n { font-family: var(--mono); color: var(--cyan); font-size: 12px; letter-spacing: .16em; }
.step h3 { font-size: 18px; color: var(--yellow); margin: 8px 0 10px; min-height: 2.4em; }
.step p { color: var(--dim); font-size: 15px; margin: 0; }
.dont .mono { color: var(--cyan); font-size: 12px; }

/* ---- help near you ---- */
.near-list { display: grid; gap: 10px; }
.near-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .015); }
.near-row .flag { align-self: start; }
.flag { display: inline-grid; place-items: center; min-width: 34px; padding: 3px 6px; border: 1px solid var(--yellow-line);
        font: 600 12px/1.2 var(--mono); letter-spacing: .08em; color: var(--yellow); }
.hl-name .flag { margin-right: 10px; vertical-align: 2px; }
.card-meta .flag { color: var(--cyan); border-color: rgba(0, 240, 255, .3); }
.near-row .who { font-weight: 600; }
.near-row .meta { color: var(--dim); font-size: 14.5px; line-height: 1.5; }
.near-row .act { justify-self: end; }
@media (max-width: 560px) { .near-row { grid-template-columns: auto 1fr; } .near-row .act { grid-column: 1 / -1; justify-self: start; } }
.near-empty { color: var(--dim); margin: 0 0 14px; }

/* ---- «I stayed» / «Yo me quede»: un toque, sin escribir nada ----
   Deliberadamente NO es amarillo relleno. En esta pagina el amarillo relleno significa una
   sola cosa: llamar a una linea de ayuda ahora. Este boton es grande pero en contorno. */
.stay { margin: 0 0 clamp(28px, 4vw, 44px); }
.stay .hud-in { display: grid; gap: 12px; justify-items: start; }
.stay-kicker { color: var(--cyan); font-size: 12px; margin: 0; }
.stay-title { font-size: clamp(19px, 2.6vw, 25px); color: var(--text); margin: 0; }
.btn-stay {
  --c: var(--cut-s);
  position: relative; isolation: isolate; width: 100%; margin-top: 4px;
  min-height: 62px; padding: 18px 26px; font-size: clamp(18px, 2.6vw, 24px);
  background: var(--yellow); color: var(--yellow);
}
.btn-stay::before {
  content: ""; position: absolute; inset: 2px; z-index: -1; background: #0b0b0e;
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.btn-stay:hover { color: var(--yellow); filter: brightness(1.12); }
.btn-stay.is-done { background: var(--yellow-line); color: var(--yellow); cursor: default; }
.btn-stay.is-done::before { background: #0b0b0e; }
.btn-stay.is-done span::before { content: "✓ "; }
.btn-stay[aria-disabled="true"] { pointer-events: none; }
.stay-count { margin: 0; color: var(--yellow); font-family: var(--mono); font-size: 15px; letter-spacing: .06em; min-height: 1.3em; }
.stay-count.err { color: var(--danger); }
.stay-note { margin: 0; color: var(--dim); font-size: 13px; max-width: 54ch; }

/* el encabezado de «ahora escribe una» separa la lectura del muro del formulario */
.wall-write-head { margin: clamp(36px, 6vw, 64px) 0 clamp(16px, 2vw, 22px); }
.wall-write-title { font-size: clamp(20px, 3vw, 28px); color: var(--yellow); }

/* ---- que decir / que no decir: dos listas, una frase por renglon ---- */
.dont { margin-top: 22px; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.dont-col { padding: 16px 18px; border-left: 2px solid var(--cyan); background: var(--cyan-soft); }
.say { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px; }
.say li { position: relative; padding-left: 26px; color: var(--dim); font-size: 15.5px; line-height: 1.45; }
.say li::before { position: absolute; left: 0; top: 0; font-family: var(--mono); }
.say-no li::before { content: "✕"; color: var(--danger); font-weight: 700; }
.say-yes li { color: var(--text); }
.say-yes li::before { content: "✓"; color: var(--yellow); }

/* la linea del pais del visitante: la unica de la lista que le sirve ahora mismo */
.near-row.is-mine { border-color: var(--yellow-line); background: rgba(252, 238, 10, .05); }

/* ---- about / footer ---- */
.about p { max-width: 64ch; color: var(--dim); font-size: 17px; }
.about b { color: var(--text); font-weight: 600; }
.footer { padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(252, 238, 10, .14); color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.footer .rib { display: inline-block; width: 10px; height: 10px; background: var(--yellow); transform: rotate(45deg); margin: 0 12px; vertical-align: 0; }

/* ---- floating "need help now" ---- */
.sos { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; transition: opacity .2s, transform .2s; }
.sos.hide { opacity: 0; pointer-events: none; transform: translateY(8px); }
@media (max-width: 760px) {
  /* barra de ancho completo con su propio carril: antes tapaba texto en media pagina */
  body { padding-bottom: 88px; }
  .sos { left: 16px; right: 16px; }
  .sos .btn { width: 100%; min-height: 52px; }
  #near .near-row .act { grid-column: 1 / -1; justify-self: stretch; }
  #near .near-row .act .btn { width: 100%; min-height: 52px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .is-drawn svg, .is-drawn #ribbonGlow { animation: none !important; }
}