/* 512kg.com — una sola hoja para la portada y los textos.
   Tipografía del sistema (nada que descargar de terceros) y una paleta corta:
   tinta sobre casi negro, con un único acento dorado. */

:root {
  --bg: #111110; --panel: #151514;
  --ink: #ECEAE4; --txt: #D3D0C8; --mid: #A19F97; --dim: #8A8880; --line: #2A2927;
  /* --dim es el gris más apagado que se usa para texto: 5,2:1 sobre el fondo.
     Con el anterior (#6B6963, 3,4:1) las fechas y los pies costaban de leer. */
  --oro: #C9A45C;
  /* Código: tonos de Rosé Pine, un tema de terminal sobrio que casa con el fondo. */
  --c-codigo: #9CCFD8; --c-palabra: #C4A7E7; --c-cadena: #F6C177; --c-numero: #EBBCBA; --c-comentario: #908CAA;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 18px/1.6 var(--serif); -webkit-font-smoothing: antialiased; }
main { margin: 0 auto; padding: 56px 32px 96px; }
/* La portada aprovecha el ancho; un texto se lee mejor en columna estrecha. */
.portada main { max-width: 1080px; }
.texto main { max-width: 768px; }

a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
h2 { font-size: 22px; font-weight: 600; margin: 56px 0 14px; }

/* ---------- cabecera y pie, comunes ---------- */
.top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;
  font: 13px/1 var(--sans); letter-spacing: 0.04em; }
.top a { color: var(--mid); text-decoration: none; }
.top a:hover, .top b { color: var(--ink); }
.top b { font-weight: 600; }
.top nav { display: flex; align-items: center; gap: 18px; }
.top .lang { border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
.top .lang:hover { border-color: var(--dim); }

footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 22px; margin-top: 56px; padding-top: 16px;
  border-top: 1px solid var(--line); font: 14px/1.5 var(--sans); color: var(--dim); }
footer a { text-decoration-color: var(--dim); text-underline-offset: 4px; }
footer a + a { margin-left: 22px; }

/* ---------- portada ---------- */
.hero { display: flex; align-items: center; gap: 32px; }
.foto { flex: none; width: 148px; height: 148px; border-radius: 50%; object-fit: cover; object-position: 72% 30%; background: #1c1c1a; }
.hero h1 { font-size: 36px; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 8px; }
/* Sin tope de ancho y con `balance`: la frase cabe en dos líneas parejas. */
.frase { margin: 0; font-size: 21px; line-height: 1.5; color: var(--mid); text-wrap: balance; }
.frase strong { color: var(--ink); font-weight: 400; }
.sub { margin: 10px 0 0; font-size: 17px; color: var(--dim); }

/* Subgrid: las cuatro partes de cada bloque (tipo, título, texto, lenguajes)
   comparten filas con sus vecinos, así las barras de una misma fila quedan a
   la misma altura aunque los textos midan distinto. */
.cosas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.cosa { display: grid; grid-row: span 4; grid-template-rows: subgrid; border-top: 1px solid var(--line); padding: 18px 0 30px; }
.cosa h3 { margin: 0 0 7px; font-size: 19px; font-weight: 600; }
.cosa h3 a { text-decoration: none; }
.cosa h3 a:hover { text-decoration: underline; text-decoration-color: var(--oro); text-underline-offset: 4px; }
.cosa p { margin: 0 0 18px; font-size: 16px; line-height: 1.55; color: var(--mid); }
.cosa .mas { white-space: nowrap; text-decoration-color: var(--dim); text-underline-offset: 4px; }
.cosa .mas:hover { text-decoration-color: var(--oro); }

.tipo { justify-self: start; align-self: start; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 5px 10px 5px 9px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--mid);
  font: 600 10.5px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; }
.tipo::before { content: ""; width: 6px; height: 6px; border: 1px solid var(--dim); border-radius: 50%; }
/* Lo comercial es lo único con color; lo experimental lleva borde discontinuo. */
.tipo.comercial { color: var(--ink); border-color: #4A4130; }
.tipo.comercial::before { background: var(--oro); border-color: var(--oro); }
.tipo.experimento { border-style: dashed; border-color: var(--dim); }

/* Lenguajes, con los colores que usa GitHub para que se reconozcan. */
[data-l="JavaScript"] { --c: #f1e05a; } [data-l="TypeScript"] { --c: #3178c6; }
[data-l="HTML"] { --c: #e34c26; }       [data-l="CSS"] { --c: #663399; }
[data-l="Python"] { --c: #3572A5; }     [data-l="Swift"] { --c: #F05138; }
[data-l="Shell"] { --c: #89e051; }      [data-l="otros"] { --c: #8b8a85; }
.barra { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.barra rect { fill: var(--c); }
.leyenda { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 10px 0 0; padding: 0; list-style: none;
  font: 12.5px/1.3 var(--sans); color: var(--dim); font-variant-numeric: tabular-nums; }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.leyenda i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.leyenda b { color: var(--ink); font-weight: 600; }

.posts { margin: 0; padding: 0; list-style: none; }
.posts a { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 19px; text-decoration: none; }
.posts a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.posts time { flex: none; font: 13px/1.9 var(--sans); color: var(--dim); }

.contacto { margin: 0; font-size: 19px; color: var(--mid); }
.contacto a { white-space: nowrap; text-decoration-color: var(--oro); text-underline-offset: 5px; }

/* ---------- textos ---------- */
/* El índice de secciones solo aparece cuando hay sitio para él (ver más abajo). */
.indice { display: none; }
.indice p { margin: 0 0 12px; font: 600 10.5px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.indice ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.indice a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 1px solid transparent;
  font: 13px/1.4 var(--sans); color: var(--mid); text-decoration: none; }
.indice a:hover { color: var(--ink); border-left-color: var(--oro); }
/* Un título de sección al que se salta desde el índice no debe quedar pegado al borde. */
article h2 { scroll-margin-top: 24px; }
.texto .top { margin-bottom: 56px; }
article { font-size: 18.5px; line-height: 1.65; }
article h1 { font-size: 40px; font-weight: 600; line-height: 1.14; letter-spacing: -0.015em; margin: 0 0 14px; text-wrap: balance; }
article h2 { font-size: 25px; line-height: 1.25; }
article h3 { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 34px 0 10px; }
article p, article li { color: var(--txt); }
article p { margin: 0 0 18px; }
article ol, article ul { margin: 0 0 18px; padding-left: 26px; }
article li { margin-bottom: 8px; }
article strong { color: var(--ink); font-weight: 600; }
article a { text-decoration-color: var(--dim); text-underline-offset: 4px; }
article a:hover { text-decoration-color: var(--oro); }
.meta { margin: 0 0 40px; font: 13px/1.4 var(--sans); letter-spacing: 0.04em; color: var(--dim); }
blockquote { margin: 0 0 18px; padding: 2px 0 2px 20px; border-left: 2px solid var(--oro); color: var(--ink); font-style: italic; }
/* Las fórmulas llevan scroll propio: en un móvil no deben ensanchar la página. */
.formula { padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: #171716;
  font: 15px/1.5 var(--mono); color: var(--ink); white-space: nowrap; overflow-x: auto; }
pre { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: #171716; overflow-x: auto; }
code { font: 0.82em/1.6 var(--mono); color: var(--ink); }
/* El código dentro de una frase va en otro color: se tiene que distinguir del texto de un vistazo. */
p code, li code { padding: 1px 5px; border: 1px solid var(--line); border-radius: 4px; background: #171716; color: var(--c-codigo); }
.c-palabra { color: var(--c-palabra); }
.c-cadena { color: var(--c-cadena); }
.c-numero { color: var(--c-numero); }
.c-clave { color: var(--c-codigo); }
.c-comentario { color: var(--c-comentario); font-style: italic; }
/* Notas en primera persona: lo que el autor ha visto en sus propios proyectos. */
.nota { margin: 26px 0; padding: 14px 18px 16px; border: 1px solid var(--line); border-left: 2px solid var(--oro); border-radius: 0 8px 8px 0; background: var(--panel); }
.nota p { margin: 0; font-size: 17px; }
.nota .rotulo { margin-bottom: 6px; font: 600 10.5px/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); }
.fuentes li { font-size: 16px; line-height: 1.5; }
.fuentes a { color: var(--mid); text-decoration-color: var(--line); }

/* Página de un proyecto: la etiqueta va sobre el título y los lenguajes al final. */
.proyecto .tipo { margin-bottom: 16px; }
.proyecto .lenguajes { margin-top: 36px; }

/* Compartir: enlaces discretos al final del texto, sin iconos ni botones de terceros. */
.compartir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  font: 13px/1 var(--sans); color: var(--dim); }
.compartir span { margin-right: 4px; letter-spacing: 0.04em; }
.compartir a, .compartir button { all: unset; cursor: pointer; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--mid); }
.compartir a:hover, .compartir button:hover { color: var(--ink); border-color: var(--dim); }
.compartir [hidden] { display: none; }

/* Anterior y siguiente, al pie de cada texto o proyecto. */
.vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.vecinos a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; font-size: 17px; line-height: 1.35; text-decoration: none; }
.vecinos a:hover { border-color: var(--dim); }
.vecinos span { display: block; margin-bottom: 6px; font: 12px/1 var(--sans); letter-spacing: 0.06em; color: var(--dim); }
.vecinos .siguiente { text-align: right; }

/* ---------- figuras animadas (las monta figuras.js) ---------- */
.fig { margin: 30px 0 34px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
/* Por debajo de 560 px el texto de una figura sería ilegible: en pantallas
   estrechas se desplaza de lado en vez de encogerse más. */
.fig .lienzo { overflow-x: auto; }
.fig svg { display: block; width: 100%; height: auto; min-width: 560px; }
.fig .pre { white-space: pre; }
.mandos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--line);
  font: 12px/1 var(--sans); color: var(--mid); }
.mandos button { all: unset; cursor: pointer; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; }
.mandos button:hover { color: var(--ink); border-color: var(--dim); }
.mandos button:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.desliza { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.desliza input { width: 150px; accent-color: var(--oro); }
.desliza output { min-width: 2.2em; font-family: var(--mono); color: var(--ink); }
/* El copyright va dibujado dentro de la figura; cuando esta se desplaza de
   lado puede quedar fuera de la vista, y entonces se repite en la barra. */
.mandos .copia { display: none; margin-left: auto; letter-spacing: 0.04em; color: var(--dim); }
figcaption, .sin-js { padding: 11px 14px 13px; font: 12.5px/1.5 var(--sans); color: var(--dim); }
figcaption { border-top: 1px solid var(--line); }
figcaption b { color: var(--mid); font-weight: 600; }
.sin-js { margin: 0; }

/* ---------- pantallas anchas ---------- */
/* Con sitio de sobra, la página de un texto usa el mismo ancho que la portada:
   el índice a la izquierda, fijo al desplazarse, y el texto a su derecha. */
@media (min-width: 1180px) {
  .texto.con-indice main { max-width: 1080px; }
  .con-indice .cuerpo { display: grid; grid-template-columns: 216px minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .con-indice .indice { display: block; position: sticky; top: 32px; max-height: calc(100vh - 64px); overflow-y: auto; }
}

/* ---------- pantallas estrechas ---------- */
@media (max-width: 960px) { .cosas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .mandos .copia { display: inline; } }
@media (max-width: 620px) {
  main { padding: 40px 16px 72px; }
  h2 { margin-top: 44px; }
  .cosas { grid-template-columns: 1fr; }
  .hero { align-items: flex-start; gap: 18px; }
  .foto { width: 88px; height: 88px; }
  .hero h1 { font-size: 27px; }
  .frase { font-size: 17px; }
  .sub { font-size: 15px; }
  .texto .top { margin-bottom: 36px; }
  article { font-size: 17.5px; }
  article h1 { font-size: 30px; }
  article h2 { font-size: 22px; }
  .desliza { margin-left: 0; width: 100%; }
  .vecinos { grid-template-columns: 1fr; }
  .vecinos .siguiente { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }