/* ed42.org — la casa (11-oct-2026). La terminal de ed42.com + el lápiz de los fanzines en negativo.
   Las fuentes viven aquí mismo (OFL): ninguna petición sale a terceros. */
@font-face { font-family: 'VT323'; src: url(fuentes/vt323-latin.woff2) format('woff2'); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'VT323'; src: url(fuentes/vt323-latin-ext.woff2) format('woff2'); font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Press Start 2P'; src: url(fuentes/pressstart2p-latin.woff2) format('woff2'); font-display: swap; }

:root {
  --negro: #000;
  --rojo: #ff0055;          /* el énfasis, el mismo de ed42.com */
  --rojo-medio: #99003a;
  --rojo-tenue: #5c0020;
  --lapiz: #f2f2f2;         /* el lápiz en negativo */
  --gris: #9a9a9a;
  --neon: #00e5ff;          /* el neón poquito: solo en detalles */
  --mono: 'VT323', ui-monospace, 'Courier New', monospace;
  --pixel: 'Press Start 2P', 'VT323', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { background: var(--negro); }
body { margin: 0; color: var(--lapiz); font-family: var(--mono); font-size: 1.3rem; line-height: 1.45;
  -webkit-text-size-adjust: 100%; }
a { color: var(--rojo); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--neon); outline: none; }
img { max-width: 100%; height: auto; display: block; }

/* la selección y las barras de desplazamiento, en el rojo de la casa (ed, 11-oct) */
::selection { background: var(--rojo); color: var(--negro); }
html { scrollbar-color: var(--rojo) var(--negro); }
::-webkit-scrollbar { width: 10px; height: 10px; background: var(--negro); }
::-webkit-scrollbar-thumb { background: var(--rojo); border: 2px solid var(--negro); }
::-webkit-scrollbar-track { background: var(--negro); }

/* ── la barra de terminal ─────────────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem;
  padding: .55rem 1rem; background: rgba(0, 0, 0, .92); border-bottom: 1px solid var(--rojo-tenue); }
.marca { font-family: var(--pixel); font-size: .8rem; color: var(--rojo); text-decoration: none; letter-spacing: .02em; }
.ruta { color: var(--gris); font-size: 1.1rem; flex: 1; min-width: 8rem; }
.ruta a { color: var(--gris); text-decoration: none; }
.ruta a:hover, .ruta a:focus-visible { color: var(--neon); text-decoration: underline; }
.ruta [aria-current] { color: var(--lapiz); }
.cursor { color: var(--rojo); animation: parpadeo 1.1s steps(1) infinite; margin-left: .15rem; }
@keyframes parpadeo { 50% { opacity: 0; } }
.barra nav { display: flex; gap: .9rem; flex-wrap: wrap; }
.barra nav a { color: var(--lapiz); text-decoration: none; font-size: 1.15rem; }
.barra nav a::before { content: '> '; color: var(--rojo-medio); }
.barra nav a:hover { color: var(--rojo); }

main { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

/* ── títulos rotulados a mano (imágenes) y la línea de terminal ─────────── */
.rotulo { margin: .5rem 0 1rem; }
.rotulo img { max-height: 7.5rem; width: auto; }
.terminal { color: var(--lapiz); max-width: 44rem; margin: 0 0 1.8rem; }
.prompt { color: var(--rojo); }
.ica { font-family: var(--mono); color: var(--neon); font-size: 1.05rem; letter-spacing: .04em; margin: 0 0 .2rem; text-transform: lowercase; }
.ayuda { color: var(--gris); font-size: 1.05rem; margin: .4rem 0; }
.lead { color: var(--gris); }

/* ── el librito que se hojea (12-oct): portada sola, pliegos de a dos, contraportada sola ── */
.librito { position: relative; width: min(96vw, 52rem); margin: 0 auto .5rem; }
.librito > input { position: absolute; opacity: 0; pointer-events: none; }
.libro { position: relative; aspect-ratio: 1650 / 1275; perspective: 2600px; transition: transform .7s ease; }
.e0:checked ~ .libro { transform: translateX(-25%); }   /* cerrado: la portada al centro */
.e4:checked ~ .libro { transform: translateX(25%); }    /* acabado: la contraportada al centro */
.hoja { position: absolute; top: 0; left: 50%; width: 50%; height: 100%; transform-origin: left center;
  transform-style: preserve-3d; z-index: var(--z);
  transition: transform .8s cubic-bezier(.45, .05, .2, 1), z-index 0s .4s; }   /* cambia de pila a mitad del giro */
.h1 { --z: 4; --zv: 5; } .h2 { --z: 3; --zv: 6; } .h3 { --z: 2; --zv: 7; } .h4 { --z: 1; --zv: 8; }
.e1:checked ~ .libro .h1,
.e2:checked ~ .libro :is(.h1, .h2),
.e3:checked ~ .libro :is(.h1, .h2, .h3),
.e4:checked ~ .libro .hoja { transform: rotateY(-180deg); z-index: var(--zv); }
.cara { position: absolute; inset: 0; display: block; cursor: pointer;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.cara img { width: 100%; height: 100%; object-fit: cover; border: 1px solid #1a1a1a; }
.dorso { transform: rotateY(180deg); }
.frente img { box-shadow: inset 6px 0 10px -6px #0008; }
.librito > input:focus-visible ~ .libro { outline: 1px dashed var(--neon); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .libro, .hoja { transition: none; } }

/* ── la portada de la casa: cuatro puertas ─────────────────────────────── */
.manifiesto { margin: 0 0 2.2rem; }
.puertas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.puertas a { display: grid; grid-template-columns: 5.5rem 1fr; grid-template-rows: auto 1fr; gap: .2rem .9rem;
  padding: .9rem; border: 1px solid var(--rojo-tenue); color: var(--lapiz); text-decoration: none; min-height: 8rem; }
.puertas a:hover { border-color: var(--rojo); }
.puertas .dibujo { grid-row: 1 / 3; width: 5.5rem; height: 5.5rem; object-fit: contain; }
.puertas .nombre { height: 2.6rem; width: auto; }
.puertas span { color: var(--gris); font-size: 1.1rem; line-height: 1.3; }

/* ── estantes y portadas ───────────────────────────────────────────────── */
.estantes, .portadas, .lista { list-style: none; padding: 0; margin: 0; }
.estantes { display: grid; gap: .8rem; }
.estantes a { display: grid; grid-template-columns: 4.5rem 1fr; gap: .9rem; align-items: center; padding: .5rem;
  border: 1px solid var(--rojo-tenue); color: var(--lapiz); text-decoration: none; }
.estantes a:hover { border-color: var(--rojo); }
.estantes b { color: var(--rojo); font-weight: normal; }
.estantes span { color: var(--gris); font-size: 1.1rem; }
.estantes span b + br + * { color: var(--gris); }
.portadas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.portadas a { display: block; color: var(--lapiz); text-decoration: none; font-size: 1.1rem; }
.portadas img { border: 1px solid #1a1a1a; margin-bottom: .25rem; }
.portadas a:hover img { border-color: var(--rojo); }
.lista li { border-bottom: 1px dashed var(--rojo-tenue); }
.lista a { display: block; padding: .7rem 0; color: var(--lapiz); text-decoration: none; font-size: 1.35rem; }
.lista a:hover { color: var(--rojo); }
.lista .ica { display: block; }

/* ── una página de fanzine ─────────────────────────────────────────────── */
.fanzine h1, .texto h1, section h1 { font-family: var(--mono); font-weight: normal; color: var(--rojo); font-size: 2.3rem;
  line-height: 1.1; margin: 0 0 .4rem; }
.imprimir { margin-top: 1.2rem; color: var(--gris); }
.boton { display: inline-block; margin: .3rem .6rem .3rem 0; color: var(--rojo); text-decoration: none; }
.boton:hover { color: var(--neon); }

/* ── los textos largos del pensamiento ─────────────────────────────────── */
.texto { max-width: 42rem; }
.texto h2 { font-family: var(--mono); font-weight: normal; color: var(--rojo); font-size: 1.75rem; margin: 2.2rem 0 .5rem; }
.texto h3 { font-family: var(--mono); font-weight: normal; color: var(--lapiz); font-size: 1.45rem; margin: 1.6rem 0 .4rem;
  border-left: 3px solid var(--rojo); padding-left: .6rem; }
.texto strong { color: #fff; font-weight: normal; background: rgba(255, 0, 85, .18); padding: 0 .15em; }
.texto em { color: var(--lapiz); font-style: italic; }
.texto blockquote { margin: 1.2rem 0; padding: .4rem 0 .4rem 1rem; border-left: 3px solid var(--neon); color: #fff; }
.texto li { margin: .3rem 0; }
.texto code { color: var(--neon); }
.texto hr { border: 0; border-top: 1px dashed var(--rojo-tenue); margin: 2rem 0; }
.texto table { border-collapse: collapse; font-size: 1.1rem; }
.texto td, .texto th { border: 1px solid var(--rojo-tenue); padding: .3rem .5rem; }

/* ── el pie ────────────────────────────────────────────────────────────── */
.pie { border-top: 1px solid var(--rojo-tenue); padding: 1rem; text-align: center; color: var(--gris); font-size: 1.05rem; }
.pie p { margin: .2rem 0; }

@media (max-width: 40rem) {
  body { font-size: 1.25rem; }
  .barra nav { width: 100%; gap: .7rem; }
  .rotulo img { max-height: 5rem; }
  .fanzine h1, .texto h1, section h1 { font-size: 1.9rem; }
}
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }