/* =========================================================================
   EL LIBRO OSCURO · ESTILOS
   Concepto: la web es el libro. Cada sección es un capítulo y cambiar de
   sección pasa la página en 3D. Paleta sacada del arte: negro de tinta,
   hueso, bronce y sangre.
   ========================================================================= */
:root{
  --negro:#0b0809;
  --carbon:#141012;
  --carbon-2:#1c1618;
  --linea:#3a2c2a;
  --hueso:#ebe1ce;
  --ceniza:#a8998a;
  --bronce:#c79a5b;
  --bronce-claro:#e2bf86;
  --sangre:#a51c28;
  --sangre-viva:#d6323f;

  --f-titulo:"Cinzel", "Trajan Pro", "Times New Roman", serif;
  --f-texto:"Spectral", Georgia, "Times New Roman", serif;
  --f-libro:"IM Fell English", Georgia, serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;

  --barra:64px;
  --ancho:1180px;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--negro);color:var(--hueso);font-family:var(--f-texto);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--bronce-claro);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--hueso)}
h1,h2,h3,h4{font-family:var(--f-titulo);font-weight:600;letter-spacing:.04em;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--bronce);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;z-index:100;background:var(--hueso);color:var(--negro);padding:8px 12px}
.saltar:focus{left:8px}
.ojo{font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sangre-viva)}
.vacio{color:var(--ceniza);font-style:italic;opacity:.75}

/* ---------- Barra superior ---------- */
.barra{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--barra) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;display:flex;align-items:center;gap:20px;background:linear-gradient(to bottom,rgba(11,8,9,.96),rgba(11,8,9,.82));backdrop-filter:blur(10px);border-bottom:1px solid rgba(199,154,91,.18)}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--hueso);font-family:var(--f-titulo);font-weight:700;letter-spacing:.12em;font-size:15px;white-space:nowrap}
.marca img{width:40px;height:40px;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.marca:hover img{transform:rotate(180deg)}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{display:flex;align-items:center;gap:7px;padding:8px 10px;color:var(--ceniza);text-decoration:none;font-family:var(--f-titulo);font-size:12.5px;letter-spacing:.08em;position:relative;white-space:nowrap}
.nav a i{font-style:normal;color:var(--sangre-viva);font-size:10px}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1px;background:var(--bronce);transform:scaleX(0);transition:transform .35s}
.nav a:hover,.nav a.activo{color:var(--hueso)}
.nav a.activo::after,.nav a:hover::after{transform:scaleX(1)}
.nav-renacidos img{width:28px;height:28px;border-radius:50%;mix-blend-mode:screen}
.nav a.nav-renacidos{color:var(--bronce-claro);margin-left:6px;border-left:1px solid var(--linea);padding-left:14px}
.menu-btn{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.menu-btn span{display:block;height:1px;background:var(--hueso);margin:6px 0;transition:transform .3s,opacity .3s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){
  .menu-btn{display:block}
  .nav{position:fixed;top:calc(var(--barra) + env(safe-area-inset-top,0px));left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:0;padding:20px var(--gutter);background:rgba(11,8,9,.98);transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);overflow-y:auto}
  .nav.abierto{transform:none}
  .nav a{font-size:18px;padding:14px 4px;border-bottom:1px solid var(--linea)}
  .nav a i{width:28px;font-size:12px}
  .nav a::after{display:none}
  .nav a.nav-renacidos{margin:0;border-left:0;padding-left:4px}
}

/* ---------- Escena y hojas ---------- */
.escena{position:relative;padding-top:calc(var(--barra) + env(safe-area-inset-top,0px));min-height:100vh;outline:none}
.pagina{position:relative;min-height:calc(100vh - var(--barra));background:var(--negro)}
.volteo{position:fixed;left:0;right:0;bottom:0;top:calc(var(--barra) + env(safe-area-inset-top,0px));z-index:40;perspective:2600px;pointer-events:none;overflow:hidden}
.hoja{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.hoja.adelante{transform-origin:left center}
.hoja.atras{transform-origin:right center}
.hoja-cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:var(--negro)}
.hoja-dentro{position:absolute;left:0;right:0;top:0}
.hoja-dorso{transform:rotateY(180deg);background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.15) 30%,rgba(0,0,0,.5)),url("../img/textura.jpg") center/cover}
.hoja-dorso::after{content:"";position:absolute;inset:0;background:url("../img/sello.webp") center/min(40vw,320px) no-repeat;opacity:.18}
.hoja-luz{position:absolute;inset:0;pointer-events:none;opacity:0}
.hoja.adelante .hoja-luz{background:linear-gradient(90deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75))}
.hoja.atras .hoja-luz{background:linear-gradient(270deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.75))}
.sombra-bajo{position:fixed;inset:0;z-index:39;pointer-events:none;background:#000}

/* ---------- Componentes comunes ---------- */
.contenedor{max-width:var(--ancho);margin:0 auto;padding-inline:var(--gutter)}
.cabecera{position:relative;height:clamp(260px,46vh,480px);overflow:hidden;display:flex;align-items:flex-end}
.cabecera-img{position:absolute;inset:-8% 0 0 0;background-size:cover;background-position:center;will-change:transform}
.cabecera::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,8,9,.1) 0%,rgba(11,8,9,.35) 55%,var(--negro) 100%)}
.cabecera-texto{position:relative;z-index:1;width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter) 36px;display:grid;gap:10px}
.cabecera h1{font-size:clamp(38px,7vw,84px);font-weight:600;text-shadow:0 2px 30px rgba(0,0,0,.8)}
.cabecera p{color:var(--ceniza);max-width:60ch;font-size:18px}
.seccion{padding-block:56px}
.seccion-titulo{display:flex;align-items:baseline;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.seccion-titulo h2{font-size:clamp(24px,3vw,34px)}
.seccion-titulo .ojo{order:-1;width:100%}
.regla{height:1px;background:linear-gradient(90deg,transparent,var(--bronce) 20%,var(--bronce) 80%,transparent);opacity:.35;border:0;margin:0}
.boton{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;font-family:var(--f-titulo);font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--hueso);border:1px solid var(--bronce);background:rgba(11,8,9,.4);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s}
.boton:hover{background:var(--bronce);color:var(--negro);box-shadow:0 0 30px rgba(199,154,91,.35)}
.boton.sangre{border-color:var(--sangre-viva);background:var(--sangre)}
.boton.sangre:hover{background:var(--sangre-viva);color:var(--hueso);box-shadow:0 0 30px rgba(214,50,63,.45)}
.folio{text-align:center;font-family:var(--f-titulo);color:var(--linea);letter-spacing:.3em;padding:40px 0 10px;font-size:14px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--linea);background:transparent;color:var(--ceniza);font-family:var(--f-titulo);font-size:12px;letter-spacing:.08em;cursor:pointer;transition:all .25s}
.chip img{width:22px;height:22px;border-radius:50%;mix-blend-mode:screen}
.chip:hover{color:var(--hueso);border-color:var(--bronce)}
.chip[aria-pressed="true"]{color:var(--negro);background:var(--bronce);border-color:var(--bronce)}
.chip[aria-pressed="true"] img{mix-blend-mode:multiply}
.chip b{font-family:var(--f-mono);font-weight:400;font-size:11px;opacity:.7}

/* Tarjetas con inclinación 3D */
.inclina{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform;position:relative}
.inclina .brillo{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,230,190,.18),transparent 45%);opacity:0;transition:opacity .4s;z-index:3}
.inclina:hover .brillo{opacity:1}
.emblema{mix-blend-mode:screen}

/* ---------- Portada ---------- */
.portada{position:relative;height:calc(100vh - var(--barra));min-height:560px;max-height:980px;overflow:hidden;perspective:1400px;display:grid;align-items:center}
.portada-fondo{position:absolute;inset:-4%;background:url("../img/portada-libro.jpg") center/cover;transform-style:preserve-3d;will-change:transform;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.portada-luz{position:absolute;inset:0;background:radial-gradient(circle at var(--lx,58%) var(--ly,45%),rgba(255,190,120,.16),transparent 35%);pointer-events:none;mix-blend-mode:screen}
.portada::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,8,9,.92) 0%,rgba(11,8,9,.6) 38%,rgba(11,8,9,.05) 70%),linear-gradient(to top,var(--negro),transparent 30%);pointer-events:none}
.brasas{position:absolute;inset:0;z-index:2;pointer-events:none}
.portada-texto{position:relative;z-index:3;max-width:var(--ancho);margin:0 auto;width:100%;padding:0 var(--gutter);display:grid;gap:20px;justify-items:start}
.portada h1{font-size:clamp(46px,9vw,124px);line-height:.95;font-weight:700;letter-spacing:.02em;max-width:8ch;text-shadow:0 4px 40px rgba(0,0,0,.9)}
.portada h1 em{display:block;font-style:normal;color:var(--bronce-claro);font-size:clamp(13px,1.5vw,19px);letter-spacing:.34em;font-weight:400;margin-bottom:18px;white-space:nowrap;text-transform:uppercase}
.portada .lede{font-family:var(--f-libro);font-style:italic;font-size:clamp(18px,2.2vw,23px);color:var(--hueso);max-width:34ch;opacity:.9}
.portada-acciones{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.portada-baja{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--ceniza);text-transform:uppercase;display:grid;justify-items:center;gap:8px}
.portada-baja::after{content:"";width:1px;height:34px;background:linear-gradient(var(--bronce),transparent);animation:gotea 2.4s infinite}
@keyframes gotea{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.ultima{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center}
.ultima-img{aspect-ratio:16/10;background-size:cover;background-position:center;border:1px solid var(--linea);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.ultima-texto{display:grid;gap:14px}
.ultima-texto h3{font-size:clamp(26px,3.2vw,40px)}
.ultima-texto p{color:var(--ceniza)}
@media (max-width:760px){.ultima{grid-template-columns:1fr}}

.capitulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;perspective:1200px}
.capitulo{display:grid;align-content:end;min-height:300px;padding:22px;text-decoration:none;color:var(--hueso);border:1px solid var(--linea);background:var(--carbon);overflow:hidden}
.capitulo-img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);transform:scale(1.04)}
.capitulo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(11,8,9,.96) 10%,rgba(11,8,9,.2) 70%)}
.capitulo:hover .capitulo-img{transform:scale(1.12)}
.capitulo>div{position:relative;z-index:2;display:grid;gap:6px;transform:translateZ(40px)}
.capitulo .num{font-family:var(--f-titulo);color:var(--sangre-viva);font-size:14px;letter-spacing:.2em}
.capitulo h3{font-size:24px}
.capitulo p{color:var(--ceniza);font-size:15px}
.capitulo:hover{border-color:var(--bronce)}

/* ---------- Crónica ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.entradas{display:grid;gap:0;border-top:1px solid var(--linea)}
.entrada{display:grid;grid-template-columns:120px 56px minmax(0,1fr) auto;gap:22px;align-items:center;padding:24px 8px;border-bottom:1px solid var(--linea);text-decoration:none;color:var(--hueso);transition:background .3s,padding .3s}
.entrada:hover{background:linear-gradient(90deg,rgba(165,28,40,.12),transparent 70%);padding-left:18px}
.entrada time{font-family:var(--f-mono);font-size:12.5px;color:var(--ceniza);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.entrada time b{display:block;color:var(--sangre-viva);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.entrada img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.entrada h3{font-size:clamp(20px,2.4vw,26px);margin-bottom:6px}
.entrada p{color:var(--ceniza);font-size:15.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.entrada .flecha{font-family:var(--f-titulo);color:var(--bronce);font-size:22px;transition:transform .3s}
.entrada:hover .flecha{transform:translateX(6px)}
.entrada[hidden]{display:none}
@media (max-width:640px){.entrada{grid-template-columns:44px minmax(0,1fr);gap:14px}.entrada time{grid-column:1/-1;order:-1}.entrada img{width:44px;height:44px}.entrada .flecha{display:none}}
.sin-entradas{padding:28px 8px;color:var(--ceniza);font-style:italic}

.articulo{max-width:720px;margin:0 auto;padding:56px var(--gutter) 30px}
.articulo-cab{display:grid;justify-items:center;text-align:center;gap:14px;margin-bottom:44px}
.articulo-cab img{width:110px;height:110px;border-radius:50%;object-fit:cover}
.articulo-cab h1{font-size:clamp(34px,5.5vw,58px)}
.articulo-meta{font-family:var(--f-mono);font-size:12.5px;color:var(--ceniza);letter-spacing:.06em;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.articulo-cuerpo{display:grid;gap:1.1em;font-size:19px;line-height:1.75}
.articulo-cuerpo p:first-child::first-letter{float:left;font-family:var(--f-titulo);font-size:4.2em;line-height:.82;padding:.06em .1em 0 0;color:var(--sangre-viva)}
.articulo-cuerpo .dialogo{padding-left:1.4em;border-left:1px solid var(--sangre);font-style:italic;color:var(--hueso)}
.voz-libro .articulo-cuerpo{font-family:var(--f-libro);font-size:21px}
.voz-libro .articulo-cuerpo p:not(.dialogo){font-style:italic}
.articulo-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:60px;padding-top:24px;border-top:1px solid var(--linea)}
.articulo-nav a{text-decoration:none;display:grid;gap:4px;color:var(--hueso)}
.articulo-nav a span{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ceniza)}
.articulo-nav a:last-child{text-align:right}
.articulo-nav a b{font-family:var(--f-titulo);font-weight:600;font-size:18px}

/* ---------- Nueva York: mapa 3D ---------- */
.mapa-zona{position:relative;padding-block:10px 40px}
.mapa-escena{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - var(--barra) - 40px);perspective:1500px;overflow:hidden;background:#05070a;border-block:1px solid var(--linea)}
.mapa-plano{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.65,0,.25,1),transform-origin 1.5s cubic-bezier(.65,0,.25,1);will-change:transform}
.mapa-plano img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.mapa-escena::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 45%,rgba(5,7,10,.85) 100%);z-index:2}
.zona{position:absolute;transform:translate(-50%,-50%);z-index:3;width:120px;height:120px;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--hueso)}
.zona .pulso{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:0 0 0 0 var(--c);animation:pulso 2.6s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 70%,transparent)}70%{box-shadow:0 0 0 26px transparent}100%{box-shadow:0 0 0 0 transparent}}
.zona .etq{position:absolute;top:calc(50% + 16px);font-family:var(--f-titulo);font-size:12px;letter-spacing:.14em;white-space:nowrap;padding:4px 10px;background:rgba(5,7,10,.75);border:1px solid color-mix(in srgb,var(--c) 60%,transparent);opacity:0;transform:translateY(-6px);transition:all .3s}
.zona:hover .etq,.zona:focus-visible .etq{opacity:1;transform:none}
.mapa-plano.enfocado .zona{opacity:0;pointer-events:none;transition:opacity .4s}
.mapa-niebla{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,10,.5),transparent 25%,transparent 75%,rgba(5,7,10,.6))}
.mapa-ayuda{position:absolute;left:var(--gutter);bottom:18px;z-index:4;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ceniza);transition:opacity .4s}
.mapa-plano.enfocado ~ .mapa-ayuda{opacity:0}
.mapa-volver{position:absolute;left:var(--gutter);top:18px;z-index:5;opacity:0;pointer-events:none;transform:translateY(-8px);transition:all .5s .6s}
.mapa-escena.con-barrio .mapa-volver{opacity:1;pointer-events:auto;transform:none}
.barrio-panel{position:absolute;top:18px;right:18px;bottom:18px;width:min(400px,40%);z-index:5;background:rgba(11,8,9,.86);backdrop-filter:blur(12px);border:1px solid var(--linea);border-top:2px solid var(--c,var(--bronce));padding:26px;overflow-y:auto;display:grid;align-content:start;gap:18px;transform-origin:right center;transform:perspective(1200px) rotateY(-28deg) translateX(110%);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .6s;pointer-events:none}
.mapa-escena.con-barrio .barrio-panel{transform:none;opacity:1;pointer-events:auto;transition-delay:.7s}
.barrio-panel h2{font-size:30px}
.barrio-panel h4{font-family:var(--f-mono);font-weight:400;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--c,var(--bronce));margin-bottom:6px}
.barrio-panel ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.barrio-panel li b{display:block;font-family:var(--f-titulo);font-weight:600;font-size:15px;letter-spacing:.04em}
.barrio-panel li span{color:var(--ceniza);font-size:15px}
.barrio-panel .rumor{font-family:var(--f-libro);font-style:italic}
@media (max-width:820px){
  .mapa-escena{aspect-ratio:4/5;max-height:none}
  .barrio-panel{top:auto;left:10px;right:10px;bottom:10px;width:auto;max-height:60%;padding:20px;transform:translateY(115%);gap:14px}
  .mapa-escena.con-barrio .barrio-panel{transform:none;transition-delay:.5s}
  .barrio-panel h2{font-size:24px}
  .mapa-volver{top:12px;left:12px;padding:10px 14px;font-size:11px}
}
.barrios-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.barrio-btn{display:grid;gap:6px;padding:18px;text-align:left;border:1px solid var(--linea);background:var(--carbon);color:var(--hueso);text-decoration:none;border-top:2px solid var(--c)}
.barrio-btn b{font-family:var(--f-titulo);font-size:18px;letter-spacing:.06em}
.barrio-btn span{font-size:14px;color:var(--ceniza)}
.barrio-btn:hover{background:var(--carbon-2)}
.corte{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;perspective:1200px}
.cargo{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:center;padding:16px;border:1px solid var(--linea);background:var(--carbon);text-decoration:none;color:var(--hueso)}
.cargo img{width:72px;height:72px;border-radius:50%}
.cargo b{display:block;font-family:var(--f-titulo);font-size:18px}
.cargo span{color:var(--bronce-claro);font-size:14px}
.franja{width:100%;height:clamp(110px,14vw,200px);object-fit:cover;object-position:right center;border-block:1px solid var(--linea)}
.dominios{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:24px}
.dominio{padding:22px;border:1px solid var(--linea);background:var(--carbon);display:grid;gap:10px;align-content:start}
.dominio header{display:flex;align-items:center;gap:12px}
.dominio header img{width:46px;height:46px;border-radius:50%}
.dominio h3{font-size:20px}
.dominio header span{font-size:13px;color:var(--bronce-claro)}
.dominio p{color:var(--ceniza);font-size:15.5px}
.dominio .figuras{font-size:14px;color:var(--hueso);opacity:.8}

/* ---------- Ciudades ---------- */
.ciudades{display:grid;gap:18px;perspective:1600px}
.ciudad{position:relative;display:block;overflow:hidden;border:1px solid var(--linea);text-decoration:none;color:var(--hueso)}
.ciudad img{width:100%;height:auto;min-height:90px;object-fit:cover;object-position:left center;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),filter .6s}
.ciudad:hover img{transform:scale(1.05)}
.ciudad .estado{position:absolute;right:16px;bottom:14px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;background:rgba(11,8,9,.75);border:1px solid var(--linea)}
.ciudad.sin-escribir img{filter:grayscale(1) brightness(.35) blur(1.5px)}
.ciudad.sin-escribir::after{content:"";position:absolute;inset:0;background:url("../img/pagina-arrancada.webp") right -40px center/auto 180% no-repeat;opacity:.55;transform:rotate(-2deg);mix-blend-mode:luminosity}
.ciudad.sin-escribir .estado{color:var(--sangre-viva)}
.arrancada{min-height:calc(100vh - var(--barra));display:grid;place-items:center;padding:50px var(--gutter);perspective:1200px;background:radial-gradient(ellipse at center,#1c1416,var(--negro) 70%)}
.arrancada-hoja{position:relative;width:min(440px,82vw);aspect-ratio:750/1000;background:url("../img/pagina-arrancada.webp") center/contain no-repeat;display:grid;place-items:center;text-align:center;padding:16%;animation:flota 9s ease-in-out infinite;filter:drop-shadow(0 30px 50px rgba(0,0,0,.7))}
@keyframes flota{0%,100%{transform:rotateX(8deg) rotateY(-10deg) rotateZ(-2deg) translateY(0)}50%{transform:rotateX(-4deg) rotateY(8deg) rotateZ(1deg) translateY(-12px)}}
.arrancada-hoja p{font-family:var(--f-libro);font-style:italic;color:#3b2316;font-size:clamp(20px,2.6vw,27px);line-height:1.35}
.arrancada-hoja p b{display:block;font-family:var(--f-titulo);font-style:normal;font-size:.75em;letter-spacing:.2em;color:#6d1a1f;margin-bottom:12px}
.arrancada-nota{margin-top:26px;text-align:center;color:var(--ceniza)}

/* ---------- Personajes ---------- */
.renacidos-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;perspective:1400px}
@media (max-width:860px){.renacidos-grid{grid-template-columns:1fr}}
.pj{display:block;aspect-ratio:3/4;overflow:hidden;border:1px solid var(--linea);text-decoration:none;color:var(--hueso);background:var(--carbon)}
.pj-img{position:absolute;inset:0;background-size:cover;background-position:center top;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.pj:hover .pj-img{transform:scale(1.06)}
.pj::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(11,8,9,.97) 8%,rgba(11,8,9,0) 55%)}
.pj-texto{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;display:grid;gap:4px;transform:translateZ(50px)}
.pj-texto h3{font-size:clamp(24px,2.6vw,30px)}
.pj-texto span{color:var(--bronce-claro);font-size:14.5px}
.pj-emblema{position:absolute;top:14px;right:14px;z-index:2;width:76px;height:76px;border-radius:50%;transform:translateZ(70px)}
@media (max-width:860px){.pj{aspect-ratio:4/5}}
.filtros-pnj{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.pnj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;perspective:1200px}
.pnj{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;padding:16px;border:1px solid var(--linea);background:var(--carbon);text-decoration:none;color:var(--hueso)}
.pnj[hidden]{display:none}
.monograma{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-titulo);font-size:18px;color:var(--bronce-claro);border:1px solid var(--bronce);background:radial-gradient(circle,#2a1d1c,var(--negro))}
.pnj b{display:block;font-family:var(--f-titulo);font-size:16px;letter-spacing:.03em}
.pnj span{display:block;font-size:13.5px;color:var(--ceniza)}
.pnj .estado-pill{display:inline-block;margin-top:6px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border:1px solid var(--linea)}
.estado-destruido{color:var(--sangre-viva);border-color:var(--sangre)!important}
.estado-en-duda,.estado-se-marcha,.estado-desaparecido{color:var(--bronce-claro);border-color:var(--bronce)!important}
.ficha{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,64px);align-items:start;padding-block:56px}
@media (max-width:820px){.ficha{grid-template-columns:1fr}}
.ficha-retrato{aspect-ratio:3/4;background-size:cover;background-position:center top;border:1px solid var(--linea);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.ficha-retrato.sin{display:grid;place-items:center;background:url("../img/textura.jpg") center/cover}
.ficha-retrato.sin .monograma{width:140px;height:140px;font-size:48px}
.ficha-datos{display:grid;gap:22px}
.ficha-datos h1{font-size:clamp(34px,5vw,58px)}
.ficha-datos .cargo-txt{color:var(--bronce-claro);font-size:19px}
.ficha-datos dl{display:grid;grid-template-columns:140px minmax(0,1fr);gap:10px 18px;margin:0;border-top:1px solid var(--linea);padding-top:18px}
.ficha-datos dt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ceniza);padding-top:4px}
.ficha-datos dd{margin:0}
.ficha-emblema{width:150px;height:150px;border-radius:50%}
.apariciones{display:grid;gap:8px}

/* ---------- SchreckNet ---------- */
.sn{max-width:var(--ancho);margin:40px auto;border:1px solid #3d1418;background:#070506;box-shadow:0 0 0 1px #000,0 30px 90px rgba(165,28,40,.15);font-family:var(--f-mono);display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto 1fr;min-height:520px}
.sn-cab{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid #3d1418;background:linear-gradient(90deg,#1a0709,#070506)}
.sn-logo{font-family:var(--f-mono);font-weight:500;font-size:18px;letter-spacing:.1em;color:var(--sangre-viva)}
.sn-logo b{color:var(--hueso);font-weight:400}
.sn-estado{margin-left:auto;font-size:11px;color:#7b6a62;letter-spacing:.12em;display:flex;align-items:center;gap:8px}
.sn-estado::before{content:"";width:7px;height:7px;border-radius:50%;background:#3fbf6a;box-shadow:0 0 8px #3fbf6a}
.sn-hilos{border-right:1px solid #2a0e11;padding:10px;display:grid;align-content:start;gap:4px}
.sn-hilo{display:grid;gap:2px;padding:10px 12px;border:1px solid transparent;background:none;color:var(--ceniza);font-family:var(--f-mono);text-align:left;cursor:pointer;font-size:13px}
.sn-hilo small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6c5a53}
.sn-hilo[aria-pressed="true"]{border-color:#5d1c22;background:#160a0c;color:var(--hueso)}
.sn-mensajes{padding:22px;display:grid;align-content:start;gap:14px;overflow:auto}
.sn-msg{display:grid;gap:4px;max-width:70ch}
.sn-msg header{font-size:12px;color:var(--sangre-viva);letter-spacing:.06em}
.sn-msg header time{color:#6c5a53;margin-left:8px}
.sn-msg p{font-size:14.5px;color:#e4d8c6;line-height:1.55}
.sn-cursor{display:inline-block;width:.6em;height:1.1em;background:var(--sangre-viva);vertical-align:text-bottom;animation:parpadea 1s steps(1) infinite}
@keyframes parpadea{50%{opacity:0}}
@media (max-width:760px){.sn{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;margin:20px var(--gutter)}.sn-hilos{border-right:0;border-bottom:1px solid #2a0e11;grid-auto-flow:column;overflow-x:auto}}

/* ---------- Susurros ---------- */
.susurros-sala{position:relative;height:min(78vh,720px);min-height:460px;overflow:hidden;perspective:900px;background:radial-gradient(ellipse at 50% 60%,rgba(165,28,40,.18),transparent 60%),url("../img/textura.jpg") center/cover;border-block:1px solid var(--linea)}
.susurros-sala::before{content:"";position:absolute;inset:0;background:rgba(11,8,9,.72)}
.susurro{position:absolute;left:var(--x);top:var(--y);max-width:min(340px,70vw);font-family:var(--f-libro);font-style:italic;font-size:clamp(17px,2vw,24px);line-height:1.3;color:var(--hueso);transform:translate(-50%,-50%) translateZ(var(--z));opacity:var(--o);transition:transform 1s cubic-bezier(.2,.8,.2,1),opacity 1s,filter 1s;filter:blur(var(--b));cursor:default;animation:deriva var(--t) ease-in-out infinite alternate}
.susurro small{display:block;margin-top:6px;font-family:var(--f-mono);font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--bronce)}
.susurro:hover{filter:blur(0);opacity:1;z-index:5}
@keyframes deriva{from{margin-top:-10px;margin-left:-8px}to{margin-top:10px;margin-left:8px}}
.susurros-lista{columns:2 320px;column-gap:40px}
.susurros-lista blockquote{break-inside:avoid;margin:0 0 22px;padding-left:18px;border-left:1px solid var(--sangre);font-family:var(--f-libro);font-style:italic;font-size:19px}
.susurros-lista cite{display:block;font-family:var(--f-mono);font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ceniza);margin-top:4px}

/* ---------- Línea temporal ---------- */
.linea{position:relative;display:grid;gap:34px;padding-left:40px;max-width:820px;margin:0 auto}
.linea::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--sangre-viva),var(--sangre) 70%,transparent)}
.hito{position:relative;display:grid;gap:6px}
.hito::before{content:"";position:absolute;left:-36px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--negro);border:2px solid var(--sangre-viva);box-shadow:0 0 14px rgba(214,50,63,.5)}
.hito .cuando{font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--bronce)}
.hito h3{font-size:clamp(20px,2.4vw,26px)}
.hito p{color:var(--ceniza)}

/* ---------- Los Renacidos ---------- */
.puerta-escena{position:relative;height:calc(100vh - var(--barra));min-height:560px;overflow:hidden;perspective:1100px;background:#050304;display:grid;place-items:center}
.puerta-camara{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 2.2s cubic-bezier(.6,0,.2,1)}
.puerta-hoja{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;transition:transform 2s cubic-bezier(.6,0,.2,1);backface-visibility:hidden}
.puerta-hoja::before{content:"";position:absolute;top:0;bottom:0;width:200%;background:url("../img/renacidos-puerta.jpg") center/cover no-repeat}
.puerta-hoja.izq{left:0;transform-origin:left center}
.puerta-hoja.izq::before{left:0}
.puerta-hoja.der{right:0;transform-origin:right center}
.puerta-hoja.der::before{left:-100%}
.puerta-escena.abierta .puerta-hoja.izq{transform:rotateY(100deg)}
.puerta-escena.abierta .puerta-hoja.der{transform:rotateY(-100deg)}
.puerta-escena.abierta .puerta-camara{transform:translateZ(420px)}
.puerta-luz{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(255,200,140,.9),rgba(199,154,91,.25) 30%,transparent 60%);opacity:0;transition:opacity 1.6s .4s}
.puerta-escena.abierta .puerta-luz{opacity:1}
.puerta-escena::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,3,4,.95) 0%,rgba(5,3,4,.2) 45%,rgba(5,3,4,.4) 100%);pointer-events:none;transition:opacity 1s}
.puerta-escena.abierta::after{opacity:0}
.puerta-form{position:relative;z-index:3;align-self:end;margin-bottom:clamp(30px,8vh,80px);display:grid;justify-items:center;gap:14px;text-align:center;padding:0 var(--gutter);transition:opacity .6s,transform .6s}
.puerta-escena.abierta .puerta-form{opacity:0;transform:translateY(30px);pointer-events:none}
.puerta-form h1{font-size:clamp(30px,5vw,54px)}
.puerta-form p{color:var(--ceniza);max-width:44ch}
.puerta-campo{display:flex;gap:0;border:1px solid var(--bronce);background:rgba(5,3,4,.75);backdrop-filter:blur(6px)}
.puerta-campo input{width:min(260px,58vw);padding:14px 16px;background:transparent;border:0;color:var(--hueso);font-family:var(--f-titulo);font-size:16px;letter-spacing:.18em;outline:none}
.puerta-campo button{border:0;border-left:1px solid var(--bronce);background:var(--sangre);color:var(--hueso);font-family:var(--f-titulo);letter-spacing:.14em;padding:0 20px;cursor:pointer;font-size:13px;text-transform:uppercase}
.puerta-campo button:hover{background:var(--sangre-viva)}
.puerta-error{min-height:1.4em;color:var(--sangre-viva);font-family:var(--f-libro);font-style:italic}
.tiembla{animation:tiembla .5s}
@keyframes tiembla{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.sala-cab .cabecera-img{background-image:url("../img/renacidos-sala.jpg")}
.sala-bienvenida{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.sala-bienvenida img{width:84px;height:84px;border-radius:50%}
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--linea);margin-bottom:30px;flex-wrap:wrap}
.pestana{padding:12px 18px;background:none;border:0;border-bottom:2px solid transparent;color:var(--ceniza);font-family:var(--f-titulo);font-size:14px;letter-spacing:.1em;cursor:pointer;margin-bottom:-1px}
.pestana[aria-selected="true"]{color:var(--hueso);border-bottom-color:var(--sangre-viva)}
.despacho-banner{position:relative;height:clamp(200px,32vw,360px);background-size:cover;background-position:center;border:1px solid var(--linea);margin-bottom:30px;display:flex;align-items:flex-end;padding:22px}
.despacho-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,8,9,.92),transparent 60%)}
.despacho-banner h2{position:relative;z-index:1;font-size:clamp(24px,3.4vw,38px)}
.despacho-banner h2 small{display:block;font-family:var(--f-texto);font-weight:400;font-size:.5em;letter-spacing:.02em;color:var(--bronce-claro);margin-top:6px}
.privado{display:grid;gap:1em;max-width:760px;font-size:18px;line-height:1.7}
.privado h3{font-size:22px;margin-top:.8em}
.privado ul{margin:0;padding-left:1.2em;display:grid;gap:.4em}
.privado .nota{padding:14px 18px;border:1px dashed var(--linea);color:var(--ceniza);font-style:italic}
.privado blockquote{margin:0;padding-left:18px;border-left:1px solid var(--sangre);font-family:var(--f-libro);font-style:italic}

/* ---------- Pie ---------- */
.pie{border-top:1px solid var(--linea);padding:28px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;gap:8px;text-align:center;font-size:12.5px;color:var(--ceniza);background:var(--negro);position:relative;z-index:1}
.pie p{max-width:80ch}
.pie-darkpack{height:44px;width:auto;margin-bottom:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}