/* =============================================================
   GoRADIO — Sistema de diseño v5
   Basado en el manual de marca ("GoRadio — Presentación4").
   REGLA FIRME: colores planos. Ningún degradado, ningún glow.
   Los nombres de los colores son los del manual.
   ============================================================= */

/* ---------- 0. TIPOGRAFÍAS DE MARCA ---------- */
@font-face{
  font-family:"Zuume";src:url("../fonts/zuume-bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"PP Mori";src:url("../fonts/ppmori-regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"PP Mori";src:url("../fonts/ppmori-semibold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
}

/* ---------- 1. TOKENS ---------- */
:root{
  /* --- PALETA OFICIAL (planos, sin mezclas) --- */
  --frecuencia:#7700ff;   /* violeta: color propio, núcleo del sistema */
  --origen:#fa5b2f;       /* naranja: herencia del ecosistema Go       */
  --resonancia:#ff80eb;   /* rosa: expande el universo cromático       */
  --pulso:#a0e560;        /* verde: energía y ritmo                    */
  --aire:#15151a;         /* casi negro: soporte y estructura          */
  --pausa:#ffffff;        /* blanco: apertura y respiración            */

  /* Violeta aclarado SOLO para texto chico sobre negro:
     el #7700ff puro no llega a contraste legible en cuerpos pequeños. */
  --frecuencia-txt:#b98cff;

  /* Superficies planas construidas sobre Aire */
  --bg:var(--aire); --surface:#1c1c22; --surface-2:#24242c; --surface-3:#2e2e38;
  --text:#e9e9ee; --muted:#a2a2b0; --faint:#6d6d7a;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.22);
  --glass:var(--aire);

  --on-air:var(--pulso); --off-air:#55555f;

  --font-display:"Zuume","Arial Narrow",Impact,system-ui,sans-serif;
  --font-body:"PP Mori","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"PT Mono","SFMono-Regular","Consolas","Liberation Mono",monospace;

  --fs-xs:clamp(.72rem,.70rem + .1vw,.78rem);
  --fs-sm:clamp(.84rem,.80rem + .2vw,.92rem);
  --fs-base:clamp(.98rem,.94rem + .25vw,1.06rem);
  --fs-lg:clamp(1.15rem,1.05rem + .5vw,1.35rem);
  --fs-xl:clamp(1.5rem,1.25rem + 1.1vw,2.1rem);
  --fs-2xl:clamp(2.2rem,1.6rem + 2.6vw,3.8rem);
  --fs-3xl:clamp(3rem,2rem + 4.6vw,6rem);
  --fs-lockup:clamp(3.4rem,2rem + 7.6vw,9.5rem);

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
  --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --sp-10:8rem;
  --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --sh-1:0 2px 10px rgba(0,0,0,.5); --sh-2:0 14px 44px rgba(0,0,0,.6);
  --maxw:1240px; --gutter:clamp(1.1rem,4vw,2.5rem); --player-h:88px;
  --rule-h:44px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  font-family:var(--font-body);font-size:var(--fs-base);line-height:1.55;color:var(--text);
  background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom,0px));
}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--frecuencia-txt);outline-offset:3px}
::selection{background:var(--frecuencia);color:var(--pausa)}

/* ---------- 3. TIPOGRAFÍA ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:.92;
  letter-spacing:.005em;text-transform:uppercase;color:var(--pausa)}
/* Zuume es condensada: sin tamaños explícitos los títulos quedan diminutos */
h2{font-size:var(--fs-2xl)}
h3{font-size:var(--fs-xl)}
h4{font-size:var(--fs-lg)}
.lead{font-size:var(--fs-lg);color:var(--muted)}
.text-accent{color:var(--frecuencia-txt)}

/* Palabra destacada: bloque violeta plano, como en las piezas del manual */
.hl{background:var(--pausa);color:var(--frecuencia);padding:0 .12em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- 4. LAYOUT ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.section--tight{padding-block:clamp(2.5rem,5vw,4rem)}
.section-head{max-width:680px;margin-bottom:var(--sp-7)}
.section-head h2{font-size:var(--fs-2xl)}
.section-head p{margin-top:var(--sp-4)}

/* ---------- 5. BOTONES ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:.9em 1.6em;border-radius:var(--r-pill);font-family:var(--font-body);font-weight:600;
  font-size:var(--fs-sm);white-space:nowrap;color:var(--pausa);border:1px solid var(--line-2);
  transition:transform .25s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:none}
.btn--violet{background:var(--frecuencia);color:var(--pausa);border-color:var(--frecuencia)}
/* Variante para zonas donde el fondo ya es violeta */
.btn--light{background:var(--pausa);color:var(--aire);border-color:var(--pausa)}
.btn--light:hover{background:var(--aire);color:var(--pausa);border-color:var(--aire)}
.btn--violet:hover{background:var(--pausa);color:var(--aire);border-color:var(--pausa)}
.btn--ghost:hover{background:var(--pausa);color:var(--aire);border-color:var(--pausa)}
.btn--lg{padding:1em 2em;font-size:var(--fs-base)}
.btn svg{width:1.1em;height:1.1em}

/* ---------- 6. REGLA CON TICKER (recurso de la carátula) ----------
   Dos filetes finos con texto monoespaciado corriendo entre ellos. */
.rule{position:relative;height:var(--rule-h);display:flex;align-items:center;overflow:hidden;
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.rule__track{display:flex;width:max-content;animation:slide 40s linear infinite}
.rule:hover .rule__track{animation-play-state:paused}
.rule__item{display:inline-block;white-space:nowrap;font-family:var(--font-mono);
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--pausa)}
@keyframes slide{to{transform:translateX(-50%)}}
.rule--violet{background:var(--frecuencia);border-color:var(--frecuencia)}

/* ---------- 7. HEADER / NAV ---------- */
/* Arranca escondido: aparece recién cuando se scrollea y ahí queda fijo. */
.site-header{position:fixed;top:0;left:0;right:0;z-index:60;transform:translateY(-100%);
  visibility:hidden;border-bottom:1px solid transparent;
  transition:transform .4s var(--ease),visibility .4s,background-color .3s,border-color .3s}
.site-header.is-pinned{transform:none;visibility:visible;
  background:var(--glass);border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:var(--sp-4)}
.nav__links{display:flex;align-items:center;gap:var(--sp-6)}
.nav__links a{font-size:var(--fs-sm);color:var(--muted);font-weight:400;position:relative;transition:color .2s}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:var(--frecuencia);transition:width .25s var(--ease)}
.nav__links a:hover{color:var(--pausa)}
.nav__links a:hover::after{width:100%}
.nav__cta{display:flex;align-items:center;gap:var(--sp-3)}
.nav__toggle{display:none;width:44px;height:44px;border-radius:var(--r-sm);border:1px solid var(--line);
  align-items:center;justify-content:center}
.nav__toggle span{display:block;width:20px;height:2px;background:var(--pausa);position:relative;transition:.25s}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:var(--pausa);transition:.25s}
.nav__toggle span::before{top:-6px}.nav__toggle span::after{top:6px}
body.nav-open .nav__toggle span{background:transparent}
body.nav-open .nav__toggle span::before{top:0;transform:rotate(45deg)}
body.nav-open .nav__toggle span::after{top:0;transform:rotate(-45deg)}

/* ---------- 8. LOGOTIPO Go|RADIO ----------
   Siempre el SVG de marca (assets/logo/). Nunca se recompone con tipografía. */
.brand{display:inline-flex;align-items:center;transition:opacity .2s}
.brand img{height:26px;width:auto;display:block}
.brand:hover{opacity:.75}
.site-footer .brand img{height:24px}

/* ---------- 9. LOADER ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--aire);display:grid;place-items:center;
  transition:opacity .5s var(--ease),visibility .5s}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5)}
.loader__wave{width:min(240px,60vw);height:60px;overflow:hidden}
.loader__wave svg{width:100%;height:100%;overflow:visible}
.loader__wave path{fill:none;stroke-linecap:round;stroke-width:2;animation:waveSlide 2.4s linear infinite}
.loader__wave path:nth-child(1){stroke:var(--pausa)}
.loader__wave path:nth-child(2){stroke:var(--frecuencia);animation-duration:3.2s;animation-delay:-.4s}
.loader__wave path:nth-child(3){stroke:var(--frecuencia);opacity:.5;animation-duration:4s;animation-delay:-.9s}
@keyframes waveSlide{to{transform:translateX(-120px)}}
.loader__word{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.35em;
  text-transform:uppercase;color:var(--muted);padding-left:.35em}
body.loaded .loader{opacity:0;visibility:hidden}
body:not(.ready){overflow:hidden}

/* ---------- 10. HERO (composición de la carátula) ---------- */
.hero{position:relative;min-height:calc(100svh - var(--player-h));display:flex;flex-direction:column;
  justify-content:space-between;overflow:hidden;background:var(--aire)}

/* La forma: dos círculos planos: uno violeta y otro del color del fondo
   que lo muerde desde arriba. Donde se cruzan nace la punta de la carátula. */
.hero__shape{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__shape svg{width:100%;height:100%}
.hero__shape .s-fill{fill:var(--frecuencia)}
.hero__shape .s-cut{fill:var(--aire)}

.hero__rule{position:relative;z-index:3;flex:none}
.hero__inner{position:relative;z-index:2;width:100%;flex:1;padding-block:clamp(2rem,6vh,4.5rem);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--sp-5)}

/* El lockup grande es la pieza central, como en la carátula */
.hero__lockup{display:flex;align-items:flex-end;gap:.9rem;margin:0}
.hero__logo{width:min(560px,74vw);height:auto;display:block}
.hero__lockup .dial-tag{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:.06em;
  color:var(--pausa);padding-bottom:.35rem}
.hero__claim{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:var(--fs-2xl);line-height:.95;color:var(--pausa);max-width:16ch}
.hero__lead{max-width:44ch;color:var(--muted)}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-2)}
.hero__badge{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);
  font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--pausa);
  border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.4em .9em}
.hero__tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);font-family:var(--font-mono);
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero__tags span{border:1px solid var(--line);border-radius:var(--r-pill);padding:.35em .85em}

/* Onda del hero + indicador de dial */
.hero__wave{position:absolute;left:0;right:0;bottom:var(--rule-h);height:42%;z-index:1;pointer-events:none}
.hero__viz{width:100%;height:100%}
.dial{position:absolute;left:var(--dial-x,62%);top:var(--dial-y,50%);transform:translate(-50%,-100%);
  display:flex;flex-direction:column;align-items:center;font-family:var(--font-mono);
  opacity:0;transition:opacity .6s var(--ease) 1.2s}
body.ready .dial{opacity:1}
.dial__pill{background:var(--origen);color:var(--aire);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.06em;padding:.3em .7em;border-radius:var(--r-pill)}
.dial__stem{width:1px;height:clamp(24px,4.5vh,46px);background:var(--origen)}
.dial__dot{width:7px;height:7px;border-radius:50%;background:var(--origen);margin-top:-3px}

/* ---------- 11. TICKER DE SECCIÓN ---------- */
.ticker{position:relative;z-index:2;border-block:1px solid var(--line);background:var(--surface);
  overflow:hidden;padding-block:.9rem}
.ticker__track{display:flex;gap:2.5rem;width:max-content;animation:slide 32s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{display:inline-flex;align-items:center;gap:2.5rem;font-family:var(--font-mono);
  font-size:clamp(.8rem,1.4vw,1rem);letter-spacing:.14em;color:var(--pausa);text-transform:uppercase}
.ticker__item .dot{width:8px;height:8px;border-radius:50%;background:var(--frecuencia);flex:none}
.ticker__item .muted{color:var(--faint)}

/* ---------- 12. ONDA CHICA EN LÍNEA ---------- */
.wave-mini{display:inline-block;width:22px;height:14px;overflow:hidden;flex:none}
.wave-mini svg{width:100%;height:100%;overflow:visible}
.wave-mini path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;
  animation:waveSlideMini 1.8s linear infinite}
@keyframes waveSlideMini{to{transform:translateX(-12px)}}
@media (prefers-reduced-motion:reduce){.wave-mini path,.loader__wave path{animation:none}}

/* ---------- 13. SOBRE LA RADIO ---------- */
.about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.feature-list{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.feature{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-3);
  border-radius:var(--r);transition:background-color .2s}
.feature:hover{background:var(--surface)}
.feature__icon{flex:none;width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--frecuencia);color:var(--pausa);transition:background-color .2s,color .2s}
.feature:hover .feature__icon{background:var(--pausa);color:var(--frecuencia)}
.feature__icon svg{width:22px;height:22px}
.feature h4{font-size:var(--fs-xl);margin-bottom:.25rem}
.feature p{font-size:var(--fs-sm);color:var(--muted)}

/* Motivo de círculos concéntricos: líneas sucesivas, planas */
.about__visual{position:relative;aspect-ratio:1;display:grid;place-items:center}
.rings{width:min(420px,100%);height:auto}
.rings circle{fill:none;stroke:var(--frecuencia);stroke-width:1}
.rings .r-hot{stroke:var(--pausa)}
.rings .r-core{fill:var(--frecuencia);stroke:none}

/* ---------- 14. PROGRAMACIÓN ---------- */
.schedule__tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-6)}
.schedule__tab{padding:.6em 1.2em;border-radius:var(--r-pill);font-family:var(--font-mono);
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);transition:background-color .2s,color .2s,border-color .2s}
.schedule__tab:hover{color:var(--pausa);border-color:var(--line-2)}
.schedule__tab.is-active{background:var(--frecuencia);color:var(--pausa);border-color:var(--frecuencia)}
.schedule__grid{display:grid;gap:var(--sp-2);transition:opacity .25s var(--ease)}
.schedule__grid.is-switching{opacity:0}
.show{position:relative;display:grid;grid-template-columns:96px 1fr auto;align-items:center;
  gap:var(--sp-5);padding:var(--sp-4) var(--sp-5);border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);border-left:3px solid transparent;transition:background-color .2s,border-color .2s}
.show:hover{background:var(--surface-2);border-left-color:var(--frecuencia)}
.show__time{font-family:var(--font-mono);font-weight:700;color:var(--frecuencia-txt);font-size:var(--fs-base)}
.show__name{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);color:var(--pausa)}
.show__host{font-size:var(--fs-sm);color:var(--muted);margin-top:2px}
.show__tag{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);border:1px solid var(--line);padding:.35em .8em;border-radius:var(--r-pill)}
.show.is-live{border-left-color:var(--pulso)}
.show.is-live .show__tag{color:var(--aire);background:var(--pulso);border-color:var(--pulso)}
.show.is-simulcast{border-left-color:var(--origen)}
.show.is-simulcast .show__time{color:var(--origen)}
.show.is-simulcast .show__tag{color:var(--aire);background:var(--origen);border-color:var(--origen)}

/* ---------- 15. BANNER DE RETRANSMISIÓN ---------- */
.simulcast{position:relative;z-index:2;margin-block:clamp(2rem,5vw,3.5rem)}
.simulcast__card{position:relative;overflow:hidden;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(1rem,3vw,2.25rem);
  padding:clamp(1.1rem,2.6vw,1.75rem) clamp(1.25rem,3vw,2rem);
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line-2);
  border-left:4px solid var(--frecuencia)}
.simulcast__id{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.simulcast__partner{display:flex;align-items:baseline;flex-wrap:wrap;gap:.6rem;
  font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);
  text-transform:uppercase;color:var(--pausa)}
.simulcast__partner .freq{font-family:var(--font-mono);font-size:var(--fs-sm);
  letter-spacing:.06em;color:var(--frecuencia-txt)}
.simulcast__logo{height:30px;width:auto;flex:none}
.simulcast__note{font-size:var(--fs-sm);color:var(--muted);max-width:42ch}
.simulcast__times{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.simulcast__chip{display:inline-flex;align-items:center;gap:.45rem;padding:.35em .85em;
  border-radius:var(--r-pill);border:1px solid var(--line);font-family:var(--font-mono);
  font-size:var(--fs-xs);color:var(--text);white-space:nowrap}
.simulcast__chip .days{color:var(--faint);letter-spacing:.1em}
.simulcast__chip.is-now{background:var(--frecuencia);border-color:var(--frecuencia);color:var(--pausa)}
.simulcast__chip.is-now .days{color:var(--pausa);opacity:.75}
.simulcast__side{display:flex;flex-direction:column;align-items:flex-end;gap:.6rem}
.simulcast__status{display:inline-flex;align-items:center;gap:.55rem;padding:.5em 1em;
  border-radius:var(--r-pill);border:1px solid var(--line);font-family:var(--font-mono);
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.simulcast__status .live-dot{background:var(--off-air);animation:none}
.simulcast.is-on-air .simulcast__card{border-color:var(--pulso);border-left-color:var(--pulso)}
.simulcast.is-on-air .simulcast__status{background:var(--pulso);border-color:var(--pulso);color:var(--aire)}
.simulcast.is-on-air .simulcast__status .live-dot{background:var(--aire);animation:pulse 1.6s infinite}
.simulcast__link{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--frecuencia-txt);white-space:nowrap;transition:color .2s}
.simulcast__link:hover{color:var(--pausa)}

/* ---------- 16. CONTACTO / REDES ---------- */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.socials{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-2);margin-top:var(--sp-5)}
.social-card{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);transition:background-color .2s,border-color .2s}
.social-card:hover{background:var(--frecuencia);border-color:var(--frecuencia)}
.social-card svg{width:24px;height:24px;flex:none;color:var(--frecuencia-txt);transition:color .2s}
.social-card:hover svg{color:var(--pausa)}
.social-card .label{font-family:var(--font-body);font-weight:600;font-size:var(--fs-sm)}
.social-card .handle{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);transition:color .2s}
.social-card:hover .handle{color:var(--pausa)}
.contact-block{padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--r-lg);
  background:var(--surface);border:1px solid var(--line)}
.contact-block h3{font-size:var(--fs-xl);margin-bottom:var(--sp-4)}
.contact-line{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line);transition:color .2s}
.contact-line:last-child{border-bottom:0}
.contact-line:hover{color:var(--pausa)}
.contact-line svg{width:20px;height:20px;color:var(--frecuencia-txt);flex:none}
.whatsapp-cta{margin-top:var(--sp-5)}

/* ---------- 17. CTA FINAL ---------- */
.cta-band{position:relative;border-radius:var(--r-xl);padding:clamp(2.5rem,6vw,4.5rem);
  text-align:center;background:var(--frecuencia)}
.cta-band h2{font-size:var(--fs-2xl)}
.cta-band p{max-width:48ch;margin:var(--sp-4) auto 0;color:rgba(255,255,255,.82)}
.cta-band .btn{margin-top:var(--sp-6);background:var(--pausa);color:var(--aire);border-color:var(--pausa)}
.cta-band .btn:hover{background:var(--aire);color:var(--pausa);border-color:var(--aire)}

/* ---------- 18. FOOTER ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:var(--sp-8) var(--sp-6);background:var(--aire)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--sp-6)}
.footer__brand p{color:var(--muted);font-size:var(--fs-sm);max-width:34ch;margin-top:var(--sp-4)}
.footer__col h4{font-family:var(--font-mono);font-weight:400;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.16em;color:var(--faint);margin-bottom:var(--sp-4)}
.footer__col a{display:block;color:var(--muted);font-size:var(--fs-sm);padding:.3em 0;transition:color .2s}
.footer__col a:hover{color:var(--frecuencia-txt)}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3);
  margin-top:var(--sp-8);padding-top:var(--sp-5);border-top:1px solid var(--line);
  font-family:var(--font-mono);color:var(--faint);font-size:var(--fs-xs)}

/* ---------- 19. PLAYER ANCLADO ---------- */
.player{position:fixed;left:0;right:0;bottom:0;z-index:80;height:var(--player-h);
  padding-bottom:env(safe-area-inset-bottom,0px);background:var(--glass);
  border-top:1px solid var(--line-2);transform:translateY(120%);transition:transform .6s var(--ease) .3s}
body.ready .player{transform:none}
.player__inner{height:var(--player-h);display:grid;grid-template-columns:auto auto 1fr auto;
  align-items:center;gap:var(--sp-4)}
.player__brand{display:flex;align-items:center;padding-right:var(--sp-4);
  border-right:1px solid var(--line);transition:opacity .2s}
.player__brand:hover{opacity:.75}
.player__brand img{height:22px;width:auto;display:block}
.player__viz-wrap{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.5}
.player__viz{width:100%;height:100%}
.player__play{position:relative;width:54px;height:54px;border-radius:50%;flex:none;
  background:var(--frecuencia);color:var(--pausa);display:grid;place-items:center;
  transition:background-color .2s,color .2s,transform .2s var(--ease)}
.player__play:hover{background:var(--pausa);color:var(--frecuencia)}
.player__play svg{width:22px;height:22px}
.player__play .icon-pause{display:none}
.player.is-playing .player__play .icon-play{display:none}
.player.is-playing .player__play .icon-pause{display:block}
.player__play .ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--frecuencia);opacity:0}
.player.is-playing .player__play .ring{animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}
.player__info{min-width:0}
.player__station{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);
  font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--off-air);flex:none}
.player.is-playing .live-dot{background:var(--pulso);animation:pulse 1.6s infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
.player__now{font-family:var(--font-body);font-weight:600;color:var(--pausa);font-size:var(--fs-base);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.player__now.is-warning{color:var(--origen)}
/* Contenido mixto: el play abre el audio en otra pestaña */
.player.is-external .player__now{cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.player.is-external .player__play{background:var(--origen)}
.player.is-external .player__play:hover{background:var(--pausa);color:var(--origen)}
.player__controls{display:flex;align-items:center;gap:var(--sp-4)}
.player__vol{display:flex;align-items:center;gap:var(--sp-2)}
.player__vol svg{width:20px;height:20px;color:var(--muted)}
.player__vol input[type=range]{-webkit-appearance:none;appearance:none;width:96px;height:4px;
  border-radius:2px;cursor:pointer;
  background:linear-gradient(90deg,var(--frecuencia) 0 var(--vol,80%),var(--surface-3) var(--vol,80%) 100%)}
.player__vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--pausa)}
.player__vol input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--pausa)}
.player__share{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;
  place-items:center;color:var(--muted);transition:color .2s,border-color .2s}
.player__share:hover{color:var(--pausa);border-color:var(--line-2)}
.player__spinner{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);
  border-top-color:var(--pausa);animation:spin .7s linear infinite;display:none}
@keyframes spin{to{transform:rotate(360deg)}}
.player.is-loading .player__spinner{display:block}
.player.is-loading .player__play svg{display:none}

/* ---------- 20. REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal=right]{transform:translateX(28px)}
[data-reveal=right].is-visible{transform:none}
[data-reveal=zoom]{transform:scale(.96)}
[data-reveal=zoom].is-visible{transform:none}
[data-stagger]>*{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
[data-stagger].is-visible>*{opacity:1;transform:none}
[data-stagger].is-visible>*:nth-child(1){transition-delay:.05s}
[data-stagger].is-visible>*:nth-child(2){transition-delay:.12s}
[data-stagger].is-visible>*:nth-child(3){transition-delay:.19s}
[data-stagger].is-visible>*:nth-child(4){transition-delay:.26s}
[data-stagger].is-visible>*:nth-child(5){transition-delay:.33s}
[data-stagger].is-visible>*:nth-child(6){transition-delay:.40s}

/* Entrada del hero */
.hero-fade{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
body.ready .hero-fade{opacity:1;transform:none}
body.ready .hero__claim{transition-delay:.15s}
body.ready .hero__lead{transition-delay:.25s}
body.ready .hero__actions{transition-delay:.35s}
body.ready .hero__tags{transition-delay:.45s}

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width:980px){
  .about__grid,.contact__grid{grid-template-columns:1fr}
  .about__visual{max-width:380px;margin-inline:auto;order:-1}
  .footer__top{grid-template-columns:1fr 1fr}
  .simulcast__card{grid-template-columns:1fr;gap:1rem}
  .simulcast__side{flex-direction:row;align-items:center;flex-wrap:wrap}
}
@media (max-width:760px){
  :root{--player-h:76px;--rule-h:38px}
  .nav__links{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;
    padding:var(--sp-5) var(--gutter);background:var(--aire);border-bottom:1px solid var(--line);
    transform:translateY(-120%);transition:transform .35s var(--ease);z-index:55}
  body.nav-open .nav__links{transform:none}
  .nav__links a{width:100%;padding:var(--sp-3) 0;font-size:var(--fs-lg);border-bottom:1px solid var(--line)}
  .nav__toggle{display:flex}
  .show{grid-template-columns:76px 1fr;gap:var(--sp-4)}
  .show__tag{display:none}
  .socials{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr}
  .player__vol,.player__share{display:none}
  .player__inner{grid-template-columns:auto 1fr}
  .player__brand{display:none}
  .dial{display:none}
  .hero__wave{height:34%}
}

/* ---------- 22. UTILIDADES ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}