/* Estilos de las guías (/guias/) -- mismos colores y tipografía que el landing. */
:root{
  --bg:#0B1120; --surface:#141B2D; --surface-2:#1B2338; --border:#26314A;
  --text:#F1F5F9; --text-muted:#8B98B8; --primary:#22D3EE; --primary-dark:#0E7490;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; background:var(--bg); color:var(--text); line-height:1.7; overflow-x:hidden;}
a{color:var(--primary);}
img{max-width:100%; display:block;}

nav{position:sticky; top:0; z-index:50; background:rgba(11,17,32,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border);}
nav .inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 24px; max-width:1100px; margin:0 auto;}
nav .marca{display:flex; align-items:center; text-decoration:none;}
nav .marca svg{height:40px; width:auto;}
nav .links{display:flex; align-items:center; gap:22px;}
nav .links a{color:var(--text-muted); font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap;}
nav .links a:hover{color:var(--text);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:12px; font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap;}
nav .links a.btn, .btn-primary{background:var(--primary); color:#04222b;}
.btn-primary:hover{box-shadow:0 8px 24px rgba(34,211,238,.35);}
.btn-ghost{border:1px solid var(--border); color:var(--text);}

.migas{max-width:760px; margin:28px auto 0; padding:0 24px; font-size:13px; color:var(--text-muted);}
.migas a{color:var(--text-muted); text-decoration:none;}
.migas a:hover{color:var(--primary);}

article{max-width:760px; margin:0 auto; padding:18px 24px 40px;}
article .etiqueta{display:inline-block; color:var(--primary); font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; margin:10px 0 12px;}
article h1{font-size:clamp(28px, 4.6vw, 42px); line-height:1.2; font-weight:800; letter-spacing:-.01em; margin-bottom:14px;}
article .bajada{font-size:18px; color:var(--text-muted); margin-bottom:10px;}
article .fecha{font-size:13px; color:var(--text-muted); margin-bottom:28px;}
article h2{font-size:24px; line-height:1.3; font-weight:800; margin:38px 0 12px;}
article h3{font-size:18px; font-weight:700; margin:24px 0 8px;}
article p{margin-bottom:14px; color:#D6DEEA;}
article ul, article ol{margin:0 0 16px 22px; color:#D6DEEA;}
article li{margin-bottom:8px;}
article strong{color:var(--text);}
.nota{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:12px; padding:16px 18px; margin:20px 0; font-size:15px;}
.nota p:last-child{margin-bottom:0;}
.indice{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px 22px; margin:6px 0 26px;}
.indice strong{display:block; margin-bottom:6px;}
.indice ol{margin-bottom:0;}
.indice a{text-decoration:none;}
.fuentes{font-size:13.5px; color:var(--text-muted); border-top:1px solid var(--border); margin-top:36px; padding-top:16px;}
.fuentes a{color:var(--text-muted);}

.cta{margin:40px 0 10px; border-radius:20px; padding:32px 28px; text-align:center; background:linear-gradient(135deg, var(--primary-dark), #072530);}
.cta h2{margin:0 0 10px; font-size:24px;}
.cta p{color:rgba(241,245,249,.8); margin-bottom:20px;}

.relacionadas{max-width:760px; margin:0 auto 60px; padding:0 24px;}
.relacionadas h2{font-size:18px; margin-bottom:14px;}
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px;}
.tarjeta{display:block; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; text-decoration:none; color:var(--text); transition:border-color .15s, transform .15s;}
.tarjeta:hover{border-color:var(--primary); transform:translateY(-2px);}
.tarjeta span{display:block; font-size:12px; color:var(--primary); font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;}
.tarjeta strong{font-size:16px; line-height:1.35;}
.tarjeta p{color:var(--text-muted); font-size:14px; margin-top:6px;}

footer{border-top:1px solid var(--border); padding:28px 24px; text-align:center; color:var(--text-muted); font-size:13px;}
footer a{color:var(--text-muted);}

@media (max-width: 720px){
  nav .links a:not(.btn){display:none;}
  article .bajada{font-size:16.5px;}
}