:root { --azul: #12305f; --azul-claro: #1d4a8f; --oro: #e8b923; --papel: #f8f7f3; --tinta: #1b2433; --tenue: #566074; }
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; background: var(--papel); color: var(--tinta); font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
main { flex: 1; }
a { color: var(--azul-claro); }
a:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 4px; }
.portada { background: linear-gradient(165deg, var(--azul) 0%, var(--azul-claro) 100%); color: #fff; text-align: center; padding: 56px 24px 64px; }
.logo { display: block; margin: 0 auto 20px; width: 150px; height: 150px; object-fit: contain; background: #fff; border-radius: 50%; padding: 12px; border: 4px solid var(--oro); }
.lema { color: var(--oro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 15px; }
h1 { font: 700 clamp(38px, 8vw, 60px)/1.1 Georgia, "Times New Roman", serif; margin: 8px 0; }
.sub { font-size: 21px; margin-bottom: 30px; }
.ig { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: var(--azul); font-weight: 700; padding: 14px 26px; border-radius: 40px; text-decoration: none; }
.ig:hover { background: var(--oro); }
section { max-width: 720px; margin: 0 auto; padding: 44px 24px 0; }
h2 { font: 700 28px/1.2 Georgia, "Times New Roman", serif; color: var(--azul); margin-bottom: 18px; }
ul { list-style: none; padding: 0; }
.niveles ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.niveles li { background: #fff; border: 1px solid #dfe2e8; border-top: 4px solid var(--oro); border-radius: 10px; padding: 18px 8px; text-align: center; font-weight: 700; color: var(--azul); }
.contacto li { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid #dfe2e8; overflow-wrap: anywhere; }
.contacto span { color: var(--tenue); font-size: 16px; }
footer { text-align: center; padding: 44px 24px 28px; font-size: 14px; }
footer a { color: var(--tenue); }
@media (max-width: 480px) { .niveles ul { gap: 8px; } .niveles li { font-size: 16px; } .contacto li { grid-template-columns: 1fr; gap: 0; } }