:root{
  --ink:#101828; --paper:#f6f7fb; --white:#fff; --red:#a3123a; --gold:#f2b705;
  --serif:Rockwell,"Roboto Slab","Zilla Slab",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:118%;scroll-padding-top:1rem}
body{margin:0;font:1rem/1.65 var(--sans);color:var(--ink);background:var(--paper)}
.wrap{max-width:68rem;margin:0 auto;padding:0 1.25rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a{color:var(--red);text-underline-offset:.2em}
a:hover{color:#6e0c27}
:focus-visible{outline:4px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 7px var(--ink)}
main:focus{outline:none}
.skip-link{position:absolute;left:.5rem;top:-4rem;background:var(--gold);color:var(--ink);padding:.75rem 1rem;font-weight:700;z-index:10}
.skip-link:focus{top:.5rem}

.site-header{background:var(--ink);color:var(--white)}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 2rem;padding-top:1rem;padding-bottom:1rem}
.brand{margin:0;font:800 2rem/1 var(--serif)}
.brand a{color:var(--white);text-decoration:none}
.brand a:hover{color:var(--gold)}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.menu a{display:block;padding:.6rem .9rem;min-height:2.75rem;color:var(--white);text-decoration:none;border-bottom:4px solid transparent}
.menu a:hover{border-bottom-color:var(--gold)}
.menu a[aria-current="page"]{border-bottom-color:var(--gold);font-weight:700}

.aviso{background:var(--gold);color:var(--ink)}
.aviso p{margin:0;padding:.75rem 0}

.hero{background:var(--ink);color:var(--white);padding:3.5rem 0 4rem;border-bottom:8px solid var(--red)}
.hero h1{font:800 clamp(2.6rem,8vw,5rem)/1.05 var(--serif);margin:0 0 .5rem}
.hero .slogan{font:600 clamp(1.3rem,3.5vw,2rem)/1.3 var(--serif);color:var(--gold);margin:0 0 1rem}
.hero p{max-width:40rem}

section.block{padding:2.5rem 0}
h1,h2,h3{font-family:var(--serif);line-height:1.2}
h2{font-size:1.8rem;margin:0 0 1rem}
.page-title{font-size:clamp(2rem,5vw,3rem);margin:2.5rem 0 1rem}
.prose{max-width:42rem}
.lead{font-size:1.25rem}
.quote{font:700 1.5rem/1.35 var(--serif);border-left:8px solid var(--red);padding-left:1rem;margin:1.5rem 0}

.cards{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.cards a{display:block;height:100%;padding:1.25rem;background:var(--white);border:2px solid var(--ink);color:var(--ink);text-decoration:none}
.cards a:hover{background:var(--ink);color:var(--white)}
.cards strong{display:block;font:700 1.25rem var(--serif);margin-bottom:.25rem}
.cards a:hover strong{color:var(--gold)}

.player{background:var(--gold);color:var(--ink);padding:1.5rem;margin:2rem 0;border:3px solid var(--ink);max-width:44rem}
.player h2,.player h1{margin-top:0;font-size:1.5rem}
.nowplaying{font-size:1.2rem;margin:.5rem 0}
.np-label{font-weight:700}
.np-prev{margin:.25rem 0 1rem}
.controls{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1rem 0}
.controls button{min-height:3.25rem;min-width:7.5rem;padding:.5rem 1.25rem;font:700 1.1rem var(--sans);color:var(--white);background:var(--ink);border:3px solid var(--ink);border-radius:.25rem;cursor:pointer}
.controls button:hover:not(:disabled){background:var(--red);border-color:var(--red)}
.controls button:disabled{background:#d9d3b8;color:#3a3a3a;border-color:#3a3a3a;cursor:not-allowed}
.vol{margin:0;font-weight:700}
.status{min-height:1.6em;margin:.5rem 0 0;font-weight:600}

.site-footer{background:var(--ink);color:var(--white);padding:2rem 0;margin-top:3rem}
.site-footer a{color:var(--white)}
.footer-menu{margin:1rem 0}
.small{font-size:.9rem}

@media (max-width:40rem){.menu{width:100%}.menu li{flex:1 1 45%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media (forced-colors:active){.controls button{border:2px solid ButtonText}}