@font-face { font-family: 'Silkscreen'; src: url(/fuentes/silkscreen-latin-400-normal.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/fuentes/ibm-plex-mono-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
/* Las páginas de lectura de neli.audio: la misma cáscara de NeliOS, hechas para leer. */
:root { --lavanda: #DCCEF8; --crema: #FAF4E9; --azul: #A8B8E4; --navy: #3B3F77; --tinta: #2A2D52; --coral: #F17D9E; --tenue: #575B8C; --neli: #AD3A5E; --barti: #23679A; --linea: #D9DEF3; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #E2DAFA radial-gradient(circle at 1px 1px, rgba(59,63,119,.08) 1px, transparent 0) 0 0 / 14px 14px; color: var(--tinta);
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Verdana, sans-serif; font-size: 16px; line-height: 1.6; }
a { color: var(--barti); }
.tope { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: rgba(250,244,233,.92); border-bottom: 2px solid var(--azul); backdrop-filter: blur(6px); }
.tope .marca { display: flex; align-items: center; gap: 8px; font-family: 'Silkscreen', monospace; font-size: 13px; letter-spacing: .05em; color: var(--tinta); text-decoration: none; }
.tope nav { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.tope nav a { color: var(--tinta); font-weight: 700; font-size: 14px; text-decoration: none; }
.tope nav a:hover { color: var(--neli); }
.abrir { display: inline-block; font-weight: 700; color: #fff !important; background: #B8395F; border: 2px solid var(--navy); border-radius: 10px; padding: 8px 14px; text-decoration: none; box-shadow: 3px 3px 0 rgba(59,63,119,.25); }
.abrir:hover { filter: brightness(1.05); }
main { max-width: 980px; margin: 0 auto; padding: 28px 20px 40px; }
.ventana { background: var(--crema); border: 2px solid var(--azul); border-radius: 16px; box-shadow: 6px 8px 0 rgba(59,63,119,.15); padding: 24px 28px; margin: 0 0 24px; }
h1 { font-size: clamp(26px, 4vw, 38px); line-height: 1.2; margin: 0 0 10px; }
h2 { font-size: 24px; margin: 0 0 8px; }
h3 { font-size: 17px; margin: 20px 0 6px; color: var(--navy); }
.bajada { font-size: 18px; color: #4A4F86; margin: 0 0 18px; }
.app-marco { width: 100%; height: min(720px, 78vh); border: 2px solid var(--azul); border-radius: 14px; background: #F5F3FD; display: block; }
.app-cel { display: none; }
@media (max-width: 719px) { .app-marco { display: none; } .app-cel { display: block; } }
.app-cel img { width: 100%; height: auto; border: 2px solid var(--azul); border-radius: 12px; display: block; margin-bottom: 12px; }
.grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.grilla li { background: #fff; border: 1.5px solid var(--linea); border-radius: 12px; padding: 12px 14px; }
.grilla b { display: block; color: var(--navy); }
code, pre { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
code { font-size: .88em; background: rgba(168,184,228,.3); color: var(--navy); padding: 1px 5px; border-radius: 5px; }
kbd { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: .85em; background: #fff; border: 1.5px solid var(--azul); border-bottom-width: 3px; border-radius: 6px; padding: 0 6px; }
.cuenta { font-family: 'IBM Plex Mono', ui-monospace, monospace; background: #F3F1FC; border: 1.5px solid var(--linea); border-left: 4px solid var(--barti); border-radius: 8px; padding: 10px 14px; white-space: pre-wrap; font-size: 14px; }
/* la bitácora */
.indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.indice a { font-weight: 700; font-size: 14px; text-decoration: none; background: #fff; border: 1.5px solid var(--azul); border-radius: 999px; padding: 4px 12px; color: var(--tinta); }
.canal { background: var(--crema); border: 2px solid var(--azul); border-radius: 16px; padding: 20px 24px; margin: 0 0 24px; box-shadow: 6px 8px 0 rgba(59,63,119,.12); }
.canal .tema { color: var(--tenue); margin: 0 0 6px; }
.canal h3 { border-bottom: 1.5px solid var(--linea); padding-bottom: 4px; }
.mensajes { list-style: none; margin: 0; padding: 0; }
.mensajes li { padding: 5px 0; }
.mensajes li > b { font-size: 14px; }
.mensajes li.neli > b { color: var(--neli); } .mensajes li.barti > b { color: var(--barti); }
.mensajes time { color: var(--tenue); font-size: 12px; }
.mensajes p { margin: 0; }
.mensajes .sis { color: var(--tenue); font-style: italic; text-align: center; font-size: 14px; }
.mensajes .zum { color: var(--neli); font-weight: 700; }
.mensajes .medida { margin: 4px 0; background: #F3F1FC; border: 1.5px solid var(--linea); border-left: 4px solid var(--barti); border-radius: 8px; padding: 8px 12px; white-space: pre-wrap; font-size: 13px; color: var(--navy); }
.ver { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; background: var(--lavanda); color: var(--navy); border-radius: 6px; padding: 0 6px; }
.est { font-family: 'Silkscreen', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid; border-radius: 999px; padding: 0 6px; }
.est.descartado { color: #A23356; background: #FFF0F4; } .est.idea { color: #785A0C; background: #FFF8E3; } .est.obra { color: #1F6390; background: #EEF8FF; }
.adj { font-weight: 700; }
.cta { text-align: center; margin: 28px 0 0; }
.pie { text-align: center; color: var(--tenue); font-size: 14px; padding: 10px 20px 30px; }
.pie p { margin: 4px 0; }
.p404 main { text-align: center; padding-top: 12vh; }
.cara404 svg { width: 140px; height: 140px; }
@media (max-width: 559px) { .tope { flex-wrap: wrap; gap: 8px; } .tope nav { gap: 12px; } .ventana, .canal { padding: 16px; } main { padding: 18px 12px 30px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }