/* Always Worth Living · style.css — «Divine Child»
TESIS: la chispa dorada del arquetipo y el listón amarillo son el mismo objeto. Toda la luz
de la página nace del listón y se expande hacia afuera; nada más en la página emite luz propia.
Es lo mismo que hace la película: la luz del colibrí DIBUJA el listón.
Qué cambió respecto del registro cyberpunk anterior, y por qué:
· El glitch del H1 se fue. Hacía temblar y romper la única frase que no puede temblar.
Lo sustituye `.dawn`: las letras ASIENTAN y el resplandor florece una vez. Lo contrario.
· Las líneas de barrido (scanlines) se fueron. Decían «terminal». Esta página no es una
terminal, es un lugar donde alguien decide quedarse esta noche.
· Los cortes de esquina (clip-path) se fueron: eran un HUD. Los sustituye la AUREOLA —
un borde de 1px más brillante arriba, como iluminado desde una luz superior.
· El cian frío sale; entra el ámbar cálido y una aura violeta tenue. El amarillo del listón
manda: el violeta nunca compite, solo envuelve.
Se conserva TODO lo funcional que ya estaba resuelto y comentado: que el botón de llamar entre
en el primer pantallazo, los 44px táctiles, el carril de la barra fija, AA, focus visible y
prefers-reduced-motion. El amarillo RELLENO sigue significando una sola cosa: llamar ahora. */
:root {
--bg: #07060e; /* noche índigo, no vacío negro */
--panel: #100e1c;
--panel-2: #15132433;
--yellow: #FCEE0A; /* el listón. No se toca: es el símbolo. */
--yellow-line: rgba(252, 238, 10, .32);
--yellow-soft: rgba(252, 238, 10, .12);
--gold: #FDE68A; /* la chispa: highlights, rótulos, acentos cálidos */
--cream: #FEF9C3; /* el núcleo del halo */
--aura: #A79BE0; /* aura violeta: envuelve, nunca compite */
--aura-soft: rgba(167, 155, 224, .07);
--text: #F4F2EA; /* blanco con una gota de luz cálida */
--dim: #A8A2B8;
--faint: #6f6a80;
--danger: #ff8a8a;
--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;
--r: 16px; /* sustituye a --cut: la esquina ya no se corta, se redondea */
--r-s: 11px;
--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);
/* tres fuentes de luz: la del listón (arriba-derecha), el aura violeta y un AMANECER abajo.
El amanecer es el que cambia el sentido: la página ya no termina en vacío, termina en luz. */
background-image:
radial-gradient(1200px 620px at 72% -10%, rgba(252, 238, 10, .10), transparent 62%),
radial-gradient(900px 560px at -10% 28%, rgba(167, 155, 224, .075), transparent 60%),
radial-gradient(1400px 420px at 50% 108%, rgba(253, 230, 138, .09), transparent 68%);
background-attachment: fixed;
color: var(--text);
font: 400 16px/1.65 var(--body);
min-height: 100vh;
overflow-x: hidden;
}
::selection { background: var(--yellow); color: #000; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--cream); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--head); text-transform: uppercase; letter-spacing: .055em; line-height: 1.1; 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; border-radius: 0 0 var(--r-s) var(--r-s); }
.skip:focus { top: 8px; }
/* ---- atmósfera: grano suave y respiración. Sin scanlines. ---- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
.fx::after {
content: ""; position: absolute; inset: 0; opacity: .045;
background-image: url("data:image/svg+xml;utf8,");
}
/* la viñeta ya no cierra en negro puro: cierra en un índigo que todavía tiene luz dentro */
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 49; background: radial-gradient(120% 92% at 50% 38%, transparent 56%, rgba(6, 4, 16, .62) 100%); }
/* ---- AUREOLA: el panel iluminado desde arriba (sustituye al HUD) ---- */
.hud {
position: relative; isolation: isolate; padding: 1px; border-radius: var(--r);
background: linear-gradient(170deg, rgba(253, 230, 138, .40) 0%, rgba(253, 230, 138, .13) 34%, rgba(167, 155, 224, .16) 68%, rgba(167, 155, 224, .07) 100%);
}
.hud::before {
content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--r) - 1px);
background:
radial-gradient(120% 90% at 50% -14%, rgba(253, 230, 138, .055), transparent 58%),
var(--panel);
}
.hud-in { padding: clamp(18px, 3vw, 32px); }
/* ---- botones ---- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 13px 22px; min-height: 44px; /* mínimo táctil: 44 px — va en .btn, no solo en .btn-small */
border: 0; cursor: pointer; text-decoration: none; border-radius: var(--r-s);
font: 700 15px/1 var(--head); text-transform: uppercase; letter-spacing: .1em;
background: var(--yellow); color: #000;
box-shadow: 0 0 0 0 rgba(252, 238, 10, .5), 0 6px 26px -10px rgba(252, 238, 10, .7);
transition: transform .15s ease, filter .15s ease, box-shadow .3s ease;
}
.btn:hover { filter: brightness(1.07); color: #000; box-shadow: 0 0 22px -4px rgba(252, 238, 10, .55), 0 8px 30px -10px rgba(252, 238, 10, .8); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: wait; }
.btn-ghost { position: relative; isolation: isolate; background: rgba(253, 230, 138, .34); color: var(--gold); box-shadow: none; }
.btn-ghost::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: calc(var(--r-s) - 1px); background: #0d0b18; }
.btn-ghost:hover { background: var(--gold); color: var(--gold); box-shadow: 0 0 18px -6px rgba(253, 230, 138, .6); }
.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 */
/* ---- barra superior ---- */
.topbar { position: sticky; top: 0; z-index: 60; background: rgba(7, 6, 14, .82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(253, 230, 138, .12); }
.topbar-in { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.mark { font-family: var(--mono); letter-spacing: .18em; color: var(--gold); text-decoration: none; font-size: 13px; white-space: nowrap; }
/* la marca ya no lleva un rombo de HUD: lleva una chispa que late despacio */
.mark::before {
content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
background: var(--cream); box-shadow: 0 0 8px 2px rgba(253, 230, 138, .75);
margin-right: 10px; vertical-align: 1px; animation: spark 5.5s ease-in-out infinite;
}
@keyframes spark { 0%, 100% { opacity: .75; box-shadow: 0 0 6px 1px rgba(253, 230, 138, .6); } 50% { opacity: 1; box-shadow: 0 0 12px 3px rgba(253, 230, 138, .9); } }
.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, .13); border-radius: var(--r-s); }
.lang button { background: transparent; border: 0; border-radius: calc(var(--r-s) - 4px); 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(--gold); color: #17130a; }
@media (max-width: 720px) {
.topnav a:not(.btn) { display: none; }
/* 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; }
}
/* EL ORIGEN DE LA LUZ. Detrás del listón, no sobre él: la página entera se ilumina desde aquí. */
.ribbon-box::before {
content: ""; position: absolute; left: 50%; top: 52%; width: 200%; aspect-ratio: 1;
transform: translate(-50%, -50%); pointer-events: none; z-index: -1;
background: radial-gradient(circle, rgba(253, 230, 138, .20) 0%, rgba(252, 238, 10, .09) 28%, rgba(167, 155, 224, .05) 52%, transparent 72%);
animation: aura 7.5s ease-in-out infinite;
}
@keyframes aura { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.09); } }
.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: .8; } }
.kicker { color: var(--gold); font-size: 12px; margin: 0 0 18px; opacity: .85; }
.hero h1 { font-size: clamp(34px, 5.2vw, 62px); color: var(--yellow); letter-spacing: .03em; line-height: .99; text-wrap: balance; }
.lead { font-size: clamp(17px, 2.2vw, 21px); color: var(--dim); max-width: 46ch; margin: 22px 0 0; }
@media (max-width: 859px) { .hero-copy { text-align: center; } .lead { margin-inline: auto; } }
/* ---- «dawn»: sustituye al glitch. La frase no tiembla: ASIENTA y florece. ----
El glitch anterior rompía y desplazaba «YOUR LIFE IS ALWAYS WORTH LIVING». Una frase que
afirma que tu vida vale no puede verse inestable: la forma contradecía al texto. */
.dawn { position: relative; display: inline-block; }
.dawn.is-dawning { animation: dawn-rise 1.5s cubic-bezier(.22, .9, .25, 1) 1 both; }
@keyframes dawn-rise {
0% { opacity: 0; transform: translateY(14px); filter: blur(9px) brightness(2.1); letter-spacing: .16em; }
55% { opacity: 1; filter: blur(0) brightness(1.5); }
100% { opacity: 1; transform: translateY(0); filter: blur(0) brightness(1); letter-spacing: .03em; }
}
/* el resplandor florece una vez y se queda quieto: la afirmación, ya asentada */
.dawn.is-dawning::after {
content: ""; position: absolute; inset: -18% -8%; pointer-events: none; z-index: -1;
background: radial-gradient(60% 70% at 30% 50%, rgba(252, 238, 10, .30), transparent 70%);
animation: dawn-bloom 2.3s ease-out 1 both;
}
@keyframes dawn-bloom { 0% { opacity: 0; transform: scale(.72); } 45% { opacity: 1; } 100% { opacity: .38; transform: scale(1); } }
/* ---- bloque de crisis (siempre visible) ----
AQUÍ NO HAY POESÍA, A PROPÓSITO. Quien está en crisis necesita instrucciones, no metáforas.
Es el único bloque de la página que no se adornó. El número tiene que verse sin scroll
en una laptop de 900 px. */
.crisis { margin-top: clamp(18px, 2.4vw, 26px); }
/* al bloque de crisis se le permite más luz que a ningún otro panel: es adonde hay que mirar */
.crisis.hud { background: linear-gradient(170deg, rgba(252, 238, 10, .52) 0%, rgba(253, 230, 138, .20) 40%, rgba(167, 155, 224, .14) 100%); }
.crisis.hud::before { background: radial-gradient(130% 100% at 50% -16%, rgba(252, 238, 10, .075), transparent 60%), var(--panel); }
.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(--gold); 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(--gold); }
/* ---- secciones ---- */
.sec { padding: clamp(56px, 9vw, 110px) 0; border-top: 1px solid rgba(253, 230, 138, .07); }
.sec-head { margin-bottom: clamp(24px, 4vw, 40px); }
/* el rótulo ya no es una instrucción de máquina («// 02 ·»): es una chispa y un nombre */
.sec-label { font-family: var(--mono); color: var(--gold); font-size: 12px; letter-spacing: .16em; margin: 0 0 10px; text-transform: uppercase; opacity: .82; }
.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(--gold) 0, rgba(253, 230, 138, .3) 40%, transparent); margin: 18px 0 0; max-width: 280px; }
/* ---- la película ---- */
.video { position: relative; aspect-ratio: 9 / 16; width: min(100%, 392px); margin-inline: auto; background: #000; overflow: hidden; border-radius: var(--r); box-shadow: 0 0 60px -22px rgba(252, 238, 10, .45); }
.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% 45%, #171428, #07060e); }
/* el marco de esquinas del HUD se fue: ahora el reproductor es un halo */
.play { width: 84px; height: 84px; border: 1px solid rgba(253, 230, 138, .35); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; box-shadow: 0 0 26px -6px rgba(253, 230, 138, .4), inset 0 0 20px -8px rgba(253, 230, 138, .5); }
.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; }
/* ---- el muro ---- */
.wall-form .hud-in { display: grid; gap: 14px; }
.label { font-size: 12px; color: var(--gold); }
textarea { width: 100%; min-height: 112px; resize: vertical; background: #0b0918; border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--r-s); padding: 14px; color: var(--text); line-height: 1.55; }
textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 1px var(--gold), 0 0 24px -8px rgba(253, 230, 138, .55); }
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(--gold); }
.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(--gold); }
.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: "✦"; color: var(--gold); flex: none; opacity: .7; }
.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; }
/* cada mensaje es una ventana con luz adentro: alguien encendió eso y sigue encendido */
.card { --r: 13px; display: flex; flex-direction: column; min-height: 150px; transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 10px 34px -20px rgba(253, 230, 138, .75); }
.card .hud-in { display: flex; flex-direction: column; height: 100%; padding: 18px 18px 14px; gap: 14px; }
.card-text { font-size: 16px; line-height: 1.58; white-space: pre-line; overflow-wrap: anywhere; flex: 1; margin: 0; }
/* la marca de cada mensaje es una chispa, no un guion */
.card-text::before { content: ""; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 10px 2px rgba(252, 238, 10, .55); margin-bottom: 13px; }
.card.seed .card-text::before { background: var(--aura); box-shadow: 0 0 10px 2px rgba(167, 155, 224, .5); }
.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(--aura); white-space: nowrap; }
.wall-foot { display: flex; justify-content: center; margin-top: 24px; }
/* ---- cómo ayudar ---- */
.steps { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); list-style: none; margin: 0; padding: 0; }
.step { --r: 13px; }
.step .hud-in { padding: 20px; height: 100%; }
.step-n { font-family: var(--mono); color: var(--gold); font-size: 12px; letter-spacing: .16em; opacity: .8; }
.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(--gold); font-size: 12px; }
/* ---- ayuda cerca de ti ---- */
.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, .08); border-radius: var(--r-s); background: rgba(255, 255, 255, .012); }
.near-row .flag { align-self: start; }
.flag { display: inline-grid; place-items: center; min-width: 34px; padding: 3px 6px; border: 1px solid rgba(253, 230, 138, .3); border-radius: 6px;
font: 600 12px/1.2 var(--mono); letter-spacing: .08em; color: var(--gold); }
.hl-name .flag { margin-right: 10px; vertical-align: 2px; }
.card-meta .flag { color: var(--aura); border-color: rgba(167, 155, 224, .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 quedé»: 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(--gold); font-size: 12px; margin: 0; opacity: .82; }
.stay-title { font-size: clamp(19px, 2.6vw, 25px); color: var(--text); margin: 0; }
.btn-stay {
position: relative; isolation: isolate; width: 100%; margin-top: 4px; border-radius: var(--r-s);
min-height: 62px; padding: 18px 26px; font-size: clamp(18px, 2.6vw, 24px);
background: var(--yellow); color: var(--yellow); box-shadow: none;
}
.btn-stay::before { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: calc(var(--r-s) - 2px); background: #0c0a17; }
.btn-stay:hover { color: var(--yellow); filter: brightness(1.12); box-shadow: 0 0 26px -8px rgba(252, 238, 10, .6); }
.btn-stay.is-done { background: var(--yellow-line); color: var(--yellow); cursor: default; }
.btn-stay.is-done::before { background: #0c0a17; }
.btn-stay.is-done span::before { content: "✓ "; }
.btn-stay[aria-disabled="true"] { pointer-events: none; }
.stay-count { margin: 0; color: var(--gold); 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(30px, 5vw, 52px) 0 clamp(16px, 2vw, 22px); }
.wall-write-title { font-size: clamp(20px, 3vw, 28px); color: var(--yellow); }
/* El muro va DESPUES del formulario y necesita su propio encabezado para no quedar huerfano.
En oro, no en amarillo: leer acompaña, escribir es la accion. */
.wall-read-head { margin: clamp(40px, 7vw, 76px) 0 0; }
.wall-read-title { font-size: clamp(19px, 2.6vw, 25px); color: var(--gold); }
/* ---- 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(--aura); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--aura-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(--gold); }
/* 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); }
/* ---- acerca de / pie ---- */
.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(253, 230, 138, .12); color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
/* el pie cierra con dos chispas, no con dos rombos */
.footer .rib { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px 2px rgba(253, 230, 138, .6); margin: 0 12px; vertical-align: 2px; }
/* ---- «ayuda ahora» flotante ---- */
.sos { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; transition: opacity .2s, transform .2s; }
/* `hide` la retira sobre las secciones que ya traen el teléfono a la vista (initSos);
`typing` mientras se escribe en el muro, para que el teclado no la deje encima de «Dejar
una luz». Son dos mecanismos independientes a propósito: ninguno pisa al otro. */
.sos.hide, .sos.typing { 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` ES el botón (``), no un contenedor: la regla
`.sos .btn` de antes era descendiente y no casaba con nada, así que los 52px nunca
se aplicaron y la barra se quedaba en los 44 de `.btn`. */
.sos { left: 16px; right: 16px; min-height: 52px; }
#near .near-row .act { grid-column: 1 / -1; justify-self: stretch; }
#near .near-row .act .btn { width: 100%; min-height: 52px; }
}
/* ---- movimiento reducido ---- */
@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; }
/* sin animación, `dawn` debe quedar VISIBLE y asentado, no a medio camino */
.dawn.is-dawning { opacity: 1 !important; transform: none !important; filter: none !important; letter-spacing: .03em !important; }
.dawn.is-dawning::after { opacity: .38 !important; transform: none !important; }
}