/* periodico.css — La Gaceta Nacional */

:root {
  --papel:          #faf8f3;
  --tinta:          #111008;
  --rojo-cabecera:  #8b1a1a;
  --linea:          #1a1810;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: #1a1810; }

/* ── ESCENARIO ─────────────────────────────── */
#escenario {
  perspective: 1800px; perspective-origin: 50% 30%;
  display: flex; justify-content: center; align-items: flex-start;
  min-height: 100vh; padding: 40px 0 80px;
  background: radial-gradient(ellipse at 50% 10%, #2e2618 0%, #0e0c08 70%);
}
#libro { position: relative; width: min(1100px, 96vw); transform-style: preserve-3d; }
#libro::after {
  content: ''; position: absolute; bottom: -22px; left: 4%; right: 4%;
  height: 32px; background: rgba(0,0,0,.55); filter: blur(18px);
  border-radius: 50%; z-index: -1;
}
#paginas-wrap {
  position: relative; overflow: hidden; background: var(--papel);
  box-shadow: 0 0 0 1px rgba(0,0,0,.1),
              inset -3px 0 10px rgba(0,0,0,.04),
              inset 3px 0 10px rgba(0,0,0,.04);
}
#paginas-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.022'/%3E%3C/svg%3E");
}
#lomo {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 4px; background: linear-gradient(to right,rgba(0,0,0,.03),rgba(0,0,0,.09),rgba(0,0,0,.03));
  z-index: 50; pointer-events: none;
}
@keyframes lomo-flash { 0%,100%{opacity:1} 50%{background:rgba(255,255,255,.5);opacity:.4} }
#lomo.flash { animation: lomo-flash 0.35s ease; }

.doblez { display: none; position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 200; }
.doblez.visible { display: block; animation: sombra-doblez 0.6s ease forwards; }
.doblez.izq { left: 0; background: linear-gradient(to right,rgba(0,0,0,.16),transparent); }
.doblez.der { right: 0; background: linear-gradient(to left,rgba(0,0,0,.16),transparent); }
@keyframes sombra-doblez { 0%,100%{opacity:0} 35%,65%{opacity:1} }

/* ── PÁGINAS ───────────────────────────────── */
.seccion-pagina { display: none; padding: 0 22px 50px; }
.seccion-pagina.activa { display: block; }

@keyframes sale-izq  { 0%{transform:rotateY(0) translateZ(0);opacity:1} 40%{transform:rotateY(-22deg) translateZ(-50px);opacity:.65} 100%{transform:rotateY(-90deg) translateZ(-110px);opacity:0} }
@keyframes entra-der { 0%{transform:rotateY(90deg) translateZ(-110px);opacity:0} 60%{transform:rotateY(12deg) translateZ(-30px);opacity:.75} 82%{transform:rotateY(-2deg) translateZ(-3px)} 100%{transform:rotateY(0) translateZ(0);opacity:1} }
@keyframes sale-der  { 0%{transform:rotateY(0) translateZ(0);opacity:1} 40%{transform:rotateY(22deg) translateZ(-50px);opacity:.65} 100%{transform:rotateY(90deg) translateZ(-110px);opacity:0} }
@keyframes entra-izq { 0%{transform:rotateY(-90deg) translateZ(-110px);opacity:0} 60%{transform:rotateY(-12deg) translateZ(-30px);opacity:.75} 82%{transform:rotateY(2deg) translateZ(-3px)} 100%{transform:rotateY(0) translateZ(0);opacity:1} }

.sale-izq  { display:block!important; transform-origin:left center;  animation:sale-izq  .52s cubic-bezier(.4,0,.2,1) forwards; pointer-events:none; }
.entra-der { display:block!important; transform-origin:right center; animation:entra-der .52s cubic-bezier(.4,0,.2,1) forwards; }
.sale-der  { display:block!important; transform-origin:right center; animation:sale-der  .52s cubic-bezier(.4,0,.2,1) forwards; pointer-events:none; }
.entra-izq { display:block!important; transform-origin:left center;  animation:entra-izq .52s cubic-bezier(.4,0,.2,1) forwards; }

/* ── CABECERA ──────────────────────────────── */
.cabecera-wrap { padding: 0 22px; }
header { border-bottom: 4px double var(--linea); padding-bottom: 6px; }

.top-bar { display:flex; justify-content:space-between; padding:6px 0 4px; border-bottom:1px solid var(--linea); font-family:'Special Elite',monospace; font-size:10px; letter-spacing:.5px; }
.top-bar span { opacity: .65; }

.masthead { text-align:center; padding:12px 0 8px; border-bottom:2px solid var(--linea); }
.masthead-subtitle { font-family:'Special Elite',monospace; font-size:10.5px; letter-spacing:4px; text-transform:uppercase; margin-bottom:4px; opacity:.6; }
.masthead h1 { font-family:'UnifrakturMaguntia',cursive; font-size:clamp(48px,9vw,88px); color:var(--tinta); line-height:.9; letter-spacing:2px; text-shadow:1px 1px 0 rgba(0,0,0,.07); animation:titulo-ap 1.8s ease-out both .3s; }
@keyframes titulo-ap { from{opacity:0;letter-spacing:12px} to{opacity:1;letter-spacing:2px} }
.masthead-tagline { font-family:'Special Elite',monospace; font-size:10px; letter-spacing:2px; opacity:.5; margin-top:4px; font-style:italic; }

.edition-bar { display:flex; justify-content:space-between; align-items:center; padding:4px 0; border-bottom:3px solid var(--linea); border-top:1px solid var(--linea); margin-top:6px; font-family:'Special Elite',monospace; font-size:10.5px; }
.precio { background:var(--tinta); color:var(--papel); padding:2px 8px; font-family:'Special Elite',monospace; font-size:11px; letter-spacing:1px; }

/* ── NAVEGACIÓN ────────────────────────────── */
.secciones { display:flex; align-items:stretch; border-bottom:2px solid var(--linea); font-family:'Special Elite',monospace; font-size:10.5px; letter-spacing:1px; text-transform:uppercase; }
.secciones a { padding:5px 13px; text-decoration:none; color:var(--tinta); border-right:1px solid var(--linea); cursor:pointer; transition:background .12s,color .12s; user-select:none; }
.secciones a:hover { background: rgba(0,0,0,.05); }
.secciones a.activa { background:var(--tinta); color:var(--papel); }
.num-pagina { margin-left:auto; padding:5px 14px; font-family:'Special Elite',monospace; font-size:10px; opacity:.45; letter-spacing:1px; display:flex; align-items:center; white-space:nowrap; }

/* ── TICKER ────────────────────────────────── */
.ticker-wrap { overflow:hidden; background:var(--tinta); color:var(--papel); padding:5px 0; border-bottom:2px solid var(--linea); font-family:'Special Elite',monospace; font-size:11px; display:flex; align-items:center; }
.ticker-label { flex-shrink:0; padding:0 12px; border-right:1px solid rgba(255,255,255,.2); margin-right:16px; font-size:9px; letter-spacing:2px; text-transform:uppercase; }
.ticker-inner { display:flex; white-space:nowrap; animation:ticker 40s linear infinite; }
.ticker-inner span { margin-right:60px; }
.ticker-inner span::before { content:'◆ '; opacity:.45; }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── LAYOUT PORTADA ────────────────────────── */
.portada { display:grid; grid-template-columns:1fr 1px 2fr 1px 1fr; padding:14px 0 0; border-bottom:3px double var(--linea); }
.col-sep { background:var(--linea); opacity:.18; margin:0 14px; }

/* ── ARTÍCULOS ─────────────────────────────── */
.articulo { padding-bottom:14px; }
.con-separador { border-top:1px solid rgba(0,0,0,.12); padding-top:12px; }
.articulo-categoria { font-family:'Special Elite',monospace; font-size:9px; letter-spacing:3px; text-transform:uppercase; color:var(--rojo-cabecera); margin-bottom:4px; border-bottom:1px solid var(--rojo-cabecera); padding-bottom:2px; display:inline-block; }
.articulo h2 { font-family:'Playfair Display',Georgia,serif; font-weight:900; line-height:1.15; margin-bottom:6px; cursor:pointer; transition:color .2s; }
.articulo h2:hover { color: #555; }
.articulo h2.xl { font-size:clamp(22px,3.5vw,34px); }
.articulo h2.lg { font-size:clamp(18px,2.5vw,26px); }
.articulo h2.md { font-size:clamp(14px,2vw,19px); }
.articulo h2.sm { font-size:13px; }
.articulo-subtitulo { font-family:'Playfair Display',serif; font-style:italic; font-size:13px; line-height:1.5; margin-bottom:8px; opacity:.72; }
.articulo-firma { font-family:'Special Elite',monospace; font-size:9.5px; letter-spacing:1px; opacity:.48; margin-bottom:8px; text-transform:uppercase; }
.articulo p { font-family:'Libre Baskerville',Georgia,serif; font-size:12.5px; line-height:1.75; text-align:justify; hyphens:auto; margin-bottom:8px; color:var(--tinta); }
.capitular::first-letter { font-family:'UnifrakturMaguntia',cursive; font-size:4.2em; float:left; line-height:.75; margin:4px 6px 0 0; }
.sep-h { border:none; border-top:1px solid rgba(0,0,0,.13); margin:12px 0; }

/* ── FOTOS — blanco y negro estilo prensa ──── */
.foto-principal { width:100%; margin:10px 0 4px; }
.foto-principal img {
  width: 100%; display: block;
  border: 1px solid rgba(0,0,0,.25);
  filter: grayscale(100%) contrast(1.15) brightness(0.92);
}
.foto-principal.sin-foto .foto-placeholder { display: block; }
.foto-placeholder { width:100%; aspect-ratio:16/9; background:linear-gradient(160deg,#d0d0d0 0%,#888 50%,#b8b8b8 100%); border:1px solid rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.foto-placeholder::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 40% at 30% 40%,rgba(240,240,230,.5) 0%,transparent 70%); }
.foto-placeholder::after { content:'FOTOGRAFÍA'; font-family:'Special Elite',monospace; font-size:9px; letter-spacing:4px; color:rgba(0,0,0,.18); }
.foto-pie { font-family:'Special Elite',monospace; font-size:9.5px; font-style:italic; opacity:.52; border-top:1px solid rgba(0,0,0,.1); padding-top:3px; margin-bottom:8px; }
/* Imágenes en secciones interiores — también blanco y negro */
.img-noticia {
  width: 100%; margin: 8px 0;
  border: 1px solid rgba(0,0,0,.2);
  filter: grayscale(100%) contrast(1.1) brightness(0.93);
}
/* Modal — imagen también en b/n */
.modal-articulo img {
  filter: grayscale(100%) contrast(1.1) brightness(0.93);
  border: 1px solid rgba(0,0,0,.2);
  width: 100%; margin-bottom: 12px;
}

/* ── CAJAS / PUBLICIDAD ────────────────────── */
.caja-destacada { border:2px solid var(--tinta); padding:10px 12px; margin:10px 0; background:rgba(0,0,0,.022); position:relative; }
.caja-destacada::before { content:'■ ESPECIAL'; position:absolute; top:-8px; left:8px; background:var(--papel); padding:0 5px; font-family:'Special Elite',monospace; font-size:9px; letter-spacing:2px; color:var(--rojo-cabecera); }
.publicidad { border:2px solid var(--tinta); padding:12px; text-align:center; margin:12px 0; font-family:'Special Elite',monospace; }
.publicidad-titulo { font-size:18px; letter-spacing:3px; text-transform:uppercase; border-bottom:1px solid var(--linea); padding-bottom:4px; margin-bottom:6px; }
.publicidad p { font-size:10.5px; line-height:1.5; opacity:.68; }

/* ── COLUMNA LATERAL ───────────────────────── */
.lateral-titulo { font-family:'Special Elite',monospace; font-size:10px; letter-spacing:3px; text-transform:uppercase; border-bottom:2px solid var(--tinta); padding-bottom:3px; margin-bottom:10px; }
.noticia-breve { border-bottom:1px solid rgba(0,0,0,.1); padding-bottom:10px; margin-bottom:10px; cursor:pointer; transition:opacity .2s; }
.noticia-breve:hover { opacity:.6; }
.noticia-breve h4 { font-family:'Playfair Display',serif; font-size:13px; font-weight:700; line-height:1.3; margin-bottom:4px; }
.noticia-breve p { font-family:'Libre Baskerville',serif; font-size:11px; line-height:1.6; opacity:.72; }

/* ── SECCIÓN SECUNDARIA ────────────────────── */
.seccion-secundaria { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:3px double var(--linea); padding:14px 0; }
.seccion-secundaria .col { padding:0 14px; border-right:1px solid rgba(0,0,0,.12); }
.seccion-secundaria .col:first-child { padding-left:0; }
.seccion-secundaria .col:last-child { border-right:none; }

.seccion-header { text-align:center; margin:14px 0 10px; position:relative; }
.seccion-header::before,.seccion-header::after { content:''; position:absolute; top:50%; width:30%; height:1px; background:var(--linea); opacity:.2; }
.seccion-header::before { left:0; }
.seccion-header::after { right:0; }
.seccion-header span { font-family:'Special Elite',monospace; font-size:10px; letter-spacing:4px; text-transform:uppercase; padding:0 16px; opacity:.5; }

/* ── PÁGINAS INTERIORES ────────────────────── */
.pagina-interior { padding:14px 0; }
.sec-titulo { font-family:'Playfair Display',serif; font-weight:900; font-size:28px; border-bottom:3px double var(--linea); padding-bottom:8px; margin-bottom:16px; }
.articulo-principal-sec { border-bottom:2px solid var(--linea); padding-bottom:14px; margin-bottom:14px; }
.grid-noticias { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-noticias .articulo { border-right:1px solid rgba(0,0,0,.1); padding-right:20px; }
.grid-noticias .articulo:nth-child(even) { border-right:none; padding-right:0; }

.ornamento { text-align:center; font-size:14px; opacity:.22; margin:6px 0; letter-spacing:6px; }

/* ── FOOTER ────────────────────────────────── */
footer { border-top:3px double var(--linea); margin-top:20px; padding-top:10px; display:flex; justify-content:space-between; font-family:'Special Elite',monospace; font-size:9.5px; opacity:.42; letter-spacing:.5px; }
footer p { line-height:1.7; }

/* ── MODAL ─────────────────────────────────── */
.overlay-lectura { display:none; position:fixed; inset:0; background:rgba(8,6,2,.9); z-index:1000; justify-content:center; align-items:flex-start; padding:40px 20px; overflow-y:auto; }
.overlay-lectura.visible { display:flex; }
.modal-articulo { background:var(--papel); max-width:640px; width:100%; padding:40px 48px; position:relative; box-shadow:0 20px 80px rgba(0,0,0,.65); animation:modal-entra .3s ease-out; }
@keyframes modal-entra { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.modal-cerrar { position:absolute; top:14px; right:18px; font-family:'Special Elite',monospace; font-size:11px; cursor:pointer; letter-spacing:2px; opacity:.4; border:1px solid var(--tinta); padding:2px 8px; transition:all .15s; }
.modal-cerrar:hover { opacity:1; background:var(--tinta); color:var(--papel); }

/* ── CURSOR ────────────────────────────────── */
body { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 2 L5 18 M3 4 L7 4' stroke='%23111008' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") 5 2,default; font-family:'Libre Baskerville',Georgia,serif; color:var(--tinta); }

/* ── RESPONSIVE ────────────────────────────── */
@media (max-width:768px) {
  .portada { grid-template-columns:1fr; }
  .col-sep { display:none; }
  .seccion-secundaria,.grid-noticias { grid-template-columns:1fr; }
  .secciones { flex-wrap:wrap; }
  .secciones a { font-size:9px; padding:4px 8px; }
  #escenario { padding:10px 0 40px; }
  .modal-articulo { padding:24px 20px; }
  .num-pagina { display:none; }
}