:root {
  --dorado: #d4af37;
  --fondo-negro: rgba(0, 0, 0, 0.6);
  --fondo-transparente: rgba(0, 0, 0, 0.5);
  --blanco: #fff;
  --fuente-principal: 'Segoe UI', sans-serif;
  --fuente-titular: 'Montserrat', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* El atributo hidden debe ganar siempre: sin esto, cualquier regla posterior
   con display:block lo anula y el elemento oculto sigue ocupando espacio. */
[hidden] {
  display: none !important;
}

/* Foco visible para quien navega con teclado */
:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 3px;
  border-radius: 4px;
}

body {
  font-family: var(--fuente-principal);
  color: var(--blanco);
  background-color: #0a0a0a;
  overflow-x: hidden;
}

/* El fondo va en un pseudo-elemento fijo en vez de background-attachment:fixed,
   que iOS/Safari no soporta bien y provoca saltos al hacer scroll. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url('imagenes/estudio8.jpg') center / cover no-repeat;
}

/* ================================================= */
/* === 1. ENCABEZADO === */
/* ================================================= */
.encabezado {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background-color: var(--fondo-negro);
  gap: 20px;
}

.encabezado-izq {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

.banner-publicitario {
  flex: 1;
  max-width: 728px;
  height: 90px;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

.banner-iframe {
  width: 100%;
  height: 90px;
  border: none;
  display: block;
}

.banner-movil {
  display: none;
}

.logo {
  width: 470px;
  max-width: 100%;
  height: auto;
  display: block;
}

.slogan {
  font-size: 1.8rem;
  color: var(--dorado);
  font-family: var(--fuente-titular);
  font-weight: 900;
  text-align: center;
  width: 470px;
  max-width: 100%;
  margin-top: -40px;
  margin-bottom: 0;
}

/* ================================================= */
/* === 2. ESTRUCTURA PRINCIPAL === */
/* ================================================= */
.contenido {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 30px 40px 40px 40px;
  justify-content: space-between;
}

.columnas-pc {
  display: flex;
  gap: 30px;
  width: 100%;
  align-items: flex-start;
}

.columnas-pc .reproductor {
  flex: 0 0 auto;
  width: 520px;
  min-width: 0;
  max-width: 520px;
}

.video-pc {
  flex: 1;
  max-width: 456px;
  margin-left: auto;
  margin-right: 100px;
  margin-top: -50px;
}


.video-pc iframe,
.video-pc img,
.video-pc video {
  width: 100%;
  border-radius: 8px;
  display: block;
}

.video-pc iframe {
  aspect-ratio: 16/9;
  border: 2px solid var(--dorado);
}

/* ================================================= */
/* === 3. REPRODUCTOR === */
/* ================================================= */
.reproductor {
  max-width: 550px;
  flex-grow: 1;
  min-width: 0;
}

.reproductor-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 5px;
  overflow: hidden;
}

.reproductor h2 {
  font-size: 1.2rem;
  margin-bottom: 0;
  color: var(--dorado);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

.player {
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: var(--fondo-transparente);
  padding: 15px 20px;
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
}

.cover {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
  flex-shrink: 0;
  transition: opacity 0.5s ease;
}

.cover.cambiando {
  opacity: 0;
}

.info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;               /* estaba en 2px: titulo e interprete se pegaban */
  min-width: 0;
  overflow: hidden;
}

/* El título y el artista van dentro de este bloque (por el aria-live), así
   que necesita su propio gap: el de .info solo separa este bloque del año. */
.datos-tema {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.titulo, .artista, .anio {
  font-size: 1.0rem;
  color: var(--blanco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Estaba en 1.0. Con la altura de linea igual al tamano de letra no queda
     sitio para los trazos que bajan, y con overflow:hidden encima se cortaba
     el rabito de la g, la j, la p, la q y la y. 1.35 les deja aire. */
  line-height: 1.35;
  padding: 0;
  margin: 0;
}

.artista {
  color: var(--dorado);
  font-weight: bold;
}

/* ================================================= */
/* === 4. REPRODUCTOR PERSONALIZADO === */
/* ================================================= */
.reproductor-custom {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--dorado);
  border-radius: 30px;
  padding: 8px 20px;
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.btn-play {
  background: var(--dorado);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  color: #000;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.btn-play:hover {
  transform: scale(1.1);
}

.btn-play.reproduciendo {
  animation: pulso 1.5s ease-in-out infinite;
}

/* Se muestra mientras se reintenta tras una caida del stream */
.btn-play.reconectando {
  animation: girar 1s linear infinite;
  background: rgba(212, 175, 55, 0.4);
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.radio-label {
  font-size: 0.85rem;
  color: var(--blanco);
  flex: 1;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: default;
}

.radio-label::-webkit-scrollbar {
  display: none;
}

.volumen-control {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.icono-volumen {
  font-size: 0.9rem;
}

.volumen-track {
  position: relative;
  width: 100px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  cursor: pointer;
  touch-action: none;   /* permite arrastrar sin que la pagina haga scroll */
}

/* Area tactil ampliada: se ve de 4px pero se puede tocar en 24px */
.volumen-track::before {
  content: '';
  position: absolute;
  inset: -10px 0;
}

.volumen-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--dorado);
  border-radius: 2px;
  pointer-events: none;
}

.volumen-thumb {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--dorado);
  pointer-events: none;
}

/* ================================================= */
/* === 5. INDICADOR EN VIVO === */
/* ================================================= */
.en-vivo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: #fff;
  background: rgba(255, 0, 0, 0.7);
  padding: 2px 8px;
  border-radius: 10px;
  vertical-align: middle;
  margin-left: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.punto-vivo {
  width: 7px;
  height: 7px;
  background: #fff;
  border-radius: 50%;
  animation: parpadeo-vivo 1.2s ease-in-out infinite;
}

@keyframes parpadeo-vivo {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ================================================= */
/* === 6. HISTORIAL DE CANCIONES (TOOLTIP) === */
/* ================================================= */
.historial-tooltip {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}

.historial-label {
  font-size: 0.8rem;
  color: var(--dorado);
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--dorado);
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.2s ease;
}

.historial-label:hover {
  background: rgba(212, 175, 55, 0.15);
}

/* Es un <button>: sin esto heredaria el estilo por defecto del navegador */
.historial-label {
  background: none;
  font-family: inherit;
}

.historial-panel.abierto {
  display: flex;
}

.historial-vacio {
  font-size: 0.78rem;
  color: #ccc;
}

.historial-panel {
  display: none;
  position: absolute;
  top: 0;
  left: 110%;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--dorado);
  border-radius: 10px;
  padding: 10px 14px;
  width: 260px;
  max-width: 260px;
  overflow: hidden;
  z-index: 999;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.hist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.hist-item img {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}

.hist-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.hist-titulo {
  font-size: 0.82rem;
  color: var(--blanco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hist-artista {
  font-size: 0.75rem;
  color: var(--dorado);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================= */
/* === 7. CONTACTO Y REDES === */
/* ================================================= */
.contacto {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 500px;
  width: auto;
  background-color: var(--fondo-negro);
  padding: 10px 20px;
  border-radius: 10px;
  text-align: center;
  z-index: 100;
}

.contacto h2 {
  font-size: 1.2rem;      /* igual que "Ahora sonando" */
  font-weight: 500;
  color: var(--dorado);
  margin: 0;              /* pegado a los iconos de abajo */
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.contacto-grid {
  display: flex;
  gap: 30px;
  margin-bottom: 8px;
}

.contacto-direccion {
  flex: 1.2;
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: left;
}

.contacto-datos {
  flex: 1.3;
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: left;
  align-self: flex-end;
}

.contacto-datos p {
  margin: 0 0 2px 0;
  white-space: nowrap;
}

.contacto p {
  font-size: 0.85rem;
  margin: 4px 0;
  text-align: left;
}

.contacto strong {
  color: var(--dorado);
  font-weight: 600;
}

.contacto a {
  color: var(--blanco);
  text-decoration: none;
}

.redes {
  display: flex;
  gap: 8px;
  padding: 6px 0 0 0;
  margin-top: 0;
}

.icono {
  width: 24px;
  height: 24px;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  transition: transform 0.3s ease;
  display: inline-block;
}

.icono:hover {
  transform: scale(1.2);
}

.instagram {
  background-image: url('imagenes/instagram-logo4-amarillo.jpg');
}

.whatsapp {
  background-image: url('imagenes/logo_whatsapp_amarillo.jpg');
}

.x {
  background-image: url('imagenes/x-logo6-amarillo.jpg');
}

/* ================================================= */
/* === 8. VIDEO EN VIVO === */
/* ================================================= */
.video-label {
  font-size: 0.75rem;
  color: var(--dorado);
  text-align: center;
  margin-top: 4px;
}

/* Video móvil — oculto en PC */
.video-movil {
  display: none;
}

/* Vista escritorio: mostrar bloque texto */
.contacto-desktop {
  display: block;
}
/* Vista escritorio: ocultar bloque íconos */
.contacto-movil {
  display: none;
}

/* Popups contacto PC — ocultos por defecto */
.direccion-popup {
  display: none;
  position: fixed;
  bottom: 120px;
  right: 10px;
  z-index: 200;
}

.direccion-popup-inner {
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--dorado);
  border-radius: 10px;
  padding: 16px 20px;
  max-width: 280px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  position: relative;
}

.direccion-close {
  position: absolute;
  top: 8px; right: 10px;
  background: none; border: none;
  color: var(--dorado);
  font-size: 1rem; cursor: pointer;
}

.direccion-titulo {
  font-size: 0.8rem; color: var(--dorado);
  font-weight: 700; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.direccion-texto {
  font-size: 0.85rem; color: var(--blanco);
  line-height: 1.5; margin-bottom: 10px;
}

.direccion-maps {
  display: inline-block; font-size: 0.78rem;
  color: var(--dorado); text-decoration: none;
  border-bottom: 1px solid rgba(212,175,55,0.4);
}
.direccion-maps:hover { color: var(--blanco); }

/* Íconos contacto PC */
.contacto-iconos-pc {
  display: flex; align-items: center;
  gap: 4px; padding: 2px 4px 6px;
}

.cpc-icono {
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  text-decoration: none; color: var(--blanco);
  background: none; border: none; cursor: pointer;
  padding: 6px 10px; border-radius: 8px;
  transition: background 0.2s ease; flex-shrink: 0;
}
.cpc-icono:hover { background: rgba(212,175,55,0.15); }

.cpc-emoji {
  font-size: 1.4rem; display: flex;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.4);
  border-radius: 50%;
}

.cpc-x { font-size: 1.1rem; font-weight: 700; }

.cpc-img {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.4);
  background-size: cover; background-position: center;
  display: block;
}

.cpc-label {
  font-size: 0.6rem; color: var(--dorado);
  text-align: center; font-weight: 600; line-height: 1;
}

/* Programa actual — inline con EN VIVO */
.programa-en-vivo {
  font-size: 1.1rem;
  color: var(--blanco);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 100%;
  cursor: default;
}

.programa-en-vivo::-webkit-scrollbar {
  display: none;
}

/* Usuario de redes del conductor, dentro de la linea del programa en vivo.
   Va en dorado para que se lea como enlace sin necesidad de subrayarlo: el
   subrayado permanente ensuciaba una linea que ya lleva dos separadores. */
.rrss-conductor {
  color: var(--dorado);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.35);
  padding-bottom: 1px;
  transition: border-color 0.2s ease;
}

@media (hover: hover) {
  .rrss-conductor:hover {
    border-bottom-color: var(--dorado);
  }
}

.rrss-conductor:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
}

/* ================================================= */
/* === 8b. TEXTO QUE NO CABE === */
/* ================================================= */
/* El nombre del programa con el conductor y su instagram, y algunos
   titulos de canciones, no caben en el ancho disponible. Antes se
   cortaban: del "Contacto Global - Jose Luis Yepez y Luisanna Cristina
   Yepez Roberto - @joseluisyepezoficial" se perdian 181 px y el
   instagram no llegaba a verse nunca.

   Ahora el texto que sobra se desplaza solo de ida y vuelta. Las pausas
   del 0 al 12% y del 88 al 100% son para poder leer cada extremo antes
   de que se mueva.

   Solo se activa cuando hace falta: el JS mide y, si el texto cabe, no
   pone la clase y no se mueve nada. */
.deslizante {
  display: inline-block;
  white-space: nowrap;
}

.se-desplaza > .deslizante {
  animation: vaiven var(--dur, 10s) ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes vaiven {
  0%, 12%   { transform: translateX(0); }
  88%, 100% { transform: translateX(var(--recorrido, 0px)); }
}

/* ================================================= */
/* === 9. MARQUESINA === */
/* ================================================= */
.marquesina {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: var(--fondo-negro);
  overflow: hidden;
  z-index: 997;
  border-top: 1px solid var(--dorado);
}

/* Dos grupos identicos desplazandose -50% dan un bucle sin cortes. La
   duracion la calcula el JS segun el ancho real, para que la velocidad sea
   constante aunque cambie la cantidad de titulares (antes: 200s fijos). */
.titulares-scroll {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scroll-titulares var(--duracion-marquesina, 200s) linear infinite;
}

.titulares-grupo {
  display: flex;
  align-items: center;
  gap: 60px;
  padding-right: 60px;
  white-space: nowrap;
}

/* Al pasar el raton la marquesina se detiene para poder leer y hacer clic.

   El @media (hover: hover) es IMPRESCINDIBLE: sin el, en un movil el :hover
   se aplica al tocar la pantalla y se queda pegado hasta que tocas en otro
   sitio. Resultado: la marquesina se paraba y no volvia a arrancar. */
@media (hover: hover) and (pointer: fine) {
  .marquesina:hover .titulares-scroll,
  .titulares-scroll:focus-within {
    animation-play-state: paused;
  }
}

.titulares-scroll span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--blanco);
  height: 40px;
}

.titulares-scroll img {
  height: 20px;
  width: auto;
  vertical-align: middle;
}

@keyframes scroll-titulares {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.titulares-scroll a.titular-pc {
  text-decoration: none;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s;
}

.titulares-scroll a.titular-pc:hover {
  color: #d4af37;
}

.titulares-scroll a.titular-pc,
.titulares-scroll a.titular-pc:visited,
.titulares-scroll a.titular-pc:active {
  color: #ffffff !important;
  text-decoration: none;
}

.titulares-scroll a.titular-pc:hover {
  color: #d4af37 !important;
}

.titulares-scroll span.titular-movil {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ================================================= */
/* === 10. RESPONSIVE MÓVIL === */
/* ================================================= */
@media screen and (max-width: 768px) {

  /* ── ENCABEZADO ── */
  .encabezado {
    padding: 4px 15px;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .encabezado-izq {
    align-items: center;
  }

  .banner-publicitario {
    display: none;
  }

  .logo {
    width: 270px;
    max-width: 92%;
  }

  .slogan {
    font-size: 1.25rem;
    margin-top: -25px;
    text-align: center;
    width: 100%;
  }

  /* ── BANNER PUBLICITARIO MÓVIL ── */
  /* El hueco adopta la proporcion real de los banners (728x90). Antes era
     una altura fija de 50-60 px que no correspondia, y el banner salia
     aplastado a lo ancho: el logo y el texto del cliente se deformaban. */
  .banner-movil {
    display: block;
    width: 100%;
    aspect-ratio: 728 / 90;
    max-height: 70px;
    overflow: hidden;
    border-top: 1px solid rgba(212,175,55,0.3);
    border-bottom: 1px solid rgba(212,175,55,0.3);
    /* content-box: la proporcion se aplica al hueco interior, no incluyendo
       los bordes. Con border-box los 2 px de borde encogian la caja y
       dejaban una franja negra a los lados del banner. */
    box-sizing: content-box;
  }

  .banner-movil iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    margin: 0;
    padding: 0;
  }

  /* ── CONTENIDO ── */
  .contenido {
    justify-content: center;
    flex-direction: column;
    padding: 4px 0 20px 0;
    gap: 4px;
    overflow-x: hidden;
    width: 100%;
    box-sizing: border-box;
  }

  /* ── REPRODUCTOR ── */
  .reproductor {
    max-width: 88%;
    width: 88%;
    margin: 0 auto;
    margin-left: calc(50% - 44% + 10px);
    overflow: visible;
    box-sizing: border-box;
    padding: 0;
  }

  /* La regla de arriba NUNCA se aplicaba. Mas atras, fuera de todo
     media query, hay un ".columnas-pc .reproductor { width: 520px }"
     que pesa mas por llevar dos clases, asi que en el movil ganaba el
     ancho de escritorio: la caja media 520 px en una pantalla de 375 y
     178 px de texto quedaban fuera, ocultos por el overflow del body.
     De ahi que se cortaran los titulos de las canciones.

     Este selector repite las dos clases para pesar igual, y al estar
     mas abajo en el archivo, gana. */
  .columnas-pc .reproductor {
    width: 88%;
    max-width: 88%;
  }

  .reproductor h2 {
    font-size: 0.7rem;
    margin-bottom: 4px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    overflow: hidden;
  }

  .en-vivo {
    font-size: 0.6rem !important;
    padding: 1px 5px !important;
    flex-shrink: 0;
    margin-left: 4px !important;
    margin-right: 6px !important;
  }

  .programa-en-vivo {
    font-size: 0.68rem;
    color: #ffffff !important;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
  }

  .programa-en-vivo::-webkit-scrollbar {
    display: none;
  }

  .player {
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 3px 0;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: transparent !important;
  }

  .cover {
    width: 65px;
    height: 65px;
    flex-shrink: 0;
  }

  /* .datos-tema envuelve el titulo y el interprete. Como .info lleva
     align-items: flex-start, este bloque se ajustaba al ancho del TEXTO
     en vez de al del contenedor: media 357 px dentro de un .info de 255,
     y los 89 px sobrantes se salian de la pantalla. Con stretch ocupa lo
     que hay, y lo que no cabe lo resuelve el vaiven. */
  .datos-tema {
    align-self: stretch;
    width: 100%;
    min-width: 0;
  }

  .info {
    gap: 3px;              /* estaba en 0: las lineas se tocaban */
    align-items: flex-start;
    text-align: left;
    flex: 1;
    min-width: 0;
  }

  .titulo, .artista, .anio {
    font-size: 0.82rem;
    line-height: 1.4;      /* sitio para los trazos que bajan (g, j, p, q, y) */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .reproductor-custom {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 2px 0;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .volumen-control {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    max-width: 56px;
  }

  .btn-play {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .radio-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.65rem;
    flex: 1;
    max-width: calc(100% - 90px);
  }

  .volumen-track {
    width: 32px;
    flex-shrink: 0;
  }

  .volumen-control {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
  }

  .icono-volumen {
    font-size: 0.7rem;
    flex-shrink: 0;
  }

  /* Menos hueco: la barra de contacto va fija abajo y sin este recorte el
     boton de Historial quedaba justo debajo de ella al abrir la pagina. */
  .historial-tooltip {
    margin-top: 4px;
    margin-bottom: 4px;
    display: block;
  }

  .historial-label {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  .historial-panel {
    width: 220px;
    max-width: 220px;
    bottom: 110%;
    top: auto;
    left: 0;
  }

  /* ── COLUMNAS PC → apiladas en móvil ── */
  .columnas-pc {
    flex-direction: column;
    gap: 6px;
  }

  .video-pc {
    display: none;
  }

  /* ── VIDEO MÓVIL ── */
  .video-movil {
    display: block;
    width: 85%;
    max-width: 85%;
    margin: 0 auto;
    padding-bottom: 0;
  }

  .video-movil iframe,
  .video-movil video {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px;
    border: 1px solid var(--dorado);
    display: block;
  }

  .video-movil img {
    width: 100%;
    border-radius: 6px;
    display: block;
  }

  /* ── CONTACTO MÓVIL ── */
  .contacto {
    position: static !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 8px !important;
    background-color: var(--fondo-negro) !important;
  }

  .contacto-desktop {
    display: none !important;
  }

  /* Con .contacto-desktop oculto, la seccion .contacto se queda vacia:
     el titulo aparecería suelto en mitad de la página, lejos de la
     barra dorada, que es el contacto de verdad en móvil. */
  .contacto h2 {
    display: none !important;
  }

  .contacto-movil {
    display: block !important;
    width: 100%;
    background: var(--dorado);
    border-radius: 8px;
    margin: 0;
    padding: 0;
  }

  .contacto-iconos {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
    padding: 2px 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .contacto-icono {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: #000;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    flex: 1;
    min-width: 40px;
  }

  .contacto-icono:active {
    transform: scale(0.9);
  }

  .contacto-icono + .contacto-icono {
    border-left: 1px solid rgba(0,0,0,0.15);
  }

  /* Los iconos SVG toman aquí el tamaño que tenían los emoji: en un teléfono
     de 375 px caben seis, y a 36 px se saldrían de la barra. */
  .ci-icon {
    width: 28px;
    height: 28px;
  }

  .ci-icon svg {
    width: 15px;
    height: 15px;
  }

  .ci-emoji {
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 50%;
  }

  .ci-icono {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    display: block;
    flex-shrink: 0;
  }

  .ci-label {
    font-size: 0.48rem;
    color: #000;
    text-align: center;
    line-height: 1;
    font-weight: 600;
  }

  .ci-x {
    font-size: 0.85rem;
    font-weight: 700;
  }

  /* ── MARQUESINA ── */
  .marquesina {
    height: 26px;
  }

  .titulares-scroll span {
    font-size: 0.68rem;
    height: 26px;
  }

  .titulares-scroll img {
    height: 13px;
  }

  /* ── REDES ── */
  .redes {
    display: none;
  }

  .icono {
    width: 28px;
    height: 28px;
  }
}

/* ================================================= */
/* === 11. VENTANA DE NOTICIA === */
/* ================================================= */
/* Antes estos estilos iban incrustados dentro del JavaScript con cssText.
   Aquí se pueden ajustar sin tocar código. */
.overlay-noticia {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

.ventana-noticia {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid var(--dorado);
  border-radius: 12px;
  padding: 20px 24px;
  max-width: 480px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8);
  color: var(--blanco);
}

.vn-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.vn-cabecera img { height: 20px; width: auto; }

.vn-fuente { color: var(--dorado); font-size: 0.8rem; }

.vn-fecha { color: #888; font-size: 0.75rem; margin-left: auto; }

.vn-cerrar {
  background: none;
  border: none;
  color: var(--dorado);
  font-size: 1.2rem;
  cursor: pointer;
  margin-left: 8px;
  line-height: 1;
  padding: 4px;
}

.vn-titulo {
  font-size: 1rem;
  margin-bottom: 10px;
  line-height: 1.4;
  color: var(--blanco);
}

.vn-descripcion {
  font-size: 0.82rem;
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 14px;
}

.vn-enlace {
  display: inline-block;
  padding: 6px 16px;
  background: var(--dorado);
  color: #000;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ================================================= */
/* === 12. ACCESIBILIDAD: MOVIMIENTO REDUCIDO === */
/* ================================================= */
/* Respeta la preferencia del sistema de quien se marea con las animaciones.
   iOS, Android y Windows la exponen en sus ajustes de accesibilidad. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* LA MARQUESINA SE EXCEPTUA A PROPOSITO.

     "Reducir movimiento" (Ajustes > Accesibilidad en el iPhone) esta pensado
     para lo decorativo: zoom, parallax, efectos que pueden marear. La
     marquesina no decora, TRANSPORTA CONTENIDO: si se detiene, las noticias
     dejan de verse.

     Asi que aqui se le devuelve su animacion, mientras el resto —el boton
     que late, el punto rojo que parpadea— si se detiene, que es para lo que
     el ajuste existe.

     Lleva !important porque la regla universal de arriba tambien lo lleva. */
  .titulares-scroll {
    animation-duration: var(--duracion-marquesina, 200s) !important;
    animation-iteration-count: infinite !important;
  }

  .punto-vivo { opacity: 1; }
}


/* ================================================= */
/* === 13. BANNER DE VIDEO ("Volveremos pronto") === */
/* ================================================= */
/* Sustituye al GIF de 55,7 MB. object-fit evita que se deforme si el
   contenedor no tiene exactamente la proporcion 16:9. */
.banner-offline {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
  background: #111;
}

.video-pc .banner-offline {
  border-radius: 8px;
  border: 2px solid var(--dorado);
}

.video-movil .banner-offline {
  border-radius: 6px;
  border: 1px solid var(--dorado);
}

/* ================================================= */
/* === 14. ICONOS DE CONTACTO EN SVG === */
/* ================================================= */
/* Sustituyen a los emoji del sistema (📍 ✉️ 📞 💬 📷). Aquellos se dibujaban
   distinto en cada Windows, Android e iPhone, venían en color y chocaban con
   la paleta dorada. Estos son vectoriales: nítidos a cualquier tamaño, del
   color que diga el CSS, y no cargan ningún archivo extra. */

/* ── ESCRITORIO: círculo dorado sólido, icono oscuro ── */
.cpc-icon {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--dorado);
  border-radius: 50%;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cpc-icon svg {
  width: 19px;
  height: 19px;
  stroke: #111;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Los logos de marca (WhatsApp, X, el punto de Instagram) son siluetas
   rellenas, no dibujos de trazo */
.cpc-icon svg .relleno {
  fill: #111;
  stroke: none;
}

.cpc-icono:hover .cpc-icon,
.cpc-icono:focus-visible .cpc-icon {
  transform: scale(1.12);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.55);
}

/* ── MÓVIL: al revés. La barra ya es dorada, así que el círculo va oscuro
      y el icono dorado. Un círculo dorado sobre dorado no se vería. ── */
.ci-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141414;
  border-radius: 50%;
  flex-shrink: 0;
}

.ci-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--dorado);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ci-icon svg .relleno {
  fill: var(--dorado);
  stroke: none;
}

/* Ajuste de tamaño en móvil.
   Va AQUÍ, al final, y no dentro del bloque móvil de más arriba, porque las
   reglas base de .ci-icon se escriben después de aquel: al tener la misma
   especificidad, gana la última del archivo. Puesto arriba no surtía efecto
   y los seis iconos ocupaban 371 de los 375 px de un teléfono. */
@media screen and (max-width: 768px) {
  .ci-icon {
    width: 28px;
    height: 28px;
  }

  .ci-icon svg {
    width: 15px;
    height: 15px;
  }
}

/* Separación entre título y artista en móvil.
   Va al final por el mismo motivo que los iconos: las reglas base se
   escriben más abajo que el bloque móvil de arriba y, con igual
   especificidad, gana la última del archivo. */
@media screen and (max-width: 768px) {
  .datos-tema {
    gap: 3px;
  }
}

/* ================================================= */
/* === 15. ZONA SEGURA EN iPHONE === */
/* ================================================= */
/* Cuando alguien añade la web a la pantalla de inicio del iPhone, se abre en
   modo aplicación y —por la meta apple-mobile-web-app-status-bar-style con
   valor black-translucent— el contenido puede quedar debajo de la barra de
   estado y del indicador inferior.

   env(safe-area-inset-*) devuelve 0 en un navegador normal, así que estas
   reglas no afectan a nadie más: solo reservan sitio donde de verdad lo
   necesitan. */

@media (display-mode: standalone) {
  .banner-movil,
  .encabezado {
    padding-top: env(safe-area-inset-top, 0px);
  }
}

/* La marquesina va fija abajo: en los iPhone con barra de gestos hay que
   separarla o queda medio tapada. */
.marquesina {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(40px + env(safe-area-inset-bottom, 0px));
}

@media screen and (max-width: 768px) {
  .marquesina {
    height: calc(26px + env(safe-area-inset-bottom, 0px));
  }
}


/* ================================================= */
/* === 16. MOVIL: BARRA DE CONTACTO FIJA === */
/* ================================================= */
/* La marquesina va fija al fondo, asi que flota sobre todo lo demas. La barra
   dorada de contacto, al ir en el flujo normal, acababa justo debajo y la
   marquesina la tapaba: se veian los iconos a traves del texto de las
   noticias.
   
   Intente resolverlo recortando huecos y quitandole el "fixed" a la
   marquesina, y ninguna de las dos cosas funciono bien. La solucion buena es
   que la barra tambien sea fija, apoyada justo encima de la marquesina. Asi
   las dos se ven siempre, no pueden solaparse en ningun tamano de pantalla, y
   el contenido pasa por debajo al hacer scroll. Es ademas el mismo
   planteamiento que ya usa el PC. */
@media screen and (max-width: 768px) {
  .contacto-movil {
    position: fixed;
    left: 0;
    right: 0;
    /* Justo encima de la marquesina, contando la barra de gestos del iPhone */
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    /* Por encima de la marquesina, que tiene 997 */
    z-index: 998;
    border-radius: 0;
    margin: 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.45);
  }

  /* Sitio al final para que la barra y la marquesina no tapen el contenido */
  .contenido {
    padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px));
  }
}

/* ================================================= */
/* === 18. NADA DE :hover EN PANTALLAS TACTILES === */
/* ================================================= */
/* En un movil no hay raton. Cuando un elemento tiene estilos :hover, iOS
   puede tratar el primer toque como "pasar por encima" y exigir un segundo
   toque para activarlo de verdad. En un boton de play eso se traduce en
   "no funciona".
   
   Aqui se anulan esos efectos donde no hay raton. La marquesina ya lo tenia
   resuelto; esto cubre el resto. */
@media (hover: none), (pointer: coarse) {
  .btn-play:hover        { transform: none; }
  .historial-label:hover { background: none; }
  .icono:hover           { transform: none; }
  .cpc-icono:hover       { background: none; }
  .cpc-icono:hover .cpc-icon { transform: none; box-shadow: none; }
  .direccion-maps:hover  { color: var(--dorado); }
}