/* Imagen de marca jrcdev: Tinta, Papel, Acero y Voltio; Bricolage Grotesque
   para titulares y JetBrains Mono para lo técnico. Fuentes alojadas aquí
   (sin Google Fonts, para no enviar la IP de los visitantes a terceros). */
@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:500 800; font-display:swap; src:url(/fonts/bricolage.woff2) format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap; src:url(/fonts/jetbrains-mono.woff2) format("woff2"); }

:root {
  --fondo:#0A0B0E; --tinta:#0E0F13; --panel:#121319; --linea:#1D2029; --punto:#1D2029;
  --papel:#F4F5F7; --acero:#6B7080; --suave:#8B90A0; --voltio:#D4FF3A;
  --titular:"Bricolage Grotesque", system-ui, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { background:var(--fondo); }
body {
  margin:0; min-height:100vh; color:var(--papel); font:17px/1.6 var(--titular); font-weight:500;
  background:var(--tinta) radial-gradient(circle at 2px 2px, var(--punto) 1.6px, transparent 0) 0 0 / 32px 32px;
}
a { color:var(--papel); text-decoration-color:var(--acero); text-underline-offset:3px; }
a:hover { color:var(--voltio); text-decoration-color:var(--voltio); }
a:focus-visible { outline:2px solid var(--voltio); outline-offset:3px; border-radius:4px; }
::selection { background:var(--voltio); color:var(--tinta); }

.envoltorio { max-width:1040px; margin:0 auto; padding:0 24px; }
.mono { font-family:var(--mono); font-weight:400; }
.etiqueta { font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--suave); }
.voltio { color:var(--voltio); }

/* Logotipo: «jrc» en papel, «dev» en acero y el cursor en voltio. */
.logo { display:inline-flex; align-items:flex-end; gap:.06em; margin:0; font-family:var(--titular); font-weight:800; line-height:.86; letter-spacing:-.055em; font-variation-settings:"opsz" 96; color:var(--papel); text-decoration:none; }
.logo .dev { color:var(--acero); }
.logo .cursor { display:block; width:.4em; height:.15em; margin:0 0 .08em .04em; background:var(--voltio); animation:parpadeo 1.1s steps(1) infinite; }
a.logo:hover { color:var(--papel); }
@keyframes parpadeo { 50% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .logo .cursor { animation:none; } }

.cabecera { display:flex; justify-content:space-between; align-items:center; padding:24px 0; }
.cabecera .logo { font-size:30px; }

.pie { border-top:1px solid var(--linea); margin-top:96px; padding:28px 0 40px; display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between; font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--suave); }
.pie a { color:var(--suave); }
.pie a:hover { color:var(--voltio); }