/* =========================================================================
   MODO RETRO · ZX Spectrum + teletexto
   Misma maquetación; cambia la piel: 15 colores, fuentes de píxel, sin curvas.
   ========================================================================= */
html.mode-retro {
  --k: #000000; --b: #0000d7; --r: #d70000; --m: #d700d7; --g: #00d700; --c: #00d7d7; --y: #d7d700; --w: #d7d7d7;
  --B: #0000ff; --R: #ff0000; --M: #ff00ff; --G: #00ff00; --C: #00ffff; --Y: #ffff00; --W: #ffffff;
  --bg: #000; --bg2: #000; --panel: #000; --panel-solid: #000;
  --line: var(--b); --line-strong: var(--B);
  --text: var(--W); --muted: var(--C); --dim: var(--c);
  --accent: var(--Y); --accent2: var(--M); --accent3: var(--G); --warn: var(--Y); --danger: var(--R);
  --grad: linear-gradient(90deg, var(--R), var(--Y), var(--G), var(--C));
  --radius: 0; --shadow: none;
  --font: 'VT323', monospace; --mono: 'VT323', monospace; --pix: 'Press Start 2P', monospace; --serif: 'VT323', monospace;
  --ink: var(--W); --accent-soft: var(--b); --accent2-soft: var(--b); --accent3-soft: var(--b);
  --shadow-sm: none; --shadow-lg: none; color-scheme: dark;
}
html.mode-retro body {
  background: var(--k); font: 22px/1.25 var(--font); letter-spacing: .02em;
  -webkit-font-smoothing: none; font-smooth: never;
}
html.mode-retro #bg3d, html.mode-retro .bg-grid { display: none; }
html.mode-retro *, html.mode-retro *::before, html.mode-retro *::after {
  border-radius: 0 !important; box-shadow: none !important; text-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition-timing-function: steps(4) !important;
}
html.mode-retro a { color: var(--C); }
html.mode-retro a:hover { color: var(--k); background: var(--C); }
html.mode-retro ::selection { background: var(--Y); color: var(--k); }

/* Barrido CRT y viñeta */
html.mode-retro .crt {
  display: block; position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .55));
  animation: flicker 4s steps(1) infinite;
}
@keyframes flicker { 0%, 100% { opacity: .9; } 47% { opacity: .82; } 48% { opacity: .95; } }

/* Borde de colores del Spectrum alrededor del «papel» */
html.mode-retro .main {
  border: 14px solid var(--b); border-left-width: 14px; min-height: calc(100vh - 0px);
  padding-top: 18px; background: var(--k);
}

/* Cabecera de teletexto */
#ttx { display: none; }
html.mode-retro #ttx {
  display: flex; gap: 14px; align-items: center; margin: -4px 0 22px; font: 22px var(--font);
  color: var(--W); white-space: nowrap; overflow: hidden;
}
html.mode-retro #ttx .p { color: var(--W); }
html.mode-retro #ttx .t { flex: 1; color: var(--k); background: var(--Y); padding: 0 8px; font-family: var(--pix); font-size: 13px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; }
html.mode-retro #ttx .c { color: var(--Y); }

/* Barra lateral como índice de teletexto */
html.mode-retro .sidebar { background: var(--k); border-right: 0; outline: 4px solid var(--B); outline-offset: -4px; padding-top: 18px; }
html.mode-retro .avatar { background: var(--k); animation: none; outline: 4px solid var(--Y); outline-offset: 0; padding: 0; width: 104px; height: 104px; }
html.mode-retro .avatar img { border: 0; image-rendering: pixelated; }
html.mode-retro .who .name { font: 14px/1.6 var(--pix); color: var(--Y); letter-spacing: 0; }
html.mode-retro .who .role { font: 19px/1.15 var(--font); color: var(--C); }
html.mode-retro .menu a { font-size: 22px; padding: 2px 8px; color: var(--W); gap: 10px; }
html.mode-retro .menu a::before { display: none; }
html.mode-retro .menu a .num { width: auto; font: 22px var(--font); color: var(--Y); }
html.mode-retro .menu a .num::before { content: attr(data-ttx); }
html.mode-retro .menu a .num { font-size: 0; }
html.mode-retro .menu a .num::before { font-size: 22px; }
html.mode-retro .menu a .bi { color: var(--C); }
html.mode-retro .menu li:nth-child(7n+1) a .bi { color: var(--R); }
html.mode-retro .menu li:nth-child(7n+2) a .bi { color: var(--G); }
html.mode-retro .menu li:nth-child(7n+3) a .bi { color: var(--Y); }
html.mode-retro .menu li:nth-child(7n+4) a .bi { color: var(--B); }
html.mode-retro .menu li:nth-child(7n+5) a .bi { color: var(--M); }
html.mode-retro .menu li:nth-child(7n+6) a .bi { color: var(--C); }
html.mode-retro .menu a:hover, html.mode-retro .menu a.active { background: var(--B); color: var(--W); transform: none; }
html.mode-retro .menu a.active .bi, html.mode-retro .menu a:hover .bi { color: var(--Y); transform: none; }
html.mode-retro .mode-toggle { font: 20px var(--font); border: 3px solid var(--Y); color: var(--Y); background: var(--k); }
html.mode-retro .mode-toggle:hover { background: var(--Y); color: var(--k); }
html.mode-retro .socials a { border: 2px solid var(--c); color: var(--C); }
html.mode-retro .socials a:hover { background: var(--C); color: var(--k); transform: none; }
html.mode-retro kbd { font: 18px var(--font); border: 1px solid var(--W); color: var(--W); background: var(--k); }

/* Títulos de sección: banda de doble altura del teletexto */
html.mode-retro .prompt { font: 20px var(--font); color: var(--G); }
html.mode-retro .prompt .p-user { color: var(--G); } html.mode-retro .prompt .p-path { color: var(--C); } html.mode-retro .prompt .p-cmd { color: var(--W); }
html.mode-retro .caret { background: var(--W); width: .55em; }
html.mode-retro .sec-head h1 {
  font: 26px/1.5 var(--pix); color: var(--k); background: var(--C); padding: 10px 14px; letter-spacing: 0;
  text-transform: uppercase; display: flex; transform: scaleY(1.25); transform-origin: top; margin-bottom: 18px;
}
html.mode-retro .sec-head h1 .bi { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--k); filter: none; }
html.mode-retro body.route-publicaciones .sec-head h1 { background: var(--G); }
html.mode-retro body.route-proyectos .sec-head h1 { background: var(--Y); }
html.mode-retro body.route-divulgacion .sec-head h1 { background: var(--M); }
html.mode-retro body.route-moliendo-bits .sec-head h1 { background: var(--R); color: var(--W); }
html.mode-retro body.route-moliendo-bits .sec-head h1 .bi { color: var(--W); }
html.mode-retro body.route-tfg-tfm-tesis .sec-head h1 { background: var(--G); }
html.mode-retro body.route-libros .sec-head h1 { background: var(--W); }
html.mode-retro body.route-charlas .sec-head h1 { background: var(--M); }
html.mode-retro body.route-sobre-mi .sec-head h1 { background: var(--C); }
html.mode-retro body.route-contacto .sec-head h1 { background: var(--Y); }
html.mode-retro .glitch:hover span { animation: none; }
html.mode-retro h2.block-title { font: 16px/1.6 var(--pix); color: var(--Y); text-transform: uppercase; }
html.mode-retro h2.block-title::before { content: '■'; color: var(--R); font-family: var(--font); }
html.mode-retro h2.block-title::after { height: 0; border-top: 4px dotted var(--b); background: none; }
html.mode-retro h2.block-title .count { font: 18px var(--font); border: 0; color: var(--k); background: var(--W); }
html.mode-retro .prose, html.mode-retro .intro { color: var(--W); font-size: 22px; }
html.mode-retro .prose a { border: 0; color: var(--C); text-decoration: underline; text-decoration-style: dotted; }
html.mode-retro .prose strong { color: var(--Y); font-weight: 400; }
html.mode-retro .prose h2, html.mode-retro .prose h3 { font: 15px/1.6 var(--pix); color: var(--G); }
html.mode-retro .prose li::marker { content: '» '; color: var(--Y); }
html.mode-retro .intro p:first-child::first-letter { float: none; font: inherit; margin: 0; padding: 0 4px; border: 0; color: var(--k); background: var(--Y); }

/* Tarjetas: bloques de color con borde grueso (attribute clash incluido) */
html.mode-retro .card { background: var(--k); border: 3px solid var(--b); transform: none !important; }
html.mode-retro .card::after { display: none; }
html.mode-retro .card:hover { border-color: var(--Y); }
html.mode-retro .grid > :nth-child(6n+2) .card, html.mode-retro .grid > .card:nth-child(6n+2) { border-color: var(--r); }
html.mode-retro .grid > .card:nth-child(6n+3) { border-color: var(--g); }
html.mode-retro .grid > .card:nth-child(6n+4) { border-color: var(--m); }
html.mode-retro .grid > .card:nth-child(6n+5) { border-color: var(--c); }
html.mode-retro .grid > .card:nth-child(6n) { border-color: var(--y); }
html.mode-retro .card h3, html.mode-retro .card h3 a { font: 22px/1.15 var(--font); color: var(--Y); }
html.mode-retro .card h3 a:hover { background: var(--Y); color: var(--k); }
html.mode-retro .card p { color: var(--W); font-size: 20px; }
html.mode-retro .card .meta { font: 19px var(--font); color: var(--C); }
html.mode-retro .card .meta .bi { color: var(--G); }
html.mode-retro .thumb { background: var(--k); }
html.mode-retro .thumb::after { display: none; }
html.mode-retro .card:hover .thumb img { transform: none; }

/* Imágenes pixeladas: el canvas sustituye a la imagen original */
html.mode-retro img[data-zx] { visibility: hidden; position: absolute !important; pointer-events: none; }
html.mode-retro .zx-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; object-fit: cover; }
html.mode-retro .prose .zx-canvas, html.mode-retro .detail-hero .zx-canvas { height: auto; }
html.mode-retro .avatar .zx-canvas { border-radius: 0; }
html.mode-retro .aff img { filter: none; }
html.mode-retro model-viewer { filter: contrast(1.6) saturate(2) ; image-rendering: pixelated; }

/* Elementos de interfaz */
html.mode-retro .badge { font: 18px/1 var(--font); padding: 3px 6px; border: 0; background: var(--C); color: var(--k); }
html.mode-retro .badge.v { background: var(--M); color: var(--k); }
html.mode-retro .badge.g { background: var(--G); color: var(--k); }
html.mode-retro .badge.y { background: var(--Y); color: var(--k); }
html.mode-retro .badge.r { background: var(--R); color: var(--W); }
html.mode-retro .btn { font: 20px var(--font); background: var(--k); border: 2px solid var(--W); color: var(--W); transform: none !important; }
html.mode-retro .btn:hover { background: var(--W); color: var(--k); }
html.mode-retro .btn.primary { background: var(--G); color: var(--k); border-color: var(--G); }
html.mode-retro .toolbar { background: var(--k); border: 3px solid var(--M); }
html.mode-retro .chip { font: 20px var(--font); color: var(--W); border: 2px solid var(--W); }
html.mode-retro .chip.on { background: var(--Y); color: var(--k); border-color: var(--Y); }
html.mode-retro .chip .n { color: var(--C); }
html.mode-retro .chip.on .n { color: var(--b); }
html.mode-retro .search input, html.mode-retro select.year { font: 20px var(--font); background: var(--k); color: var(--Y); border: 2px solid var(--Y); caret-color: var(--Y); }
html.mode-retro .search input::placeholder { color: var(--y); }
html.mode-retro .search .bi { color: var(--Y); }
html.mode-retro .tab { font: 20px var(--font); color: var(--W); }
html.mode-retro .tab.on { background: var(--W); color: var(--k); border-color: var(--W); }
html.mode-retro .tab .n { background: var(--b); color: var(--W); }
html.mode-retro .result-count, html.mode-retro .footer { font: 20px var(--font); color: var(--C); }
html.mode-retro .footer { border-top: 4px solid var(--b); }

html.mode-retro .stat { background: var(--k); border: 3px solid var(--g); }
html.mode-retro .stat:nth-child(2n) { border-color: var(--m); }
html.mode-retro .stat:nth-child(3n) { border-color: var(--c); }
html.mode-retro .stat::before { height: 6px; background: repeating-linear-gradient(90deg, var(--R) 0 12px, var(--Y) 12px 24px, var(--G) 24px 36px, var(--C) 36px 48px); }
html.mode-retro .stat .v { font: 26px/1.3 var(--pix); color: var(--W); }
html.mode-retro .stat .v small { color: var(--Y); }
html.mode-retro .stat .k { font: 20px var(--font); color: var(--C); }

html.mode-retro .timeline::before { background: none; border-left: 4px dashed var(--b); width: 0; opacity: 1; }
html.mode-retro .tl-year { font: 18px/1.6 var(--pix); color: var(--k); background: var(--G); display: inline-block; padding: 2px 10px; }
html.mode-retro .tl-year::before { background: var(--G); border: 0; transform: translateY(-50%); }
html.mode-retro .tl-item::before { background: var(--M); }
html.mode-retro .news-card .date-pill { font: 18px var(--font); background: var(--Y); color: var(--k); }
html.mode-retro .news-card .sub { font: 20px var(--font); color: var(--M); }

html.mode-retro .hero h1 { font: 30px/1.4 var(--pix); color: var(--W); letter-spacing: 0; }
html.mode-retro .hero h1 .grad { background: none; color: var(--Y); -webkit-background-clip: initial; background-clip: initial; }
html.mode-retro .typer { font: 24px var(--font); color: var(--G); }
html.mode-retro .model-wrap { background: var(--b); }
html.mode-retro .model-wrap::before, html.mode-retro .model-wrap::after { border: 4px dotted var(--Y); animation: none; }
html.mode-retro .role-card .when { font: 20px var(--font); color: var(--G); }
html.mode-retro .role-card .what { color: var(--Y); font-weight: 400; }
html.mode-retro .role-card .detail { color: var(--W); font-size: 20px; }

html.mode-retro .pub .authors { color: var(--W); font-size: 20px; } html.mode-retro .pub .authors b { color: var(--G); font-weight: 400; }
html.mode-retro .pub .venue { color: var(--M); font-style: normal; font-size: 20px; }
html.mode-retro .pub .details, html.mode-retro .pub .impact { font: 19px var(--font); color: var(--C); }
html.mode-retro .project .money { font: 22px var(--font); color: var(--G); }
html.mode-retro .tag { font: 18px var(--font); background: var(--b); color: var(--W); }
html.mode-retro .tag::before { color: var(--Y); }
html.mode-retro .book .b3d { transform: none !important; box-shadow: none; outline: 3px solid var(--W); }
html.mode-retro .b3d::before, html.mode-retro .b3d::after { display: none; }
html.mode-retro .mb-hero { background: var(--k); border-color: var(--R); }
html.mode-retro .mb-title { font: 26px/1.4 var(--pix); color: var(--W); }
html.mode-retro .mb-title .z { color: var(--G); }
html.mode-retro .rotator { font: 24px var(--font); color: var(--C); }
html.mode-retro .onair { font: 20px var(--font); }
html.mode-retro .episode .num { font: 18px var(--font); background: var(--G); }
html.mode-retro .episode .play { background: var(--R); color: var(--W); border: 0; }
html.mode-retro .thesis .author { color: var(--G); font-weight: 400; }
html.mode-retro .contact-big .ic { background: var(--R); color: var(--W); }
html.mode-retro .contact-big .v { font: 24px var(--font); color: var(--Y); }
html.mode-retro .map iframe { filter: grayscale(1) contrast(3) brightness(.8) sepia(1) hue-rotate(60deg) saturate(6); }
html.mode-retro .award .trophy { background: var(--Y); color: var(--k); }
html.mode-retro .award .y { font: 20px var(--font); color: var(--Y); }
html.mode-retro .out-item .kind { background: var(--b) !important; color: var(--W) !important; }
html.mode-retro .e404 .code { font: 60px/1.3 var(--pix); color: var(--R); background: none; -webkit-background-clip: initial; background-clip: initial; }
html.mode-retro .topbar { background: var(--k); border-bottom: 4px solid var(--B); }
html.mode-retro .topbar-name { font: 20px var(--font); color: var(--Y); }
html.mode-retro .burger { border: 2px solid var(--W); }
html.mode-retro .burger span { background: var(--W); }

/* Apariciones a saltos, como si se pintaran por bloques */
html.mode-retro .reveal { transform: none; transition: opacity .4s steps(3); }

/* ---------------- Carga de cinta ---------------- */
#tape.on {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; pointer-events: none;
}
#tape.pilot { background: repeating-linear-gradient(0deg, #00d7d7 0 14px, #d70000 14px 28px); animation: pilot .09s steps(2) infinite; }
#tape.data { background: repeating-linear-gradient(0deg, #ffff00 0 3px, #0000ff 3px 5px, #ffff00 5px 6px, #0000ff 6px 10px); animation: data .05s steps(2) infinite; }
@keyframes pilot { to { background-position: 0 28px; } }
@keyframes data { to { background-position: 0 7px; } }
#tape .tape-screen {
  width: min(78vw, 860px); height: min(64vh, 560px); background: #d7d7d7; color: #000; position: relative;
  font: 22px/1.4 'VT323', monospace; padding: 18px;
}
#tape .tape-txt { font-family: 'Press Start 2P', monospace; font-size: 14px; line-height: 2; }
#tape .blink { animation: blink .5s steps(1) infinite; }
#tape .tape-bar { position: absolute; left: 18px; right: 18px; bottom: 18px; height: 16px; border: 3px solid #000; }
#tape .tape-bar i { display: block; height: 100%; width: 0; background: #0000d7; animation: fill 1.2s steps(16) forwards; }
@keyframes fill { to { width: 100%; } }
/* Apagado de CRT al volver al modo gráfico */
#tape.off { background: #000; animation: crtoff .38s ease-in forwards; }
#tape.off::after { content: ''; width: 100%; height: 3px; background: #fff; box-shadow: 0 0 30px 6px #fff; animation: crtline .38s ease-in forwards; }
@keyframes crtoff { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes crtline { 0% { transform: scaleX(1); } 70% { transform: scaleX(.02); } 100% { transform: scaleX(0); opacity: 0; } }

@media (max-width: 960px) {
  html.mode-retro .main { border-width: 8px; }
  html.mode-retro .sec-head h1 { font-size: 17px; }
  html.mode-retro .hero h1 { font-size: 20px; }
  html.mode-retro body { font-size: 20px; }
}

/* Ajustes sobre el tema claro */
html.mode-retro body { background-image: none; }
html.mode-retro .sec-head h1 .bi { width: auto; height: auto; background: none !important; color: inherit; }
html.mode-retro .sidebar { background: var(--k); }
html.mode-retro .who .name { font-family: var(--pix); }
html.mode-retro .menu a.active { font-weight: 400; }
html.mode-retro .avatar img { background: var(--k); }
html.mode-retro .card, html.mode-retro .stat { background: var(--k); }
html.mode-retro .tabs { background: none; padding: 0; }
html.mode-retro .tab.on .n { background: var(--k); color: var(--W); }
html.mode-retro .chip.on { color: var(--k); }
html.mode-retro .btn.primary:hover { background: var(--W); border-color: var(--W); color: var(--k); }
html.mode-retro .search input, html.mode-retro select.year { background: var(--k); }
html.mode-retro .news-card .date-pill, html.mode-retro .episode .num { box-shadow: none; }
html.mode-retro .mb-hero { background: var(--k); }
html.mode-retro .model-wrap { background: var(--b); }
html.mode-retro .model-hint { background: var(--k); color: var(--Y); font: 18px var(--font); }
html.mode-retro .typer::before { color: var(--W); }
html.mode-retro .hero h1 .grad { font-style: normal; }
html.mode-retro .role-card .what { font: 22px var(--font); }
html.mode-retro .contact-big .v { font-family: var(--font); }
html.mode-retro .tl-year { font-family: var(--pix); }
html.mode-retro .pub .authors b { text-decoration: none; }
html.mode-retro .pub .cover, html.mode-retro .thesis .shot { background: var(--k); }
html.mode-retro .player audio { background: var(--k); }
html.mode-retro .lightbox { background: rgba(0,0,0,.94); }
html.mode-retro .lightbox button { color: var(--W); }
html.mode-retro .bg-grid { display: none; }
html.mode-retro .burger { background: var(--k); }
html.mode-retro .topbar-name { font-family: var(--font); }
html.mode-retro .h2-like, html.mode-retro h2.block-title { font-family: var(--pix); }
html.mode-retro h2.block-title::before { width: auto; height: auto; background: none; }
html.mode-retro .about h2::before { width: auto; height: auto; background: none; content: '■'; color: var(--R); }
html.mode-retro .contact-big .ic { box-shadow: none; }
html.mode-retro .e404 .code { font-style: normal; }
html.mode-retro .stat .v { font-family: var(--pix); }
html.mode-retro .prose p, html.mode-retro .card p, html.mode-retro .intro { hyphens: manual; }
html.mode-retro .who .role-org { font-size: 17px; }
@media (max-width: 960px) {
  html.mode-retro .avatar { width: 66px; height: 66px; }
  html.mode-retro .who .role { font-size: 15px; }
  html.mode-retro .who .role-org { font-size: 14px; }
}
html.mode-retro .intro-panel { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }