@charset "UTF-8";

/*
  redKAOS base.css — sistema unificado 2026.
  Paleta: Kubuntu Breeze.
  Tipografía: Nimbus Mono (h1) + Ubuntu (prosa) + Ubuntu Mono (técnico).
  h1.title y estilos de artículo viven en chroma.css (solo .IsPage).

  Fuentes referencia en IDENTITY.md. Autohospedadas bajo assets/font/,
  subseteadas a Español + Inglés con scripts/optimize-fonts.py.
  Licencias en /font/UFL.txt (Ubuntu) y /font/GFL.txt (TeX Gyre Cursor).
  Modificaciones de TeX Gyre Cursor en /font/MANIFEST-tex-gyre-cursor.txt.

  Esta hoja se procesa como Hugo template (vive en assets/, no static/).
  Los `?h=HASH` se calculan en build time desde sha256 del propio .woff2,
  garantizando que la URL cambia cuando los bytes de la fuente cambian.
*/

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/font/ubuntu-regular.woff2?h=801f6f4edd") format("woff2");
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/font/ubuntu-bold.woff2?h=0534ec1135") format("woff2");
}

@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/font/ubuntu-mono-regular.woff2?h=66d254e3ed") format("woff2");
}

@font-face {
  font-family: "Ubuntu Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/font/ubuntu-mono-bold.woff2?h=b13636cb4b") format("woff2");
}

/* Nimbus Mono (TeX Gyre Cursor): marquee de portada y títulos h1 desde 2026,
   recupera la decisión tipográfica del CSS de 2006. Ver MANIFEST en /font/. */
@font-face {
  font-family: "Nimbus Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/font/nimbus-mono-regular.woff2?h=18e3f03ea6") format("woff2");
}

:root {
  --bg: #232627;
  --text: #fcfcfc;
  --muted: #a1a9b1;
  --accent: #11D116;
  --rule: #3a3e40;
  --font-sans: "Ubuntu", system-ui, -apple-system, sans-serif;
  --font-mono: "Ubuntu Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-title: "Nimbus Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 var(--font-sans);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ─── Layout ─── */
.page {
  max-width: 68ch;
  margin: 0 auto;
  padding: 3em 1.5em 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}


header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.5em;
  margin-bottom: 2em;
}

/* ─── Typography ─── */
h1 {
  color: var(--accent);
  font-family: var(--font-title);
  font-size: clamp(4.2em, 21vw, 5em);
  font-weight: 400;
  letter-spacing: -0.1em;
  margin: 0 0 0.2em;
  line-height: 1;
}

/* Todos los h1 grandes (marquee de home, listing /apuntes/, página /licencia/)
   empiezan con letra minúscula ('r', 'a', 'l'…) y Nimbus Mono deja un
   side-bearing izquierdo visible para esas letras. Compensamos con margin
   negativo para alinear ópticamente con el resto del contenido. h1.title
   queda fuera porque los títulos de artículo preservan su capitalización
   (suelen empezar en mayúscula, sin side-bearing significativo). */
h1:not(.title) {
  margin-left: -0.07em;
}

h2 {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1em;
  font-weight: normal;
  margin: 2.5em 0 0.8em;
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

h2::before {
  content: "// ";
  color: var(--muted);
}

h3 {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.95em;
  font-weight: bold;
  margin: 1.5em 0 0.5em;
}

p {
  margin: 0.8em 0;
  text-align: justify;
  hyphens: auto;
  text-wrap: pretty;
}
.lema { margin: 0; }

.ethos {
  color: var(--muted);
  font-size: 0.9em;
  margin-top: 1.8em;
  text-align: right;
}

/* ─── Links ─── */

/* Links en prosa: neutros, underline sutil, accent en hover */
a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ─── Listas ─── */
ul {
  list-style: none;
  padding: 0;
  margin: 0.8em 0;
}

li {
  padding: 0.25em 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: 1em;
  align-items: baseline;
}

li::before {
  content: "$ ";
  color: var(--muted);
  font-family: var(--font-mono);
}

li.muted::before {
  content: none;
}

/* Links en listas de navegación: calls-to-action, accent */
ul a {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-mono);
  text-transform: lowercase;
  overflow-wrap: break-word;
}

ul a:hover { text-decoration: underline; }

li .desc {
  color: var(--muted);
  font-size: 0.9em;
}

.muted a { color: var(--muted); }
.muted a:hover { color: var(--accent); }

/* ─── Breadcrumb ─── */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--muted);
  margin: 0 0 2em;
}

.breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumb a:hover { color: var(--accent); }

.breadcrumb .sep {
  color: var(--rule);
  margin: 0 0.5em;
}

/* ─── Shell prompt + cursor (terminal-style easter egg) ──────── */

@keyframes blink { 50% { opacity: 0; } }

.prompt {
  color: var(--accent);
}

.cursor {
  color: var(--accent);
  animation: blink 1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* ─── Copyright footer (ecosystem signature) ─────────────────── */

footer.copy {
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--muted);
  letter-spacing: 0.05em;
  border-top: 1px solid var(--rule);
  margin-top: 2em;
  padding-top: 1.5em;
  padding-left: max(1.5em, env(safe-area-inset-left));
  padding-right: max(1.5em, env(safe-area-inset-right));
  padding-bottom: max(1em, env(safe-area-inset-bottom));
}

footer.copy > p {
  flex: 1;
  text-align: center;
  margin: 0.4em 0;
}

/* ─── License notice (bottom-left, same muted treatment as the π) ─ */

a.license {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 1em;
  line-height: 1;
}

a.license:hover { color: var(--accent); }

/* ─── Pi (bottom-right easter egg) ─────────────────────────────── */

a.pi {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 1em;
  line-height: 1;
}

/* ─── Pagination ────────────────────────────────────────────────── */

nav.pagination {
  display: flex;
  align-items: center;
  margin-top: 2em;
  font-family: var(--font-mono);
  font-size: 0.85em;
}

nav.pagination > span {
  flex: 1;
}

nav.pagination > span:nth-child(2) { text-align: center; }
nav.pagination > span:last-child   { text-align: right; }

/* ─── Responsive ─── */
@media (max-width: 480px) {
  li {
    grid-template-columns: auto 1fr;
  }
  li .desc {
    grid-column: 2;
    font-size: 0.85em;
  }
}