/* Voz Americanista · estilos propios (Tailwind se carga desde su CDN) */
/* Portada tipo "cabina": hero azul con un celular dorado que sintoniza la emisora; el resto del sitio en fondo claro. */
:root {
  --navy: #002B49; --inst: #005596; --gold: #FFC72C; --ink: #0F1E2E; --paper: #F4F7FB;
  --font-display: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
}
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--navy); }
#siteHeader { top: env(safe-area-inset-top, 0px); }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.font-display { font-family: var(--font-display); }
.eq span { display:inline-block; width:4px; margin:0 1px; background:var(--gold); border-radius:2px; height:6px; transition:height .2s; }
.is-playing .eq span { animation: eq 1s ease-in-out infinite; }
.is-playing .eq span:nth-child(2){ animation-delay:.15s } .is-playing .eq span:nth-child(3){ animation-delay:.3s }
.is-playing .eq span:nth-child(4){ animation-delay:.45s } .is-playing .eq span:nth-child(5){ animation-delay:.6s }
@keyframes eq { 0%,100%{height:6px} 50%{height:22px} }
.waves::before, .waves::after { content:''; position:absolute; inset:-10px; border:3px solid rgba(255,199,44,.55); border-radius:9999px; opacity:0; }
.is-playing .waves::before { animation: ring 2s ease-out infinite; }
.is-playing .waves::after { animation: ring 2s ease-out 1s infinite; }
@keyframes ring { 0%{transform:scale(.85);opacity:.9} 100%{transform:scale(1.35);opacity:0} }
.show-playing { display:none !important; }
.is-playing .show-playing { display:inline-block !important; }
.is-playing .show-idle { display:none !important; }
.signal-ring { position:absolute; border-radius:9999px; border:2px solid rgba(255,199,44,.22); }
.is-playing .signal-ring { animation: pulse-ring 3s ease-out infinite; }
.is-playing .signal-ring:nth-child(2) { animation-delay: 1s; } .is-playing .signal-ring:nth-child(3) { animation-delay: 2s; }
@keyframes pulse-ring { 0%{opacity:.9;transform:scale(.92)} 100%{opacity:0;transform:scale(1.12)} }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.toast-enter { animation: tin .25s ease-out; }
@keyframes tin { from{transform:translateY(12px);opacity:0} to{transform:none;opacity:1} }
input[type=range]{ accent-color: var(--gold); }
#toasts { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.has-bar { padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }
.has-bar #toasts { bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
#miniBar { padding-bottom: env(safe-area-inset-bottom, 0px); }
.ep-pause { display:none !important; }
.is-current .ep-pause { display:inline-block !important; }
.is-current .ep-play { display:none !important; }
.news-focus { animation: focus-ring 2.4s ease-out; }
@keyframes focus-ring { 0%,60% { box-shadow: 0 0 0 4px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
#barSeek { accent-color: var(--gold); height: 4px; }
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }