/* MORFOK8 · k8alphabet.org
   ────────────────────────────────────────────────────────────────────────────
   Tres reglas gobiernan esta hoja:

   Donde hay escritura, silencio. Los glifos son líneas finas sin relleno y
   sólo se leen sobre fondo callado: ningún fondo animado, textura, degradado
   ni imagen detrás de una zona donde haya un glifo.

   El ornamento tiene que ser verdadero. El único adorno permitido es el propio
   sistema: el cubo con sus ocho vértices y sus veintiocho aristas, y la señal
   dejando rastro.

   Una sola apuesta. El elemento memorable es el trío sincronizado; todo lo
   demás se calla para que ése destaque.
   ──────────────────────────────────────────────────────────────────────────── */

:root{
  --tinta:#111014;        /* fondo de página */
  --grafito:#2F2C37;      /* bordes, separadores, superficies elevadas */
  --humo:#9C98A6;         /* texto secundario, etiquetas */
  --cal:#F5F3EE;          /* texto primario */
  --papel:#EDE7D9;        /* fondo de la cinta. SÓLO ahí */
  --senal:#F2C300;        /* acento: señal, logo, estado activo, el 26 */
  --alerta:#E24B4A;       /* sólo errores */

  /* Sobre el papel la tinta no es negro puro: es tinta sobre papel, no píxel
     sobre pantalla. */
  --papel-tinta:#22201C;
  --papel-humo:#8A8478;

  --disp:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'Martian Mono',ui-monospace,'SF Mono',Consolas,monospace;
}

/* ── TIPOGRAFÍA ──────────────────────────────────────────────────────────
   Tres roles y ninguna excepción.

   Display  Archivo ensanchado al 125 %, peso 600. Sólo la tesis, los cuatro
            números grandes, los números de inventario y la frase de cierre.
            (Y el logotipo, que no es prosa sino una placa con un nombre.)
   Cuerpo   Archivo normal, 400, interlínea 1,6. Toda la prosa.
   Utilidad Martian Mono, 10–13 px, letter-spacing 0,08em. Etiquetas,
            contadores, nombres de nodo, ruta y clase del pad, cifras
            técnicas. NUNCA párrafos.

   Escala: 44 / 32 / 22 / 16 / 13 / 11 px. */

.display,h1,.tesis p,.cifras b,.tarjeta b,.frase{
  font-family:var(--disp);
  font-stretch:125%;
  font-weight:600;
  letter-spacing:-.005em;
}

/* Utilidad. Fíjate en que no hay ni un selector de párrafo aquí dentro:
   `.fila .zona>h2` y no `.zona>h2`, porque la hoja de especificación usa .zona
   para su cuerpo de texto y una regla suelta le pondría versalitas a cada
   título del documento. */
.cuenta,.salida,.lectura,.invar,.tecla span,.seg button,.idioma button,
.soplo,.cifras span,.tarjeta span,.pie,summary,.b,.suelta,#entrada,
.campo textarea,.capa,.fila .zona>h2,.mando-tabla>span,.mando-orden>span,kbd{
  font-family:var(--mono);
  letter-spacing:.08em;
}

/* Cuerpo: toda la prosa, sin excepción. */
.pista,.nota,.intro,.bajo,.aviso,.vacia,.cifras em{
  font-family:var(--disp);
  font-stretch:100%;
  letter-spacing:0;
}

/* Rótulos de sección: cuerpo a 22 px, no display. El display es sólo para las
   cuatro cosas de arriba. */
.enviar h2,.exportar h2,.inventarios h2{
  font-family:var(--disp);font-stretch:100%;font-weight:500;
  font-size:22px;line-height:1.3;margin:0 0 14px;color:var(--cal);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--tinta);
  color:var(--cal);
  font-family:var(--disp);
  font-stretch:100%;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  min-height:100vh;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
@media(max-width:600px){.wrap{padding:0 16px}}

[hidden]{display:none!important}

/* El amarillo es señalética, no decoración: la señal, el logo, el estado activo
   de un conmutador y el 26 cuando es resultado. La selección de texto no es
   ninguna de esas cuatro cosas, así que va en cal. */
::selection{background:var(--cal);color:var(--tinta)}

a{color:var(--cal)}
a:focus-visible,button:focus-visible,summary:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--senal);outline-offset:2px}

/* ══ ①  CABECERA ═════════════════════════════════════════════════════════ */
/* Sin hero a pantalla completa: el visitante tiene que ver ya la cinta al
   entrar, aunque sea su borde superior. */
.cabecera{padding:32px 0 24px}

.top{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}

.marca{display:flex;align-items:center;gap:clamp(10px,1.4vw,16px);min-width:0}
.marca .logo{height:clamp(34px,5vw,48px);width:auto;display:block;flex:0 0 auto}
h1{font-size:clamp(26px,4.4vw,44px);line-height:1;margin:0}
h1 em{font-style:normal;color:var(--senal)}

.mandos-top{display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* Conmutador de modo. El estado activo es uno de los sitios del amarillo. */
.seg{display:flex;border:1px solid var(--grafito);border-radius:4px;overflow:hidden}
.seg button{
  font-size:11px;text-transform:uppercase;background:transparent;color:var(--humo);
  border:0;border-right:1px solid var(--grafito);padding:0 16px;cursor:pointer;
  min-height:44px;
}
.seg button:last-child{border-right:0}
.seg button[aria-selected="true"]{background:var(--senal);color:var(--tinta);font-weight:500}
.seg button:focus-visible{outline-offset:-3px}

/* Idioma de la interfaz: letras, no iconos, y nunca banderas. Un globo no dice
   qué idioma es, y las banderas mienten: el castellano no es de España. */
.idioma.codigo{display:flex;gap:2px}
.idioma.codigo button{
  font-size:11px;background:transparent;color:var(--humo);border:0;
  padding:0 8px;cursor:pointer;min-height:44px;
}
.idioma.codigo button[aria-pressed="true"]{color:var(--senal)}

/* La tesis es la frase que sostiene el sitio entero: 32 px de display, no el
   cuerpo de una instrucción de campo. */
.tesis{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start;
  justify-content:space-between;margin-top:28px}
/* Se estrecha antes de partirse, y sólo cuando ya no cabe el cubo se va él
   debajo. En un teléfono la frase manda. */
.tesis p{flex:1 1 260px;min-width:0;font-size:32px;line-height:1.25;margin:0;max-width:34ch}
@media(max-width:600px){.tesis p{font-size:24px}}

/* ── el cubo ──
   Ocho vértices, veintiocho aristas, una vuelta cada 40 s. Es el objeto del
   que sale todo lo demás, no un logo animado. */
.cubo{flex:0 0 auto;width:150px;height:150px;overflow:visible}
@media(max-width:820px){.cubo{width:110px;height:110px}}
@media(max-width:520px){.cubo{width:88px;height:88px}}
.cubo .arista{fill:none;stroke:var(--grafito);stroke-width:1}
.cubo .vertice{fill:var(--humo)}
/* Sin `opacity` aquí a propósito: la lleva el atributo del elemento, que
   es lo que anima k8-cubo.js. Una regla de CSS le ganaría al atributo y el
   rastro no se vería nunca. */
.cubo .rastro{fill:none;stroke:var(--senal);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cubo .senal{fill:var(--senal)}

/* ══ ②  LA CINTA ═════════════════════════════════════════════════════════ */
/* Es el elemento principal de la página y ocupa el ancho completo. */
.banda{padding:28px 0}
.cinta-sec{padding-top:8px}

.cinta-marco{
  background:var(--papel);
  border-radius:3px;
  /* Altura mínima 140 px, y de ahí hacia arriba según haga falta: la cinta
     crece con el contenido. Con la caja fija y medio vacía dejaba de parecer
     una cinta y parecía un folio. */
  min-height:140px;
  overflow-x:auto;
  overflow-y:hidden;
  position:relative;
  /* La cinta no se recorta ni se escala: se desplaza dentro de su marco, que
     es lo que hace una cinta de verdad. */
  scrollbar-width:thin;
  scrollbar-color:var(--papel-humo) var(--papel);
}
/* El ancho lo pone el contenido, que es el SVG de la cinta con su ancho en
   píxeles ya calculado. Antes lo fijaba el JavaScript con `style`, y eso es
   estilo en línea: la Content-Security-Policy lo bloquea. */
.cinta-papel{position:relative;padding:14px 0;width:max-content}

/* Perforaciones en los dos bordes largos: 5 px de diámetro, paso de 16 px.
   Van dentro del papel, así que se desplazan con él. */
.cinta-papel::before,.cinta-papel::after{
  content:'';position:absolute;left:0;right:0;height:12px;
  background-image:radial-gradient(circle at 8px 6px,var(--tinta) 2.5px,transparent 2.7px);
  background-size:16px 12px;
  opacity:.45;
}
.cinta-papel::before{top:0}
.cinta-papel::after{bottom:0}

svg.cinta{display:block}
.vacia{padding:40px 28px;color:var(--papel-humo);font-size:13px;line-height:1.6;max-width:62ch}

/* La tinta de los glifos y su marcado. Un subrayado de 2 px, nunca un fondo de
   color: un resalte macizo sobre el papel lo ensucia. */
svg.cinta path.ink{fill:none;stroke:var(--papel-tinta);stroke-linecap:round;stroke-linejoin:round}
svg.cinta circle.ink{fill:var(--papel-tinta);stroke:none}
svg.cinta .glosa{fill:var(--papel-humo);font-family:var(--mono);font-size:.42px}
svg.cinta .hit{fill:transparent}
/* 2 px exactos, no 2 unidades de papel: el `vector-effect` del propio elemento
   saca el grosor de la escala del dibujo. */
svg.cinta .sub{stroke:var(--senal);stroke-width:2;opacity:0;transition:opacity .12s}
svg.cinta .gl.on .sub{opacity:1}

/* En escritura el pad se queda en la letra actual y la cinta no se toca. En
   lectura se recorre glifo a glifo: es el trío al revés. */
body.modo-w svg.cinta .gl{pointer-events:none}
body.modo-r svg.cinta .gl{cursor:pointer}
body.modo-r svg.cinta .gl:hover .sub{opacity:.45}

.bajocinta{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;padding-top:10px;
}
.cuenta{margin:0;font-size:11px;color:var(--humo);text-transform:uppercase}

/* La tabla de lectura no es un ajuste de idioma y no debe parecerlo: la
   interfaz cambia los rótulos, la tabla cambia lo que DICE el mensaje. Se lee
   como una frase, no como un mando. */
.mando-tabla{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-left:auto}
.mando-tabla>span{font-size:11px;color:var(--humo)}
.mando-tabla .flecha{color:var(--grafito)}
.idioma.nombre{display:inline-flex}
/* Se lee como una frase, pero sigue siendo un mando que se toca con el dedo:
   ninguna zona táctil por debajo de 44 px, aunque el texto sea de 11. */
.idioma.nombre button{
  font-size:11px;background:transparent;border:0;color:var(--humo);
  padding:0 5px;cursor:pointer;min-height:44px;
  display:inline-flex;align-items:center;
}
.idioma.nombre button[aria-pressed="true"]{color:var(--cal);font-weight:500}
.idioma.nombre button:hover{text-decoration:underline}
.idioma.nombre button+button::before{content:'·';color:var(--grafito);margin-right:6px}

/* Aviso al cambiar de tabla: reserva su hueco aunque esté vacío, así aparece y
   desaparece sin que nada salte de sitio. No bloquea y se va solo. */
.soplo{
  margin:0;padding:8px 0 0;min-height:26px;font-size:11px;color:var(--humo);
  opacity:0;transition:opacity .35s;
}
.soplo.visible{opacity:1}

/* ══ ③  EL TECLADO ═══════════════════════════════════════════════════════ */
.fila{
  display:grid;
  grid-template-columns:200px minmax(220px,1fr) minmax(300px,1.35fr);
  gap:32px;align-items:start;
}
@media(max-width:900px){.fila{grid-template-columns:1fr;gap:28px}}

.zona{min-width:0}
.fila .zona>h2{
  font-size:11px;text-transform:uppercase;color:var(--humo);font-weight:400;
  margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--grafito);
  display:flex;justify-content:space-between;gap:8px;align-items:baseline;
}
.fila .zona>h2 i{font-style:normal;color:var(--cal)}

/* El pad: la retícula es el cubo, proyectado una vez y fijado. */
#pad{display:block;width:100%;height:auto;max-width:200px;touch-action:manipulation}
.nodo{cursor:pointer}
.nodo circle{fill:var(--tinta);stroke:var(--grafito);stroke-width:1.4;transition:stroke .12s}
.nodo text{font-family:var(--mono);font-size:11px;fill:var(--humo);text-anchor:middle;
  dominant-baseline:central;pointer-events:none;user-select:none}
.nodo:hover circle{stroke:var(--humo)}
.nodo:focus-visible{outline:none}
.nodo:focus-visible circle{stroke:var(--senal);stroke-width:2.4}
.nodo.on circle{stroke:var(--cal);stroke-width:2}
.nodo.on text{fill:var(--cal)}
.nodo.err circle{stroke:var(--alerta);stroke-width:2.4}
/* Ruta en cal, señal en amarillo, nodos no visitados en grafito. */
#camino{stroke:var(--cal);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#senal{fill:var(--senal)}

.lectura{margin-top:14px;font-size:11px;color:var(--humo);line-height:1.9}
.lectura b{color:var(--cal);font-weight:500}
.lectura .letra{
  font-family:var(--disp);font-stretch:100%;font-weight:600;font-size:32px;
  color:var(--cal);line-height:1;margin-right:10px;vertical-align:-4px;letter-spacing:0;
}

/* El campo de texto. El subrayado del carácter marcado se pinta en una capa
   detrás: así el cuadro sigue siendo un textarea de verdad —caret, selección,
   pegar, teclado del móvil— y el trío puede marcar un carácter suelto. */
.campo{position:relative;background:var(--tinta)}
.campo textarea,.capa{
  width:100%;margin:0;
  font-size:13px;line-height:1.8;text-transform:uppercase;
  padding:12px;border:1px solid var(--grafito);border-radius:4px;
  white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;
}
.campo textarea{
  position:relative;display:block;background:transparent;color:var(--cal);
  min-height:104px;resize:vertical;
}
.capa{
  position:absolute;inset:0;border-color:transparent;color:transparent;
  pointer-events:none;overflow:hidden;user-select:none;
}
.capa span{border-bottom:2px solid transparent}
.capa span.on{border-bottom-color:var(--senal)}

/* Las teclas. Ninguna zona táctil por debajo de 44 px. */
.teclas{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px}
.tecla{
  background:transparent;border:1px solid var(--grafito);border-radius:4px;
  padding:6px 4px 5px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:3px;min-height:60px;
  transition:transform .06s,border-color .12s,background .12s;
}
.tecla:hover{border-color:var(--humo)}
.tecla svg{width:100%;height:32px;display:block}
.tecla .g{fill:none;stroke:var(--cal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tecla span{font-size:10px;color:var(--humo);letter-spacing:.06em}
/* La tecla pulsada se hunde y se aclara. En amarillo no: marcar es cosa de la
   cinta, del pad y del texto, y el acento no se gasta en un acuse de recibo. */
.tecla:active,.tecla.golpe{transform:translateY(1px);border-color:var(--cal);background:var(--grafito)}

.tecla.espacio{grid-column:span 3;flex-direction:row;justify-content:center}
.tecla.espacio svg{display:none}

/* Zona de lectura: ocupa el sitio de las teclas, no una pantalla aparte. */
#entrada{
  width:100%;background:var(--tinta);color:var(--cal);border:1px solid var(--grafito);
  border-radius:4px;font-size:12px;padding:12px;min-height:88px;resize:vertical;
  line-height:1.7;
}
.suelta{
  border:1px dashed var(--grafito);border-radius:4px;padding:20px;text-align:center;
  color:var(--humo);font-size:11px;margin-top:10px;line-height:1.7;
  transition:border-color .15s,color .15s;
}
.suelta.dentro{border-color:var(--cal);color:var(--cal)}
.zona-entrada .acciones{margin-top:12px}
.aviso{font-size:13px;color:var(--alerta);margin:12px 0 0;line-height:1.6}

/* ══ ④  ENVIAR · ⑤  EXPORTAR ═════════════════════════════════════════════ */
/* Primero se enseña, después se administra: enviar y exportar son acciones
   sobre algo que ya has escrito, así que van debajo de la herramienta. */
.enviar{padding-top:36px}
.exportar{padding-top:4px}

.acciones{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sep{width:1px;height:20px;background:var(--grafito);margin:0 6px}

button.b,a.b{
  font-size:11px;text-transform:uppercase;background:transparent;color:var(--cal);
  border:1px solid var(--grafito);border-radius:4px;padding:0 15px;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
  transition:border-color .12s,background .12s,color .12s;
}
button.b:hover,a.b:hover{border-color:var(--humo)}
/* La acción principal pesa por contraste, no por color: el amarillo se guarda
   para la señal, el logo, el estado activo y el 26. */
button.b.primaria{background:var(--cal);color:var(--tinta);border-color:var(--cal);font-weight:500}
button.b.primaria:hover{background:#fff;border-color:#fff}
button.b[aria-pressed="true"]{border-color:var(--humo);color:var(--cal)}
button.b:disabled,a.b[aria-disabled="true"]{opacity:.38;cursor:not-allowed;pointer-events:none}

.pista{font-size:13px;color:var(--humo);line-height:1.6;margin:14px 0 0;max-width:74ch}

/* ══ ⑥  INSTRUMENTS ══════════════════════════════════════════════════════ */
/* La telemetría no se borra, se pliega: recibir a un visitante con
   −0.302 / 0.456 / −0.837 es pedirle un examen antes de la clase. */
.instr-sec{padding-top:8px}
.instr{border-top:1px solid var(--grafito);padding-top:8px}
.instr summary{
  font-size:11px;text-transform:uppercase;color:var(--humo);cursor:pointer;
  list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;
}
.instr summary::-webkit-details-marker{display:none}
.instr summary::before{content:'▸';color:var(--grafito);transition:transform .15s;display:inline-block}
.instr[open] summary::before{transform:rotate(90deg)}
.instr summary:hover{color:var(--cal)}
.instr-cuerpo{padding:8px 0 12px;max-width:80ch}
.invar{display:flex;flex-wrap:wrap;gap:1px;background:var(--grafito);
  border:1px solid var(--grafito);border-radius:4px;overflow:hidden}
.invar div{flex:1 1 150px;padding:10px 12px;background:var(--tinta)}
.invar b{display:block;font-size:13px;color:var(--cal);font-weight:500;letter-spacing:.04em}
.invar span{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--humo)}
/* La dirección del mensaje es fontanería: un dato, no un rótulo. Vive aquí
   abajo con el tamaño en bytes y no en el centro del descenso. */
.salida{margin-top:14px;font-size:11px;color:var(--humo);word-break:break-all;line-height:1.8}
.salida b{color:var(--cal);font-weight:500}
.nota{font-size:13px;color:var(--humo);line-height:1.65;margin:16px 0 0}
kbd{font-size:11px;background:var(--grafito);border:1px solid var(--grafito);
  border-radius:3px;padding:1px 5px;color:var(--cal)}
.mando-orden{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.mando-orden>span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--humo)}

/* ══ ⑦  LOS NÚMEROS ══════════════════════════════════════════════════════ */
/* 8, 28 y 1680 son datos de la máquina; 26 es el resultado. El cambio de color
   no es adorno: el ojo hace la distinción antes de leer una palabra. */
.numeros{padding-top:56px}
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:700px){.cifras{grid-template-columns:repeat(2,1fr);gap:28px 20px}}
.cifras div{min-width:0}
.cifras b{display:block;font-size:44px;line-height:1;color:var(--cal)}
@media(max-width:700px){.cifras b{font-size:32px}}
.cifras span{display:block;margin-top:8px;font-size:11px;text-transform:uppercase;color:var(--humo)}
.cifras .res b{color:var(--senal)}
.cifras em{display:block;margin-top:8px;font-style:normal;font-size:13px;
  color:var(--humo);line-height:1.5;max-width:26ch}
.bajo{font-size:16px;color:var(--cal);max-width:60ch;margin:32px 0 0}

/* ══ ⑧  CUATRO INVENTARIOS ═══════════════════════════════════════════════ */
/* Es un argumento, no una funcionalidad: se enseña que la familia existe y no
   se deja escribir en ella. No hay selector, y no debe haberlo. */
.inventarios{padding-top:56px}
.intro{font-size:16px;color:var(--humo);max-width:72ch;margin:0 0 28px}
.tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:820px){.tarjetas{grid-template-columns:repeat(2,1fr)}}
.tarjeta{border:1px solid var(--grafito);border-radius:6px;padding:20px 18px}
.muestra{display:flex;align-items:center;gap:10px;height:58px;margin-bottom:18px}
.muestra svg{height:52px;width:46px;flex:0 0 auto;overflow:visible}
.muestra .g{fill:none;stroke:var(--cal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.muestra .s{fill:var(--senal)}
.tarjeta b{display:block;font-size:32px;line-height:1;color:var(--cal)}
.tarjeta:first-child b{color:var(--senal)}
.tarjeta span{display:block;margin-top:8px;font-size:11px;text-transform:uppercase;color:var(--humo)}

/* ══ ⑨  CIERRE ═══════════════════════════════════════════════════════════ */
.cierre{padding:72px 0 56px;margin-top:32px;border-top:1px solid var(--grafito)}
.cierre .wrap{text-align:center}
.frase{font-size:32px;line-height:1.3;margin:0 auto;max-width:24ch;color:var(--cal)}
@media(max-width:600px){.frase{font-size:24px}}
.frase em{font-style:normal;color:var(--senal)}
.pie{margin:32px 0 0;font-size:11px;color:var(--humo);line-height:1.9}
.pie a{color:var(--cal);text-decoration:none;border-bottom:1px solid var(--grafito)}
.pie a:hover{border-bottom-color:var(--humo)}
.pie.credito{margin-top:12px;color:var(--grafito)}

/* ══ ATERRIZAJE ══════════════════════════════════════════════════════════ */
/* Quien abre un enlace no ha venido buscando un alfabeto: ha venido porque un
   amigo le ha mandado algo raro. Primero su mensaje descifrándose; la
   explicación, sólo cuando termina. */
body.aterrizaje .tras{display:none}
body.revelado .tras{animation:entra .55s both}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ══ MOVIMIENTO REDUCIDO ═════════════════════════════════════════════════ */
/* Sin trazado progresivo: la ruta aparece completa de golpe. El estado final es
   idéntico, así que no se pierde nada de la enseñanza. El cubo queda quieto. */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ══ HOJA DE ESPECIFICACIÓN ══════════════════════════════════════════════ */
/* Una página de leer, no de usar: renglón corto, más aire entre líneas y nada
   que se mueva. El resto del sitio le presta la paleta. */
body.doc{padding:32px 0 56px}
body.doc .wrap{max-width:820px}
/* La marca es un enlace de vuelta a la herramienta, pero no debe parecerlo: sin
   subrayado y con el color del texto, o el h1 hereda el azul del navegador y el
   nombre del sitio sale de otro color en cada página. */
body.doc .marca{text-decoration:none;color:var(--cal)}
body.doc .marca h1{color:inherit}
body.doc .seg a{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--humo);text-decoration:none;border-right:1px solid var(--grafito);
  padding:0 16px;min-height:44px;display:flex;align-items:center;
}
body.doc .seg a:last-child{border-right:0}
body.doc .seg a[aria-current="page"]{background:var(--senal);color:var(--tinta);font-weight:500}
body.doc .top{align-items:center}
body.doc .pie{margin-top:24px}

.caja{border:1px solid var(--grafito);border-radius:6px}
.caja>h2{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--humo);font-weight:400;margin:0;padding:12px 16px;
  border-bottom:1px solid var(--grafito);
}
.hoja{margin-top:24px}
.hoja .zona{padding:8px 28px 28px;color:var(--cal);line-height:1.75;font-size:16px}
@media(max-width:600px){.hoja .zona{padding:4px 16px 20px}}
.hoja h2{
  font-family:var(--disp);font-stretch:100%;font-size:22px;font-weight:500;
  color:var(--cal);margin:36px 0 12px;
}
.hoja h3{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--humo);font-weight:400;margin:28px 0 10px;
}
.hoja p{margin:0 0 14px}
.hoja strong{color:var(--cal);font-weight:600}
.hoja a{color:var(--cal);border-bottom:1px solid var(--grafito);text-decoration:none}
.hoja a:hover{border-bottom-color:var(--humo)}
.hoja hr{border:0;border-top:1px solid var(--grafito);margin:32px 0}
/* En cal y no en amarillo: un trozo de código es texto, no señalética. */
.hoja code{font-family:var(--mono);font-size:.86em;background:var(--grafito);
  border-radius:3px;padding:1px 5px;color:var(--cal)}
.hoja pre{background:#191720;border:1px solid var(--grafito);border-radius:4px;
  padding:14px;overflow-x:auto;margin:0 0 16px}
.hoja pre code{background:0;padding:0;color:var(--cal);font-size:13px;line-height:1.7}
.hoja table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:16px}
.hoja th{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--humo);font-weight:400;text-align:left;padding:8px 10px;
  border-bottom:1px solid var(--grafito);
}
.hoja td{padding:8px 10px;border-bottom:1px solid #221F29;vertical-align:top}
.hoja ol,.hoja ul{margin:0 0 16px;padding-left:22px}
.hoja li{margin-bottom:8px}
/* El primer bloque, antes de la primera regla, es el encabezado del documento. */
.hoja .zona>p:first-of-type{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--humo)}

/* El aviso de que no ha podido cargarse el alfabeto. Vive aquí y no en un
   atributo `style` porque la Content-Security-Policy no deja pasar el estilo
   en línea, y ésta es la única pantalla que se ve cuando ya ha fallado todo:
   tiene que salir sí o sí. */
.fatal{font-family:var(--mono);font-size:13px;line-height:1.7;
  color:var(--alerta);padding:40px;max-width:640px}
.fatal p{margin:0 0 12px}