/* sitio.css — tawasuyu.net, a mano (el generador no lo toca).
 *
 * El lenguaje de gioser.net: oscuro de fábrica y claro sólo si el navegador lo
 * pide (no hay perilla de tema); la portada clavada arriba y el cuerpo que sube
 * por encima; una franja que no es barra hasta que hace falta, y cuyo menú son
 * los cuatro botones de familia, que se encogen y suben a ella (sitio.js les
 * mueve --p de 0 a 1). Una sola columna, una sola tarjeta.
 */

:root {
  --fondo: #0b0b10;
  --papel: #13131a;
  --papel2: #1a1a23;
  --texto: #ece8e1;
  --tenue: #b7b2ab;
  --debil: #847f7a;
  --linea: #24232b;
  --linea2: #34333d;
  --a1: #f2a24e;          /* ámbar, el de la portada */
  --a2: #a487ff;          /* violeta */
  --a3: #5b9cf0;          /* azul de la nieve */
  --vidrio: rgba(11, 11, 16, 0.72);
  --franja-h: 64px;
  /* la chakana se pinta con un cónico de estos tres matices */
  --h1: 32; --h2: 262; --h3: 212; --sat: 78%; --lum: 62%;
  --lz-op: 0.20;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --fondo: #f7f5f0; --papel: #ffffff; --papel2: #f1eee7; --texto: #1a1a24; --tenue: #4c4b57;
    --debil: #7c7a85; --linea: #e3dfd6; --linea2: #d3cec2; --a1: #b4561c; --a2: #6b4fd8; --a3: #2f6fc0;
    --vidrio: rgba(247, 245, 240, 0.8); --sat: 62%; --lum: 46%; --lz-op: 0.28;
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--franja-h) + .5rem); }
body {
  background: var(--fondo); color: var(--texto);
  font: 400 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
code { font: .86em var(--mono); background: color-mix(in srgb, var(--a1) 12%, transparent); padding: .1em .35em; border-radius: 4px; }
::selection { background: var(--a1); color: var(--fondo); }

:root[data-lang="es"] [data-l="en"],
:root[data-lang="en"] [data-l="es"] { display: none !important; }

/* ── la marca ───────────────────────────────────────────────────────────── */
/* La chakana se rellena con un cónico y se recorta con la silueta del SVG
   (`clipPathUnits=objectBoundingBox`, escala sola). */
.chakana {
  display: inline-block; aspect-ratio: 1; flex: 0 0 auto;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fondo) 92%, transparent) 13%, transparent 46%),
    conic-gradient(from 0deg,
      hsl(var(--h1) var(--sat) var(--lum)) 0deg,
      hsl(var(--h2) var(--sat) var(--lum)) 120deg,
      hsl(var(--h3) var(--sat) var(--lum)) 240deg,
      hsl(var(--h1) var(--sat) var(--lum)) 360deg);
  clip-path: url(#chakana-recorte);
}

/* ── la franja ──────────────────────────────────────────────────────────── */
.franja-sup {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  height: var(--franja-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
  color: var(--texto);
  pointer-events: none;
  transition: color .35s ease;
}
.franja-sup.sobre-portada { color: #fff; }
.franja-sup > * { pointer-events: auto; }
.marca { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.marca .chakana { width: 30px; height: 30px; transform-origin: 0 0; will-change: transform; }
.marca-nombre { opacity: 0; transition: opacity .3s ease; }
.franja-sup.llego .marca-nombre { opacity: 1; }
html:not(.js) .marca-nombre { opacity: 1; }
html.js .marca-grande { visibility: hidden; }
.glifos { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.glifo {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid currentColor; background: none; color: inherit; cursor: pointer;
  opacity: .85; transition: opacity .2s, color .2s;
}
.glifo svg { width: 17px; height: 17px; }
.glifo:hover { opacity: 1; color: var(--a1); }
.glifo.idioma { width: auto; padding: 0 .75rem; font: 500 .78rem/1 var(--mono); letter-spacing: .08em; }

/* ── portada ────────────────────────────────────────────────────────────── */
.portada-fondo {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #0b0b10;
}
.portada-fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.portada-fondo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(5,5,8,.5) 0%, rgba(5,5,8,0) 20%),
    linear-gradient(to top, rgba(5,5,8,.75) 0%, rgba(5,5,8,0) 45%);
}
.portada {
  position: relative; z-index: 1;
  min-height: 100svh; display: flex; align-items: flex-end;
  padding: 0 clamp(1rem, 5vw, 3rem) clamp(3rem, 10vh, 6.5rem);
}
.bienvenida {
  max-width: 40rem; color: #f3efe8;
  padding: clamp(1.1rem, 3vw, 1.8rem) clamp(1.2rem, 3.5vw, 2.2rem);
  border-radius: 22px;
  background: rgba(10, 10, 14, .46);
  border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.marca-grande { width: 58px; height: 58px; margin-bottom: 1rem; }
.antetitulo { font: 500 .76rem/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #f2b06a; }
.portada h1 { font: 500 clamp(3rem, 8vw, 5.4rem)/1 var(--serif); letter-spacing: -.01em; margin: .4rem 0 .2rem; }
.lema { font: italic 500 clamp(1.2rem, 2.4vw, 1.6rem)/1.35 var(--serif); color: rgba(243, 239, 232, .85); }

/* ── el cuerpo sube por encima de la portada ────────────────────────────── */
.cuerpo {
  position: relative; z-index: 2;
  background: var(--fondo);
  box-shadow: 0 -40px 80px rgba(0, 0, 0, .35);
}
.cuerpo > :not(.luces):not(.selector) { position: relative; z-index: 1; }

/* luces de fondo: las mismas de gioser.net y de la bitácora */
.luces { position: sticky; top: 0; z-index: 0; height: 100vh; margin-bottom: -100vh; overflow: hidden; pointer-events: none; }
.luces i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(70px); opacity: var(--lz-op); will-change: transform; }
.luces i:nth-child(1) { background: radial-gradient(circle, var(--a2), transparent 65%); left: -20vmax; top: -15vmax; animation: lz1 38s ease-in-out infinite alternate; }
.luces i:nth-child(2) { background: radial-gradient(circle, var(--a1), transparent 65%); right: -25vmax; top: 20vh; animation: lz2 46s ease-in-out infinite alternate; }
.luces i:nth-child(3) { background: radial-gradient(circle, var(--a3), transparent 65%); left: 10vw; bottom: -30vmax; animation: lz3 52s ease-in-out infinite alternate; }
@keyframes lz1 { to { transform: translate(30vw, 25vh) scale(1.15); } }
@keyframes lz2 { to { transform: translate(-35vw, 15vh) scale(.9); } }
@keyframes lz3 { to { transform: translate(25vw, -35vh) scale(1.2); } }
[data-fondo="ninguno"] .luces { display: none; }

/* ── bloques ────────────────────────────────────────────────────────────── */
.bloque { max-width: 52rem; margin: 0 auto; padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1rem, 4vw, 2rem) 0; }
.ante { font: 500 .74rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--a1); margin-bottom: .7rem; }
.bloque h2 { font: 500 clamp(1.9rem, 4vw, 2.7rem)/1.1 var(--serif); margin-bottom: 1.2rem; text-wrap: balance; }
.definicion p { color: var(--tenue); font-size: 1.04rem; line-height: 1.75; text-wrap: pretty; }
.definicion p + p { margin-top: 1rem; }
.definicion strong { color: var(--texto); font-weight: 600; }
.definicion a { color: var(--texto); text-decoration: underline; text-decoration-color: var(--a1); text-underline-offset: 3px; }

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem; margin-top: 2rem; }
.numero { padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--linea); background: color-mix(in srgb, var(--papel) 80%, transparent); backdrop-filter: blur(10px); }
.numero .valor { font: 600 1.6rem/1.1 var(--serif); }
.numero .que { font-size: .84rem; color: var(--tenue); margin-top: .2rem; }
.numero .como { font: .7rem/1.4 var(--mono); color: var(--debil); margin-top: .35rem; }
.aviso {
  margin-top: 1.25rem; padding: 1rem 1.2rem; border-radius: 14px;
  border-left: 2px solid var(--a1); background: color-mix(in srgb, var(--a1) 8%, transparent);
  font-size: .92rem; color: var(--tenue);
}
.aviso strong { color: var(--texto); }

/* ── dónde corre: seis pestañas con su glifo de color ──────────────────── */
/* Cada sistema trae su color; el glifo es la silueta, no el logo de nadie. */
.sistema[data-plat="linux"],   .sistema-panel[data-plat="linux"]   { --c: #f2c14e; }
.sistema[data-plat="windows"], .sistema-panel[data-plat="windows"] { --c: #4fa8f7; }
.sistema[data-plat="android"], .sistema-panel[data-plat="android"] { --c: #6fd08c; }
.sistema[data-plat="freebsd"], .sistema-panel[data-plat="freebsd"] { --c: #ef5a50; }
.sistema[data-plat="takana"],  .sistema-panel[data-plat="takana"]  { --c: #e08a4c; }
.sistema[data-plat="wawa"],    .sistema-panel[data-plat="wawa"]    { --c: #b48cff; }
@media (prefers-color-scheme: light) {
  .sistema[data-plat="linux"],   .sistema-panel[data-plat="linux"]   { --c: #b8860b; }
  .sistema[data-plat="windows"], .sistema-panel[data-plat="windows"] { --c: #1f6fc2; }
  .sistema[data-plat="android"], .sistema-panel[data-plat="android"] { --c: #2e9a52; }
  .sistema[data-plat="freebsd"], .sistema-panel[data-plat="freebsd"] { --c: #c8322a; }
  .sistema[data-plat="takana"],  .sistema-panel[data-plat="takana"]  { --c: #b55a1e; }
  .sistema[data-plat="wawa"],    .sistema-panel[data-plat="wawa"]    { --c: #6b4fd8; }
}
/* Las seis en una sola línea, siempre: cada una toma un sexto y el nombre se
   recorta con «…» antes que bajar a un segundo renglón. */
.sistemas { display: flex; flex-wrap: nowrap; gap: .4rem; margin-bottom: 1rem; }
.sistema {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem .5rem .45rem; border-radius: 999px;
  border: 1px solid var(--linea2); background: color-mix(in srgb, var(--papel) 80%, transparent);
  color: var(--tenue); font: 500 .9rem/1 var(--sans); white-space: nowrap;
  flex: 1 1 0; min-width: 0; justify-content: center;
  transition: color .2s, border-color .2s, background .2s;
}
.sistema > span[data-l] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sistema-glifo { flex: none; }
@media (max-width: 720px) {
  .sistemas { gap: .25rem; }
  .sistema { padding: .4rem .45rem; gap: .3rem; font-size: .78rem; }
  .sistema-glifo { width: 22px; height: 22px; }
  .sistema-glifo svg, .sistema-glifo .glifo, .sistema-glifo .chakana { width: 14px; height: 14px; }
}
@media (max-width: 430px) {
  .sistema { flex-direction: column; gap: .25rem; padding: .45rem .2rem; border-radius: 14px; font-size: .68rem; }
}
.sistema:hover { color: var(--texto); border-color: color-mix(in srgb, var(--c) 60%, var(--linea2)); }
.sistema[aria-selected="true"] {
  color: var(--texto); border-color: var(--c);
  background: color-mix(in srgb, var(--c) 16%, var(--papel));
}
.sistema:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.sistema-glifo {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px;
  color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent);
}
.sistema-glifo svg, .sistema-glifo .glifo { width: 17px; height: 17px; border: 0; opacity: 1; }
.sistema-glifo .chakana { width: 17px; height: 17px; }
.sistema-panel {
  padding: 1.2rem 1.3rem 1.3rem; border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, var(--linea));
  background: color-mix(in srgb, var(--papel) 80%, transparent); backdrop-filter: blur(12px);
}
.sistema-panel + .sistema-panel { margin-top: .75rem; }
html.js .sistema-panel:not(.activo) { display: none; }
html.js .sistema-panel.activo { animation: desplegar .35s ease both; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-6px); } }
.sistema-panel .estado {
  display: inline-block; margin-bottom: .7rem; font: .7rem/1.3 var(--mono); letter-spacing: .06em;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); border-radius: 999px; padding: .2rem .6rem;
}
.sistema-panel p { font-size: .95rem; color: var(--tenue); text-wrap: pretty; }
.sistema-panel p + p { margin-top: .6rem; }
.sistema-panel strong { color: var(--texto); }
.nota { font-size: .86rem; color: var(--debil); }
.descarga { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.descarga > code { display: block; margin: .7rem 0; padding: .75rem 1rem; border-radius: 10px; font-size: .9rem; overflow-x: auto; white-space: pre; }
.descarga .boton.lleno { background: var(--c); border-color: var(--c); }
.botones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .7rem 0 .2rem; }
.boton {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  padding: .55rem .95rem; border-radius: 999px; border: 1px solid var(--linea2);
  font-size: .86rem; color: var(--texto); transition: border-color .2s, transform .2s;
}
.boton:hover { border-color: var(--a1); transform: translateY(-1px); }
.boton.lleno { background: var(--a1); border-color: var(--a1); color: #17110a; }
.boton .glifo.chico, .glifo.chico { width: 15px; height: 15px; border: 0; opacity: 1; display: inline-block; }

/* ── el selector de familias: en línea, pegajoso, y después el menú ─────── */
.leyenda { font-size: .9rem; color: var(--debil); max-width: 44rem; }
.leyenda b { color: var(--tenue); font-weight: 500; }
.selector {
  position: sticky; top: var(--sel-top, 0px); z-index: 61;
  display: flex; justify-content: center; gap: .4rem; flex-wrap: nowrap;
  max-width: 52rem; margin: 0 auto; padding: 1.4rem clamp(1rem, 4vw, 2rem) .9rem;
  pointer-events: none;
  --p: 0;
}
/* el vidrio de la franja lo pone el selector, a lo ancho de la ventana */
.selector::before {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: var(--franja-h);
  transform: translateX(-50%);
  background: var(--vidrio); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--linea);
  opacity: var(--p); z-index: -1;
}
.pestana {
  pointer-events: auto; appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  padding: .55rem .95rem; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--linea2) calc((1 - var(--p)) * 100%), transparent);
  background: color-mix(in srgb, var(--papel) calc((1 - var(--p)) * 80%), transparent);
  color: var(--tenue); font: 500 .92rem/1 var(--sans);
  will-change: transform; transition: color .2s, border-color .2s;
}
.pestana:hover { color: var(--texto); }
.pestana[aria-selected="true"] {
  color: var(--texto);
  background: color-mix(in srgb, var(--a1) calc((1 - var(--p)) * 20%), transparent);
  border-color: color-mix(in srgb, var(--a1) calc((1 - var(--p)) * 55%), transparent);
}
/* hecho menú, la pastilla del elegido abraza sólo el rótulo */
.pestana .rotulo { position: relative; }
.pestana .rotulo::before {
  content: ""; position: absolute; inset: -.42em -.85em; border-radius: 999px; z-index: -1;
  background: color-mix(in srgb, var(--a1) 22%, transparent); opacity: 0;
}
.pestana[aria-selected="true"] .rotulo::before { opacity: var(--p); }
.pestana { position: relative; isolation: isolate; }
.pestana .glifo { width: 18px; height: 18px; border: 0; color: var(--a1); opacity: calc(1 - var(--p) * 1.6); }
.pestana .cuenta { font: .72rem/1 var(--mono); color: var(--debil); opacity: calc(1 - var(--p) * 1.6); }
.pestana:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
@media (max-width: 720px) {
  .selector { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .selector::-webkit-scrollbar { display: none; }
  .pestana { padding: .5rem .75rem; font-size: .85rem; }
  /* con el menú pegado, la palabra deja de ocupar lugar: invisible pero presente, quedaba encima
     de la primera pestaña y el enlace al inicio se le robaba el clic. No se resuelve con
     pointer-events sobre la chakana: tiene un agujero en el centro y el toque caía en el hueco. */
  .franja-sup.con-menu .marca-nombre { display: none; }
}

/* ── la lista: una columna, cada ficha se despliega hacia abajo ─────────── */
.bloque-lista { padding-top: 1.2rem; padding-bottom: 4rem; }
.panel[hidden] { display: none; }
.rejilla { display: flex; flex-direction: column; gap: 1rem; }
.ficha {
  border-radius: 18px; border: 1px solid var(--linea);
  background: color-mix(in srgb, var(--papel) 80%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color .3s ease;
}
.ficha:hover, .ficha.abierta { border-color: color-mix(in srgb, var(--a1) 45%, var(--linea)); }
.ficha-cabeza {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) auto; gap: clamp(.9rem, 2.5vw, 1.6rem);
  align-items: center; padding: 1rem; cursor: pointer; width: 100%;
  background: none; border: 0; color: inherit; font: inherit; text-align: left;
}
.ficha-cabeza:focus-visible { outline: 2px solid var(--a1); outline-offset: -2px; border-radius: 18px; }
.ficha .flecha { width: 22px; height: 22px; color: var(--a1); transition: transform .3s ease; margin-right: .3rem; }
.ficha.abierta .flecha { transform: rotate(180deg); }
.miniatura { position: relative; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--papel2); }
.miniatura video, .miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura.sin-media { display: grid; place-items: center; align-content: center; gap: .5rem; padding: .8rem; text-align: center; }
.miniatura.sin-media .chakana { width: 42px; height: 42px; opacity: .55; }
.miniatura .nota-sin { font-size: .72rem; color: var(--debil); }
.ficha-texto { min-width: 0; }
.ficha-titulo { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.ficha-titulo h3 { font: 600 clamp(1.25rem, 2.3vw, 1.55rem)/1.15 var(--serif); }
.ficha-titulo .trad { font-size: .78rem; color: var(--debil); font-style: italic; }
.frase { color: var(--tenue); font-size: .95rem; text-wrap: pretty; }
.en-lugar { font-size: .84rem; color: var(--debil); margin-top: .35rem; }
.en-lugar b { color: var(--tenue); font-weight: 500; }
.props { display: flex; flex-wrap: wrap; gap: .38rem; align-items: center; margin-top: .7rem; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .5rem;
  border-radius: 999px; border: 1px solid var(--linea2); font-size: .72rem; color: var(--tenue);
}
.chip .glifo, .chip svg { width: 14px; height: 14px; border: 0; opacity: 1; }
.chip.metal { border-color: color-mix(in srgb, var(--a1) 55%, var(--linea2)); color: var(--a1); }
.escalera { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.escalera i { width: 4px; background: var(--linea2); border-radius: 1px; }
.escalera i:nth-child(1) { height: 40%; } .escalera i:nth-child(2) { height: 55%; }
.escalera i:nth-child(3) { height: 70%; } .escalera i:nth-child(4) { height: 85%; }
.escalera i:nth-child(5) { height: 100%; }
.escalera i.lleno { background: linear-gradient(180deg, var(--a1), var(--a2)); }

/* el despliegue: la altura se anima con grid-template-rows 0fr → 1fr */
.ficha-pliegue { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.ficha.abierta .ficha-pliegue { grid-template-rows: 1fr; }
.ficha-pliegue > div { overflow: hidden; }
.detalle { padding: .2rem 1.3rem 1.4rem; border-top: 1px solid var(--linea); margin: 0 1rem; padding-left: 0; padding-right: 0; }
.detalle h4 { font: 500 .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a1); margin: 1.1rem 0 .5rem; }
.detalle ul { list-style: none; }
.detalle li { position: relative; padding-left: 1.05rem; margin-bottom: .38rem; font-size: .92rem; color: var(--tenue); }
.detalle li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--a1); opacity: .7; }
.detalle .apunta { font-size: .92rem; color: var(--tenue); }
.detalle .como code { display: block; margin-bottom: .3rem; overflow-x: auto; white-space: pre; padding: .45rem .7rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.acciones .boton { padding: .5rem .85rem; font-size: .84rem; }
@media (max-width: 720px) {
  .ficha-cabeza { grid-template-columns: 1fr auto; }
  .ficha-cabeza .miniatura { grid-column: 1 / -1; }
}

/* ── deslizar entre familias (como un PageView) ─────────────────────────── */
/* El gesto horizontal es de la página: sin esto el navegador lo toma como «volver atrás». */
html, body { overscroll-behavior-x: none; }
@keyframes desde-der { from { opacity: 0; transform: translateX(48px); } }
@keyframes desde-izq { from { opacity: 0; transform: translateX(-48px); } }
.panel.desde-der { animation: desde-der .32s cubic-bezier(.2, .8, .2, 1) both; }
.panel.desde-izq { animation: desde-izq .32s cubic-bezier(.2, .8, .2, 1) both; }

/* ── pie ────────────────────────────────────────────────────────────────── */
.pie { position: relative; z-index: 1; border-top: 1px solid var(--linea); padding: 3rem 0 4rem; }
.pie .envoltura { max-width: 52rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.pie-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.4rem; }
.pie-rejilla a.casa { display: block; font-weight: 600; margin-bottom: .2rem; }
.pie-rejilla a.casa:hover { color: var(--a1); }
.pie-rejilla p { font-size: .85rem; color: var(--debil); }
.regla { border: 0; border-top: 1px solid var(--linea); margin: 2rem 0; }
.sello { display: flex; align-items: center; gap: .5rem; font: 500 .72rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--a1); margin-bottom: .9rem; }
.sello .chakana { width: 12px; height: 12px; }
.jerga { font-size: .86rem; color: var(--tenue); }
.jerga code { font-size: .8em; }
.marcas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.marca-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--linea2); font-size: .76rem; color: var(--tenue); }
.marca-chip .glifo, .marca-chip svg { width: 15px; height: 15px; border: 0; opacity: 1; color: var(--a2); }
.coautor, .licencias p { font-size: .84rem; color: var(--debil); margin-top: .8rem; }
.coautor strong, .licencias a { color: var(--tenue); }
.licencias a { text-decoration: underline; text-decoration-color: var(--linea2); }
.pie-fin { margin-top: 2rem; font-size: .8rem; color: var(--debil); display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; }
.pie-fin a:hover { color: var(--a1); }

/* ── el visor de documentos ─────────────────────────────────────────────── */
/* Abre al costado, sobre la página, y trae el README del repositorio ya
   renderizado: no se pierde el lugar donde estabas. */
.visor {
  position: fixed; inset: 0 0 0 auto; z-index: 90; width: min(760px, 100%);
  background: var(--papel); border-left: 1px solid var(--linea2);
  box-shadow: -30px 0 80px -50px rgba(0, 0, 0, .6);
  transform: translateX(100%); transition: transform .28s ease;
  display: flex; flex-direction: column;
}
.visor.abierto { transform: none; }
.visor-barra { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--linea); background: color-mix(in srgb, var(--papel2) 70%, transparent); }
.visor-barra .ruta { font: .78rem/1.3 var(--mono); color: var(--debil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visor-barra .crudo { margin-left: auto; font-size: .8rem; color: var(--a1); }
.cerrar { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--linea2); background: none; color: var(--texto); font-size: 1.1rem; cursor: pointer; }
.visor-cuerpo { overflow-y: auto; padding: 1.6rem 1.8rem 4rem; }
.velo { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .28s; }
.velo.abierto { opacity: 1; pointer-events: auto; }
.md h1 { font: 600 1.8rem/1.2 var(--serif); margin: 0 0 .8rem; }
.md h2 { font: 600 1.4rem/1.2 var(--serif); margin: 1.8rem 0 .6rem; padding-bottom: .3rem; border-bottom: 1px solid var(--linea); }
.md h3 { font-size: 1.05rem; margin: 1.3rem 0 .4rem; }
.md p, .md li { font-size: .93rem; color: var(--tenue); }
.md p { margin-bottom: .8rem; }
.md ul, .md ol { margin: 0 0 1rem 1.2rem; }
.md li { margin-bottom: .25rem; }
.md pre { background: var(--papel2); border: 1px solid var(--linea); border-radius: 8px; padding: .8rem 1rem; overflow-x: auto; margin-bottom: 1rem; }
.md pre code { background: none; padding: 0; font-size: .82rem; }
.md blockquote { border-left: 3px solid var(--a2); padding-left: 1rem; margin: 0 0 1rem; color: var(--debil); font-style: italic; }
.md table { border-collapse: collapse; width: 100%; margin-bottom: 1rem; font-size: .86rem; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--linea); padding: .4rem .6rem; text-align: left; }
.md th { background: var(--papel2); font-weight: 600; }
.md a { color: var(--a1); }
.md hr { border: 0; border-top: 1px solid var(--linea); margin: 1.6rem 0; }
.md img { max-width: 100%; border-radius: 8px; }

/* ── aparecer al entrar ─────────────────────────────────────────────────── */
.entra { opacity: 0; transform: translateY(20px); transition: opacity .32s ease, transform .32s ease; }
.entra.visible { opacity: 1; transform: none; transition: opacity .62s ease, transform .62s cubic-bezier(.2,.7,.3,1); }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra { opacity: 1; transform: none; transition: none; }
  .luces i { animation: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media (prefers-color-scheme: light) { .descarga .boton.lleno { color: #fff; } }
/* La chakana como glifo (wawa): la regla de los botones redondos de la franja
   le quitaba el fondo cónico con que se pinta. */
.chakana.glifo {
  display: inline-block; border: 0; border-radius: 0; opacity: 1;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--fondo) 92%, transparent) 13%, transparent 46%),
    conic-gradient(from 0deg,
      hsl(var(--h1) var(--sat) var(--lum)) 0deg,
      hsl(var(--h2) var(--sat) var(--lum)) 120deg,
      hsl(var(--h3) var(--sat) var(--lum)) 240deg,
      hsl(var(--h1) var(--sat) var(--lum)) 360deg);
}