.modal.modal-video .modal-body {
    overflow: hidden;
}
.mini-program-description {
    display: block;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

/* .main-body {
    background-color: var(--main-body-bg);
    background-image: url("https://latinohitsradio.com/wp-content/uploads/2024/12/bg.png");
    background-repeat: repeat;
    background-position: center top;
    background-size: auto;
} */

.volume-dropdown {
    position: absolute;
    left: 50%;
    bottom: 100%;
    padding: 0.75rem;
    border-radius: 9999px;
    background-color: #fbfbfb;
    transform: translate(-50%, 0);
    box-shadow: var(--box-shadow-high);
    transition: opacity var(--player-duration), transform var(--player-duration);
}


.player-equalizer {
    border-radius: 0.5rem;
    overflow: hidden;
}
.modal-article-title{

    font-weight: 800;

}

.mobile-menu-list {
    font-size: 12px;
    font-weight: 600;
    gap: 12px;
}


.player.is-static {
    position: static;
}

.player.is-static .player-desc .artist-name {
    background-color: #000;
    font-weight: 800;
    padding: 0.25rem 0.5rem;
}

.modal-content {
    background-color: #4216F2;
    width: 100%;
    padding: 10px;
    max-width: 900px;
    border-radius: 15px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: modalOpen var(--player-duration) ease;
}

.btn {

    font-weight: 700;

}

body {
    min-height: 100vh;
    /* asegura que cubra toda la pantalla */
    /* background: url("assets/bg.png") no-repeat center center fixed;
    background-size: cover; */
    /* ajusta la imagen para cubrir todo */
}

/* .player:not(.is-static) {
    --container-width: 1250px;
} */

/*.install-buttons-wrapper {

    background-color: #ffffff0d;
        -webkit-backdrop-filter: blur(1rem);
        backdrop-filter: blur(1rem);
}

.install-botton .install-button{
    align-items: center;
    gap: var(--button-gap, .5rem);
    padding: var(--button-padding, .75rem);
    text-transform: uppercase;
    transition: transform var(--duration);
    white-space: nowrap;
    background-color: rgba(255, 255, 255, .25);
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
    display: flex;
}

.install-botton .install-button {
    text-transform: capitalize;
    --btn-bg: #fff;
    --btn-color: #ffffff;
}

.install-botton .install-button:hover {
    transform: scale(1.1);
}

/*.install-botton .install-button {
    transition: transform 0.3s ease;

}*/

/* Locutores: tarjetas más pequeñas y compactas */
.swiper-team {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: -1rem;
    margin-bottom: -1rem;
}

.swiper-team .team-item {
    aspect-ratio: 4 / 5.2;
    border-radius: 0.45rem;
}

.swiper-team .team-content {
    padding: 0.65rem;
}

.swiper-team .team-title {
    font-size: 0.82rem;
    line-height: 1.05;
    padding: 0.32rem 0.45rem;
}

.swiper-team .team-description {
    font-size: 0.68rem;
    line-height: 1.05;
    padding: 0.18rem 0.4rem;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swiper-team .swiper-button-prev,
.swiper-team .swiper-button-next,
.team-wrapper .swiper-button-prev,
.team-wrapper .swiper-button-next {
    width: 30px;
    height: 30px;
}

/* Si Swiper/CDN no carga, igual se muestran pequeñas en modo grilla */
.swiper-team:not(.swiper-initialized) .team {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.swiper-team:not(.swiper-initialized) .team-item {
    width: 100% !important;
}

@media (min-width: 768px) {
    .swiper-team:not(.swiper-initialized) .team {
        grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .swiper-team .team-content {
        padding: 0.5rem;
    }

    .swiper-team .team-title {
        font-size: 0.76rem;
    }

    .swiper-team .team-description {
        font-size: 0.62rem;
    }
}

/* Ajuste v5: locutores grandes, máximo 4 visibles y flechas laterales */
.team-wrapper {
    position: relative;
    padding-left: 46px;
    padding-right: 46px;
}

.swiper-team {
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    margin-top: -1.6rem;
    margin-bottom: -1.6rem;
}

.swiper-team .team-item {
    aspect-ratio: 5 / 7;
    border-radius: 0.65rem;
}

.swiper-team .team-content {
    padding: 1rem;
}

.swiper-team .team-title {
    font-size: 1rem;
    line-height: 1.12;
    padding: 0.46rem 0.65rem;
}

.swiper-team .team-description {
    font-size: 0.82rem;
    line-height: 1.12;
    padding: 0.28rem 0.55rem;
}

.team-wrapper .swiper-prev-team,
.team-wrapper .swiper-next-team {
    display: grid !important;
    width: 38px;
    height: 38px;
    top: 50%;
    z-index: 20;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.82);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.team-wrapper .swiper-prev-team {
    left: 0;
}

.team-wrapper .swiper-next-team {
    right: 0;
}

.team-wrapper .swiper-prev-team::after,
.team-wrapper .swiper-next-team::after {
    font-size: 15px;
    font-weight: 800;
}

/* Si Swiper no carga, se mantiene en 4 columnas grandes en escritorio */
.swiper-team:not(.swiper-initialized) .team {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1099px) {
    .swiper-team:not(.swiper-initialized) .team {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .team-wrapper {
        padding-left: 38px;
        padding-right: 38px;
    }

    .swiper-team:not(.swiper-initialized) .team {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .swiper-team .team-content {
        padding: 0.75rem;
    }

    .swiper-team .team-title {
        font-size: 0.9rem;
    }

    .swiper-team .team-description {
        font-size: 0.72rem;
    }
}

/* Logo principal local en PNG */
.header-logo {
  display: flex;
  align-items: center;
}
.header-brand {
  height: 64px !important;
  width: auto !important;
  max-width: 210px;
  object-fit: contain;
}
@media (max-width: 767px) {
  .header-brand {
    height: 52px !important;
    max-width: 165px;
  }
}

/* Fix logo PNG color */
.header-brand { filter: none !important; }

/* Header/cabecera con color manual: no depende del color del panel */
:root {
  --manual-header-bg: #2a2b2a;
  --manual-header-top-bg: #000000;
}

.header,
.header-wrapper,
.header-container,
.header-upper-wrapper {
  background-color: var(--manual-header-bg) !important;
  background-image: none !important;
}

.header-top,
.header-top-wrapper {
  background-color: var(--manual-header-top-bg) !important;
  background-image: none !important;
}

.header.header-fixed,
.header.header-fixed .header-wrapper,
.header.header-fixed .header-container {
  background-color: var(--manual-header-bg) !important;
  background-image: none !important;
}

/* El fondo lateral/abajo queda con el color que llega desde el panel.
   El blanco del contenido central NO se toca. */
body {
  background-color: var(--body-bg) !important;
}

.main-body {
  background-color: #ffffff !important;
}

/* Ajuste solicitado: player de arriba más cerca de la cabecera
   y fondo del bloque superior del mismo color del header */
#section-inicio {
  padding-top: 0.45rem !important;
}

.hero-player {
  background-color: var(--manual-header-bg) !important;
}

/* Mantiene el efecto, pero mucho más suave para que predomine el verde */
.hero-player-parallax {
  opacity: 0.35 !important;
}
.hero-player-parallax img {
  opacity: 0.10 !important;
}

/* Separacion limpia entre header y tarjeta del player */
#section-inicio {
  padding-top: 1.35rem !important;
}

@media (max-width: 767px) {
  #section-inicio {
    padding-top: 1rem !important;
  }
}

/* V12: separación REAL entre la cabecera y la tarjeta verde del player.
   Antes no se notaba porque header y player tienen el mismo verde. */
#section-inicio {
  padding-top: 0 !important;
}

#section-inicio .hero-header {
  padding-top: 22px !important;
}

#section-inicio .hero-player {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  #section-inicio .hero-header {
    padding-top: 14px !important;
  }
}

/* V13: espacio visible de verdad entre cabecera y tarjeta del player */
.main-body {
  background-color: #ffffff !important;
  padding-top: 26px !important;
}

#section-inicio {
  padding-top: 0 !important;
}

#section-inicio .hero-header {
  padding-top: 0 !important;
}

#section-inicio .hero-player {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  .main-body {
    padding-top: 18px !important;
  }
}


/* v14: un poquito más separado entre header y player */
.main-body {
  background-color: #ffffff !important;
  padding-top: 38px !important;
}

@media (max-width: 767px) {
  .main-body {
    padding-top: 28px !important;
  }
}

#section-inicio {
  padding-top: 0 !important;
}

#section-inicio .hero-header {
  padding-top: 0 !important;
}


/* v15 - locutores más modernos */
.team-wrapper {
  position: relative;
  padding-left: 52px;
  padding-right: 52px;
}

.swiper-team .team-item {
  aspect-ratio: 5 / 6.5;
  border-radius: 1.2rem;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 35px rgba(15, 23, 42, 0.20);
}

.swiper-team .team-image {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

.swiper-team .team-image img {
  filter: none;
  transform: scale(1);
  transition: transform 0.45s ease;
}

.swiper-team .team-item:hover .team-image img {
  transform: scale(1.06);
  filter: none;
}

.swiper-team .team-content {
  padding: 1rem 1rem 1.05rem;
  gap: 0.45rem;
  background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.22) 16%, rgba(15,23,42,0.82) 62%, rgba(2,6,23,0.98) 100%);
}

.swiper-team .team-title {
  background: #ffffff;
  color: #0f172a;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1.1;
  font-weight: 800;
  padding: 0.5rem 0.85rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.swiper-team .team-description {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.38rem 0.7rem;
  max-width: max-content;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.team-wrapper .swiper-prev-team,
.team-wrapper .swiper-next-team {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

.team-wrapper .swiper-prev-team::after,
.team-wrapper .swiper-next-team::after {
  font-size: 16px;
  font-weight: 900;
}

/* Celular: una tarjeta debajo de otra */
@media (max-width: 767px) {
  .team-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .swiper-team.team-mobile-list {
    overflow: visible !important;
  }

  .swiper-team.team-mobile-list .team {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
    transform: none !important;
  }

  .swiper-team.team-mobile-list .team-item {
    width: 100% !important;
    margin-right: 0 !important;
    aspect-ratio: auto;
    min-height: 320px;
    opacity: 1 !important;
    transform: none !important;
  }

  .swiper-team.team-mobile-list .team-image {
    height: 320px;
  }

  .swiper-team.team-mobile-list .team-content {
    padding: 0.95rem;
  }

  .swiper-team.team-mobile-list .team-title {
    font-size: 1rem;
  }

  .swiper-team.team-mobile-list .team-description {
    font-size: 0.74rem;
  }

  .team-wrapper .swiper-prev-team,
  .team-wrapper .swiper-next-team {
    display: none !important;
  }
}


/* v16 - FORZAR LOCUTORES EN CELULAR: una tarjeta debajo de otra */
@media (max-width: 767px) {
  #section-team .team-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }

  #section-team .swiper-team {
    overflow: visible !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #section-team .swiper-team .team,
  #section-team .swiper-team .team.swiper-wrapper,
  #section-team #team {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }

  #section-team .swiper-team .team-item,
  #section-team .swiper-team .swiper-slide,
  #section-team #team .team-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    aspect-ratio: auto !important;
    min-height: 340px !important;
    border-radius: 1.1rem !important;
  }

  #section-team .team-image {
    height: 340px !important;
  }

  #section-team .team-image img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }

  #section-team .team-content {
    padding: 1rem !important;
  }

  #section-team .team-title {
    font-size: 1rem !important;
  }

  #section-team .team-description {
    font-size: 0.74rem !important;
  }

  #section-team .swiper-prev-team,
  #section-team .swiper-next-team,
  #section-team .swiper-button-prev,
  #section-team .swiper-button-next {
    display: none !important;
  }
}


/* v17 - Header, menú y pie de página con el mismo color */
:root {
  --manual-header-bg: #000000;
  --manual-header-top-bg: #000000;
}

.header,
.header-top,
.header-top-wrapper,
.header-wrapper,
.header-container,
.header-upper,
.header-upper-wrapper,
.header-menu-list,
.header.header-fixed,
.header.header-fixed .header-wrapper,
.header.header-fixed .header-container {
  background-color: var(--manual-header-bg) !important;
  background-image: none !important;
}

.header-menu-list a,
.header-date,
.header-socials a,
.btn-menu {
  color: #ffffff !important;
}

.header-menu-list a.is-active,
.header-menu-list a:hover {
  color: #ffffff !important;
}

.header-menu-list a.is-active::before,
.header-menu-list a::before {
  background-color: #ffffff !important;
}

.footer,
.footer-wrapper,
.footer-slogan {
  background-color: var(--manual-header-bg) !important;
  background-image: none !important;
  color: #ffffff !important;
}

.footer-text,
.footer-text a,
.footer-text strong {
  color: #ffffff !important;
}

#mobile-menu,
.mobile-menu-list {
  background-color: var(--manual-header-bg) !important;
  background-image: none !important;
}

.mobile-menu-list a,
.mobile-menu-list .icon {
  color: #ffffff !important;
}

.mobile-menu-list a.is-active {
  color: #ffffff !important;
  font-weight: 800;
}

.mobile-menu-list a.is-active::after {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: #ffffff;
  margin: 5px auto 0;
}


/* v18 - Player inferior con el mismo color del header, menú y footer */
.player,
#player-fixed,
.player-wrapper {
  background-color: var(--manual-header-bg) !important;
  background-image: none !important;
  color: #ffffff !important;
}

.player-equalizer {
  background-color: var(--manual-header-bg) !important;
  opacity: 1 !important;
}

.player-cover,
.player-bg-overlay,
.player-bg-wrapper {
  display: none !important;
}

.player-content,
.player-title,
.player-desc,
.player-station-name,
.player-station-desc,
.player-station-meta,
.player-vertical-text,
.player-live-badge,
.player-button svg,
.player-button-volume svg,
.player-stations-toggle,
.player-stations-toggle svg {
  color: #ffffff !important;
}

.player-picture-wrapper {
  border-color: #ffffff !important;
}

.player-button-play,
.player-button-volume,
.player-stations-toggle {
  background-color: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}

.player-button-play::before {
  background-color: rgba(255, 255, 255, 0.18) !important;
}

.player-button-play:hover,
.player-button-volume:hover,
.player-stations-toggle:hover {
  background-color: rgba(255, 255, 255, 0.28) !important;
}

.player .station-name,
.player .station-desc,
.player .fast-program-name,
.player .fast-program-desc,
.player .artist-name,
.player .song-now {
  color: #ffffff !important;
}

.player:not(.is-static) .player-desc .artist-name,
.player.is-static .player-desc .artist-name {
  background-color: rgba(0, 0, 0, 0.18) !important;
  color: #ffffff !important;
}

/* Menú inferior móvil encima del player también igual */
.mobile-menu,
#mobile-menu,
.mobile-menu-list {
  background-color: var(--manual-header-bg) !important;
  background-image: none !important;
}


/* v19 - fecha / hora / temperatura superior */
.header-date {
  min-height: 1.2em;
  font-weight: 700;
  letter-spacing: 0.01em;
}


/* v20 - Logo animado y header móvil con info a la izquierda y logo a la derecha */
@keyframes logoFloatPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
  }
  50% {
    transform: translateY(-3px) scale(1.045);
    filter: drop-shadow(0 8px 18px rgba(255, 255, 255, 0.45));
  }
}

.header-brand,
.header-top-logo-mobile {
  animation: logoFloatPulse 2.8s ease-in-out infinite;
  transform-origin: center;
  will-change: transform, filter;
}

.header-top-logo-mobile {
  display: none;
  width: auto;
  height: 52px;
  object-fit: contain;
}

@media (max-width: 767px) {
  .header-top-wrapper {
    min-height: 70px;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .header-top-left {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 95px) !important;
    min-width: 0;
    display: flex;
    align-items: center;
  }

  .header-date {
    display: block;
    width: 100%;
    font-size: 0.76rem !important;
    line-height: 1.15;
    text-align: left !important;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #ffffff !important;
  }

  .header-top-right {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 86px;
  }

  .header-top-logo-mobile {
    display: block !important;
    height: 58px;
    max-width: 86px;
  }

  .header-top-right .header-socials {
    display: none !important;
  }

  /* En celular el logo principal no se repite abajo; queda el logo animado arriba a la derecha */
  .header-wrapper .header-logo {
    display: none !important;
  }

  .header-wrapper {
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }

  .header-container,
  .header-left {
    width: 100%;
    justify-content: center !important;
  }

  .header-menu {
    width: 100%;
  }

  .header-menu-list {
    justify-content: center !important;
    gap: 0.72rem !important;
    flex-wrap: wrap;
  }
}

/* v21 - CELULAR: el bloque blanco queda pegado al verde de la cabecera */
@media (max-width: 767px) {
  /* En celular la cabecera ya ocupa su espacio normal.
     Así el blanco empieza inmediatamente debajo del verde. */
  .header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: var(--manual-header-bg) !important;
  }

  /* Mantiene visible la franja superior donde sale fecha/hora/logo */
  .header-top {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--manual-header-bg) !important;
  }

  .header-wrapper,
  .header-container,
  .header-top-wrapper {
    margin-bottom: 0 !important;
    border-bottom: 0 !important;
    background-color: var(--manual-header-bg) !important;
  }

  /* Quita el hueco que dejaba el header absoluto */
  .main {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  /* Este es el blanco pegado arriba al verde */
  .main-body {
    margin-top: 0 !important;
    padding-top: 8px !important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
  }

  #section-inicio,
  #section-inicio .hero-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
    background-color: #ffffff !important;
  }

  #section-inicio .hero-player {
    margin-top: 0 !important;
  }
}


/* v22 - CELULAR: cabecera como referencia
   Arriba: fecha a la izquierda + hamburguesa a la derecha en verde más oscuro.
   Abajo: logo centrado. */
@media (max-width: 767px) {
  .header,
  .header.header-fixed {
    margin-top: 0 !important;
    box-shadow: none !important;
  }

  .header-top,
  .header-top-wrapper {
    background-color: #363636 !important;
  }

  .header-top {
    display: block !important;
    padding: 0 !important;
  }

  .header-top-wrapper {
    min-height: 44px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 0.55rem 0 !important;
  }

  .header-top-left {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .header-date {
    display: block !important;
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: left !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .header-top-right,
  .header-top-logo-mobile {
    display: none !important;
  }

  .btn-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background-color: rgba(0, 0, 0, 0.18) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12) !important;
  }

  .btn-menu .icon {
    width: 20px !important;
    height: 20px !important;
  }

  .header-wrapper,
  .header-container {
    background-color: var(--manual-header-bg) !important;
  }

  .header-wrapper {
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
  }

  .header-container,
  .header-left {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
  }

  .header-wrapper .header-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 0 auto !important;
  }

  .header-wrapper .header-brand {
    display: block !important;
    height: 50px !important;
    max-width: 170px !important;
    margin: 0 auto !important;
  }

  /* El menú sigue abriéndose con la hamburguesa, pero no empuja el logo. */
  .header-menu {
    width: 0 !important;
    overflow: visible !important;
  }
}


/* v23 - CELULAR: evitar logo duplicado */
@media (max-width: 767px) {
  .header-wrapper .header-logo img + img,
  .header-wrapper .header-logo #brand-dark {
    display: none !important;
  }

  .header-wrapper .header-logo #brand-light,
  .header-wrapper .header-logo .header-brand:first-child {
    display: block !important;
  }
}


/* v24 - CELULAR: barra del logo anclada al deslizar */
@media (max-width: 767px) {
  /* En móvil, la franja del logo queda pegada arriba al hacer scroll. */
  .header,
  .header.header-fixed {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    margin-top: 0 !important;
  }

  .header-wrapper {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  }

  .header-container,
  .header-left,
  .header-wrapper .header-logo {
    position: relative;
    z-index: 2;
  }

  /* Evita que el efecto fijo del tema original interfiera en celular. */
  .header.header-fixed .header-wrapper,
  .header.header-fixed .header-container {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    margin-top: 0 !important;
  }
}


/* v25 - CELULAR: al hacer scroll, el logo sí queda fijo arriba */
@media (max-width: 767px) {
  /* Cuando JS agrega .header-fixed, fijamos TODA la cabecera.
     En v24 se usó sticky, pero el sticky no queda porque el header ya sale del flujo. */
  .header.header-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    margin: 0 !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Al deslizar solo queda la franja del logo, como la imagen de referencia. */
  .header.header-fixed .header-top {
    display: none !important;
  }

  .header.header-fixed .header-wrapper {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
    background-color: var(--manual-header-bg) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20) !important;
  }

  .header.header-fixed .header-container,
  .header.header-fixed .header-left {
    width: 100% !important;
    justify-content: center !important;
  }

  .header.header-fixed .header-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
  }

  .header.header-fixed .header-logo #brand-dark,
  .header.header-fixed .header-logo img + img {
    display: none !important;
  }

  .header.header-fixed .header-logo #brand-light,
  .header.header-fixed .header-logo .header-brand:first-child {
    display: block !important;
    height: 50px !important;
    max-width: 170px !important;
    margin: 0 auto !important;
  }

  /* Evita que el menú lateral aparezca dentro de la franja fija. */
  .header.header-fixed .header-menu {
    width: 0 !important;
    overflow: visible !important;
  }

  /* Al volver arriba, la cabecera recupera su posición normal. */
  .header:not(.header-fixed) {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }
}


/* v26 - CELULAR: mostrar logo arriba dentro del menú hamburguesa */
@media (max-width: 991px) {
  .header-menu-list {
    position: fixed !important;
    padding-top: 8.6rem !important;
  }

  .header-menu-list::before {
    content: "";
    position: absolute;
    top: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 178px;
    height: 82px;
    background-image: url("assets/logo.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
  }
}


/* v28 - CELULAR: reducir espacios en blanco debajo de ANUNCIE AQUÍ */
@media (max-width: 767px) {
  #section-slider {
    padding-top: 1rem !important;
    padding-bottom: 0.35rem !important;
  }

  #section-slider .section-heading {
    margin-bottom: 1rem !important;
    padding-bottom: 10px !important;
  }

  #section-slider .section-name .highlight::before {
    content: " ";
  }

  #section-slider .section-content,
  #section-slider .slider {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  #section-slider .slider-wrapper,
  #section-slider .swiper-banner {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 0.65rem !important;
    background: #000 !important;
  }

  #section-slider .swiper-wrapper,
  #section-slider .swiper-slide,
  #section-slider .slider-slide,
  #section-slider .swiper-slide a {
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
  }

  #section-slider .slider-image,
  #section-slider .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    background: #000 !important;
  }

  #section-slider .swiper-pagination,
  #section-slider .swiper-button-prev,
  #section-slider .swiper-button-next {
    display: none !important;
  }

  #section-tv-live {
    padding-top: 0.65rem !important;
  }
}


/* v29 - PC: franja superior (fecha/hora/temperatura) más oscura */
@media (min-width: 768px) {
  .header-top,
  .header-top-wrapper,
  .header.header-fixed .header-top,
  .header.header-fixed .header-top-wrapper {
    background-color: #f00078 !important;
    background-image: none !important;
  }
}

/* v32 - SLIDER SIN ZOOM: aplicar también en PC, tablet y celular */
#section-slider .slider,
#section-slider .section-content {
  overflow: visible !important;
}

#section-slider .slider-wrapper,
#section-slider .swiper-banner,
#section-slider .swiper-banner.slider-wrapper,
#section-slider .swiper-banner.simple-auto-slider {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border-radius: 1rem !important;
  background: transparent !important;
}

#section-slider .swiper-wrapper,
#section-slider .swiper-banner .swiper-wrapper,
#section-slider .swiper-banner.simple-auto-slider .swiper-wrapper {
  height: auto !important;
  min-height: 0 !important;
  align-items: flex-start !important;
}

#section-slider .swiper-slide,
#section-slider .swiper-banner .swiper-slide,
#section-slider .swiper-banner.simple-auto-slider .swiper-slide,
#section-slider .slider-slide {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: hidden !important;
}

#section-slider .swiper-slide a,
#section-slider .swiper-banner .swiper-slide a {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  line-height: 0 !important;
}

#section-slider .slider-image,
#section-slider .swiper-slide img,
#section-slider .swiper-banner .slider-image,
#section-slider .swiper-banner.simple-auto-slider .slider-image {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: transparent !important;
}


/* v33 - slider anuncios: mantener tamaño del bloque y mostrar la imagen completa sin zoom */
#section-slider .section-content {
  overflow: visible !important;
}

#section-slider .slider {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

#section-slider .slider-wrapper,
#section-slider .swiper-banner,
#section-slider .swiper-banner.slider-wrapper,
#section-slider .swiper-banner.simple-auto-slider {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  overflow: hidden !important;
  border-radius: 1rem !important;
  background: transparent !important;
}

#section-slider .swiper-wrapper,
#section-slider .swiper-banner .swiper-wrapper,
#section-slider .swiper-banner.simple-auto-slider .swiper-wrapper {
  display: flex !important;
  align-items: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
}

#section-slider .swiper-slide,
#section-slider .swiper-banner .swiper-slide,
#section-slider .swiper-banner.simple-auto-slider .swiper-slide,
#section-slider .slider-slide,
#section-slider .swiper-slide a,
#section-slider .swiper-banner .swiper-slide a {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: block !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

#section-slider .slider-image,
#section-slider .swiper-slide img,
#section-slider .swiper-banner .slider-image,
#section-slider .swiper-banner.simple-auto-slider .slider-image {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  background: transparent !important;
}

@media (max-width: 767px) {
  #section-slider .slider,
  #section-slider .slider-wrapper,
  #section-slider .swiper-banner {
    width: 100% !important;
    max-width: 100% !important;
  }
}