.titulo_princ{
    font-size: 52pt;
    font-weight: bold;
    padding: 0;
}
.logofrecuenciaglobal{
    padding-top: .5rem;
    padding-left: .7rem;
    max-width: 50%;
}
.logoripods_a{
    padding-top: .1rem;
    padding-bottom: .5rem;
    max-width: 40%;        
}
.logofrecuenciaglobal2{
    max-width: 70%;
}

.header-diseno{
    background-image: url("../images/bandas/Franja.png");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #f8f9fa; 
}

/* Ajusta este valor según la altura total de tus dos barras superiores */
.pt-header-space {
  padding-top: 155px; 
}

/* Busca tu clase .vh-banner o las propiedades de la imagen y cámbiala a "contain" */
.vh-banner {
  height: 80vh;
/*  object-fit: contain !important; /* Fuerza a que la foto se muestre completa dentro del espacio */
  background-color: darkblue; /* Opcional: añade un fondo negro por si la foto no es lo suficientemente ancha */
}

@media (min-width: 768px) {
  .vh-banner {
    height: 80vh;
  }
}
.capa-info {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

/* Animación de parpadeo para el indicador en vivo */
@keyframes pulse {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

.animate-pulse {
  animation: pulse 1.5s infinite ease-in-out;
}

/* Ajuste para el contenedor de la derecha si es necesario por el nuevo tamaño */
.logo-extremo {
  min-width: 210px; /* Ampliamos un poco el ancho mínimo para que quepan holgadamente el reproductor y el logo juntos */
}
/* Controla la altura de las imágenes de las tarjetas de servicio */
/* Aumentamos la altura para que la imagen domine la tarjeta */
.contenedor-img-servicio {
  height: 260px; /* Puedes subirlo a 280px o 300px si quieres que sean más altas */
  overflow: hidden;
}
/* Crea una columna exacta para albergar 5 elementos alineados en PC */
@media (min-width: 992px) {
  .col-lg-5-cols {
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}

/* Altura ideal para que las 5 tarjetas horizontales se vean estilizadas */
.vh-tarjeta {
  height: 320px;
  object-fit: contain !important; /* Fuerza a que la foto se muestre completa dentro del espacio */
}

/* Fondo degradado oscuro para que resalte el texto */
.capa-info-tarjeta {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  transition: background 0.3s ease;
}

/* Animaciones fluidas que ya tenías */
.card-interactiva {
  transition: transform 0.3s ease;
}

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

.card-interactiva:hover img {
  transform: scale(1.03);
}

.card-interactiva img {
  transition: transform 0.3s ease;
}

.titulo-servicio {
  font-size: 22px !important; /* Ajusta el número en píxeles a tu gusto */
  color: whitesmoke;
}

/* Opcional: si quieres un tamaño diferente para celulares */
@media (max-width: 767.98px) {
  .titulo-servicio {
    font-size: 18px !important; 
  }
}

.contenedor-texto-carrusel {
  max-width: 450px; /* Evita que el texto pase de este ancho en PC */
  width: 100%;
}
.contenedor-texto-carrusel_ripodsstudio {
  max-width: 650px; /* Evita que el texto pase de este ancho en PC */
  width: 100%;
}
@media (max-width: 767.98px) {
  .contenedor-texto-carrusel {
    max-width: 80%; /* En móviles le da un margen extra para que no toque el borde */
  }
}
.contenedor-texto-carrusel_page {
  max-width: 650px; /* Evita que el texto pase de este ancho en PC */
  width: 100%;
}
.contenedor-texto-carrusel_page {
  max-width: 850px; /* Evita que el texto pase de este ancho en PC */
  width: 100%;
}
@media (max-width: 767.98px) {
  .contenedor-texto-carrusel_page {
    max-width: 80%; /* En móviles le da un margen extra para que no toque el borde */
  }
}
/* Hace que los botones de las flechas cambien ligeramente de opacidad al pasar el mouse */
.carousel-control-prev,
.carousel-control-next {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  opacity: 1; /* Brilla al 100% cuando pasas el cursor */
}
/* ==========================================
   ESTILOS COMPLEMENTARIOS DEL FOOTER Y WA
   ========================================== */

/* Botón flotante de WhatsApp */
.btn-whatsapp {
  position: fixed;
  bottom: 25px;       /* Distancia desde abajo */
  right: 25px;        /* Distancia desde la derecha */
  width: 60px;
  height: 60px;
  background-color: #25d366; /* Color oficial de WhatsApp */
  color: #fff !important;
  border-radius: 50%;
  font-size: 32px;    /* Tamaño del icono */
  z-index: 2000;      /* Se asegura de flotar por encima de carruseles y tarjetas */
  transition: transform 0.3s ease, background-color 0.3s ease;
  text-decoration: none;
}

/* Efecto hover en el botón de WhatsApp (Crecimiento y cambio de color) */
.btn-whatsapp:hover {
  transform: scale(1.1) rotate(5deg);
  background-color: #20ba5a;
}

/* Animaciones e interacciones del Footer */
.link-footer {
  transition: color 0.2s ease;
}
.link-footer:hover {
  color: #ffc107 !important; /* Cambia a color amarillo/warning de Bootstrap al pasar el cursor */
}

.link-redes {
  transition: transform 0.2s ease, color 0.2s ease;
  display: inline-block;
}
.link-redes:hover {
  transform: translateY(-3px);
  color: #ffc107 !important;
}

/* Controla el tamaño exacto de los iconos de redes en el footer */
.logo-redes-footer {
  width: 55px;       /* Ajusta los píxeles a tu gusto (35px o 40px queda excelente) */
  height: 55px;
  object-fit: contain;
  transition: transform 0.2s ease;
}

/* Contenedor del enlace para que mantenga un comportamiento flex limpio */
.link-logo-redes {
  display: inline-block;
  line-height: 1;
}

/* Efecto hover: el logo se eleva un poco al pasar el cursor */
.link-logo-redes:hover .logo-redes-footer {
  transform: translateY(-3px);
}

/* ==========================================================
   PERSONALIZACIÓN DE TOOLTIPS (POPUPS) A COLOR NARANJA
   ========================================================== */
.tooltip {
  /* Cambia el color de fondo de la burbuja (puedes usar tu código hexadecimal exacto) */
  --bs-tooltip-bg: #ff6a00; 
  
  /* Cambia el color del texto dentro del popup (oscuro para que contraste con el naranja) */
  --bs-tooltip-color: #111111; 
  
  /* Opcional: Hace que el texto sea un poco más grueso y legible */
  font-weight: 600;
  
  /* Opcional: Agrega un borde sutil para darle más definición */
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}

/* Fuerza a la pequeña flecha del popup a tomar también el color naranja */
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--bs-tooltip-bg) !important;
}
.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--bs-tooltip-bg) !important;
}
.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--bs-tooltip-bg) !important;
}
.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--bs-tooltip-bg) !important;
}