/* Estilos del sitio · estética de sitio personal de finales de los 90, legible en cualquier pantalla */

:root {
  --cielo: #0A0A2E;
  --plata: #C0C0C0;
  --plata-luz: #DADADA;
  --papel: #E8E8E0;
  --blanco: #FFFFFF;
  --tinta: #111111;
  --marino: #000080;
  --rojo: #CC0000;
  --amarillo: #FFFF66;
  --fosforo: #39FF14;
  --naranja: #FFB347;
  --enlace: #0000EE;
  --visitado: #551A8B;
  --pixel: "VT323", "Courier New", monospace;
  --titular: "Bungee Shade", "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle, #FFFFFF 1px, transparent 1.6px) 0 0 / 46px 46px,
    radial-gradient(circle, #9C9CFF 1px, transparent 1.6px) 23px 17px / 63px 63px,
    var(--cielo);
  color: var(--tinta);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.55;
}

/* Parallax (estatico/fondo.js): las estrellas pasan a dos capas fijas que se mueven más lento que el texto.
   Mismos colores, tamaños y desfases que el fondo de body; sin la clase, el fondo queda como arriba. */
html.parallax body { background: var(--cielo); }
html.parallax body::before,
html.parallax body::after {
  content: ""; position: fixed; left: 0; top: 0; width: 100%;
  z-index: -1; pointer-events: none; will-change: transform;
}
html.parallax body::before {
  height: calc(100% + 46px);
  background: radial-gradient(circle, #FFFFFF 1px, transparent 1.6px) 0 0 / 46px 46px;
  transform: translateY(var(--capa-1, 0px));
}
html.parallax body::after {
  height: calc(100% + 63px);
  background: radial-gradient(circle, #9C9CFF 1px, transparent 1.6px) 23px 17px / 63px 63px;
  transform: translateY(var(--capa-2, 0px));
}

a { color: var(--enlace); }
a:not(.sello):visited { color: var(--visitado); }
a:not(.sello):hover { color: var(--rojo); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px dashed var(--amarillo);
  outline-offset: 2px;
}

.saltar {
  position: absolute; left: -9999px; top: 8px;
  background: var(--amarillo); color: #000; padding: 8px 12px; z-index: 10;
}
.saltar:focus { left: 8px; }

.pagina {
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* --- Cabecera --- */
.cabecera { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 4px; }
.logo {
  font-family: var(--titular);
  font-size: clamp(28px, 8vw, 92px);
  line-height: 1;
  color: #FF66FF;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.logo:visited { color: #FF66FF; }
.logo:hover { color: var(--amarillo); }
.lema { margin: 0; color: var(--amarillo); font-size: 20px; font-style: italic; }
.autor { margin: -4px 0 0; font-family: var(--pixel); font-size: 18px; color: var(--plata); letter-spacing: 0.05em; }

/* --- Marquesina --- */
.marquesina {
  background: #000;
  border: 3px ridge var(--plata);
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--pixel);
  font-size: 24px;
  color: var(--fosforo);
  padding: 4px 0;
}
.marquesina-texto { display: inline-block; animation: marquesina 30s linear infinite; }
.marquesina-texto span { padding-right: 80px; }
@keyframes marquesina { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Columnas --- */
.columnas { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.lateral { flex: 1 1 230px; display: flex; flex-direction: column; gap: 14px; }
.principal { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* --- Cajas y paneles en relieve --- */
.caja, .panel, .historia { border: 3px outset var(--plata-luz); padding: 14px 18px; }
.caja { background: var(--plata); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.caja-amarilla { background: #FFFFE0; font-size: 16px; }
.caja-azul { background: var(--marino); border-color: #4040C0; color: var(--blanco); font-size: 16px; }
.caja-azul .caja-titulo { color: var(--amarillo); }
.caja-azul p { margin: 0; }
.caja-azul label { font-weight: 700; font-size: 15px; }
.caja-azul input {
  min-height: 40px; padding: 0 8px; border: 2px inset #808080; background: #D8D8D8; color: #333; font: inherit;
}
.caja-azul button {
  min-height: 44px; background: var(--plata); border: 3px outset var(--plata-luz); color: #555;
  font-family: var(--pixel); font-size: 22px;
}
.caja-titulo { margin: 0; font-family: var(--pixel); font-weight: 400; font-size: 26px; color: var(--marino); text-transform: uppercase; line-height: 1.1; }

.panel { background: var(--blanco); display: flex; flex-direction: column; gap: 8px; }
.panel p, .historia p { margin: 0; }
.panel-fila { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

.historia { background: var(--papel); display: flex; flex-direction: column; gap: 10px; }
.seccion-edicion { display: flex; flex-direction: column; gap: 14px; }
.historia-titulo { margin: 0; font-size: 23px; line-height: 1.25; color: var(--marino); }

.titulo-seccion { margin: 0; font-size: 30px; line-height: 1.2; color: var(--marino); }
.encabezado-edicion { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.nuevo { font-family: var(--pixel); font-size: 26px; color: var(--rojo); animation: parpadeo 1.1s step-end infinite; }
@keyframes parpadeo { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.nota { font-size: 15px; }
.caja-azul .nota { color: #DDD; }

/* --- Menú --- */
.menu { margin: 0; padding: 0; list-style: none; }
.menu a { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 700; }
.menu a span { color: var(--rojo); }
.menu a[aria-current="page"] { color: var(--tinta); text-decoration: none; background: var(--plata-luz); padding-left: 4px; }

/* --- Sellos de tipo y confianza --- */
.sellos { display: flex; flex-wrap: wrap; gap: 6px; }
.sello {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--pixel);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px outset;
}
a.sello { text-decoration: none; }
a.sello:hover, a.sello:focus-visible { text-decoration: underline; }
.historia-edicion { margin: 0; }
.sello-oficial { background: var(--marino); color: #fff; border-color: #4040C0; }
.sello-reporte { background: #fff; color: var(--marino); border-color: var(--plata); }
.sello-rumor { background: var(--rojo); color: #fff; border-color: #FF6060; }
.sello-opinion { background: #fff; color: #444; border-color: var(--plata); }
.sello-conf-oficial { background: var(--amarillo); color: #000; border-color: #FFFFB0; }
.sello-conf-medio { background: var(--naranja); color: #000; border-color: #FFD8A0; }
.sello-conf-comunidad { background: #707070; color: #fff; border-color: #B0B0B0; }
.leyenda { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }

/* --- Fuentes de cada historia --- */
.fuentes { font-size: 16px; padding-top: 8px; border-top: 2px groove var(--blanco); }
.fuentes ul { margin: 4px 0 0; padding-left: 20px; }

.nav-ediciones {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 16px;
  font-family: var(--pixel); font-size: 22px;
}
.nav-ediciones a { display: inline-flex; align-items: center; min-height: 44px; }
.lista-archivo { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

.prosa h2 { margin: 12px 0 0; font-size: 22px; color: var(--marino); }
.prosa p, .prosa ul { margin: 0; }

/* --- Botones e insignias --- */
.boton {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--plata); border: 3px outset var(--plata-luz); color: #000; text-decoration: none; font-weight: 700;
}
.boton:visited { color: #000; }
.boton:active { border-style: inset; }

.insignias { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.insignia {
  width: 88px; height: 31px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--pixel); font-size: 15px; line-height: 0.95;
  border: 2px outset var(--plata-luz); text-decoration: none;
}
.insignia-rss, .insignia-rss:visited { background: #FF8800; color: #000; }
.insignia-azul { background: var(--marino); color: var(--amarillo); }
.insignia-roja { background: var(--rojo); color: #fff; }
.insignia-amarilla { background: var(--amarillo); color: #000; }
.insignia-verde { background: var(--fosforo); color: #000; }

.en-obra {
  height: 24px;
  background: repeating-linear-gradient(-45deg, #FFD700 0 14px, #000 14px 28px);
  border: 2px solid #000;
}

/* --- Pie --- */
.pie { text-align: center; color: #DDDDFF; font-size: 15px; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.pie p { margin: 0; }
.pie a, .pie a:visited { color: var(--amarillo); }
.pie-retro { font-family: var(--pixel); font-size: 20px; color: var(--amarillo); }

/* En pantallas angostas, las noticias van primero y el menú queda a un toque */
.ir-menu { display: none; }
@media (max-width: 760px) {
  .principal { order: -1; }
  .ir-menu {
    display: inline-flex; align-self: center; align-items: center; min-height: 44px; padding: 0 16px;
    background: var(--plata); border: 3px outset var(--plata-luz); color: #000; font-weight: 700; text-decoration: none;
  }
  .ir-menu:visited { color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  .marquesina-texto, .nuevo { animation: none; }
}