/* Base común de las dos portadas (A: el muro · B: el despertar).
   Sin los rasgos de plantilla: nada de líneas de pantalla vieja, esquinas de mira,
   punto que titila, texto que se decodifica, halos de luz ni titulares en mayúscula sostenida. */
:root{
  --bg:#06080A; --panel:#0D1013; --panel-2:#14181C; --linea:rgba(236,233,223,.10); --linea-2:rgba(236,233,223,.20);
  --tinta:#ECE9DF; --tinta-2:#C9C5B9; --gris:#8A9099; --apagado:#1B1F24;
  --ambar:#FFB000; --ambar-marca:#C78500; --naranja:#FF7A1A;
  --magenta:#E040A0; --rojo:#FF5C5C; --verde:#B6FF3B;
  --f-tit:'Big Shoulders Display', Impact, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, Consolas, monospace;
  --f-lluvia:'Share Tech Mono', 'JetBrains Mono', monospace;
  --f-mano:'Caveat', cursive;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--tinta);font:16px/1.6 var(--f-mono);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--ambar);text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--ambar);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Barra: marca escrita, sin telemetría ni luces */
.barra{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:calc(14px + env(safe-area-inset-top, 0px)) clamp(16px,4vw,48px) 14px;background:linear-gradient(180deg,rgba(6,8,10,.9),rgba(6,8,10,0))}
.marca{font:900 22px/1 var(--f-tit);color:var(--tinta);text-decoration:none;letter-spacing:.01em}
.marca span{color:var(--ambar)}
.barra nav{display:flex;gap:18px;align-items:center;font-size:13px}
.barra nav a{color:var(--tinta-2);text-decoration:none}
.barra nav a:hover{color:var(--ambar)}
.barra .b-cta{color:#0B0B0B;background:var(--ambar);padding:9px 14px;font-weight:700;min-height:40px;display:inline-flex;align-items:center}
.barra .b-cta:hover{color:#0B0B0B;filter:brightness(1.08)}

/* Titulares en tipo de oración, no en mayúscula sostenida */
.titular{font:900 clamp(44px,5.6vw,96px)/.95 var(--f-tit);letter-spacing:-.005em;margin:0;text-wrap:balance}
.racha{color:var(--ambar);font-variant-numeric:tabular-nums}
.bajada{margin:20px 0 0;max-width:54ch;font-size:clamp(15px,1.15vw,17px);color:var(--tinta-2)}
.bajada b{color:var(--tinta)}
.nota-mano{font:600 clamp(24px,2.2vw,30px)/1.1 var(--f-mano);color:var(--ambar);transform:rotate(-3deg);display:inline-block}

/* Formulario de un solo campo, con la cuenta regresiva al próximo hito real de la racha */
.lista-hito{margin:0 0 8px;font-size:13px;color:var(--tinta-2)}
.lista-hito .hito-num{display:inline-block;color:#0B0B0B;background:var(--ambar);font-weight:700;padding:2px 8px;margin-right:6px}
.lista-hito b{font-variant-numeric:tabular-nums}
.lista-hito > b{color:var(--ambar)}
.lista{max-width:540px}
.lista label{display:block;font-weight:700;font-size:15px;line-height:1.45;color:var(--tinta);margin-bottom:10px}
.campo{display:flex;background:var(--panel);border:1px solid var(--linea-2)}
.campo:focus-within{border-color:var(--ambar)}
.campo input{flex:1;min-width:0;font:16px var(--f-mono);color:var(--tinta);background:transparent;border:0;padding:14px;min-height:52px}
.campo input::placeholder{color:#6B7178}
.campo input:focus-visible{outline:none}
.campo button{font:700 14px var(--f-mono);letter-spacing:.04em;color:#0B0B0B;background:var(--ambar);border:0;padding:0 20px;min-height:52px;cursor:pointer;white-space:nowrap;transition:filter .2s}
.campo button:hover{filter:brightness(1.08)}
.lista-pie{margin:10px 0 0;font-size:12px;color:var(--gris)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.campo button:disabled{opacity:.6;cursor:progress}
.lista-legal{margin:4px 0 0;font-size:11.5px;color:var(--gris)}
.lista-legal a{color:var(--tinta-2)}
.lista-pie.ok{color:var(--verde)} .lista-pie.error{color:var(--rojo)}

/* Lluvia que SUBE desde el reloj del Operador */
.lluvia{position:absolute;width:0;height:0;pointer-events:none}
.lluvia span{position:absolute;left:0;bottom:0;transform:translateX(-50%);white-space:nowrap;font:14px var(--f-lluvia);letter-spacing:.12em;color:var(--ambar);opacity:0}
.lluvia span.fuerte{color:var(--tinta)}

.sonido{display:inline-flex;gap:8px;align-items:center;font:12px var(--f-mono);color:var(--gris);background:transparent;border:1px solid var(--linea-2);padding:8px 12px;min-height:40px;cursor:pointer}
.sonido:hover,.sonido[aria-pressed="true"]{color:var(--ambar);border-color:rgba(255,176,0,.5)}
.sonido .ondas{opacity:.25} .sonido[aria-pressed="true"] .ondas{opacity:1}

#tip{position:fixed;z-index:50;pointer-events:none;background:#0B0E11;border:1px solid var(--ambar-marca);color:var(--tinta);font:12px/1.4 var(--f-mono);padding:6px 9px}

.js .entra{transform:translateY(14px)}
@media (max-width:560px){
  .barra nav a:not(.b-cta){display:none}
  .campo{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .js .entra{transform:none}
}