:root{
  --fondo:#0B0B0D; --tarjeta:#15171E; --texto:#E8ECF2; --suave:#9AA3B0;
  --azul:#9AD4FF; --naranja:#FFC98A; --linea:#242833;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.65; font-size:17px;
}
.envoltorio{max-width:740px; margin:0 auto; padding:32px 22px 80px}
header{display:flex; align-items:center; gap:14px; padding:18px 0 8px}
header svg{width:52px; height:52px; border-radius:11px; flex:0 0 auto}
header .nombre{font-size:25px; font-weight:600; letter-spacing:.02em}
header .nombre span{display:block; font-size:13px; font-weight:400; color:var(--suave)}
nav{display:flex; gap:6px; flex-wrap:wrap; margin:22px 0 34px}
nav a{
  color:var(--suave); text-decoration:none; font-size:14px;
  padding:8px 14px; border:1px solid var(--linea); border-radius:20px;
}
nav a:hover,nav a.aqui{color:var(--fondo); background:var(--azul); border-color:var(--azul)}
h1{font-size:36px; line-height:1.25; margin:0 0 6px; letter-spacing:-.01em}
h2{font-size:20px; margin:38px 0 10px; color:var(--azul)}
h3{font-size:16px; margin:24px 0 6px}
.fecha{color:var(--suave); font-size:14px; margin:0 0 26px}
.destacado{
  background:var(--tarjeta); border:1px solid var(--linea); border-left:3px solid var(--naranja);
  border-radius:14px; padding:18px 20px; margin:26px 0;
}
.destacado p{margin:0}
ul{padding-left:20px} li{margin:7px 0}
a{color:var(--azul)}
code{background:var(--tarjeta); padding:2px 7px; border-radius:6px; font-size:14px}
.completar{background:#4A3208; color:#FFD79A; padding:2px 8px; border-radius:6px; font-size:14px}
footer{
  border-top:1px solid var(--linea); margin-top:56px; padding-top:22px;
  color:var(--suave); font-size:14px; display:flex; gap:18px; flex-wrap:wrap
}
footer a{color:var(--suave)}
@media (max-width:520px){ body{font-size:16px} h1{font-size:29px} .envoltorio{padding:20px 18px 60px} }