*{ box-sizing:border-box; }

/* ================= BASE ================= */
body{
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
  background:#fff;
  color:#111;
}

a{ color:#111; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ================= PARTICLES ================= */
#particles-js{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none; /* IMPORTANTÍSIMO: no tapa clicks */
}

/* todo el contenido por arriba */
body > *:not(#particles-js){
  position:relative;
  z-index:1;
}

/* ================= TOP DATE ================= */
.top-date{
  max-width:1200px;
  margin:auto;
  padding:10px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
  border-bottom:1px solid #e5e5e5;
  font-family: Arial, sans-serif;
  gap:12px;
}

.top-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.weather{
  font-size:13px;
  color:#333;
  white-space:nowrap;
}

/* Botón tema */
.theme-toggle{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ================= HEADER ================= */
header{ border-bottom:2px solid #111; }

.header-main{
  max-width:1200px;
  margin:auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:20px;
}

.logo img{ height:44px; }
.logo2 img{ height:30px; }

nav{
  margin:auto;
  display:flex;
  gap:22px;
  font-family: Arial, sans-serif;
  font-size:14px;
}
nav a{ font-weight:600; }

/* RADIO EN VIVO */
.btn-live{
  background:#111;
  color:#fff !important;
  padding:10px 18px 10px 40px;
  border-radius:999px;
  font-family: Arial, sans-serif;
  font-weight:700;
  position:relative;
  text-decoration:none;
}

/* LUZ ROJA */
.btn-live::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  width:10px;
  height:10px;
  background:#ff2a2a;
  border-radius:50%;
  transform:translateY(-50%);
  animation:pulse 1.5s infinite;
  box-shadow:0 0 6px rgba(255,42,42,.8);
}
@keyframes pulse{
  0%{opacity:.3}
  50%{opacity:1}
  100%{opacity:.3}
}

/* CUANDO LA RADIO ESTA SONANDO */
.btn-live.playing{
  background:#ff2a2a !important;
  color:#fff !important;
}
.btn-live.playing::before{
  animation:pulse-live .9s infinite;
  box-shadow:0 0 14px rgba(255,42,42,1);
}
@keyframes pulse-live{
  0%{opacity:.4}
  50%{opacity:1}
  100%{opacity:.4}
}

/* ================= LED BAR ================= */
.led-bar{
  height:2px;
  background:linear-gradient(90deg,#000,#ff2a2a,#000);
  background-size:200% 100%;
  animation:led 3s ease-in-out infinite alternate;
  opacity:.85;
}
@keyframes led{
  from{background-position:0%}
  to{background-position:100%}
}

/* ================= TICKER ================= */
.ticker{
  overflow:hidden;
  border-bottom:1px solid #e5e5e5;
  background:#fafafa;
}

.ticker-track{
  display:flex;
  gap:36px;
  padding:10px 20px;
  white-space:nowrap;
  animation:scroll 30s linear infinite;
  font-family: Arial, sans-serif;
  font-size:13px;
  letter-spacing:.2px;
}

.ticker-track span{
  color:#222;
  font-weight:700;
  position:relative;
  padding-left:18px;
}

.ticker-track span:first-child{ padding-left:0; }

.ticker-track span:not(:first-child)::before{
  content:"";
  position:absolute;
  left:6px;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(0,0,0,.25);
  transform:translateY(-50%);
}

@keyframes scroll{
  from{transform:translateX(100%)}
  to{transform:translateX(-100%)}
}

/* ================= SEARCH ================= */
.search-bar{
  max-width:1200px;
  margin:18px auto;
  padding:0 20px;
}

.search-bar form{
  display:flex;
  gap:10px;
  align-items:center;
}

.search-bar input{
  flex:1;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid #dcdcdc;
  background:rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
  font-family: Arial, sans-serif;
  font-size:14px;
  outline:none;
}

.search-bar input:focus{
  border-color:#bdbdbd;
  box-shadow:0 0 0 3px rgba(0,0,0,.04);
}

.search-bar button{
  padding:12px 18px;
  border-radius:999px;
  border:1px solid #dcdcdc;
  background:rgba(255,255,255,.65);
  backdrop-filter: blur(6px);
  color:#111;
  font-family: Arial, sans-serif;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.search-bar button:hover{
  background:#111;
  color:#fff;
  border-color:#111;
  text-decoration:none;
}

/* ================= HERO ================= */
.hero{
  max-width:1200px;
  margin:30px auto;
  padding:26px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:22px;
  border-radius:22px;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(6px);
  position:relative;
  box-shadow:0 10px 26px rgba(0,0,0,.05);
  overflow:hidden;
}

/* borde animado sutil */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  padding:3px;
  border-radius:22px;
  background:linear-gradient(90deg,#000,#ff2a2a,#000,#ff2a2a,#000);
  background-size:220% 100%;
  animation:hero-border 4s ease-in-out infinite alternate;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.55;
}

@keyframes hero-border{
  from{ background-position:0% 50% }
  to{ background-position:100% 50% }
}

.hero-text{ position:relative; z-index:1; }

.hero h1{
  font-size:36px;
  line-height:1.08;
  margin:0 0 10px;
  word-break:break-word;
}

.hero p{
  margin:0 0 12px;
  color:#444;
  font-size:16px;
  line-height:1.6;
}

.hero-link{
  font-family: Arial, sans-serif;
  font-weight:700;
}

.hero-date{
  margin-top:10px;
  font-family: Arial, sans-serif;
  font-size:12px;
  color:#777;
}

.hero img{
  width:100%;
  max-height:360px;
  border-radius:16px;
  object-fit:cover;
  border:1px solid #eee;
  position:relative;
  z-index:1;
}

/* ================= NOTICIAS ================= */
.section{
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}

.news-3{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

.card-box{
  border:1px solid #e5e5e5;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  grid-template-columns:260px 1fr;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
}

.card-box img{
  width:100%;
  height:170px;
  object-fit:cover;
}

.card-box .content{ padding:16px; }
.card-box h3{ margin:0 0 8px; }
.card-box p{ margin:0 0 10px; color:#444; }

.card-box small{
  font-family: Arial, sans-serif;
  font-size:12px;
  color:#777;
}

/* Programación card + Quiénes somos card */
.card-box.simple{
  padding:16px;
  display:block;
}

/* BOTÓN MÁS */
.more-wrap{ text-align:center; margin-top:30px; }

.btn-more{
  display:inline-block;
  padding:12px 30px;
  border-radius:999px;
  border:1px solid #111;
  font-family: Arial, sans-serif;
  font-weight:700;
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  cursor:pointer;
}

.btn-more:hover{
  background:#111;
  color:#fff;
  text-decoration:none;
}

/* ================= QUIÉNES SOMOS ================= */
.qs-preview p,
.qs-body p{ margin:0; }

.qs-body{
  margin-top:12px;
  max-height:0;
  opacity:0;
  transform: translateY(6px);
  overflow:hidden;
  transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
}

.qs-body.open{
  max-height:800px;
  opacity:1;
  transform: translateY(0);
}

/* ================= CHAT IA (launcher) ================= */
.ai-assistant{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 999999;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font-family: Arial, sans-serif;
  pointer-events: auto;
  max-width: calc(100vw - 36px);
}

.ai-btn{
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.12);
  backdrop-filter: blur(6px);
}

.ai-bubble{
  background:rgba(255,255,255,.90);
  border:1px solid rgba(0,0,0,.12);
  color:#111;
  padding:10px 14px;
  border-radius:14px;
  font-size:13px;
  box-shadow:0 10px 22px rgba(0,0,0,.10);
  backdrop-filter: blur(6px);
  max-width:min(260px, calc(100vw - 110px));
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 480px){
  .ai-bubble{ display:none; }
  .ai-assistant{ right:14px; bottom:14px; }
}

/* ================= CHAT IA (panel) ================= */
.ai-panel-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:9999999;
  display:none;            /* cerrado por defecto */
  align-items:flex-end;
  justify-content:flex-end;
  padding:18px;
}

.ai-panel{
  width:min(420px, 92vw);
  height:min(560px, 78vh);
  background:rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border:1px solid rgba(0,0,0,.12);
  border-radius:18px;
  box-shadow:0 18px 42px rgba(0,0,0,.22);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-family: Arial, sans-serif;
}

.ai-panel-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-bottom:1px solid rgba(0,0,0,.10);
}

.ai-panel-title{ font-weight:800; }

.ai-panel-log{
  padding:12px;
  overflow:auto;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ai-msg{ display:flex; }
.ai-msg.me{ justify-content:flex-end; }
.ai-msg.bot{ justify-content:flex-start; }

.ai-bubble-msg{
  max-width:85%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  line-height:1.45;
  font-size:14px;
}

.ai-msg.me .ai-bubble-msg{
  background:#111;
  color:#fff;
  border-color:#111;
}

.ai-panel-form{
  display:flex;
  gap:10px;
  padding:12px;
  border-top:1px solid rgba(0,0,0,.10);
}

.ai-panel-form input{
  flex:1;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid #dcdcdc;
  outline:none;
}

/* ================= AHORA AL AIRE (DESTACADO) ================= */
.on-air-box{
  position:relative;
  padding:24px 22px;
  border-radius:18px;
  overflow:hidden;
  color:#fff;
  background:#1b1b1b;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
}

/* degradé animado */
.on-air-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    120deg,
    #000 0%,
    #111 25%,
    #ff2a2a 45%,
    #111 65%,
    #000 100%
  );
  background-size:200% 200%;
  animation:onair-bg 10s ease-in-out infinite;
  opacity:.85;
}

/* capa para que el texto quede arriba */
.on-air-box > *{
  position:relative;
  z-index:1;
}

@keyframes onair-bg{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}

.on-air-box h3{
  margin:0 0 12px;
  font-family: Arial, sans-serif;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  font-size:15px;
  opacity:.9;
}

#onAirText{
  color:#fff !important;
  font-size:15px;
  font-weight:700;
  line-height:1.3;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
}

#onAirNext{
  color:rgba(255,255,255,.85) !important;
  font-size:14px;
}

#onAirText::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  display:inline-block;
  box-shadow:0 0 6px rgba(255,255,255,.6);
  animation:onair-pulse 1.6s infinite;
}

@keyframes onair-pulse{
  0%{ opacity:.4 }
  50%{ opacity:1 }
  100%{ opacity:.4 }
}

/* ================= FOOTER ================= */
footer{
  margin-top:60px;
  padding:30px;
  text-align:center;
  color:#777;
  border-top:1px solid #e5e5e5;
  font-family: Arial, sans-serif;
}

.footer-ia{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:#999;
}

.footer-login{
  margin-bottom:10px;
}

.footer-login a{
  font-family: Arial, sans-serif;
  font-size:12px;
  font-weight:600;
  color:#777;
  text-decoration:none;
}

.footer-login a:hover{
  color:#111;
  text-decoration:underline;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px){
  nav{ display:none; }
  .hero{ grid-template-columns:1fr; padding:20px; }
  .news-3{ grid-template-columns:1fr; }
  .card-box{ grid-template-columns:1fr; }
}

@media(max-width:600px){
  #onAirText{ font-size:18px; }
}

/* ================= DARK MODE ================= */
body.dark{
  background:#0b0b0b;
  color:#f2f2f2;
}

body.dark a{ color:#f2f2f2; }
body.dark a:hover{ color:#fff; }

body.dark .top-date{
  border-bottom:1px solid rgba(255,255,255,.12);
}

/* ===== FIX HEADER: todo en una sola fila ===== */
.header-main{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:nowrap;          /* desktop: una sola línea */
}

.header-main .main-nav{
  margin-left:auto;          /* empuja el nav hacia el centro/derecha */
  display:flex;
  gap:22px;
}

/* Que el botón Live quede pegado al nav */
.header-main .btn-live{
  margin-left:0;
}

/* Desktop: el botón hamburguesa no debe verse */
@media (min-width:901px){
  .header-main .menu-btn{ display:none; }
}

/* Mobile: nav como dropdown (tu estilo) pero bien posicionado */
@media (max-width:900px){
  .header-main{ flex-wrap:nowrap; }

  .header-main .main-nav{
    margin-left:0;           /* no empuja en mobile */
  }

  /* IMPORTANTE: el dropdown se posiciona respecto al viewport */
  .main-nav{
    top:76px;                /* ajustá si tu header es más alto */
  }

  /* El botón live y el menú se acomodan a la derecha */
  .btn-live{ margin-left:auto; }
  .menu-btn{ margin-left:10px; }
}

/* ================= FIX MOBILE HEADER ================= */
@media (max-width:900px){

  /* 1) NAV: que NO se vea por defecto en celular */
  .header-main .main-nav{
    display:none !important;        /* cerrado */
    position:fixed !important;
    left:14px !important;
    right:14px !important;
    top:76px !important;            /* ajustable si tu header es más alto */
    background:rgba(255,255,255,.95) !important;
    border:1px solid rgba(0,0,0,.12) !important;
    border-radius:16px !important;
    padding:12px !important;
    box-shadow:0 18px 42px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(10px) !important;
    z-index:2147482000 !important;
    flex-direction:column !important;
    gap:10px !important;
    margin:0 !important;
  }

  /* cuando abrís el menú */
  .header-main .main-nav.open{
    display:flex !important;
  }

  /* links del menú */
  .header-main .main-nav a{
    display:block;
    padding:12px 12px;
    border-radius:12px;
  }
  .header-main .main-nav a:hover{
    background:rgba(0,0,0,.06);
    text-decoration:none;
  }

  /* 2) BOTÓN RADIO EN VIVO: versión compacta */
  .btn-live{
    padding:8px 12px 8px 32px !important;
    font-size:12px !important;
    border-radius:999px !important;
    white-space:nowrap !important;
  }
  .btn-live::before{
    left:12px !important;
    width:8px !important;
    height:8px !important;
  }

  /* 3) Botón hamburguesa a la derecha */
  .menu-btn{
    display:flex !important;
    align-items:center;
    justify-content:center;
    margin-left:10px !important;
  }

  /* acomodamos el orden para que no se rompa */
  .header-main{
    align-items:center;
  }
}

/* ================= DARK MODE menú mobile ================= */
@media (max-width:900px){
  body.dark .header-main .main-nav{
    background:rgba(15,15,15,.95) !important;
    border:1px solid rgba(255,255,255,.14) !important;
  }
  body.dark .header-main .main-nav a:hover{
    background:rgba(255,255,255,.08) !important;
  }
}

/* ================= FIX BOTÓN ENVIAR (ASISTENTE) ================= */
.ai-panel .ai-panel-form button.btn-more{
  background:#111 !important;
  color:#fff !important;
  border-color:#111 !important;
}
.ai-panel .ai-panel-form button.btn-more:hover{
  background:#000 !important;
  border-color:#000 !important;
}
body.dark .ai-panel .ai-panel-form button.btn-more{
  background:#fff !important;
  color:#111 !important;
  border-color:#fff !important;
}
body.dark .ai-panel .ai-panel-form button.btn-more:hover{
  background:rgba(255,255,255,.9) !important;
}

body.dark .weather{ color:rgba(255,255,255,.75); }

body.dark header{
  border-bottom:2px solid rgba(255,255,255,.75);
}

body.dark .ticker{
  background:#101010;
  border-bottom:1px solid rgba(255,255,255,.12);
}

body.dark .ticker-track span{
  color:rgba(255,255,255,.85);
}

body.dark .ticker-track span:not(:first-child)::before{
  background:rgba(255,255,255,.25);
}

body.dark .search-bar input,
body.dark .search-bar button,
body.dark .theme-toggle{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}

body.dark .search-bar input::placeholder{ color:rgba(255,255,255,.55); }

body.dark .search-bar button:hover{
  background:#fff;
  color:#111;
  border-color:#fff;
}

body.dark .hero,
body.dark .card-box{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
}

body.dark .card-box p,
body.dark .hero p{ color:rgba(255,255,255,.78); }

body.dark .card-box small,
body.dark .hero-date{ color:rgba(255,255,255,.55); }

body.dark footer{
  border-top:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.60);
}

body.dark .footer-ia{ color:rgba(255,255,255,.40); }

body.dark .btn-more{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}

body.dark .btn-more:hover{
  background:#fff;
  color:#111;
  border-color:#fff;
}

body.dark .footer-login a{
  color:rgba(255,255,255,.55);
}

body.dark .footer-login a:hover{
  color:#fff;
}

/* ===== FIX FINAL ASISTENTE (FORZADO) ===== */
#aiLauncher{
  position: fixed !important;
  right: 18px !important;
  left: auto !important;
  bottom: 18px !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 10px !important;
  pointer-events: auto !important;
}

#aiLauncher .ai-btn,
#aiLauncher .ai-bubble{
  pointer-events: auto !important;
}

/* Panel cerrado por defecto */
#aiPanel{
  display: none;
}

/* Estilo del backdrop por si estaba pisado */
#aiPanel.ai-open{
  display: flex !important;
}

#aiPanel{
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45) !important;
  z-index: 2147483646 !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  padding: 18px !important;
}

/* ===== PANEL IA: Dark mode legible ===== */
body.dark .ai-panel{
  background: rgba(20,20,20,.94) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fff !important;
}

body.dark .ai-panel-top{
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}

body.dark .ai-panel-title{
  color:#fff !important;
}

/* log */
body.dark .ai-bubble-msg{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color:#fff !important;
}

body.dark .ai-msg.me .ai-bubble-msg{
  background:#fff !important;
  color:#111 !important;
  border-color:#fff !important;
}

/* input */
body.dark .ai-panel-form{
  border-top: 1px solid rgba(255,255,255,.12) !important;
}

body.dark .ai-panel-form input{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color:#fff !important;
}

body.dark .ai-panel-form input::placeholder{
  color: rgba(255,255,255,.55) !important;
}

/* botón Cerrar y Enviar (btn-more) */
body.dark .ai-panel .btn-more{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
}

body.dark .ai-panel .btn-more:hover{
  background:#fff !important;
  color:#111 !important;
  border-color:#fff !important;
}

/* Cuando el panel está abierto, escondemos el launcher */
#aiPanel.ai-open ~ #aiLauncher,
#aiLauncher.ai-hidden{
  display:none !important;
}

/* ================= WHATSAPP ================= */
.wa-float-mini{
  position: fixed !important;
  left: 14px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2147483647;
  box-shadow: 0 12px 26px rgba(37,211,102,.45);
}

.wa-float-mini .wa-svg{
  width: 26px;
  height: 26px;
  fill: #fff !important;
  display:block;
}

.wa-float-mini:hover{
  transform: translateY(-2px) scale(1.05);
  text-decoration: none;
}

/* ================= REDES SOCIALES ================= */
.social-under-hero{
  max-width:1200px;
  margin: -10px auto 18px;
  padding: 0 20px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.social-ico{
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}

.social-ico svg{
  width:18px;
  height:18px;
  fill:#111;
  display:block;
}

.store-pill{
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.12);
  font-family: Arial, sans-serif;
  font-weight:800;
  font-size:12px;
  color:#111;
  box-shadow:0 10px 20px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}

.store-pill:hover{ background:#111; color:#fff; border-color:#111; text-decoration:none; }
.social-ico:hover{ transform: translateY(-1px); text-decoration:none; }

/* Dark mode */
body.dark .social-ico,
body.dark .store-pill{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
}
body.dark .social-ico svg{ fill:#fff; }
body.dark .store-pill{ color:#fff; }
body.dark .store-pill:hover{ background:#fff; color:#111; border-color:#fff; }

/* ================= ROJO ACTIVOS ================= */
.asset-name{ color:#ff1f1f; }

/* ================= FIX GLOBAL ================= */
body{ transform: none !important; }

/* ================= MENNU ICONOS ================= */
.menu-btn{
  display:none;
  margin-left:auto;
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  font-size:22px;
  cursor:pointer;
  font-family: Arial, sans-serif;
  font-weight:900;
}

.main-nav{
  margin:auto;
  display:flex;
  gap:22px;
  font-family: Arial, sans-serif;
  font-size:14px;
}
.main-nav a{ font-weight:600; }

@media (max-width:900px){
  .menu-btn{ display:flex; align-items:center; justify-content:center; }

  .main-nav{
    display:none;
    position:fixed;
    left:14px;
    right:14px;
    top:76px;
    background:rgba(255,255,255,.95);
    border:1px solid rgba(0,0,0,.12);
    border-radius:16px;
    padding:12px;
    box-shadow:0 18px 42px rgba(0,0,0,.18);
    backdrop-filter: blur(10px);
    z-index:2147482000;
    flex-direction:column;
    gap:10px;
    margin:0;
  }

  .main-nav a{
    padding:12px 12px;
    border-radius:12px;
  }
  .main-nav a:hover{
    background:rgba(0,0,0,.06);
    text-decoration:none;
  }

  .main-nav.open{ display:flex; }
}

body.dark .menu-btn{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}
body.dark .main-nav{
  background:rgba(15,15,15,.95);
  border:1px solid rgba(255,255,255,.14);
}
body.dark .main-nav a:hover{
  background:rgba(255,255,255,.08);
}

@media (max-width:900px){
  header{
    position: relative !important;
    z-index: 2147483646 !important;
  }

  #mainNav{
    z-index: 2147483647 !important;
  }

  .ticker,
  .search-bar,
  .hero,
  .section{
    position: relative !important;
    z-index: 1 !important;
  }
}

/* =========================================================
   PROGRAMACIÓN (CARRUSEL MODERNO)
   ========================================================= */
.prog-title{
  margin:0 0 6px;
  font-size:26px;
  line-height:1.15;
}

.prog-subtitle{
  margin:0 0 18px;
  color:#555;
  font-family: Arial, sans-serif;
}

.prog-wrap{
  position:relative;
  border-radius:18px;
}

.prog-viewport{
  overflow:hidden;
  border-radius:18px;
}

.prog-track{
  display:flex;
  flex-wrap: nowrap;            /* ✅ FIX: clave */
  gap:16px;
  padding:6px 2px 10px;
  scroll-behavior:smooth;
  overflow:auto;
  scrollbar-width:none;
}
.prog-track::-webkit-scrollbar{ display:none; }

.prog-card{
  flex:0 0 calc((100% - 48px) / 4);
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.10);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
  display:flex;
  flex-direction:column;
  min-height: 520px;
}

.prog-img{
  position:relative;
  height:170px;
  overflow:hidden;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.prog-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
}

.prog-body{
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.prog-body h3{
  margin:0;
  font-size:16px;
  letter-spacing:.2px;
}

.prog-desc{
  margin:0;
  color:#444;
  font-size:13px;
  line-height:1.55;
  font-family: Arial, sans-serif;
}

.prog-hours{
  margin-top:auto;
  padding:10px;
  border-radius:14px;
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.06);
}

.prog-hours-title{
  font-family: Arial, sans-serif;
  font-weight:800;
  font-size:12px;
  margin-bottom:6px;
}

.prog-hours ul{
  margin:0;
  padding-left:16px;
  font-family: Arial, sans-serif;
  font-size:12px;
  color:#333;
  line-height:1.45;
}

/* Botones flecha */
.prog-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(8px);
  cursor:pointer;
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 14px 34px rgba(0,0,0,.14);
  z-index:3;
}
.prog-prev{ left:-10px; }
.prog-next{ right:-10px; }

@media (max-width:1100px){
  .prog-card{ flex:0 0 calc((100% - 32px) / 3); }
}
@media (max-width:860px){
  .prog-card{ flex:0 0 calc((100% - 16px) / 2); }
  .prog-prev{ left:0; }
  .prog-next{ right:0; }
}
@media (max-width:520px){
  .prog-card{ flex:0 0 88%; }
}

/* Dots */
.prog-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}
.prog-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(0,0,0,.22);
  border:none;
  cursor:pointer;
}
.prog-dot.active{
  background:#ff2a2a;
}

/* Dark mode */
body.dark .prog-subtitle{ color:rgba(255,255,255,.68); }

body.dark .prog-card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
}

body.dark .prog-desc{ color:rgba(255,255,255,.78); }
body.dark .prog-hours{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
body.dark .prog-hours ul{ color:rgba(255,255,255,.8); }

body.dark .prog-nav{
  background:rgba(20,20,20,.75);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
}

body.dark .prog-dot{ background:rgba(255,255,255,.25); }

/* =========================================================
   FIX DEFINITIVO: PROGRAMACIÓN - IMAGEN COMPLETA (SIN RECORTE)
   ========================================================= */
.prog-img{
  height: auto !important;
  min-height: 180px !important;
  padding: 10px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.08)) !important;
}

.prog-img img{
  width: 100% !important;
  height: auto !important;
  max-height: 240px !important;
  object-fit: contain !important;
  display:block !important;
}

body.dark .prog-img{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
}

/* ================= PROGRAMACIÓN EN VIVO ================= */
.prog-live{
  display:none;
  margin-top:10px;
  padding:6px 12px;
  border-radius:999px;
  background:#ff2a2a;
  color:#fff;
  font-family: Arial, sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
  animation:pulse-live 1.4s infinite;
}

.prog-card.en-vivo .prog-live{
  display:inline-block;
}

.prog-card.en-vivo{
  border:2px solid #ff2a2a;
  box-shadow:0 0 0 3px rgba(255,42,42,.15);
}

@keyframes pulse-live{
  0%{ opacity:.4 }
  50%{ opacity:1 }
  100%{ opacity:.4 }
}


.hero-title-link{
  color: inherit;
  text-decoration: none;
}

.hero-title-link:hover{
  text-decoration: underline;
}