:root{
  --bg:#0b0f16;
  --ink:#e9eef6;
  --muted:#9db0c7;
  --brand:#FFD400;
  --surface:#0f1520;
  --surface-2:#121a27;
  --br:#1b2738;
  --rp-live:#27C46A;
  --rp-ready:#666;
  --btn:#FFD400;
  --btnText:#111;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial}
.container{width:min(1100px,92%);margin:0 auto}
.section{padding:38px 0}

/* NAV */
.nav{position:sticky;top:0;z-index:45;background:linear-gradient(180deg, rgba(12,17,24,.92), rgba(10,14,20,.86));border-bottom:1px solid #121722;box-shadow:0 10px 20px rgba(0,0,0,.25)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand img{height:72px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6)) drop-shadow(0 0 24px rgba(255,212,0,.35))}
#navLinks{display:flex;gap:12px;list-style:none;margin:0;padding:0}
#navLinks a{color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:10px;transition:.2s}
#navLinks a:hover{background:rgba(255,212,0,.12)}
.menu-btn{display:none;background:transparent;border:2px solid var(--brand);border-radius:12px;color:var(--ink);padding:8px 12px}

/* HERO */
.hero{position:relative;min-height:52vh;display:grid;align-items:end}
.hero .hero-bg{position:absolute;inset:0;overflow:hidden}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,18,.15),rgba(8,12,18,.9))}
.slider #slider{position:absolute;inset:0}
.slider .slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .6s}
.slider .slide.active{opacity:1}
.hero .hero-content{position:relative;padding:42px 0}
.badge-live{display:inline-flex;gap:8px;align-items:center;background:#12361f;border:1px solid #1f5131;color:#8ff0b6;padding:6px 10px;border-radius:999px;font-weight:700}
.hero h1{margin:12px 0 6px}
.btn{display:inline-flex;gap:10px;align-items:center;background:var(--btn);color:var(--btnText);padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:900;border:0;cursor:pointer}
.btn.secondary{background:transparent;border:1.5px solid var(--brand);color:var(--brand)}

/* PROGRAMACIÓN VERTICAL */
#programacion .prog-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
#programacion .prog-card{position:relative;display:flex;flex-direction:column;padding:16px;background:linear-gradient(180deg, rgba(20,26,36,.88), rgba(17,22,31,.92));border:1px solid #1c2533;border-radius:14px;box-shadow:0 10px 24px rgba(0,0,0,.25);transition:transform .18s, box-shadow .18s}
#programacion .prog-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:14px 0 0 14px;background:linear-gradient(180deg,var(--accent,#27C46A),rgba(255,212,0,.6))}
#programacion .prog-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.32)}
#programacion .prog-imgwrap{width:100%;height:170px;border-radius:10px;overflow:hidden;background:#121826}
#programacion .prog-imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
#programacion .prog-card:hover .prog-imgwrap img{transform:scale(1.06)}
#programacion .prog-title{font-size:1.18rem;font-weight:900;margin:10px 0 6px}
#programacion .prog-meta{font-size:.98rem;color:var(--muted)}
#programacion .chip-fm{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:rgba(255,212,0,.1);border:1px solid #4b4b33;color:#fff;box-shadow:0 6px 14px rgba(255,212,0,.18);width:max-content}

/* EQUIPO */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.team-card{background:var(--surface);border:1px solid var(--br);border-radius:12px;padding:12px}
.avatar{width:80px;height:80px;border-radius:10px;background:#152235;color:#fff;display:grid;place-items:center;font-weight:900}

/* ADS */
.promo-leader{display:grid;place-items:center;background:var(--surface);border:1px solid var(--br);border-radius:10px;min-height:0;margin-bottom:14px;overflow:hidden}
#promoLeader img{width:100%;height:120px;object-fit:cover;display:block}
.promo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.promo-rect{display:grid;place-items:center;background:var(--surface);border:1px solid var(--br);border-radius:10px;min-height:0;overflow:hidden}
#promoRect1 img,#promoRect2 img{width:100%;height:250px;object-fit:cover;display:block}

/* FORM */
.form{display:grid;gap:10px;background:var(--surface);border:1px solid var(--br);border-radius:12px;padding:12px}
.input,.textarea{width:100%;background:var(--surface-2);border:1px solid #243041;border-radius:8px;padding:10px;color:var(--ink)}
.textarea{min-height:120px;resize:vertical}

/* FOOTER */
.footer{padding:30px 0;border-top:1px solid #121722;background:#0b0e13;margin-bottom:112px}
.footer .social{display:flex;gap:12px;flex-wrap:wrap}
.footer .social .social-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:2px solid var(--brand);color:var(--brand);text-decoration:none;font-weight:900;background:rgba(255,212,0,.08)}
.footer .social .social-btn:hover{background:var(--brand);color:#111}
.footer .social .social-btn i{font-size:18px}
.footer-admin.social-btn{border-color:var(--brand);color:var(--brand)}
@media(max-width:680px){
  .menu-btn{display:inline-flex}
  #navLinks{display:none;position:absolute;right:12px;top:72px;flex-direction:column;background:#0b0e13;border:1px solid #121722;border-radius:10px;padding:8px}
  #navLinks.show{display:flex}
  .footer .social{gap:12px}
  .footer .social .social-btn{width:52px;height:52px;padding:0;justify-content:center;border-width:2px}
  .footer .social .social-btn .txt{display:none}
}

/* PLAYER */
.player{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#0d1220;border-top:1px solid #121722;display:flex;align-items:center;gap:12px;padding:10px 12px}
.player .play{width:48px;height:48px;border-radius:12px;background:var(--btn);color:#111;border:0;display:grid;place-items:center;font-size:18px;cursor:pointer}
.player .p-left{display:flex;flex-direction:column;gap:4px}
.player .status-pill{display:inline-flex;align-items:center;gap:6px;background:#1b2130;border:1px solid #2a3346;color:#c8d6ea;border-radius:999px;padding:4px 8px;font-size:.82rem}
.player .track{font-weight:900}
.player .status{color:var(--muted)}
.player .chips{display:flex;gap:8px}
.player .rp-chip,.station-chip{border:1px solid #2a3346;background:#121a27;color:#dbe7fb;border-radius:999px;padding:8px 12px;cursor:pointer}
.player .rp-chip.active{background:#1f2a3a;border-color:#3c84ff}
.player .vol{margin-left:auto;display:flex;align-items:center;gap:8px}
@media(max-width:680px){ .player .vol{display:none} }

/* WhatsApp float */
.wa-float{position:fixed;right:16px;bottom:120px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--btn);box-shadow:0 12px 24px rgba(0,0,0,.35);color:var(--btnText);z-index:65;font-size:22px;text-decoration:none}


/* === ADS REDESIGN (2025-09-23-c) ========================================== */
/* Contenedor general */
.promo-zone{
  display: grid;
  gap: 16px;
}

/* Leader 728x90 (responsive con ratio fijo) */
.promo-leader{
  width: 100%;
  aspect-ratio: 728 / 90;
  display: grid;
  place-items: center;
  border: 1px solid var(--br);
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
}
.promo-leader > a, .promo-leader > img{
  width: 100%; height: 100%;
  display: block;
}
.promo-leader img{ width:100%; height:100%; object-fit: contain; }
.promo-leader.fit-cover img{ object-fit: cover; }

/* Grid de rectángulos 300x250 */
.promo-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 780px){
  .promo-grid{ grid-template-columns: 1fr; }
}

/* Slots 300x250 */
.promo-rect{
  aspect-ratio: 300 / 250;
  width: 100%;
  display: grid;
  place-items: center;
  border: 1px solid var(--br);
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
}
.promo-rect > a, .promo-rect > img{ width:100%; height:100%; display:block; }
.promo-rect img{ width:100%; height:100%; object-fit: contain; }
.promo-rect.fit-cover img{ object-fit: cover; }

/* Utilidad para slots genéricos 300x250 reutilizables */
.ad-slot-300x250{ aspect-ratio: 300 / 250; }
.ad-slot-728x90{ aspect-ratio: 728 / 90; }

/* Evitar que texto de fallback rompa el layout */
.promo-leader, .promo-rect{ font-size: 0; line-height: 0; }