/* Misma paleta que los videos y el panel. Sin fuentes externas: así la web no le pasa la IP de nadie a terceros. */
:root {
  --fondo: #0b0c10;
  --panel: #13161c;
  --borde: rgba(255, 255, 255, 0.09);
  --texto: #eef1f5;
  --tenue: #8b93a1;
  --amarillo: #ffc83d;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 17px/1.65 var(--sans); }
a { color: var(--amarillo); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

.marco { max-width: 760px; margin: 0 auto; padding: 0 20px; }

header.barra { border-bottom: 1px solid var(--borde); }
header.barra .marco { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.logo { font: 800 18px var(--sans); letter-spacing: 3px; color: var(--texto); text-decoration: none; }
.logo span { color: var(--amarillo); }
nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
nav a { color: var(--tenue); text-decoration: none; }
nav a:hover, nav a[aria-current="page"] { color: var(--texto); }

main.marco { padding-top: 48px; padding-bottom: 64px; }
h1 { font-size: clamp(32px, 7vw, 52px); line-height: 1.08; letter-spacing: -1px; margin: 0 0 16px; font-weight: 800; }
h1 em { font-style: normal; color: var(--amarillo); }
h2 { font-size: 22px; line-height: 1.25; margin: 40px 0 10px; }
h3 { font-size: 17px; margin: 24px 0 6px; }
p, ul { margin: 0 0 14px; }
ul { padding-left: 22px; }
li { margin-bottom: 6px; }
.bajada { font-size: 20px; color: var(--tenue); max-width: 600px; }
.tenue { color: var(--tenue); }
.fecha { font: 500 13px var(--mono); letter-spacing: 1px; text-transform: uppercase; color: var(--tenue); }
.idiomas { font-size: 15px; margin-bottom: 28px; }
code { font: 500 14px var(--mono); background: var(--panel); padding: 2px 6px; border-radius: 6px; }

.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 20px 22px; margin: 24px 0; }
.tarjeta h2 { margin-top: 0; }
.redes { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.redes li { margin: 0; font-family: var(--mono); font-size: 15px; }

hr { border: 0; border-top: 1px solid var(--borde); margin: 56px 0 8px; }
footer { border-top: 1px solid var(--borde); padding: 24px 0 40px; font-size: 14px; color: var(--tenue); }
footer .marco { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
footer a { color: var(--tenue); }