/*
Theme Name: De Paso Noir
Theme URI: https://depaso.online
Author: FactoriaDigital
Author URI: https://factoriadigital.store
Description: v3 Novela Gráfica — De Paso como cómic noir de la noche chilanga. Rojo plano del logotipo, silueta de la ciudad como personaje, tramas de medios tonos, viñetas con marco y cajas de narración. Sin City encuadernado en la CDMX.
Version: 3.0
License: GNU General Public License v2 or later
Text Domain: depaso-noir
*/

/* ==========================================================
   1. TOKENS — tinta, papel y neón
   ========================================================== */
:root{
  --tinta:#0B0A0A;          /* negro de plancha */
  --tinta-2:#151313;
  --papel:#EFE9DF;          /* papel viejo de cómic */
  --papel-sucio:#DDD5C7;
  --rojo:#D9231D;           /* rojo plano del logo */
  --rojo-neon:#FF3A2E;
  --ambar:#E8A020;          /* EXCLUSIVO Rompe y Rasga */
  --gris:#8F8A80;
  --linea:#2B2727;
  --f-display:'Anton',sans-serif;
  --f-body:'Crimson Pro',serif;
  --f-type:'Special Elite',monospace;
  --ancho:1200px;
  --glow-rojo:0 0 6px rgba(255,58,46,.85),0 0 20px rgba(217,35,29,.5);
  --glow-ambar:0 0 6px rgba(232,160,32,.85),0 0 20px rgba(232,160,32,.4);
  --sombra-panel:10px 10px 0 var(--rojo);
  --sombra-panel-ambar:10px 10px 0 var(--ambar);
}

/* ==========================================================
   2. BASE
   ========================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--tinta);
  color:var(--papel);
  font-family:var(--f-body);
  font-size:1.15rem;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--papel);text-decoration:none;transition:color .25s}
a:hover{color:var(--rojo-neon)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--rojo-neon);outline-offset:3px}
.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;letter-spacing:.02em;text-transform:uppercase;line-height:1.05}
::selection{background:var(--rojo);color:var(--papel)}

/* Trama de medios tonos (Ben-Day) reutilizable */
.trama::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(239,233,223,.07) 1px,transparent 1.6px);
  background-size:7px 7px;
  mix-blend-mode:screen;
}

/* ==========================================================
   3. HEADER — LOMO DEL CÓMIC
   ========================================================== */
.sitio-header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,10,10,.94);
  backdrop-filter:blur(8px);
  border-bottom:3px solid var(--rojo);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 24px;max-width:var(--ancho);margin:0 auto}
.marca{display:flex;align-items:center;gap:16px}
.marca-svg{height:46px;width:auto;display:block}
.marca-hora{
  font-family:var(--f-type);font-size:.7rem;color:var(--gris);
  letter-spacing:.1em;border-left:2px solid var(--rojo);padding-left:14px;
  max-width:280px;line-height:1.5;
}
.letrero-abierto{
  font-family:var(--f-type);font-size:.68rem;color:var(--rojo-neon);
  border:2px solid var(--rojo);padding:5px 12px;letter-spacing:.28em;
  text-shadow:var(--glow-rojo);animation:neon-flicker 7s infinite;white-space:nowrap;
}
.nav-principal ul{display:flex;gap:24px;list-style:none;flex-wrap:wrap}
.nav-principal a{
  font-family:var(--f-type);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gris);padding:6px 2px;border-bottom:3px solid transparent;
}
.nav-principal a:hover,.nav-principal .current-menu-item a,.nav-principal .current-cat a{color:var(--papel);border-bottom-color:var(--rojo)}
.nav-toggle{display:none;background:none;border:2px solid var(--rojo);color:var(--papel);font-family:var(--f-type);padding:8px 14px;font-size:.8rem;letter-spacing:.15em;cursor:pointer}

@keyframes neon-flicker{
  0%,100%{opacity:1}91%{opacity:1}92%{opacity:.35}93%{opacity:1}95.5%{opacity:.65}96.5%{opacity:1}
}

/* ==========================================================
   4. HERO — PORTADA DEL NÚMERO (SPLASH PAGE)
   ========================================================== */
.hero{
  position:relative;overflow:hidden;
  border-bottom:3px solid var(--rojo);
  background:
    radial-gradient(ellipse 100% 55% at 50% 115%,rgba(217,35,29,.22),transparent 62%),
    var(--tinta);
  padding:70px 0 0;
}
.hero-lluvia{position:absolute;inset:0;pointer-events:none;opacity:.45}
.hero-lluvia::before{
  content:"";position:absolute;inset:-100% 0 0 0;
  background-image:repeating-linear-gradient(115deg,transparent 0 48px,rgba(239,233,223,.05) 48px 49px);
  animation:lluvia 1.1s linear infinite;
}
@keyframes lluvia{to{transform:translateY(220px)}}

.hero-numero{
  position:absolute;top:26px;right:26px;z-index:3;
  font-family:var(--f-type);font-size:.72rem;letter-spacing:.15em;
  background:var(--papel);color:var(--tinta);
  padding:8px 14px;transform:rotate(2deg);
  box-shadow:5px 5px 0 var(--rojo);
}
.hero-contenido{position:relative;z-index:2;text-align:center;padding:0 24px}
.hero-logo{width:min(920px,94%);height:auto;margin:0 auto;display:block;filter:drop-shadow(0 18px 50px rgba(217,35,29,.28))}
.hero-caja{
  position:relative;z-index:3;
  max-width:640px;margin:-8px auto 0;
  background:var(--papel);color:var(--tinta);
  font-family:var(--f-type);font-size:.95rem;letter-spacing:.04em;line-height:1.6;
  padding:18px 26px;transform:rotate(-1deg);
  box-shadow:8px 8px 0 var(--rojo);
}
.hero-acciones{position:relative;z-index:3;margin:44px 0 70px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

.btn{
  display:inline-block;font-family:var(--f-type);font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 32px;border:2px solid var(--rojo);color:var(--papel);background:transparent;cursor:pointer;
  transition:all .2s;box-shadow:6px 6px 0 rgba(217,35,29,.35);
}
.btn:hover{background:var(--rojo);box-shadow:2px 2px 0 rgba(217,35,29,.6);transform:translate(4px,4px)}
.btn-fantasma{border-color:var(--linea);color:var(--gris);box-shadow:6px 6px 0 rgba(43,39,39,.6)}
.btn-fantasma:hover{background:var(--tinta-2);border-color:var(--gris);color:var(--papel);box-shadow:2px 2px 0 rgba(43,39,39,.8)}

/* ==========================================================
   5. SECCIONES
   ========================================================== */
.seccion{padding:90px 0;position:relative}
.seccion-titulo{display:flex;align-items:center;gap:20px;margin-bottom:54px}
.seccion-titulo h2{
  font-size:clamp(1.9rem,4vw,3.1rem);
  background:var(--rojo);color:var(--papel);
  padding:8px 22px 6px;transform:rotate(-1deg);
  box-shadow:6px 6px 0 var(--tinta-2),6px 6px 0 1px var(--papel);
}
.seccion-titulo .regla{flex:1;height:3px;background:repeating-linear-gradient(90deg,var(--rojo) 0 14px,transparent 14px 24px)}
.seccion-titulo .ver-todo{font-family:var(--f-type);font-size:.75rem;letter-spacing:.15em;color:var(--gris);white-space:nowrap}
.seccion-titulo .ver-todo:hover{color:var(--rojo-neon)}

/* ==========================================================
   6. VIÑETAS (TARJETAS DE CRÓNICA)
   ========================================================== */
.grid-cronicas{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.grid-cronicas .destacada{grid-column:span 3}

.vineta{
  background:var(--tinta-2);
  border:3px solid var(--papel);
  box-shadow:var(--sombra-panel);
  position:relative;
  transition:transform .25s,box-shadow .25s;
}
.vineta:nth-child(odd){transform:rotate(-.5deg)}
.vineta:nth-child(even){transform:rotate(.45deg)}
.vineta:hover{transform:rotate(0) translate(3px,3px);box-shadow:5px 5px 0 var(--rojo)}
.vineta.es-rompe{box-shadow:var(--sombra-panel-ambar)}
.vineta.es-rompe:hover{box-shadow:5px 5px 0 var(--ambar)}

.vineta-img{position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--tinta);border-bottom:3px solid var(--papel)}
.vineta-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25);transition:filter .5s,transform .5s}
.vineta:hover .vineta-img img{filter:grayscale(.1) contrast(1.05);transform:scale(1.04)}
.vineta-img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,10,10,.5) 1px,transparent 1.7px);
  background-size:6px 6px;
  opacity:.55;transition:opacity .5s;
}
.vineta:hover .vineta-img::after{opacity:.15}

/* Caja de narración (esquina de la viñeta, como en los cómics) */
.caja-narra{
  position:absolute;top:-3px;left:-3px;z-index:2;
  font-family:var(--f-type);font-size:.66rem;letter-spacing:.12em;
  background:var(--papel);color:var(--tinta);
  padding:6px 12px;
  border:3px solid var(--tinta);
  max-width:85%;
}
.es-rompe .caja-narra{background:var(--ambar)}

.vineta-cuerpo{padding:26px}
.vineta-cat{font-family:var(--f-type);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rojo-neon)}
.es-rompe .vineta-cat{color:var(--ambar);text-shadow:var(--glow-ambar)}
.vineta h3{font-size:1.45rem;margin:10px 0 12px}
.vineta h3 a:hover{color:var(--rojo-neon)}
.destacada .vineta-cuerpo h3{font-size:2.3rem}
.vineta-extracto{color:var(--gris);font-size:1.02rem}
.vineta-meta{font-family:var(--f-type);font-size:.68rem;color:var(--gris);letter-spacing:.1em;margin-top:16px;display:flex;gap:14px;flex-wrap:wrap}

/* ==========================================================
   7. PANELES DE CATEGORÍA — PÁGINA DE ÍNDICE DEL CÓMIC
   ========================================================== */
.paneles{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.panel{
  position:relative;
  background:var(--tinta-2);
  border:3px solid var(--papel);
  box-shadow:var(--sombra-panel);
  padding:36px 30px 30px;
  min-height:200px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:12px;
  transition:transform .25s,box-shadow .25s;
  overflow:hidden;
}
.panel::before{
  content:attr(data-num);
  position:absolute;top:-18px;right:8px;
  font-family:var(--f-display);font-size:7rem;color:transparent;
  -webkit-text-stroke:2px rgba(217,35,29,.5);
  pointer-events:none;line-height:1;
}
.panel:nth-child(odd){transform:rotate(-.5deg)}
.panel:nth-child(even){transform:rotate(.5deg)}
.panel:hover{transform:rotate(0) translate(3px,3px);box-shadow:5px 5px 0 var(--rojo)}
.panel h3{font-size:1.7rem;color:var(--papel)}
.panel p{color:var(--gris);font-size:1rem}
.panel .panel-tag{font-family:var(--f-type);font-size:.65rem;letter-spacing:.22em;color:var(--rojo-neon)}
.panel-ambar{box-shadow:var(--sombra-panel-ambar)}
.panel-ambar::before{-webkit-text-stroke-color:rgba(232,160,32,.5)}
.panel-ambar:hover{box-shadow:5px 5px 0 var(--ambar)}
.panel-ambar .panel-tag{color:var(--ambar)}

/* ==========================================================
   8. FICHA DE REGISTRO (NEWSLETTER)
   ========================================================== */
.registro{
  background:var(--papel);color:var(--tinta);
  border:3px solid var(--tinta);
  box-shadow:12px 12px 0 var(--rojo);
  max-width:680px;margin:0 auto;padding:52px 46px;
  transform:rotate(-.6deg);position:relative;
}
.registro::before{
  content:"HOTEL DE PASO · REGISTRO DE HUÉSPEDES";
  position:absolute;top:-16px;left:26px;
  background:var(--rojo);color:var(--papel);
  font-family:var(--f-type);font-size:.68rem;letter-spacing:.22em;
  padding:5px 14px;transform:rotate(1deg);
}
.registro h2{font-size:2rem;margin-bottom:10px;color:var(--tinta)}
.registro p{color:#4a453d;font-style:italic;margin-bottom:28px}
.registro-campos{display:flex;gap:14px;flex-wrap:wrap}
.registro input[type=email]{
  flex:1;min-width:240px;background:transparent;
  border:none;border-bottom:2px dashed var(--tinta);
  color:var(--tinta);font-family:var(--f-type);font-size:.95rem;padding:14px 10px;
}
.registro input[type=email]::placeholder{color:#8d867a}
.registro .btn{border-color:var(--tinta);color:var(--tinta);box-shadow:6px 6px 0 var(--rojo)}
.registro .btn:hover{background:var(--tinta);color:var(--papel);box-shadow:2px 2px 0 var(--rojo)}
.registro-nota{font-family:var(--f-type);font-size:.66rem;color:#6e6759;letter-spacing:.08em;margin-top:20px}
.registro-ok{display:none;width:100%;font-family:var(--f-type);font-size:.75rem;color:var(--rojo);letter-spacing:.1em;margin-top:14px}

/* ==========================================================
   9. MAPA NOCTURNO
   ========================================================== */
.mapa-marco{border:3px solid var(--papel);box-shadow:var(--sombra-panel);position:relative;background:var(--tinta-2)}
#mapa-nocturno{height:70vh;min-height:480px;width:100%}
.mapa-leyenda{
  display:flex;gap:26px;flex-wrap:wrap;
  font-family:var(--f-type);font-size:.72rem;letter-spacing:.12em;color:var(--gris);
  padding:16px 20px;border-top:3px solid var(--papel);
}
.mapa-leyenda .punto{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--rojo-neon);box-shadow:var(--glow-rojo);margin-right:8px;vertical-align:middle}
.mapa-leyenda .punto-ambar{background:var(--ambar);box-shadow:var(--glow-ambar)}
.pin-neon{width:15px;height:15px;border-radius:50%;background:var(--rojo-neon);box-shadow:var(--glow-rojo);border:2px solid var(--tinta)}
.pin-neon.pin-ambar{background:var(--ambar);box-shadow:var(--glow-ambar)}
.leaflet-popup-content-wrapper{background:var(--papel)!important;color:var(--tinta)!important;border:3px solid var(--tinta);border-radius:0!important;box-shadow:7px 7px 0 var(--rojo)!important}
.leaflet-popup-tip{background:var(--papel)!important}
.leaflet-popup-content{font-family:var(--f-body);font-size:1rem;margin:14px 18px!important}
.popup-zona{font-family:var(--f-type);font-size:.62rem;letter-spacing:.2em;color:var(--rojo);text-transform:uppercase}
.popup-titulo{font-family:var(--f-display);font-size:1.05rem;text-transform:uppercase;margin:6px 0;line-height:1.2}
.popup-titulo a{color:var(--tinta)}
.popup-titulo a:hover{color:var(--rojo)}
.leaflet-container{background:#000!important}
.leaflet-control-attribution{background:rgba(11,10,10,.8)!important;color:var(--gris)!important;font-size:.6rem!important}
.leaflet-control-attribution a{color:var(--gris)!important}

/* ==========================================================
   10. SINGLE — CAPÍTULO
   ========================================================== */
.entrada-cabecera{padding:80px 24px 30px;text-align:center;max-width:860px;margin:0 auto;position:relative}
.entrada-narra{
  display:inline-block;
  background:var(--papel);color:var(--tinta);
  font-family:var(--f-type);font-size:.72rem;letter-spacing:.14em;
  padding:8px 16px;border:3px solid var(--tinta);
  box-shadow:5px 5px 0 var(--rojo);
  transform:rotate(-1.2deg);
  margin-bottom:26px;text-transform:uppercase;
}
.cat-rompe .entrada-narra{box-shadow:5px 5px 0 var(--ambar)}
.entrada-cat{font-family:var(--f-type);font-size:.78rem;letter-spacing:.25em;color:var(--rojo-neon);text-transform:uppercase;text-shadow:var(--glow-rojo)}
.cat-rompe .entrada-cat{color:var(--ambar);text-shadow:var(--glow-ambar)}
.entrada-cabecera h1{font-size:clamp(2.3rem,6vw,4.4rem);margin:18px 0}
.entrada-meta{font-family:var(--f-type);font-size:.72rem;color:var(--gris);letter-spacing:.12em;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.entrada-portada{max-width:1000px;margin:34px auto 0;border:3px solid var(--papel);box-shadow:var(--sombra-panel);position:relative;overflow:hidden}
.entrada-portada img{filter:grayscale(.9) contrast(1.2);width:100%}
.entrada-portada::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,10,10,.45) 1px,transparent 1.7px);
  background-size:6px 6px;
}

.entrada-cuerpo{max-width:720px;margin:60px auto;padding:0 24px}
.entrada-cuerpo p{margin-bottom:1.6em}
.entrada-cuerpo p:first-of-type::first-letter{
  font-family:var(--f-display);font-size:4.4em;float:left;line-height:.8;
  padding:4px 16px 0 0;color:var(--rojo-neon);text-shadow:var(--glow-rojo);
}
.cat-rompe .entrada-cuerpo p:first-of-type::first-letter{color:var(--ambar);text-shadow:var(--glow-ambar)}
.entrada-cuerpo h2,.entrada-cuerpo h3{margin:1.8em 0 .8em}
.entrada-cuerpo blockquote{
  background:var(--papel);color:var(--tinta);
  border:3px solid var(--tinta);box-shadow:7px 7px 0 var(--rojo);
  padding:22px 28px;margin:2.2em 0;
  font-style:italic;font-size:1.25rem;
  transform:rotate(-.6deg);
}
.cat-rompe .entrada-cuerpo blockquote{box-shadow:7px 7px 0 var(--ambar)}
.entrada-cuerpo a{border-bottom:2px dashed var(--rojo);color:var(--papel)}
.entrada-cuerpo a:hover{color:var(--rojo-neon)}
.entrada-cuerpo img{border:3px solid var(--papel);filter:grayscale(.75);box-shadow:8px 8px 0 var(--rojo)}

.entrada-pie{max-width:720px;margin:0 auto 80px;padding:30px 24px 0;border-top:3px dashed var(--linea)}
.entrada-tags{display:flex;gap:10px;flex-wrap:wrap}
.entrada-tags a{font-family:var(--f-type);font-size:.7rem;letter-spacing:.1em;border:2px solid var(--linea);padding:5px 12px;color:var(--gris)}
.entrada-tags a:hover{border-color:var(--rojo);color:var(--rojo-neon)}

.nav-entradas{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.nav-entradas a{background:var(--tinta-2);border:3px solid var(--papel);box-shadow:6px 6px 0 var(--rojo);padding:20px;display:block;transition:all .2s}
.nav-entradas a:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--rojo)}
.nav-entradas .dir{font-family:var(--f-type);font-size:.62rem;letter-spacing:.2em;color:var(--rojo-neon)}
.nav-entradas .titulo{font-family:var(--f-display);font-size:1rem;text-transform:uppercase;margin-top:8px;display:block;color:var(--papel)}
.nav-sig{text-align:right}

/* ==========================================================
   11. ARCHIVOS
   ========================================================== */
.archivo-cabecera{padding:70px 0 26px;border-bottom:3px solid var(--rojo);position:relative}
.archivo-cabecera .eyebrow{font-family:var(--f-type);font-size:.75rem;letter-spacing:.3em;color:var(--rojo-neon)}
.archivo-cabecera h1{font-size:clamp(2.4rem,6vw,4.6rem);margin-top:12px}
.archivo-cabecera p{color:var(--gris);font-style:italic;max-width:640px;margin-top:14px}
.archivo-rompe .eyebrow{color:var(--ambar);text-shadow:var(--glow-ambar)}
.archivo-rompe{border-bottom-color:var(--ambar)}

.paginacion{display:flex;gap:10px;justify-content:center;margin:60px 0;font-family:var(--f-type)}
.paginacion .page-numbers{border:2px solid var(--linea);padding:10px 16px;font-size:.8rem;color:var(--gris)}
.paginacion .page-numbers.current,.paginacion .page-numbers:hover{border-color:var(--rojo);color:var(--rojo-neon);box-shadow:4px 4px 0 rgba(217,35,29,.4)}

/* ==========================================================
   12. PUBLICIDAD
   ========================================================== */
.anuncio{
  display:flex;align-items:center;justify-content:center;
  margin:44px auto;border:3px dashed var(--linea);
  background:repeating-linear-gradient(45deg,var(--tinta-2) 0 14px,var(--tinta) 14px 28px);
  font-family:var(--f-type);font-size:.7rem;letter-spacing:.28em;color:var(--gris);text-align:center;
  transition:all .3s;
}
.anuncio:hover{border-color:var(--rojo);color:var(--rojo-neon)}
.anuncio-970{max-width:970px;height:250px}
.anuncio-728{max-width:728px;height:90px}
.anuncio-300{width:300px;height:250px;margin:0}

/* ==========================================================
   13. INSTITUCIONALES / DIRECTORIO
   ========================================================== */
.pagina-cuerpo{max-width:780px;margin:60px auto;padding:0 24px}
.pagina-cuerpo h2{margin:1.6em 0 .7em;font-size:1.8rem}
.pagina-cuerpo p{margin-bottom:1.4em}
.pagina-cuerpo ul{margin:0 0 1.4em 1.4em;color:var(--gris)}

.directorio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-top:50px}
.ficha{background:var(--tinta-2);border:3px solid var(--papel);box-shadow:7px 7px 0 var(--rojo);padding:28px;transition:all .2s}
.ficha:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 var(--rojo)}
.ficha .cargo{font-family:var(--f-type);font-size:.66rem;letter-spacing:.2em;color:var(--rojo-neon);text-transform:uppercase}
.ficha h3{font-size:1.25rem;margin:10px 0 8px;text-transform:none;font-family:var(--f-body);font-weight:600}
.ficha p{color:var(--gris);font-size:.95rem}

/* ==========================================================
   14. 404 — NO MOLESTAR (con onomatopeya)
   ========================================================== */
.no-molestar{min-height:75vh;display:flex;align-items:center;justify-content:center;padding:80px 24px;position:relative}
.zas{
  position:absolute;top:12%;right:14%;
  font-family:var(--f-display);font-size:clamp(2rem,6vw,4rem);
  color:transparent;-webkit-text-stroke:2px var(--rojo);
  transform:rotate(12deg);pointer-events:none;
}
.colgante{
  width:350px;background:var(--papel);color:var(--tinta);
  border:3px solid var(--tinta);box-shadow:14px 14px 0 var(--rojo);
  padding:62px 40px 50px;text-align:center;position:relative;transform:rotate(-2deg);
}
.colgante::before{
  content:"";position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:72px;height:72px;border:3px solid var(--tinta);border-radius:50%;background:var(--tinta);
  box-shadow:inset 0 0 0 6px var(--papel);
}
.colgante .cuatro{font-family:var(--f-display);font-size:4.6rem;color:var(--rojo)}
.colgante h1{font-size:1.8rem;margin:14px 0;color:var(--tinta)}
.colgante p{color:#5a5348;font-style:italic;font-size:1rem;margin-bottom:28px}
.colgante .btn{border-color:var(--tinta);color:var(--tinta);box-shadow:6px 6px 0 var(--rojo)}
.colgante .btn:hover{background:var(--tinta);color:var(--papel);box-shadow:2px 2px 0 var(--rojo)}

/* ==========================================================
   15. FOOTER — CONTRAPORTADA
   ========================================================== */
.sitio-footer{border-top:3px solid var(--rojo);background:var(--tinta-2);margin-top:90px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:60px 24px;max-width:var(--ancho);margin:0 auto}
.footer-marca .marca-svg{height:52px}
.footer-marca p{color:var(--gris);font-style:italic;margin-top:16px;max-width:340px}
.footer-col h4{font-family:var(--f-type);font-size:.72rem;letter-spacing:.25em;color:var(--rojo-neon);margin-bottom:18px}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a{color:var(--gris);font-size:.98rem}
.footer-col a:hover{color:var(--papel)}
.footer-legal{
  border-top:1px solid var(--linea);padding:22px 24px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  max-width:var(--ancho);margin:0 auto;
  font-family:var(--f-type);font-size:.66rem;letter-spacing:.1em;color:var(--gris);
}
.footer-legal a{color:var(--gris)}
.footer-legal a:hover{color:var(--rojo-neon)}

/* ==========================================================
   16. RESPONSIVE
   ========================================================== */
@media(max-width:960px){
  .grid-cronicas{grid-template-columns:repeat(2,1fr)}
  .grid-cronicas .destacada{grid-column:span 2}
  .footer-grid{grid-template-columns:1fr 1fr}
  .directorio-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .nav-toggle{display:block}
  .nav-principal{display:none;width:100%;order:5}
  .nav-principal.abierto{display:block}
  .nav-principal ul{flex-direction:column;gap:0;padding:10px 0}
  .nav-principal li{border-bottom:1px solid var(--linea)}
  .nav-principal a{display:block;padding:14px 4px}
  .header-inner{flex-wrap:wrap;gap:12px}
  .marca-hora,.letrero-abierto{display:none}
  .grid-cronicas{grid-template-columns:1fr}
  .grid-cronicas .destacada{grid-column:span 1}
  .paneles{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .registro{padding:42px 24px;transform:none}
  .nav-entradas{grid-template-columns:1fr}
  .seccion{padding:60px 0}
  .hero-caja{transform:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}