/* ===========================================================================
   La Pachanguera 95.1 FM
   Type: Ubuntu. Scale: large — this is a party station, not a bank.
   Player: fixed bottom bar, the pattern every major Latin American station
   uses (Tropicana, Olímpica, Exa), so it reads as a radio immediately.
   =========================================================================== */
:root{
  --amarillo:#FFF100; --rosa:#FF3C77; --azul:#00418B;
  --campo:#00489C; --rayo:#1068C2; --halo:#B3E0FF;
  --rosa-fuerte:#C2185B;   /* pink that passes AA behind body text */
  --hondo:#012A62; --hondo2:#01214E;
  --pad: clamp(20px, 4.5vw, 56px);
  --max: 1180px;
  --rep: 86px;                     /* height of the fixed player bar */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100svh; color:#fff; background:var(--campo);
  font-family:Ubuntu, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; display:flex; flex-direction:column;
  padding-bottom: calc(var(--rep) + env(safe-area-inset-bottom, 0px));
}
img{max-width:100%; height:auto}
a{color:inherit}
h1,h2,h3{line-height:1.05; margin:0}

/* ---- backdrop -------------------------------------------------------- */
.rays{
  position:fixed; left:50%; top:20%; width:240vmax; height:240vmax;
  transform:translate(-50%,-50%); z-index:0; pointer-events:none; opacity:.40;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    var(--rayo) 0deg 2.6deg, transparent 2.6deg 7.5deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.5) 30%,transparent 68%);
          mask-image:radial-gradient(closest-side,#000 6%,rgba(0,0,0,.5) 30%,transparent 68%);
  animation:turn 260s linear infinite;
}
@keyframes turn{to{transform:translate(-50%,-50%) rotate(360deg)}}
.glow{
  position:fixed; left:50%; top:18%; width:min(160vw,1240px); aspect-ratio:1;
  transform:translate(-50%,-50%); z-index:0; pointer-events:none;
  background:radial-gradient(circle,rgba(150,210,255,.40) 0%,rgba(0,72,156,0) 62%);
}

/* ---- header ---------------------------------------------------------- */
.cabezal{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px;
  padding: calc(14px + env(safe-area-inset-top,0px)) var(--pad) 14px;
  background:rgba(1,36,88,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.marca{display:flex; align-items:center; gap:13px; text-decoration:none;
       margin-right:auto; min-height:56px}
.marca img{width:58px; height:58px; filter:drop-shadow(0 4px 12px rgba(0,10,40,.55))}
.marca-txt{display:flex; flex-direction:column; line-height:1.15}
.marca-txt b{font-size:20px; font-weight:700; letter-spacing:-.015em}
.marca-txt i{font-style:normal; font-size:11.5px; font-weight:500; letter-spacing:.12em;
             text-transform:uppercase; color:var(--halo)}
.nav{display:flex; gap:6px}
.nav a{display:flex; align-items:center; min-height:48px; padding:0 18px;
       text-decoration:none; font-size:14.5px; font-weight:700; letter-spacing:.04em;
       text-transform:uppercase; border-radius:999px; white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.14)}
.nav a[aria-current="page"]{background:var(--amarillo); color:#04306F}
.nav a:focus-visible,.marca:focus-visible{outline:3px solid var(--amarillo); outline-offset:3px}
.menu{display:none; width:52px; height:52px; padding:0; cursor:pointer; background:none;
      border:1px solid rgba(255,255,255,.4); border-radius:14px}
.menu span{display:block; width:21px; height:2.5px; background:#fff; margin:4.5px auto; border-radius:2px}

/* ---- on-air strip ------------------------------------------------------ */
.alaire{position:relative; z-index:30; background:linear-gradient(90deg,#04306F,#0A54AE 55%,#04306F);
        border-bottom:1px solid rgba(255,255,255,.18)}
.alaire-in{max-width:var(--max); margin:0 auto; padding:14px var(--pad);
           display:flex; align-items:center; gap:16px}
.alaire-foto{width:66px; height:66px; flex:none; border-radius:16px; object-fit:cover;
             border:2.5px solid var(--amarillo); background:#04306F;
             box-shadow:0 6px 18px rgba(0,10,40,.45)}
.alaire-txt{display:flex; flex-direction:column; gap:3px; min-width:0; margin-right:auto}
.alaire-badge{display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  background:var(--rosa-fuerte); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; padding:4px 10px; border-radius:999px}
.alaire-badge .dot{width:7px; height:7px; border-radius:50%; background:#fff}
body.playing .alaire-badge .dot{animation:blip 1.6s ease-out infinite}
.alaire-nom{font-size:clamp(18px,2.2vw,25px); font-weight:700; font-style:italic;
            letter-spacing:-.02em; line-height:1.12;
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.alaire-det{font-size:14px; color:var(--halo); white-space:nowrap; overflow:hidden;
            text-overflow:ellipsis}
.alaire-sig{font-size:13.5px; color:#CFE6FF; text-align:right; line-height:1.4;
            padding-left:16px; border-left:1px solid rgba(255,255,255,.22)}
.alaire-sig b{display:block; color:#fff; font-weight:700; font-size:15px}
.alaire-btn{flex:none; display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  min-height:52px; padding:0 22px 0 18px; border-radius:999px; border:none;
  background:var(--amarillo); color:#04306F; font-family:inherit; font-size:15.5px;
  font-weight:700; transition:transform .14s ease}
.alaire-btn:hover{transform:scale(1.04)}
.alaire-btn:focus-visible{outline:3px solid #fff; outline-offset:3px}
.alaire-btn svg{width:22px; height:22px; fill:#04306F}
.alaire-btn .pause{display:none}
body.playing .alaire-btn .play{display:none}
body.playing .alaire-btn .pause{display:block}
.alaire > .progreso{height:5px; background:rgba(255,255,255,.2); display:block}
.alaire > .progreso > span{display:block; height:5px; width:0;
  background:linear-gradient(90deg,var(--amarillo),var(--rosa)); transition:width .6s linear}

@media (max-width:860px){
  .alaire-sig{display:none}
  .alaire-btn span{display:none}
  .alaire-btn{padding:0; width:52px; justify-content:center}
}
@media (max-width:520px){
  .alaire-in{gap:12px; padding:11px var(--pad)}
  .alaire-foto{width:54px; height:54px; border-radius:13px}
}

/* ---- layout ---------------------------------------------------------- */
main{position:relative; z-index:2; flex:1; width:100%}
.wrap{width:100%; max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.franja{padding:clamp(38px,5vw,76px) 0}
.eyebrow{margin:0 0 12px; font-size:13px; letter-spacing:.22em; text-transform:uppercase;
         font-weight:700; color:var(--amarillo)}
h1{font-size:clamp(38px,5.6vw,74px); font-weight:700; font-style:italic;
   letter-spacing:-.035em; line-height:1.18; text-shadow:0 6px 30px rgba(0,12,48,.55)}
h2{font-size:clamp(30px,4.4vw,58px); font-weight:700; font-style:italic;
   letter-spacing:-.025em; line-height:1.14}
.titulo{margin-bottom:clamp(24px,3vw,44px)}
/* the highlight block, straight off the station's own key art */
.resalte{background:var(--rosa); color:#fff; padding:.02em .14em; border-radius:8px;
         box-decoration-break:clone; -webkit-box-decoration-break:clone;
         text-shadow:none}
h2 .resalte{background:var(--amarillo); color:#04306F}
.lede{margin:22px 0 0; color:#E8F3FF; font-size:clamp(17px,2.1vw,22px);
      line-height:1.58; max-width:44ch}
.eyebrow{margin:0 0 16px; font-size:clamp(12px,1.3vw,15px); letter-spacing:.26em;
         text-transform:uppercase; font-weight:700; color:var(--amarillo)}

/* ---- hero ------------------------------------------------------------ */
.hero{position:relative; display:grid; grid-template-columns:1.14fr .86fr;
      align-items:center; gap:clamp(26px,4vw,56px);
      min-height:min(62vh,660px); padding:clamp(24px,3vw,44px) 0 clamp(32px,4vw,60px)}
.hero-txt{max-width:var(--max); width:100%; justify-self:end;
          padding-left:max(var(--pad), calc((100vw - var(--max)) / 2));
          padding-right:var(--pad)}
.cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:28px}
.btn-play{display:inline-flex; align-items:center; justify-content:center; gap:14px;
  min-height:72px; cursor:pointer; border:none; border-radius:999px; padding:0 40px 0 30px;
  background:var(--rosa); color:#fff; font-family:inherit; font-size:20px; font-weight:700;
  box-shadow:0 16px 38px rgba(255,60,119,.4); transition:transform .15s ease}
.btn-play:hover{transform:translateY(-3px)}
.btn-play:focus-visible{outline:3px solid var(--amarillo); outline-offset:4px}
.btn-play svg{width:34px; height:34px; fill:#fff; flex:none}
.btn-play .pause{display:none}
body.playing .btn-play .play{display:none}
body.playing .btn-play .pause{display:block}
.btn-ghost{display:inline-flex; align-items:center; justify-content:center; min-height:72px;
  text-decoration:none; border:3px solid rgba(255,255,255,.6); border-radius:999px;
  padding:0 36px; font-size:19px; font-weight:700}
.btn-ghost-oscuro{border-color:#04306F; color:#04306F}
.btn-ghost-oscuro:hover{background:#04306F; color:#fff; border-color:#04306F}
.btn-ghost:hover{background:rgba(255,255,255,.15); border-color:#fff}
.btn-ghost:focus-visible{outline:3px solid var(--amarillo); outline-offset:4px}
.hero-img{margin:0; display:flex; align-items:center; justify-content:flex-end}
.hero-img img{display:block; width:100%; height:auto; max-height:min(56vh,600px);
  object-fit:contain; border-radius:34px 0 0 34px;
  box-shadow:0 34px 80px rgba(0,8,36,.55)}

/* ---- destacados -------------------------------------------------------- */
.destacados{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,24px)}
.dest{position:relative; display:block; text-decoration:none; overflow:hidden;
  border-radius:28px; padding:clamp(26px,3vw,40px); min-height:clamp(240px,26vw,320px);
  background:#04306F; border:1px solid rgba(255,255,255,.22);
  transition:transform .18s ease, box-shadow .18s ease}
.dest:hover{transform:translateY(-6px); box-shadow:0 26px 54px rgba(0,8,36,.5)}
.dest:focus-visible{outline:4px solid var(--amarillo); outline-offset:4px}
.dest-n{position:absolute; right:.04em; bottom:-.24em; font-size:clamp(96px,12vw,168px);
  font-weight:700; font-style:italic; line-height:1; color:rgba(255,255,255,.13);
  pointer-events:none}
.dest h3{position:relative; font-size:clamp(25px,2.8vw,36px); font-weight:700; font-style:italic;
  letter-spacing:-.02em; line-height:1.02; margin-bottom:16px}
.dest p{position:relative; margin:0; font-size:17px; line-height:1.5; color:#CFE6FF}
.dest p b{display:inline-block; margin-top:4px; font-size:21px; color:var(--amarillo)}
.dest-rosa{background:var(--rosa-fuerte); border-color:rgba(255,255,255,.45)}
.dest-rosa p{color:#fff} .dest-rosa p b{color:var(--amarillo)}
.dest-amarillo{background:var(--amarillo); border-color:rgba(4,48,111,.3); color:#04306F}
.dest-amarillo .dest-n{color:rgba(4,48,111,.14)}
.dest-amarillo p{color:#0B3A7C} .dest-amarillo p b{color:#04306F}

/* ---- eventos y dinámicas ---------------------------------------------- */
.agenda{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
        gap:clamp(14px,1.8vw,22px)}
.evento{background:#04306F; border:1px solid rgba(255,255,255,.22); border-radius:26px;
        overflow:hidden; display:flex; flex-direction:column;
        transition:transform .18s ease, box-shadow .18s ease}
.evento:hover{transform:translateY(-5px); box-shadow:0 24px 50px rgba(0,8,36,.46)}
.evento-img{position:relative; margin:0; aspect-ratio:3/2; background:#02265C}
.evento-img img{width:100%; height:100%; object-fit:cover; display:block}
.evento-cuerpo{padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:10px}
.ejemplo{position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(2,26,64,.86); color:var(--amarillo); border:1px solid var(--amarillo);
  font-size:10.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px; backdrop-filter:blur(4px)}
.evento .fecha{font-size:13px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
               color:var(--amarillo)}
.evento h3{font-size:clamp(22px,2.4vw,30px); font-weight:700; font-style:italic;
           letter-spacing:-.02em; line-height:1.1}
.evento p{margin:0; font-size:16.5px; color:#CFE6FF; line-height:1.55}
.evento .lugar{font-size:14.5px; color:var(--halo)}
.vacio-agenda{background:#04306F; border:2px dashed rgba(255,255,255,.34); border-radius:26px;
  padding:clamp(28px,4vw,48px); text-align:center}
.vacio-agenda h3{font-size:clamp(23px,2.6vw,32px); font-weight:700; font-style:italic;
                 margin-bottom:12px}
.vacio-agenda p{margin:0 auto 22px; max-width:46ch; font-size:17px; color:#CFE6FF; line-height:1.6}

/* ---- closing colour block --------------------------------------------- */
.cierre{background:var(--amarillo); color:#04306F; padding:clamp(52px,8vw,110px) 0;
        text-align:center; position:relative; z-index:2}
.cierre-k{margin:0 0 18px; font-size:clamp(12px,1.3vw,15px); letter-spacing:.26em;
          text-transform:uppercase; font-weight:700}
.cierre-h{margin:0; font-size:clamp(52px,11vw,150px); font-weight:700; font-style:italic;
  letter-spacing:-.04em; line-height:.88; text-transform:uppercase}
.cierre-l{margin:22px auto 34px; max-width:40ch; font-size:clamp(17px,2vw,21px); line-height:1.5}

/* ---- programación ---------------------------------------------------- */
.cabecera{padding:clamp(36px,4.6vw,68px) 0 clamp(8px,1vw,18px)}
.dias-tabs{display:none; gap:8px; margin-bottom:24px; overflow-x:auto; padding-bottom:6px}
.dias-tabs button{flex:none; cursor:pointer; border-radius:999px; padding:0 20px; min-height:50px;
  border:1px solid rgba(255,255,255,.4); background:none; color:#fff; font-family:inherit;
  font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.07em}
.dias-tabs button[aria-selected="true"]{background:var(--amarillo); color:#04306F; border-color:var(--amarillo)}
.parrilla{display:grid; grid-template-columns:repeat(7,1fr); gap:12px; align-items:start}
.dia h2{font-size:14px; font-style:normal; letter-spacing:.14em; text-transform:uppercase; color:var(--halo);
        font-weight:700; margin:0 0 12px; padding-bottom:10px;
        border-bottom:1px solid rgba(255,255,255,.24)}
.dia ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.slot{border-radius:20px; padding:20px 18px; display:flex; flex-direction:column; gap:6px;
      background:rgba(1,36,88,.55); border:1px solid rgba(255,255,255,.2)}
.slot .hora{font-size:12.5px; font-weight:700; color:var(--amarillo); letter-spacing:.05em}
.slot .nom{font-size:18px; font-weight:700; line-height:1.2}
.slot .loc{font-size:13.5px; color:var(--halo)}
.slot.vacio{background:rgba(1,36,88,.3); border-style:dashed}
.slot.live{background:var(--rosa-fuerte); border-color:var(--amarillo);
           box-shadow:0 14px 34px rgba(194,24,91,.45)}
.slot.live .hora{color:var(--amarillo)}
.slot.live .loc{color:#fff}
.slot.live::after{content:"AL AIRE"; margin-top:8px; align-self:flex-start;
  background:var(--amarillo); color:#04306F; font-size:11px; font-weight:700;
  letter-spacing:.16em; padding:5px 11px; border-radius:999px}
.nota{margin-top:36px; border-radius:20px; padding:22px 26px;
      background:rgba(1,36,88,.5); border:1px solid rgba(255,255,255,.2); font-size:16.5px}
.nota p{margin:0}
.nota a{color:var(--amarillo); font-weight:700; display:inline-block; padding:10px 4px;
        min-height:44px; line-height:24px}

/* ---- locutores ------------------------------------------------------- */
.perfil{display:grid; grid-template-columns:minmax(300px,460px) 1fr; gap:clamp(24px,4vw,46px); align-items:start;
  background:rgba(1,36,88,.5); border:1px solid rgba(255,255,255,.22); border-radius:28px;
  padding:clamp(22px,3.4vw,38px)}
.perfil figure{margin:0; position:relative}
.perfil figure img{border-radius:26px; display:block; width:100%}
.perfil p{margin:0; font-size:clamp(17.5px,1.9vw,21px); line-height:1.6; color:#E8F3FF}
.shows{list-style:none; margin:26px 0; padding:0; display:flex; flex-direction:column; gap:12px}
.shows li{display:flex; flex-wrap:wrap; gap:6px 16px; align-items:baseline;
          border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:12px}
.shows span{font-weight:700; font-size:clamp(19px,2vw,24px)}
.shows em{font-style:normal; font-size:14.5px; color:var(--amarillo); font-weight:700}

/* ---- locutor list ------------------------------------------------------ */
.perfiles{display:flex; flex-direction:column; gap:clamp(18px,2.4vw,30px);
          padding-bottom:clamp(30px,4vw,56px)}

/* ---- contacto -------------------------------------------------------- */
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(282px,1fr)); gap:18px}
.tarjeta{background:rgba(1,36,88,.5); border:1px solid rgba(255,255,255,.22);
         border-radius:24px; padding:28px}
.tarjeta h2{font-size:22px; margin-bottom:12px}
.tarjeta p{margin:0 0 12px; font-size:16.5px; color:#E8F3FF}
.tarjeta a{color:var(--amarillo); font-weight:700}
/* .tarjeta a would otherwise paint the WhatsApp button's label yellow on yellow */
.tarjeta .wa{color:#04306F}
.tarjeta p > a,.tarjeta a[href^="mailto"]{display:inline-block; padding:10px 4px;
         min-height:44px; line-height:24px; word-break:break-word}
.redes{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px}
.redes a{text-decoration:none; font-weight:700; color:var(--amarillo);
         display:inline-flex; align-items:center; min-height:44px; min-width:44px}
.wa{display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px;
    text-decoration:none; background:var(--amarillo); color:#04306F; font-weight:700;
    font-size:17px; padding:0 26px; border-radius:999px; box-shadow:0 12px 30px rgba(0,14,48,.42)}
.wa:hover{filter:brightness(1.07)}

/* ---- contact form ------------------------------------------------------ */
.formulario{background:rgba(1,36,88,.55); border:1px solid rgba(255,255,255,.24);
  border-radius:28px; padding:clamp(24px,3.4vw,44px); margin-bottom:clamp(18px,2.4vw,30px)}
.formulario h2{font-size:clamp(26px,3.4vw,40px); margin-bottom:10px}
.form-intro{margin:0 0 26px; font-size:17px; color:#E8F3FF; max-width:48ch; line-height:1.55}
.campos{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.campo{display:flex; flex-direction:column; gap:8px}
.campo-ancho{grid-column:1 / -1}
.campo > span{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
              color:var(--amarillo)}
.campo input,.campo select,.campo textarea{
  font-family:inherit; font-size:16.5px; color:#fff; min-height:54px;
  background:rgba(1,22,56,.72); border:1.5px solid rgba(255,255,255,.3);
  border-radius:14px; padding:14px 16px; width:100%}
.campo textarea{min-height:140px; resize:vertical; line-height:1.55}
.campo select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#B3E0FF 50%),
                   linear-gradient(135deg,#B3E0FF 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px, calc(100% - 15px) 24px;
  background-size:7px 7px,7px 7px; background-repeat:no-repeat}
.campo select option{background:#04306F; color:#fff}
.campo input::placeholder,.campo textarea::placeholder{color:rgba(199,225,255,.5)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none; border-color:var(--amarillo); box-shadow:0 0 0 3px rgba(255,241,0,.25)}
.form-nota{margin:14px 0 0; font-size:14px; color:var(--halo)}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form-pie{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:26px}
.form-pie .btn-play{padding:0 36px}
.form-estado{margin:18px 0 0; font-size:16px; font-weight:700; min-height:1.4em}
.form-estado.ok{color:var(--amarillo)}
.form-estado.mal{color:#FFD2DF}
.formulario.enviando{opacity:.75; pointer-events:none}
@media (max-width:640px){ .campos{grid-template-columns:1fr} }

/* ---- footer ---------------------------------------------------------- */
.pie{position:relative; z-index:2; margin-top:clamp(24px,3vw,48px);
     background:var(--hondo2); border-top:1px solid rgba(255,255,255,.14)}
.pie-deco{position:relative; height:clamp(120px,15vw,180px); margin-top:-1px;
          overflow:hidden; pointer-events:none}
.pie-deco .cinta{position:absolute; left:0; bottom:0; width:100%; height:100%}
.pie-deco .flor{position:absolute; left:-10px; bottom:0; width:clamp(126px,17vw,200px);
                filter:drop-shadow(0 10px 24px rgba(0,20,60,.5))}
.pie-cuerpo{max-width:var(--max); margin:0 auto; padding:clamp(34px,5vw,60px) var(--pad);
  display:grid; grid-template-columns:1.5fr 1fr 1.3fr 1.3fr; gap:clamp(26px,4vw,52px)}
.pie-logo{width:132px; height:auto; display:block; margin-bottom:18px;
          filter:drop-shadow(0 6px 18px rgba(0,10,40,.5))}
.pie-lema{margin:0 0 20px; font-size:16px; color:#D8EAFF; line-height:1.55; max-width:32ch}
.pie-col h3{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--amarillo);
            font-weight:700; margin-bottom:16px}
.pie-col ul{list-style:none; margin:0; padding:0}
.pie-col li{margin-bottom:4px}
.pie-col li a{display:inline-flex; align-items:center; min-height:44px; min-width:44px;
              padding-right:6px; text-decoration:none; font-size:16px; color:#E4F1FF}
.pie-col li a:hover{color:var(--amarillo)}
.pie-nota,.pie-dir{margin:10px 0 0; font-size:14px; color:#A9C8EC; line-height:1.55}
.social{display:flex; gap:9px; flex-wrap:wrap; max-width:330px}
.social a{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; min-width:48px; padding:0 13px; text-decoration:none;
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border:1px solid rgba(255,255,255,.42); border-radius:999px;
  transition:background .15s ease, border-color .15s ease}
.social a:hover{background:rgba(255,255,255,.17); border-color:#fff}
.social a:focus-visible{outline:3px solid var(--amarillo); outline-offset:3px}
.pie-legal{max-width:var(--max); margin:0 auto; padding:20px var(--pad) 30px;
  border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap;
  gap:8px 24px; justify-content:space-between; font-size:13.5px; color:#9FC0E8}
.pie-credito{width:100%; margin:0; font-size:13.5px; color:#9FC0E8}
.pie-credito a{color:var(--halo); font-weight:700; text-decoration:underline;
               text-underline-offset:3px; display:inline-flex; align-items:center;
               padding:10px 2px; min-height:44px}
.pie-credito a:hover{color:var(--amarillo)}

/* ---- the fixed player bar -------------------------------------------- */
.reproductor{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:linear-gradient(180deg, rgba(1,33,78,.96), rgba(1,25,60,.99));
  border-top:2px solid var(--amarillo);
  backdrop-filter:blur(16px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -12px 34px rgba(0,8,30,.42);
}
.rep-caja{max-width:var(--max); margin:0 auto; height:var(--rep);
          padding:0 var(--pad); display:flex; align-items:center; gap:16px}
.rep-logo{width:54px; height:54px; flex:none; filter:drop-shadow(0 3px 10px rgba(0,10,40,.5))}
.rep-txt{display:flex; flex-direction:column; min-width:0; margin-right:auto; line-height:1.25}
.rep-k{font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
       color:var(--halo); display:inline-flex; align-items:center; gap:8px}
.rep-k .dot{width:9px; height:9px; border-radius:50%; background:rgba(255,241,0,.42); flex:none}
body.playing .rep-k .dot{background:var(--amarillo); animation:blip 1.6s ease-out infinite}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(255,241,0,.75)}100%{box-shadow:0 0 0 13px rgba(255,241,0,0)}}
.rep-v{font-size:18px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rep-btn{flex:none; width:62px; height:62px; border-radius:50%; cursor:pointer; padding:0;
  border:4px solid var(--amarillo); background:var(--rosa); color:#fff; display:grid;
  place-items:center; transition:transform .15s ease;
  box-shadow:0 10px 26px rgba(255,60,119,.42)}
.rep-btn:hover{transform:scale(1.06)}
.rep-btn:focus-visible{outline:4px solid var(--amarillo); outline-offset:4px}
.rep-btn svg{width:26px; height:26px; fill:#fff; pointer-events:none}
.rep-btn .pause{display:none}
body.playing .rep-btn .play{display:none}
body.playing .rep-btn .pause{display:block}
body.loading .rep-btn{animation:latir 1.1s ease-in-out infinite}
@keyframes latir{50%{transform:scale(.93); opacity:.75}}

/* ---- fallbacks ------------------------------------------------------- */
.sin-js{max-width:var(--max); margin:0 auto; padding:16px var(--pad); text-align:center;
        background:rgba(255,241,0,.15); font-size:16px}
.sin-js a{color:var(--amarillo); font-weight:700}
.directo{display:inline-flex; align-items:center; min-height:44px; margin-top:12px;
         color:var(--amarillo); font-weight:700; font-size:16px}

/* ---- responsive ------------------------------------------------------ */
@media (max-width:1040px){
  .pie-cuerpo{grid-template-columns:1fr 1fr}
}
@media (max-width:920px){
  .parrilla{grid-template-columns:1fr}
  .dias-tabs{display:flex}
  .dia{display:none}
  .dia.activo{display:block}
  .perfil{grid-template-columns:1fr}
  .perfil figure{max-width:320px}
}
@media (max-width:980px){
  .destacados{grid-template-columns:1fr}
  .dest{min-height:0}
}
@media (max-width:800px){
  .hero{grid-template-columns:1fr; min-height:0; padding-top:0; gap:0}
  .hero-txt{justify-self:stretch; padding:clamp(28px,6vw,44px) var(--pad) 0; max-width:none}
  .hero-img{order:-1}
  .hero-img img{border-radius:0; max-height:none; width:100%}
  .nav{position:absolute; top:100%; right:var(--pad); flex-direction:column; gap:3px;
    background:#04306F; border:1px solid rgba(255,255,255,.24); border-radius:18px;
    padding:9px; min-width:212px; box-shadow:0 20px 46px rgba(0,8,34,.55)}
  .nav:not(.abierto){display:none}
  .menu{display:block}
}
@media (max-width:640px){
  :root{--rep:78px}
  .pie-cuerpo{grid-template-columns:1fr; gap:26px}
  .pie-legal{flex-direction:column; gap:6px}
  .marca img{width:50px; height:50px}
  .marca-txt b{font-size:17px}
}
@media (max-width:480px){
  .marca-txt{display:none}
  .rep-logo{width:46px; height:46px}
  .rep-btn{width:56px; height:56px}
  .rep-v{font-size:16px}
  .social a span{display:none}
  .social a{padding:0; width:52px; height:52px; border-radius:50%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}