:root{--azul:#12355b;--azul2:#0a203a;--amarillo:#f5b731;--texto:#1b2733;--suave:#5b6b7b;--fondo:#f6f8fa;--borde:#dfe5eb}
*{box-sizing:border-box}
body{margin:0;font:17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--texto);background:var(--fondo)}
header{background:linear-gradient(160deg,var(--azul),var(--azul2));color:#fff}
.barra{max-width:880px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.marca{font-weight:700;font-size:20px;color:#fff;text-decoration:none;display:flex;align-items:center;gap:10px}
.marca span{background:var(--amarillo);color:var(--azul);border-radius:8px;padding:2px 9px;font-size:17px}
nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
nav a{color:#cfdcec;text-decoration:none;font-size:15px}nav a:hover,nav a[aria-current]{color:#fff}
.portada{max-width:880px;margin:0 auto;padding:30px 20px 54px}
.portada h1{margin:0 0 10px;font-size:34px;line-height:1.2}
.portada p{margin:0;color:#cfdcec;max-width:640px}
main{max-width:880px;margin:-26px auto 60px;padding:0 20px}
.tarjeta{background:#fff;border:1px solid var(--borde);border-radius:14px;padding:26px 28px;margin-bottom:18px;box-shadow:0 8px 24px rgba(10,32,58,.06)}
h2{margin:0 0 12px;font-size:22px;color:var(--azul)}h3{margin:20px 0 6px;font-size:17px}
p{margin:0 0 12px}ul,ol{margin:0 0 12px;padding-left:22px}li{margin-bottom:6px}
code{background:#eef2f6;border-radius:5px;padding:1px 6px;font-size:.92em}
.nota{background:#fff8e6;border:1px solid #f1d998;border-radius:10px;padding:12px 16px;margin:14px 0}
label{display:block;font-weight:600;margin:14px 0 6px}
input,textarea{width:100%;font:inherit;padding:11px 13px;border:1px solid #c3ccd6;border-radius:9px;background:#fff}
input:focus,textarea:focus{outline:2px solid var(--amarillo);border-color:var(--azul)}
textarea{min-height:150px;resize:vertical}
button{margin-top:18px;background:var(--azul);color:#fff;border:0;border-radius:10px;padding:12px 26px;font:inherit;font-weight:600;cursor:pointer}
button:hover{background:var(--azul2)}
.oculto{position:absolute;left:-9999px}
details{border-top:1px solid var(--borde);padding:12px 0}details:first-of-type{border-top:0}
summary{cursor:pointer;font-weight:600}details p{margin:10px 0 0;color:var(--suave)}
footer{max-width:880px;margin:0 auto;padding:0 20px 40px;color:var(--suave);font-size:14px}
footer a{color:var(--suave)}