/* ════════════════════════════════════════════════════════════
   1918.es — «Cuando ya no esté»
   Dos mundos: el aviso clínico de 2026 y el 1918 que lo rasga.
   ════════════════════════════════════════════════════════════ */
/* MÓVIL — ESPACIO ENTRE SECCIONES (AJUSTADO) */
@media screen and (max-width: 800px) {
  .oscuro {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  /* El primer desgarro necesita más espacio por el borde de papel */
  #vuelco.oscuro {
    padding-top: 75px !important;
  }

}


:root {
  --ink: #0e0b08;
  --tinta: #171009;
  --paper: #d9cdb0;
  --paper-dim: #a99a78;
  --blood: #8e2f26;
  --blood-2: #b2402f;
  --lamp: #dfa458;
  --helio: #8b7ba8;
  --helio-luz: #b7a8d6;
  --clinico-bg: #f2f0ea;
  --clinico-tinta: #14120e;
  --f-stencil: 'Allerta Stencil', 'Arial Black', sans-serif;
  --f-novel: 'IM Fell English', Georgia, serif;
  --f-type: 'Special Elite', 'Courier New', monospace;
  --f-frio: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { background: var(--ink); color: var(--paper); font-family: var(--f-frio); }
img { max-width: 100%; display: block; }
::selection { background: var(--helio); color: var(--ink); }

/* La luz de la página: ámbar; vira a heliotropo en el contador */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 90% 60% at 50% 0%,
              rgba(223,164,88,.10), transparent 60%);
  transition: opacity 1.2s ease;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 90% 60% at 50% 0%,
              rgba(139,123,168,.16), transparent 60%);
  opacity: 0; transition: opacity 1.2s ease;
}
body.helio::before { opacity: 0; }
body.helio::after  { opacity: 1; }

/* ─── Barra fija de llamadas ─── */
#bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px clamp(14px, 4vw, 34px);
  background: rgba(14,11,8,.86); backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(217,205,176,.18);
  transform: translateY(-110%); transition: transform .5s ease;
}
#bar.visto { transform: translateY(0); }
.bar-brand {
  font-family: var(--f-stencil); font-size: 11px; letter-spacing: .22em;
  color: var(--paper-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar-btns { display: flex; gap: 8px; flex: 0 0 auto; }

/* ─── Botones ─── */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-family: var(--f-type); font-size: 16px; letter-spacing: .04em;
  padding: 13px 26px; border: 1px solid var(--paper);
  color: var(--paper); background: transparent;
  transition: background .25s ease, color .25s ease, transform .15s ease, border-color .25s ease;
}
.btn:hover, .btn:focus-visible { background: var(--lamp); border-color: var(--lamp); color: #241c10; transform: translateY(-2px); }
.btn.primary { background: var(--blood); border-color: var(--blood); color: #f2e6cf; }
.btn.primary:hover, .btn.primary:focus-visible { background: var(--blood-2); border-color: var(--blood-2); color: #fff; }
.btn.ghost { border-color: rgba(217,205,176,.55); }
.btn.small { padding: 8px 14px; font-size: 13px; }

/* ════════════════ 1 · EL AVISO (clínico) ════════════════ */
#alerta {
  min-height: 100svh; display: grid; place-items: center;
  background:
    linear-gradient(180deg, #f7f5f0, var(--clinico-bg) 70%, #e6e2d8);
  color: var(--clinico-tinta);
  padding: 8vh clamp(16px, 5vw, 48px) 16vh;
  position: relative; z-index: 2;
}
.alerta-caja { width: min(720px, 100%); }
.alerta-ref {
  font-size: 12px; letter-spacing: .28em; font-weight: 600;
  color: #6b675c; border-left: 4px solid var(--blood); padding-left: 12px;
  margin-bottom: 26px; text-transform: uppercase;
}
#alerta h1 {
  font-family: var(--f-frio); font-weight: 800;
  font-size: clamp(42px, 8.5vw, 96px); line-height: .98; letter-spacing: -.02em;
  margin-bottom: 34px;
}
.alerta-intro {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: #6b675c; font-weight: 600; margin-bottom: 14px;
}
.alerta-fuente {
  margin-top: 16px; font-size: 12.5px; font-style: italic; color: #8a8577;
}
.alerta-datos { list-style: none; border-top: 1px solid #c9c4b6; }
.alerta-datos li {
  padding: 13px 2px; border-bottom: 1px solid #c9c4b6;
  font-size: clamp(15px, 2.2vw, 19px); color: #33302a;
  display: flex; gap: 12px;
}
.alerta-datos li::before { content: "—"; color: var(--blood); font-weight: 700; }
.alerta-scroll {
  margin-top: 42px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: #6b675c;
}
.alerta-scroll span { display: inline-block; animation: baja 1.6s ease-in-out infinite; }
@keyframes baja { 0%,100% { transform: translateY(0);} 50% { transform: translateY(6px);} }

/* ════════════════ El desgarro y el mundo oscuro ════════════════ */
.oscuro { position: relative; z-index: 2; padding: 14vh clamp(16px, 5vw, 48px); }
#vuelco {
  margin-top: -9vh;
  clip-path: polygon(0 4.5vh, 6% 1.5vh, 13% 5vh, 22% 2vh, 31% 5.5vh, 40% 1vh,
                     50% 4.5vh, 60% 1.5vh, 69% 5vh, 78% 2vh, 88% 5.5vh, 95% 2.5vh,
                     100% 5vh, 100% 100%, 0 100%);
  background: var(--ink);
  padding-top: calc(14vh + 5vh);
}
.marco { width: min(980px, 100%); margin: 0 auto; }
.marco.centro { text-align: center; }

.ceja {
  font-family: var(--f-stencil); font-size: 12px; letter-spacing: .3em;
  color: var(--helio-luz); margin-bottom: 18px;
}
.susurro {
  font-family: var(--f-type); font-size: clamp(15px, 2.4vw, 20px);
  color: var(--paper-dim); margin-bottom: 10px;
}
.grito {
  font-family: var(--f-stencil); font-size: clamp(56px, 13vw, 168px);
  line-height: .95; letter-spacing: .01em; color: var(--paper);
  margin: 26px 0 34px;
  text-shadow: 0 0 60px rgba(223,164,88,.15);
}
.titulo {
  font-family: var(--f-novel); font-weight: 400;
  font-size: clamp(32px, 6vw, 60px);
  line-height: 1.08; color: var(--paper); margin-bottom: 26px;
  text-shadow: 0 0 40px rgba(223,164,88,.18);
}
.cuerpo {
  font-size: clamp(16px, 2.3vw, 20px); line-height: 1.75; color: #cfc3a6;
  max-width: 62ch; margin-bottom: 18px;
}
.marco.centro .cuerpo { margin-left: auto; margin-right: auto; }
.cuerpo b { color: var(--paper); }
.honesta {
  margin-top: 38px; font-family: var(--f-novel); font-style: italic;
  font-size: clamp(20px, 3.4vw, 30px); color: var(--lamp);
}
.mini { font-size: 13.5px; color: var(--paper-dim); letter-spacing: .04em; }
.mini .nota { display: block; margin-top: 6px; opacity: .75; font-size: 12px; }

/* ════════════════ 3 · CIFRAS ════════════════ */
.rejilla {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 34px); margin: 54px 0 60px;
}
.dato { border-top: 1px solid rgba(217,205,176,.28); padding-top: 20px; }
.numero {
  font-family: var(--f-stencil); color: var(--paper);
  font-size: clamp(44px, 6.5vw, 84px); line-height: 1; margin-bottom: 12px;
  white-space: nowrap;
}
.numero .pre, .numero .suf { font-size: .45em; color: var(--paper-dim); }
.numero .suf { margin-left: .12em; }
.dato-titulo { font-family: var(--f-type); font-size: 16px; color: var(--lamp); margin-bottom: 8px; }
.dato-nota { font-size: 14px; line-height: 1.6; color: var(--paper-dim); }

/* huecos para tus imágenes */
.slot { position: relative; background: #14100a; border: 1px solid rgba(217,205,176,.25); overflow: hidden; }
.slot img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.3) contrast(1.05); }
.slot.noimg img { display: none; }
.hueco {
  position: absolute; inset: 0; display: none;
  flex-direction: column; gap: 10px; align-items: center; justify-content: center;
  text-align: center; padding: 8%;
  outline: 2px dashed rgba(217,205,176,.35); outline-offset: -12px;
}
.slot.noimg .hueco { display: flex; }
.hueco-n { font-family: var(--f-stencil); font-size: 11px; letter-spacing: .22em; color: var(--lamp); }
.hueco-txt { font-size: 13px; font-style: italic; color: var(--paper-dim); max-width: 46ch; line-height: 1.6; }
.slot.ancho { aspect-ratio: 21 / 9; }
.slot.portada { aspect-ratio: 2 / 3; }
.slot.pantalla { aspect-ratio: 16 / 9; }

/* ════════════════ 4 · CONTADOR ════════════════ */
#ritmo { background: linear-gradient(180deg, var(--ink), #14101c 50%, var(--ink)); }
.vivo {
  font-family: var(--f-stencil); font-size: clamp(72px, 16vw, 200px);
  line-height: 1; color: var(--helio-luz); margin: 26px 0 10px;
  text-shadow: 0 0 80px rgba(139,123,168,.35);
  font-variant-numeric: tabular-nums;
}
.vivo-label { font-family: var(--f-type); font-size: clamp(15px, 2.4vw, 19px); color: var(--paper); margin-bottom: 26px; }

/* ════════════════ 5 · CENSURA ════════════════ */
.expediente { margin-top: 46px; display: grid; gap: 14px; }
.linea {
  position: relative; display: block; width: 100%; text-align: left;
  background: transparent; border: 1px solid rgba(217,205,176,.25);
  padding: 20px 22px; cursor: pointer; overflow: hidden;
  transition: border-color .3s ease;
}
.linea:hover, .linea:focus-visible { border-color: var(--lamp); }
.linea .verdad {
  font-size: clamp(15px, 2.2vw, 18px); line-height: 1.7; color: var(--paper);
  opacity: 0; transition: opacity .5s ease .1s; display: block;
}
.linea .verdad i { color: var(--lamp); }
.linea .verdad b { color: var(--lamp); }
.linea .tachado {
  position: absolute; inset: 14px 16px;
  background: repeating-linear-gradient(180deg,
    var(--tinta) 0 12px, transparent 12px 22px);
  transition: transform .6s ease, opacity .5s ease;
}
.linea .tachado::after {
  content: "DECLASSIFY";
  position: absolute; right: 0; bottom: -13px;
  font-family: var(--f-stencil); font-size: 10px; letter-spacing: .24em;
  color: var(--paper-dim);
}
.linea.abierta { border-color: rgba(217,205,176,.45); }
.linea.abierta .tachado { transform: translateX(102%); opacity: 0; }
.linea.abierta .verdad { opacity: 1; }
.linea.final.abierta { border-color: var(--helio); box-shadow: 0 0 34px rgba(139,123,168,.2); }

/* ════════════════ 6-7 · NOVELA Y JUEGO ════════════════ */
.dos-col {
  display: grid; grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(26px, 5vw, 64px); align-items: start;
}
.dos-col.invertida { grid-template-columns: 1fr minmax(280px, 460px); }
.titulo.libro {
  font-family: var(--f-stencil); font-weight: 400;
  font-size: clamp(40px, 7vw, 76px); line-height: 1.05;
  color: var(--paper); text-shadow: none;
}
.autor { font-family: var(--f-type); color: var(--lamp); letter-spacing: .12em; margin: -12px 0 26px; }
.cita {
  border-left: 3px solid var(--helio); padding: 6px 0 6px 20px; margin: 28px 0;
  font-family: var(--f-novel); font-style: italic;
  font-size: clamp(18px, 2.8vw, 24px); color: var(--helio-luz); line-height: 1.6;
}
.cita-quien { display: block; margin-top: 10px; font-size: 14px; color: var(--paper-dim); font-style: normal; font-family: var(--f-type); }
.acciones { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.acciones.centradas { justify-content: center; }
#juego .titulo {
  font-family: var(--f-stencil);
  font-size: clamp(30px, 5.6vw, 58px); line-height: 1.05;
  letter-spacing: .04em; text-shadow: none;
}

/* ════════════════ 8 · CAMPANA ════════════════ */
#btn-campana {
  width: 128px; height: 128px; border-radius: 50%;
  margin: 34px auto 22px; display: grid; place-items: center;
  background: transparent; color: var(--paper); cursor: pointer;
  border: 2px solid rgba(217,205,176,.5);
  transition: border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
#btn-campana svg { width: 58px; height: 58px; }
#btn-campana:hover, #btn-campana:focus-visible {
  border-color: var(--lamp); color: var(--lamp);
  box-shadow: 0 0 40px rgba(223,164,88,.25);
}
#btn-campana.suena svg { animation: tañido .7s ease; transform-origin: 50% 12%; }
@keyframes tañido {
  0% { transform: rotate(0); } 22% { transform: rotate(13deg); }
  50% { transform: rotate(-11deg); } 74% { transform: rotate(6deg); }
  100% { transform: rotate(0); }
}
#campana .vivo-label { margin-top: 6px; }
#campanadas { color: var(--lamp); }

/* ════════════════ 9 · COLOFÓN Y PIE ════════════════ */
#colofon { padding-bottom: 8vh; }
.colofon-texto {
  font-family: var(--f-novel); font-style: italic;
  font-size: clamp(17px, 2.6vw, 23px); line-height: 1.8;
  color: #cfc3a6; max-width: 58ch; margin: 0 auto 18px;
}
.colofon-firma { font-family: var(--f-type); font-size: 14px; color: var(--paper-dim); letter-spacing: .1em; }

footer {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(217,205,176,.2);
  padding: 44px clamp(16px, 5vw, 48px) 54px; text-align: center;
}
.aviso-legal { font-size: 12.5px; line-height: 1.7; color: var(--paper-dim); max-width: 78ch; margin: 0 auto 26px; }
.creditos { font-family: var(--f-type); font-size: 14px; line-height: 2; color: var(--paper); margin-bottom: 18px; }
.creditos b { font-family: var(--f-stencil); font-weight: 400; letter-spacing: .16em; color: var(--lamp); }
.pie-marca { font-family: var(--f-stencil); font-size: 12px; letter-spacing: .3em; color: var(--paper-dim); }

/* ════════════════ Ritmo vertical constante ════════════════
   El hueco entre secciones debe ser SIEMPRE el mismo (el padding
   de .oscuro). Por eso el último elemento de cada sección no puede
   dejar margen inferior extra, tenga la clase que tenga. */
section.oscuro .marco > :last-child { margin-bottom: 0 !important; }

/* ════════════════ Aparición al hacer scroll ════════════════ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ════════════════ Responsive ════════════════ */
@media (max-width: 820px) {
  .rejilla { grid-template-columns: 1fr 1fr; }
  .dos-col, .dos-col.invertida { grid-template-columns: 1fr; }
  .slot.portada { max-width: 300px; }
  #juego .slot.pantalla { order: -1; }
  .bar-brand { font-size: 10px; }
}
@media (max-width: 520px) {
  .rejilla { grid-template-columns: 1fr; }
  .numero { font-size: 56px; }
  .linea .tachado::after { content: "DESCENSURAR"; }
}

  


/* ════════════════ Movimiento reducido ════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .alerta-scroll span { animation: none; }
  #btn-campana.suena svg { animation: none; }
  #bar { transition: none; }
}

/* ════════ EL CUADERNO (una página arrancada) ════════ */
.cuaderno {
  width: min(680px, 100%); margin: 34px auto 0;
  background: linear-gradient(172deg, #e8dcc0, #efe5ca 55%, #d6c7a3);
  color: #241c12; padding: clamp(26px, 5vw, 46px);
  transform: rotate(-.5deg);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  position: relative;
}
.cuaderno::before {           /* el borde arrancado */
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px;
  background:
    linear-gradient(135deg, transparent 55%, #e8dcc0 56%) 0 0 / 14px 10px repeat-x,
    linear-gradient(225deg, transparent 55%, #e8dcc0 56%) 7px 0 / 14px 10px repeat-x;
}
.cuaderno p {
  font-family: "IM Fell English", serif; font-style: italic;
  font-size: clamp(17px, 2.6vw, 21px); line-height: 1.8;
}
.cuaderno p + p { margin-top: 14px; }
.cuaderno .firma {
  margin-top: 22px; text-align: right;
  font-family: "Special Elite", monospace; font-style: normal;
  font-size: 13px; letter-spacing: .14em; color: #5c4f38;
}

/* ════════ EL PORTAL DE IDIOMA (raíz) ════════ */
.portal {
  min-height: 100svh; display: grid; place-items: center; padding: 24px;
  text-align: center;
}
.portal-caja {
  width: min(560px, 100%);
  border: 1px solid rgba(217,205,176,.35);
  background: rgba(20,15,10,.72);
  padding: clamp(30px, 6vw, 54px);
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
}
.portal-ref {
  font-family: "Allerta Stencil", sans-serif; font-size: 11px;
  letter-spacing: .3em; color: #8b7ba8; margin-bottom: 18px;
}
.portal h1 {
  font-family: "Allerta Stencil", sans-serif;
  font-size: clamp(30px, 7vw, 44px); letter-spacing: .06em;
  color: #efe5ca; line-height: 1.15; margin-bottom: 8px;
}
.portal-sub { color: #b9ab8d; font-style: italic; font-family: "IM Fell English", serif; margin-bottom: 30px; }
.portal-tags { display: grid; gap: 14px; }
.portal-tag {
  display: block; text-decoration: none;
  border: 1px solid rgba(217,205,176,.45);
  padding: 18px 16px 14px;
  background: linear-gradient(172deg, rgba(226,214,186,.06), transparent);
  transition: border-color .25s, transform .25s, background .25s;
}
.portal-tag:hover { border-color: #efe5ca; transform: translateY(-2px); background: rgba(226,214,186,.08); }
.portal-tag .tag-lang {
  display: block; font-family: "Allerta Stencil", sans-serif;
  font-size: 22px; letter-spacing: .14em; color: #efe5ca;
}
.portal-tag .tag-sub { display: block; margin-top: 5px; font-size: 12.5px; color: #b9ab8d; font-style: italic; }
.portal-pie { margin-top: 26px; font-size: 11.5px; color: #6f6349; }

/* =======================================
   MEMORIAL
======================================= */

#memorial{
position:fixed;
inset:0;
background:#000;
display:flex;
justify-content:center;
align-items:center;
opacity:0;
pointer-events:none;
transition:opacity .8s;
z-index:999999;
}

#memorial.visible{
opacity:1;
pointer-events:auto;
}

#memorial .mensaje{
font-family:'Cormorant Garamond',serif;
font-size:clamp(2.4rem,5vw,4.5rem);
color:#b9a5dc;
text-align:center;
opacity:0;
transition:opacity 2s ease;
}

#memorial .mensaje.mostrarMensaje{
opacity:1;
}



/* =======================================
   POST CAMPANA
======================================= */

#post-campana{
opacity:0;
max-height:0;
overflow:hidden;
transition:.8s;
}

#post-campana.visible{
opacity:1;
max-height:500px;
}

.fadeOut{
opacity:0;
transition:opacity .8s;
}





/* ════════════════════════════════════════════════════════════
   EL LIBRO DE LOS NOMBRES — la sala de las llamas
   Cada nombre escrito es una llama encendida.
   Las brasas apagadas del fondo son quienes aún no están escritos.
   La sala tiene tres densidades (d1/d2/d3): cuantos más nombres,
   más pequeñas y juntas las llamas. Se ajusta sola desde landing.js.
   ════════════════════════════════════════════════════════════ */

#nombres-archivo {
  background: linear-gradient(180deg, var(--ink), #100c14 55%, var(--ink));
}

/* ─── La sala ─── */
#sala-nombres {
  position: relative;
  width: min(980px, 100%);
  margin: 46px auto 26px;
  min-height: 360px;
  background:
    radial-gradient(ellipse 120% 90% at 50% 108%, rgba(223,164,88,.10), transparent 55%),
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(139,123,168,.08), transparent 60%),
    #0a0806;
  border: 1px solid rgba(217,205,176,.22);
  box-shadow: inset 0 0 80px rgba(0,0,0,.85), 0 24px 60px rgba(0,0,0,.55);
  overflow: hidden;
}

/* La luz de la sala respira muy despacio, como un hogar */
#sala-nombres::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 110% 75% at 50% 104%, rgba(223,164,88,.12), transparent 62%);
  animation: respiroSala 9s ease-in-out infinite;
}
@keyframes respiroSala { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* Las brasas de los que aún no están escritos */
.brasas { position: absolute; inset: 0; pointer-events: none; }
.brasas span {
  position: absolute;
  width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: #9d7a48;
  opacity: .22;
  animation: brasa 6s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes brasa {
  0%, 100% { opacity: .12; }
  50%      { opacity: .42; }
}

/* ─── Las llamas: velas de verdad ───
   Cada vela tiene: charco de luz en el suelo, cuerpo de cera con
   borde derretido y un reguero, mecha con la brasa viva en la punta,
   y una llama en capas (cuerpo naranja, corazón blanco, base azulada)
   que parpadea a su propio ritmo. El halo respira con otro período
   para que la luz nunca parezca mecánica. */
.llamas { position: absolute; inset: 0; z-index: 2; contain: layout style; }
.llama {
  position: absolute; transform: translate(-50%, -50%);
  width: 56px; height: 76px;             /* área táctil generosa (densidad d1) */
  background: transparent; border: 0; padding: 0; cursor: pointer;
  opacity: 0;
  transition: opacity 1.2s ease;
  transition-delay: var(--e, 0s);
}
#sala-nombres.encendida .llama { opacity: 1; }

/* ─── La vela secreta ───
   No pertenece a la retícula ni a la oleada de encendido: solo se
   materializa cuando alguien escribe su nombre en el buscador, y
   se desvanece al apagarse. Quien sabe, sabrá. */
.llama.secreta,
#sala-nombres.encendida .llama.secreta {
  opacity: 0; pointer-events: none;
  transition: opacity 1.4s ease; transition-delay: 0s;
}
.llama.secreta.vista,
#sala-nombres.encendida .llama.secreta.vista {
  opacity: 1; pointer-events: auto;
}
.llama:focus-visible { outline: 1px dashed rgba(217,205,176,.6); outline-offset: 3px; }

.vela { position: relative; display: block; width: 100%; height: 100%; }

/* La luz que la vela derrama sobre el suelo de la sala */
.charco {
  position: absolute; left: 50%; bottom: 1px;
  width: 58px; height: 13px; transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(255,186,98,.20), rgba(255,186,98,0) 68%);
  filter: blur(3px);
}

/* El resplandor de la llama: respira despacio, con su propio pulso */
.halo {
  position: absolute; left: 50%; bottom: 4px;
  width: 74px; height: 74px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,196,110,.38), rgba(255,170,70,.13) 45%, rgba(255,150,50,0) 70%);
  filter: blur(5px);
  animation: respiro var(--t2, 5.3s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes respiro { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }

/* La cera */
.cera {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  width: 9px; height: 20px;
  border-radius: 2px;
  background:
    linear-gradient(265deg, rgba(255,219,160,.42), rgba(255,219,160,0) 46%),
    linear-gradient(96deg, rgba(0,0,0,0) 52%, rgba(74,42,12,.42) 90%),
    linear-gradient(180deg, #f4e4c4 0%, #e0c28d 58%, #c39a63 100%);
  box-shadow:
    inset 0 -3px 4px rgba(96,52,14,.4),
    inset 0 1.5px 2px rgba(255,246,220,.65),
    0 3px 5px rgba(0,0,0,.55);
}
/* El borde derretido de arriba */
.cera::before {
  content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -2.5px; height: 6px;
  border-radius: 50% 50% 46% 54% / 92% 92% 42% 42%;
  background:
    radial-gradient(ellipse 58% 100% at 40% 26%, #fff3d6, #ecca97 68%, #d3ab74);
  box-shadow: inset 0 -1.5px 2px rgba(150,95,35,.5);
}
/* Un reguero de cera que bajó por el costado */
.cera::after {
  content: ""; position: absolute; right: 0.5px; top: 3px;
  width: 2.5px; height: 7px; border-radius: 2px 2px 2.5px 2.5px;
  background: linear-gradient(180deg, #eed6a8, #dcb87e);
  box-shadow: inset -1px 0 1px rgba(120,70,20,.35);
}

/* La mecha, con la brasa viva en la punta */
.mecha {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%) rotate(5deg);
  width: 1.6px; height: 5px; border-radius: 1px;
  background: linear-gradient(180deg, #1d0f04, #4a2a10 55%, #8a5420);
}
.mecha::after {
  content: ""; position: absolute; left: 50%; top: -1.6px; transform: translateX(-50%);
  width: 3.4px; height: 3.4px; border-radius: 50%;
  background: radial-gradient(circle, #ffe0a8, #e88020 58%, rgba(170,70,10,0) 78%);
}

/* La combustión: llama + halo. Crece desde la mecha al acariciarla,
   y se inclina cuando una ráfaga de aire cruza la sala. */
.combustion {
  position: absolute; inset: 0;
  transform-origin: 50% 100%;
  transition: transform .35s ease;
}

/* La llama, en capas */
.fuego {
  position: absolute; left: 50%; bottom: 25px;
  width: 12px; height: 22px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  filter: blur(.4px);
}
/* El cuerpo: una lágrima naranja con el nacimiento azulado.
   (Cuadrado girado 45° con una sola esquina viva: la punta.) */
.fuego::before {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 100%; aspect-ratio: .78;
  transform: translateX(-50%) rotate(-45deg);
  border-radius: 50% 3px 50% 50%;
  background:
    radial-gradient(circle at 30% 74%, rgba(114,146,255,.55), rgba(114,146,255,0) 24%),
    radial-gradient(circle at 40% 60%, #fff0c2, rgba(255,240,194,0) 44%),
    linear-gradient(45deg, #ffd787 6%, #f5ae4a 36%, #e9852a 66%, #bf5719 96%);
  box-shadow:
    0 0 13px 3px rgba(255,184,90,.5),
    0 0 42px 12px rgba(255,164,64,.15);
}
/* El corazón blanco de la llama */
.fuego::after {
  content: ""; position: absolute; left: 50%; bottom: 1px;
  width: 54%; aspect-ratio: .86;
  transform: translateX(-50%) rotate(-45deg);
  border-radius: 50% 3px 50% 50%;
  background:
    radial-gradient(circle at 42% 58%, #fffdf3, rgba(255,251,232,.92) 40%, rgba(255,224,150,0) 76%);
  filter: blur(.5px);
}
.llama.arde .fuego {
  animation: arder var(--t, 3.2s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes arder {
  0%, 100% { transform: translateX(-50%) scaleY(1)    scaleX(1)    rotate(0); }
  17%      { transform: translateX(-50%) scaleY(1.08) scaleX(.96) rotate(1.6deg); }
  35%      { transform: translateX(-50%) scaleY(.93)  scaleX(1.04) rotate(-2deg); }
  53%      { transform: translateX(-50%) scaleY(1.06) scaleX(.97) rotate(1.2deg); }
  71%      { transform: translateX(-50%) scaleY(.96)  scaleX(1.02) rotate(-1deg); }
  87%      { transform: translateX(-50%) scaleY(1.04) scaleX(.99) rotate(.7deg); }
}

/* De cuando en cuando, una ráfaga de aire recorre la sala entera */
#sala-nombres.racha .combustion { transform: skewX(-4.5deg) scaleY(.96); transition: transform .5s ease; }

/* Al acercarse, la llama crece; al pulsarla, se aviva de verdad */
.llama:hover .combustion, .llama:focus-visible .combustion { transform: scale(1.22); }
.llama.aviva .combustion { transform: scale(1.5); }
.llama.aviva .halo { opacity: 1; filter: blur(6px) brightness(1.4); }

/* La onda de luz del acto de memoria */
.onda {
  position: absolute; z-index: 1; pointer-events: none;
  width: 190px; height: 190px; border-radius: 50%;
  border: 1px solid rgba(223,164,88,.85);
  transform: translate(-50%, -50%) scale(.04);
  animation: onda 1.5s ease-out forwards;
}
@keyframes onda {
  0%   { transform: translate(-50%, -50%) scale(.04); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(1);   opacity: 0; }
}
.llama.hallada .halo {
  background: radial-gradient(circle,
    rgba(206,178,255,.42), rgba(160,130,230,.15) 48%, rgba(150,120,220,0) 72%);
  opacity: 1;
}

/* La vela que un visitante rescató del olvido: ámbar con un susurro heliotropo */
.llama.tuya .halo {
  background: radial-gradient(circle,
    rgba(255,196,110,.36), rgba(190,150,255,.14) 52%, rgba(160,130,230,0) 74%);
}

/* ─── Tres densidades: pocas velas grandes → miles de luces pequeñas ─── */
.d2 .llama { width: 42px; height: 58px; }
.d2 .cera { width: 9px; height: 15px; bottom: 3px; }
.d2 .cera::after { display: none; }
.d2 .mecha { bottom: 16px; height: 4px; }
.d2 .fuego { bottom: 19px; width: 11px; height: 19px; filter: blur(.35px); }
.d2 .halo { width: 54px; height: 54px; bottom: 2px; filter: blur(4px); }
.d2 .charco { width: 46px; height: 11px; }

/* d3: miles de nombres. Sin cera ni mecha: cada luz es un aliento. */
.d3 .llama { width: 20px; height: 24px; }
.d3 .cera, .d3 .mecha, .d3 .charco, .d3 .halo { display: none; }
.d3 .fuego {
  bottom: 50%; width: 7px; height: 11px;
  transform: translate(-50%, 50%);
  filter: none;
}
.d3 .fuego::before {
  width: 100%; aspect-ratio: .8;
  box-shadow: none;
  background:
    radial-gradient(circle at 34% 66%, #ffedbe, rgba(255,237,190,0) 55%),
    linear-gradient(45deg, #f0ba60 22%, #e0913f 58%, rgba(217,123,47,.6) 85%, rgba(189,92,31,.35));
}
.d3 .fuego::after { display: none; }
.d3 .llama.arde .fuego { animation: arder3 var(--t, 3.2s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes arder3 {
  0%, 100% { transform: translate(-50%, 50%) scaleY(1); }
  30%      { transform: translate(-50%, 50%) scaleY(1.12) skewX(2deg); }
  60%      { transform: translate(-50%, 50%) scaleY(.92) skewX(-2deg); }
}

/* ─── La placa: el nombre que la llama te dice ─── */
.placa {
  position: absolute; z-index: 5; margin: 0; pointer-events: none;
  transform: translate(-50%, -100%) rotate(-1deg);
  opacity: 0; transition: opacity .55s ease;
  background: linear-gradient(172deg, #e8dcc0, #efe5ca 60%, #dccfa9);
  color: #241c12;
  font-family: var(--f-type); font-size: 13px; letter-spacing: .05em;
  line-height: 1.4; white-space: nowrap;
  padding: 7px 13px;
  box-shadow: 3px 4px 0 rgba(0,0,0,.45);
}
.placa.viva { opacity: 1; }
.placa.abajo { transform: translate(-50%, -100%) rotate(1deg); }
.placa[hidden] { display: none; }

/* ─── La frase que surge al avivar una llama ─── */
.frase-llama {
  position: absolute; z-index: 5; margin: 0; pointer-events: none;
  transform: translateX(-50%);
  max-width: min(520px, 86%);
  text-align: center;
  font-family: var(--f-novel); font-style: italic;
  font-size: clamp(17px, 2.6vw, 22px); line-height: 1.55;
  color: #ddd1b4;
  text-shadow: 0 0 26px rgba(223,164,88,.28);
  opacity: 0; transition: opacity .9s ease;
}
.frase-llama.viva { opacity: 1; }
.frase-llama[hidden] { display: none; }

/* ─── La penumbra: al recordar a alguien, la sala entera se atenúa
       y solo queda su llama. La clase .lista (que la sala recibe al
       terminar la oleada de encendido) anula los retardos de entrada
       para que la penumbra baje y suba de golpe, no en oleada. ─── */
#sala-nombres.lista .llama { transition: opacity .7s ease; transition-delay: 0s; }
#sala-nombres.penumbra .llama:not(.aviva) { opacity: .08; }
.brasas, .sala-pie { transition: opacity .7s ease; }
#sala-nombres.penumbra .brasas { opacity: .25; }
#sala-nombres.penumbra .sala-pie { opacity: .25; }

.sala-pie {
  position: absolute; bottom: 14px; left: 0; right: 0; z-index: 1;
  text-align: center;
  font-family: var(--f-stencil); font-size: 10px; letter-spacing: .32em;
  color: rgba(217,205,176,.35);
}

#nombres-count { color: var(--lamp); }
.apagadas-nota { font-size: clamp(14px, 2vw, 16.5px); color: var(--paper-dim); }
.enlace-archivo { color: var(--helio-luz); text-decoration-color: rgba(183,168,214,.5); }
.enlace-archivo:hover { color: #d9cdf0; }

/* ─── ¿Buscas a alguien? ─── */
.busca-caja { margin: 6px auto 30px; }
.busca-label {
  display: block; margin-bottom: 10px;
  font-family: var(--f-novel); font-style: italic;
  font-size: clamp(16px, 2.4vw, 19px); color: #cfc3a6;
}
#busca {
  width: min(340px, 86%);
  background: transparent; color: var(--paper);
  border: 0; border-bottom: 1px solid rgba(217,205,176,.4);
  font-family: var(--f-type); font-size: 16px; letter-spacing: .05em;
  text-align: center; padding: 9px 6px;
  transition: border-color .3s ease;
}
#busca:focus { outline: none; border-color: var(--lamp); }
#busca::placeholder { color: rgba(169,154,120,.65); }
.busca-aviso {
  display: block; margin-top: 10px; min-height: 1.3em;
  font-family: var(--f-type); font-size: 13px; color: var(--paper-dim);
}

/* ─── Rescata un nombre del olvido ─── */
.rescata-caja { margin: 48px auto 42px; }
.rescata-label {
  display: block; margin-bottom: 12px;
  font-family: var(--f-novel); font-style: italic;
  font-size: clamp(16px, 2.4vw, 19px); color: #cfc3a6;
}
#rescata-form { margin-top: 18px; display: grid; gap: 14px; justify-items: center; }
#rescata-form[hidden] { display: none; }
#rescata-form input {
  width: min(420px, 92%);
  background: transparent; color: var(--paper);
  border: 0; border-bottom: 1px solid rgba(217,205,176,.4);
  font-family: var(--f-type); font-size: 15px; letter-spacing: .04em;
  text-align: center; padding: 9px 6px;
  transition: border-color .3s ease;
}
#rescata-form input:focus { outline: none; border-color: var(--lamp); }
#rescata-form input::placeholder { color: rgba(169,154,120,.6); }
.rescata-acciones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ─── Compartir la vela encendida ─── */
.comparte-llama {
  position: absolute; z-index: 6; transform: translateX(-50%);
  background: rgba(14,10,6,.6); border: 1px solid rgba(223,164,88,.55);
  color: var(--lamp); font-family: var(--f-type); font-size: 12px; letter-spacing: .08em;
  padding: 6px 13px; cursor: pointer; white-space: nowrap;
  opacity: 0; transition: opacity .9s ease, background .25s ease, border-color .25s ease;
}
.comparte-llama.viva { opacity: .92; }
.comparte-llama:hover, .comparte-llama:focus-visible { background: rgba(223,164,88,.16); opacity: 1; }
.comparte-llama[hidden] { display: none; }

/* ─── El brindis: el pequeño aviso que confirma el gesto ─── */
#brindis {
  position: fixed; left: 50%; bottom: 26px; z-index: 999998;
  transform: translate(-50%, 12px);
  background: rgba(23,16,9,.95); color: var(--paper);
  border: 1px solid rgba(223,164,88,.5);
  font-family: var(--f-type); font-size: 13px; letter-spacing: .05em; text-align: center;
  max-width: min(480px, 90vw);
  padding: 10px 18px; opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
#brindis.visible { opacity: 1; transform: translate(-50%, 0); }

/* ════════════════════════════════════════════════════════════
   LA GUARDIA QUE NO TERMINÓ — la lámpara y el parte
   La lámpara de la enfermera: la misma lágrima que las velas
   del memorial, pero dentro de un farol y QUIETA. Sin parpadeo:
   esa quietud es la historia (ellos no abandonaron la guardia).
   ════════════════════════════════════════════════════════════ */
.lampara {
  position: relative;
  width: 64px; height: 112px;
  margin: 36px auto 6px;
  filter: drop-shadow(0 0 30px rgba(223,164,88,.20));
}
.lampara span { position: absolute; display: block; }
/* el asa de la que colgaba en las rondas de noche */
.lampara .asa {
  left: 50%; top: 0; transform: translateX(-50%);
  width: 32px; height: 28px;
  border: 2px solid #4a3a26; border-bottom: none;
  border-radius: 16px 16px 0 0;
}
.lampara .tapa {
  left: 50%; top: 25px; transform: translateX(-50%);
  width: 44px; height: 12px;
  background: linear-gradient(#5a4730, #33271a);
  border-radius: 6px 6px 2px 2px;
}
.lampara .cristal {
  left: 50%; top: 37px; transform: translateX(-50%);
  width: 40px; height: 57px;
  border: 2px solid #4a3a26;
  border-radius: 10px / 14px;
  background:
    radial-gradient(closest-side at 50% 60%,
      rgba(255,241,203,.55), rgba(246,196,105,.28) 48%,
      rgba(217,123,47,.10) 76%, rgba(20,14,8,0));
  box-shadow:
    inset 0 0 14px rgba(223,164,88,.35),
    0 0 22px 6px rgba(223,164,88,.28),
    0 0 70px 24px rgba(223,164,88,.10);
}
.lampara .pie-lampara {
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: 48px; height: 14px;
  background: linear-gradient(#5a4730, #2b2014);
  border-radius: 4px 4px 8px 8px;
}
/* la llama de dentro: idéntica a las del memorial, pero inmóvil */
.luz-quieta {
  left: 50%; top: 50%;
  width: 13px; height: 21px;
  transform: translate(-50%, -44%);
}
.luz-quieta::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  height: 70%; aspect-ratio: 1;
  transform: translate(-50%, -50%) scaleX(.62) rotate(-45deg);
  border-radius: 50% 0 50% 50%;
  background:
    radial-gradient(circle at 34% 66%, #fff9e0, rgba(255,249,224,0) 48%),
    linear-gradient(45deg, #f6c469 16%, #eda449 50%, #d97b2f 78%, #bd5c1f);
}

/* El parte de guardia: nombre completo, oficio, lugar */
.parte-guardia {
  list-style: none;
  margin: 30px auto 0; padding: 0;
  max-width: 560px;
}
.parte-guardia li {
  padding: 12px 6px;
  border-bottom: 1px solid rgba(217,205,176,.14);
  font-family: var(--f-type);
  font-size: clamp(13px, 2vw, 15px);
  letter-spacing: .04em;
  color: var(--paper-dim);
}
.parte-guardia li:first-child { border-top: 1px solid rgba(217,205,176,.14); }
.parte-guardia .quien { color: var(--paper); }
.guardia-nota {
  margin-top: 30px;
  font-style: italic; color: #cfc3a6;
}

@media (max-width: 640px) {
  .placa { font-size: 12px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .fuego, .brasas span, .llama.arde .fuego, .onda, .halo, #sala-nombres::after { animation: none; }
  .llama, #sala-nombres.lista .llama { transition: none; opacity: 1; }
  .llama.secreta { transition: none; opacity: 0; }
  .llama.secreta.vista { opacity: 1; }
  #sala-nombres.penumbra .llama:not(.aviva) { opacity: .08; }
  .placa, .frase-llama, .brasas, .sala-pie, .combustion, .comparte-llama, #brindis { transition: none; }
}

/* ─── El contador de los 90: odómetro ámbar en el pie ─── */
.contador90 {
  margin-top: 34px;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 10px;
}
.contador90-texto {
  font-family: var(--f-type);
  font-size: 11px; letter-spacing: .22em;
  color: var(--paper-dim);
}
.contador90-digitos { display: inline-flex; gap: 2px; }
.contador90-digitos span {
  display: inline-grid; place-items: center;
  min-width: 17px; padding: 4px 2px;
  background: #16100a;
  border: 1px solid rgba(223,164,88,.35);
  border-radius: 2px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.75), 0 0 10px rgba(223,164,88,.12);
  font-family: var(--f-type);
  font-size: 15px; line-height: 1;
  color: var(--lamp);
  text-shadow: 0 0 6px rgba(223,164,88,.55);
}

/* ─── Puente a la biblioteca, al pie del memorial ─── */
.pie-biblioteca {
  margin-top: 34px; text-align: center;
  font-family: var(--f-novel); font-style: italic;
  font-size: clamp(15px, 2.2vw, 18px); color: var(--paper-dim);
  line-height: 1.7;
}
.pie-biblioteca a {
  display: inline-block; margin-top: 6px;
  font-family: var(--f-type); font-style: normal;
  font-size: 14px; letter-spacing: .05em;
  color: var(--lamp); text-decoration: none;
  border-bottom: 1px solid rgba(223,164,88,.4); padding-bottom: 3px;
  transition: color .3s;
}
.pie-biblioteca a:hover { color: #f3d9a6; }