/* ================================================================
   ESTILOS PERSONALIZADOS
   Hoja de estilos externa de "En Buena Vibra — Producciones José Mendoza"
   ================================================================ */

/* Desplazamiento suave al navegar por anclas (p. ej. "#programas") */
html {
  scroll-behavior: smooth;
}

/* Evita que las secciones queden ocultas bajo encabezados al anclar */
section[id] {
  scroll-margin-top: 1.25rem;
}

/* Tipografías por defecto: Poppins para el cuerpo, Yeseva One para títulos */
body {
  font-family: 'Poppins', sans-serif;
}

h1, h2, h3, .font-serif {
  font-family: 'Yeseva One', serif;
}

/* Línea separadora discontinua (sobre fondos claros) */
.dashed {
  border-top: 2px dashed rgba(0, 41, 107, 0.35);
}

/* Línea separadora discontinua clara (sobre fondos oscuros) */
.dashed-light {
  border-top: 2px dashed rgba(250, 240, 202, 0.4);
}

/* Franja decorativa de puntos con degradado de colores de marca */
.dot-strip {
  height: 34px;
  background: linear-gradient(90deg, #C778D5, #00296B 50%, #488047);
  -webkit-mask-image: radial-gradient(circle, black 1.6px, transparent 1.7px);
  -webkit-mask-size: 13px 13px;
  mask-image: radial-gradient(circle, black 1.6px, transparent 1.7px);
  mask-size: 13px 13px;
}

/* Variante de la franja con el degradado invertido */
.dot-strip.reverse {
  background: linear-gradient(90deg, #488047, #00296B 50%, #C778D5);
}

/* Línea delgada con degradado, se usa junto a los títulos de sección */
.grad-line {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #C778D5, #488047);
}

/* Fondo degradado para los botones de llamada a la acción */
.cta-gradient {
  background: linear-gradient(90deg, #C778D5 0%, #00296B 30%, #00296B 70%, #488047 100%);
}

/* Botón circular de redes sociales */
.social-icon {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--navy, #00296B);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FAF0CA;
  transition: transform .15s ease, background .2s ease;
}

/* Efecto al pasar el mouse: el icono se eleva y aclara */
.social-icon:hover {
  transform: translateY(-2px);
  background: #0E3A8C;
}

/* Tamaño de los iconos SVG dentro de los botones sociales */
.social-icon svg {
  width: 20px;
  height: 20px;
}

/* Fondo del HERO: dos resplandores radiales sobre degradado azul marino */
.hero-bg {
  background:
    radial-gradient(ellipse 700px 380px at 75% 8%, rgba(199, 120, 213, .35), transparent 60%),
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(14, 58, 140, .55), transparent 65%),
    linear-gradient(180deg, #0E3A8C 0%, #06245C 45%, #00296B 100%);
}

/* Siluetas decorativas de montañas (capas del fondo del HERO) */
.mountain {
  fill: rgba(250, 240, 202, 0.06);
}

.mountain-2 {
  fill: rgba(250, 240, 202, 0.1);
}

/* Tarjetas de programas: animación sutil al pasar el mouse */
.card {
  transition: transform .18s ease;
}

.card:hover {
  transform: translateY(-3px);
}

/* Imagen del programa en la tarjeta del carrusel */
.card__img {
  width: 100%;
  height: 128px;
  border-radius: 1rem;
  overflow: hidden;
}

.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Círculo de icono con el degradado del programa (tarjetas sin imagen) */
.card__icon {
  background: linear-gradient(135deg, var(--tone), var(--tone-deep));
  color: #FAF0CA;
}

/* Conductores del programa en la tarjeta del carrusel */
.card__host {
  margin: -12px 0 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--tone-deep);
}

/* Variante para tarjetas de radio (fondo navy oscuro) */
.card__host--dark {
  color: #FAF0CA;
  opacity: .85;
}

/* ================================================================
   ACCESIBILIDAD Y FOCO
   ================================================================ */

/* Botones nativos: muestran el cursor de enlace */
button {
  cursor: pointer;
}

/* Enlace para saltar al contenido: oculto hasta recibir foco por teclado */
.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 999;
  padding: .8rem 1.25rem;
  background: #00296B;
  color: #FAF0CA;
  font-weight: 600;
  border-radius: 0 0 .5rem 0;
}

.skip-link:focus {
  left: 0;
}

/* Destino del salto (main): sin borde molesto al recibir foco */
main[id] {
  outline: none;
}

/* Indicador de foco visible para todos los elementos interactivos */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-magenta-deep, #A43CC2);
  outline-offset: 2px;
}

/* ================================================================
   CARRUSEL
   ================================================================ */
.carousel {
  position: relative;
}

.carousel-viewport {
  overflow: hidden;
}

/* Pista que se desplaza con transform */
.carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform .4s ease;
  will-change: transform;
}

/* Cada tarjeta ocupa el ancho completo en móvil y fracciones en pantallas mayores */
.carousel-slide {
  flex: 0 0 100%;
  min-width: 0;
}

@media (min-width: 640px) {
  .carousel-slide {
    flex-basis: calc(50% - .75rem);
  }
}

@media (min-width: 1024px) {
  .carousel-slide {
    flex-basis: calc(33.333% - 1rem);
  }
}

/* Flechas de navegación */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: #FAF0CA;
  color: #00296B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 41, 107, .25);
  transition: background .15s ease, color .15s ease;
  z-index: 10;
}

.carousel-btn:hover {
  background: #C778D5;
  color: #FAF0CA;
}

.carousel-btn.prev {
  left: -12px;
}

.carousel-btn.next {
  right: -12px;
}

/* Indicadores (puntos): el área de clic es mayor que el punto visible */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem;
}

.carousel-dots button {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.carousel-dots button::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: rgba(0, 41, 107, .25);
  transition: background .2s ease, width .2s ease;
}

.carousel-dots button:hover::after {
  background: rgba(0, 41, 107, .45);
}

.carousel-dots button.active::after {
  background: #488047;
  width: 24px;
}

/* En la sección de televisión (fondo navy) los puntos inactivos se aclaran
   para mantener contraste suficiente sobre el fondo oscuro */
.bg-navy .carousel-dots button::after {
  background: rgba(250, 240, 202, .25);
}

.bg-navy .carousel-dots button:hover::after {
  background: rgba(250, 240, 202, .45);
}

.bg-navy .carousel-dots button.active::after {
  background: #6BBF5E;
  width: 24px;
}

/* ================================================================
   REPRODUCTOR FLOTANTE DE RADIO EN VIVO
   ================================================================ */
.radio-player {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 10px;
  background: #0E3A8C;
  color: #FAF0CA;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 41, 107, .35);
}

.radio-player__toggle {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: var(--color-magenta-deep, #A43CC2);
  color: #FAF0CA;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.radio-player__toggle:hover {
  background: #488047;
  transform: scale(1.05);
}

.radio-player__toggle svg {
  width: 18px;
  height: 18px;
}

/* Icono de pausa oculto hasta reproducir */
.radio-player__icon-pause {
  display: none;
}

.radio-player.is-playing .radio-player__icon-play {
  display: none;
}

.radio-player.is-playing .radio-player__icon-pause {
  display: block;
}

.radio-player__name {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
}

.radio-player__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #E5B4F2;
}

/* Punto indicador de transmisión: se atenúa en pausa y pulsa solo al reproducir */
.radio-player__live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: rgba(72, 128, 71, 0.35);
  transition: background .2s ease;
}

.radio-player.is-playing .radio-player__live::before {
  background: #488047;
  animation: radio-pulse 1.2s ease-in-out infinite;
}

@keyframes radio-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* En móvil el reproductor ocupa casi todo el ancho */
@media (max-width: 480px) {
  .radio-player {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }
}

/* ================================================================
   TARJETA DEL REPRODUCTOR (sección "Radio Online")
   ================================================================ */
.radio-card-btn {
  width: 64px;
  height: 64px;
  border-radius: 9999px;
  background: var(--color-magenta-deep, #A43CC2);
  color: #FAF0CA;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  flex-shrink: 0;
  margin: .25rem;
}

.radio-card-btn:hover {
  background: #488047;
  transform: scale(1.05);
}

.radio-card-btn svg {
  width: 24px;
  height: 24px;
}

.radio-card-btn__pause {
  display: none;
}

.radio-card-btn.is-playing .radio-card-btn__play {
  display: none;
}

.radio-card-btn.is-playing .radio-card-btn__pause {
  display: block;
}

.radio-card-name {
  font-weight: 700;
  font-size: 16px;
}

.radio-card-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #488047;
}

.radio-card-live::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #488047;
}

.radio-card.is-playing .radio-card-live::before {
  animation: radio-pulse 1.2s ease-in-out infinite;
}

/* Barras de ecualizador: decorativas, se animan al reproducir */
.radio-card-eq {
  align-items: center;
  gap: 4px;
}

.radio-card-eq span {
  width: 4px;
  height: 10px;
  border-radius: 2px;
  background: rgba(0, 41, 107, .25);
  transform-origin: bottom;
}

.radio-card-eq span:nth-child(2) {
  height: 16px;
}

.radio-card-eq span:nth-child(3) {
  height: 12px;
}

.radio-card.is-playing .radio-card-eq span {
  background: #488047;
  animation: radio-eq 1.1s ease-in-out infinite;
}

.radio-card.is-playing .radio-card-eq span:nth-child(2) {
  animation-delay: .15s;
}

.radio-card.is-playing .radio-card-eq span:nth-child(3) {
  animation-delay: .3s;
}

@keyframes radio-eq {
  0%, 100% { transform: scaleY(.6); }
  50% { transform: scaleY(1); }
}

/* ================================================================
   MODALES DE PROGRAMAS
   ================================================================ */

/* Colores por programa (provisionales, reemplazar cuando se fijen).
   Cada programa define dos variables: --tone (color de acento) y
   --tone-deep (tono oscuro). A partir de ellas se compone el degradado
   --grad que se aplica en tarjetas, cabeceras, iconos y botones. */
.modal[data-theme="enbuenavibra"],
.card[data-theme="enbuenavibra"] { --tone: #e0824c; --tone-deep: #295c77; }
.modal[data-theme="musica"],
.card[data-theme="musica"]       { --tone: #ffcb3a; --tone-deep: #c9387b; }
.modal[data-theme="panas"],
.card[data-theme="panas"]       { --tone: #f3732c; --tone-deep: #f94045; }
.modal[data-theme="espiritual"],
.card[data-theme="espiritual"]   { --tone: #0dc3c7; --tone-deep:  #112353; }
.modal[data-theme="venezuela"],
.card[data-theme="venezuela"]    { --tone: #2F5E2E; --tone-deep: #1F421F; }
.modal[data-theme="cosas"],
.card[data-theme="cosas"]        { --tone: #ebd3d3; --tone-deep: #ea768b; }
.modal[data-theme="artes"],
.card[data-theme="artes"]        { --tone: #bd804d; --tone-deep: #000000; }
.modal[data-theme="conexion"],
.card[data-theme="conexion"]     { --tone: #6A55A8; --tone-deep: #4D3C83; }
.modal[data-theme="entrenos"],
.card[data-theme="entrenos"]     { --tone: #c9387b; --tone-deep: #1c67ab; }

/* Degradado del programa: va del acento claro al tono profundo */
.modal[data-theme],
.card[data-theme] {
  --grad: linear-gradient(135deg,
          color-mix(in srgb, var(--tone) 70%, #FAF0CA),
          var(--tone-deep) 75%,
          var(--tone));
}

/* Contenedor fijo a pantalla completa (fondo oscurecido y difuminado) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal[hidden] {
  display: none;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 41, 107, .55);
  backdrop-filter: blur(3px);
}

/* Tarjeta del modal: centrada, con el color del programa en la cabecera */
.modal__card {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: min(85vh, 640px);
  overflow-y: auto;
  background: #FAF0CA;
  color: #00296B;
  border-radius: 1.25rem;
  box-shadow: 0 24px 60px rgba(0, 41, 107, .45);
  animation: modal-in .25s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Imagen de cabecera del programa en el modal */
.modal__banner {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 1.25rem 1.25rem 0 0;
}

.modal__header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  color: #FAF0CA;
  background: linear-gradient(135deg, var(--tone-deep), var(--tone));
}

.modal__icon {
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--tone), var(--tone-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal__icon svg {
  width: 26px;
  height: 26px;
}

.modal__heading {
  flex: 1;
  min-width: 0;
}

.modal__kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
}

.modal__title {
  font-family: 'Yeseva One', serif;
  font-size: 1.5rem;
  line-height: 1.1;
}

.modal__close {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: rgba(250, 240, 202, .18);
  color: #FAF0CA;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}

.modal__close:hover {
  background: rgba(250, 240, 202, .3);
}

.modal__body {
  padding: 1.5rem 1.5rem 1rem;
}

.modal__desc {
  font-size: 1rem;
  line-height: 1.7;
}

/* Conductores del programa en el modal */
.modal__host {
  margin-top: 1rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--tone-deep);
}

.modal__host-label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  color: var(--tone);
}

.modal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}

.modal__chip {
  padding: .4rem .9rem;
  border-radius: 9999px;
  background: color-mix(in srgb, var(--tone) 12%, transparent);
  color: var(--tone-deep);
  font-size: .8rem;
  font-weight: 600;
}

.modal__footer {
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  padding: 0 1.5rem 1.5rem;
}

.modal__btn {
  padding: .65rem 1.4rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: .9rem;
  border: none;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}

.modal__btn--primary {
  background: linear-gradient(135deg, var(--tone), var(--tone-deep));
  color: #FAF0CA;
}

.modal__btn--primary:hover {
  opacity: .9;
}

.modal__btn--close {
  background: rgba(0, 41, 107, .08);
  color: #00296B;
}

.modal__btn--close:hover {
  background: rgba(0, 41, 107, .16);
}

/* Bloquea el desplazamiento de la página mientras hay un modal abierto */
body.modal-open {
  overflow: hidden;
}

/* Respeta la preferencia del usuario: desactiva las animaciones */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ================================================================
   RADIO PLAYER LOADING SPINNER
   ================================================================ */
.radio-player__loader{
  display:none;
  width:20px;
  height:20px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:ebv-spin 0.8s linear infinite;
  margin-left:8px;
  flex-shrink:0;
}
.radio-player__toggle{display:inline-flex;align-items:center;gap:8px;}
.radio-player__toggle.is-loading .radio-player__icon-play,
.radio-player__toggle.is-loading .radio-player__icon-pause{display:none;}
.radio-player__toggle.is-loading .radio-player__loader{display:block;}
.radio-player.is-loading .radio-player__toggle .radio-player__icon-play,
.radio-player.is-loading .radio-player__toggle .radio-player__icon-pause{display:none;}
.radio-player.is-loading .radio-player__toggle .radio-player__loader{display:block;}

@keyframes ebv-spin{
  to{transform:rotate(360deg);}
}