.index-page .header {
    --background-color: rgba(40, 58, 90, 0.5);
}
.header .logo img{
    max-height: 46px;
}
a.datos{
    color:black;
}

  /* Asegurar que el carrusel ocupe toda la pantalla */
   .carousel h1{
    color:#fff;
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;

    
   }
   .carousel p{
        color:  color-mix(in srgb, #fff, transparent 30%);
        margin: 5px 0 30px 0;
        font-size: 22px;
        line-height: 1.3;
        font-weight: 900;
   }
    .carousel, .carousel-inner, .carousel-item {
         min-height: 100vh;
        width: 100%;
    }
    .carousel-item img {
        object-fit: cover; /* Ajusta la imagen para cubrir todo el contenedor */
        min-height: 100vh;
        width: 100%;
    }
    /* Opcional: Oscurecer la imagen para mejor legibilidad del texto */
    .carousel-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3); /* Capa de oscurecimiento */
    }
    .carousel-caption {
        z-index: 10; /* Asegura que el texto esté sobre la capa de oscurecimiento */
    }   .carousel, .carousel-inner, .carousel-item {
        height: calc(100vh - 80px); /* Resta la altura estimada del nav */
        width: 100%;
    }
    .carousel-item img {
        object-fit: cover;
        height: calc(100vh - 80px);
        width: 100%;
    }
    .carousel-item::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3); /* Capa de oscurecimiento */
    }
    .carousel-caption {
        z-index: 10; /* Asegura que el texto esté sobre la capa de oscurecimiento */
        bottom: 40%;
    }

    .banner-secciones {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        
        height: 100vh; /* pantalla completa */
        position: relative;
    }
  

    .quienes-somos{
        background-image: url("../img/banner/quienes-somos.jpg");
        /*animation: slide 10s linear infinite;  Animación que dura 10 segundos, lineal y en bucle */
    }
     .instalaciones{
        background-image: url("../img/banner/instalaciones.jpg");
    }
    .chicos{
        background-image: url("../img/banner/chicos-2.webp");
       
    }
    .banner-secciones h1{
    color:#fff;
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;

    
   }
    .banner-actividades h1{
    color:#fff;
    margin: 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;

    
   }
    .banner-secundario {
    position: relative; /* necesario para usar ::before */
    height: calc(90vh - 40px);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #000;
    overflow: hidden;
    background-position: center;   /* posición de la imagen */
    background-repeat: no-repeat;  /* que no se repita */
    background-size: cover;        /* que cubra toda la caja */
    }

/* Overlay oscuro */
.banner-secundario::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); /* oscurito */
  z-index: 1; /* debajo del texto */
}

/* El div interior con el texto */
.banner-secundario > * {
  position: relative;
  z-index: 2; /* encima del overlay */
  color: #fff; /* texto visible */
  display: flex;
  flex-direction: column;
  align-items: center;
    max-width: 80%;
}

   .banner-secundario::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4); /* oscurito */
        z-index: 1;
    }
    .seccion-verano{
        background-image: url('../img/banner/colonia.webp');
        animation: zoomFondo 10s ease-in-out forwards;
    }
    .seccion-rehabilitacion{
        background-image: url('../img/banner/rehabilitacion.webp');
        animation: zoomFondo 10s ease-in-out forwards;
    }
    .seccion-intensivos{
        background-image: url('../img/banner/cursos.webp');
        animation: zoomFondo 10s ease-in-out forwards;
    }
    .seccion-cumple{
        background-image: url('../img/banner/cumple.webp');
        animation: zoomFondo 10s ease-in-out forwards;
    }
    .seccion-infantil{
        background-image: url('../img/banner/chicos.webp');
        animation: zoomFondo 10s ease-in-out forwards;
    }
    .seccion-adultos{
        background-image: url('../img/banner/adultos.webp');
        animation: zoomFondo 10s ease-in-out forwards;
    }
    .seccion-bebes{
        background-image: url('../img/banner/bebes.webp');
        animation: zoomFondo 10s ease-in-out forwards;
    }
    .seccion-gimnasia{
        background-image: url('../img/banner/gimnasia.webp');
        animation: zoomFondo 10s ease-in-out forwards;
    }





    /* Animación del zoom */
    @keyframes zoomFondo {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.1); /* 👈 agranda y queda ahí */
    }
    }
   .banner-secundario h1{
        color:#fff;
        margin: 0;
        font-size: 48px;
        font-weight: 700;
        line-height: 56px;   
   }
   .banner-secundario p{
        color: 
        color-mix(in srgb, #fff, transparent 30%);
        margin: 5px 0 30px 0;
        font-size: 22px;
        line-height: 1.3;
        font-weight: 900;
   }

   .banner-div-texto{
    margin-top: 50px;
   }
   .recent-blog-postst .post-item .post-date{
        padding: 6px 20px;
   }

   .img-actividades {
        width: 100%;
        height: 100%;
        object-fit: cover; /* hace que la imagen llene el div */
        display: block;
    }

.table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff; /* Fondo blanco como en CONTACT */
    border: 1px solid #dee2e6; /* Borde gris suave de Bootstrap */
}

.table th {
    background-color: #37517e; /* Azul del título de CONTACT */
    color: #fff; /* Texto blanco para contraste */
    font-weight: bold;
    padding: 0.75rem; /* Espaciado interno */
    text-align: left; /* Alineación a la izquierda como en la imagen */
    border-bottom: 2px solid #37517e; /* Línea azul más oscuro */
}

.table td {
    padding: 0.75rem; /* Espaciado interno consistente */
    border-bottom: 1px solid #dee2e6; /* Borde suave entre filas */
    vertical-align: middle; /* Centrado vertical */
    font-weight: 400;
     color: #6c757d;
}

.table tbody tr:hover {
    background-color: #f8f9fa; /* Resaltado gris claro al pasar el mouse */
}

.table b {
    color: #37517e; /* Azul para los horarios en negrita, coherente con el diseño */
}

.table span[style*="font-weight: 400"] {
    color: #6c757d; /* Gris oscuro para texto regular, como el placeholder de CONTACT */
}
.zoom-slow {
    transition: transform 1.5s ease-in-out; /* Transición suave para cambios iniciales */
    animation: zoomPulse 12s ease-in-out; /* Animación de 6 segundos, infinita */
}
.navmenu .dropdown ul a.active{
    color: #47b2e4;
}
.scroll-top{
    right: 65px;
}


.whatsapp {
    position: fixed;
    visibility: visible;
    opacity: 1;
    bottom: 15px;
    right: 15px;
    z-index: 99999;
    background-color: #31d14d;
    width: 44px;
    height: 44px;
    border-radius: 50px;
    transition: all 0.4s;
}
.whatsapp i{
    color:#fff;
    font-size: 25px;
}

@keyframes slide {
      from {
        background-position: 0 0; /* Comienza en la izquierda */
      }
      to {
        background-position: 100% 0; /* Termina en la derecha */
      }
    }

@keyframes zoomPulse {
    0% {
        transform: scale(1); /* Tamaño original */
    }
    50% {
        transform: scale(1.05); /* Zoom leve al 105% */
    }
    100% {
        transform: scale(1); /* Regresa al tamaño original */
    }
}



    .footer .logo{
        max-height: 46px;
    }


@media (max-width: 768px) {
  /* el submenú dentro de "Actividades" */
  nav ul ul {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

   .carousel, .carousel-inner, .carousel-item {
            height: auto !important;
        }
        .carousel-item img {
            height: auto !important;
            max-height: 100vh;
        }
        .carousel h1{
            font-size: 38px;

    }
  .quienes-somos{
        background-image: url("../img/banner/quienes-somos-chico.webp");

        animation: slide 20s linear infinite;  
    }

}