/* Aseguramos que la página ocupe toda la altura */

html, body {
    height: 100%;
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #f8f9fa;
}

.background-page {
    background-color: rgb(217, 0, 0);
    color: #ffffff;
}

.slick-slide img {
    width: 100%;
    height: auto;
}

.items-menu {
    color: #ffffff;
    font-size: 18px;
}

a.items-menu.active {
    color: #F7B022;
    font-weight: bold;
    /*border-bottom: 1px solid #F7B022;*/
}

/*
.nav-link {
    border-bottom: 1px solid rgb(217, 0, 0);
}
*/

.dropdown .nav-link {
    border-bottom: 1px solid  #ffffff;
}

.nav-link:hover {
    color: #ffffff;
}

.navbar-toggler:focus,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
}

/* Evitar que los enlaces cambien de color */
footer a {
    color: inherit; /* Mantiene el color del texto de los enlaces como el texto del contenedor */
    text-decoration: none; /* Elimina el subrayado */
}

/* Opcional: si quieres que el color permanezca igual cuando se pase el mouse o se visite el enlace */
footer a:hover,
footer a:focus,
footer a:visited , 
.link-none {
    color: inherit;
    text-decoration: none;
}

.dropdown-scroll {
    overflow-y: scroll;
    max-height: 300px;
}

.floating-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #25d366; /* Color de fondo */
    color: white; /* Color del ícono */
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 50%; /* Hace que el botón sea redondo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: background-color 0.3s;
    z-index: 1000;
}

.floating-btn-left {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background-color: #F7B022; /* Color de fondo */
    color: white; /* Color del ícono */
    width: 48px;
    height: 48px;
    padding: 8px;
    border-radius: 50%; /* Hace que el botón sea redondo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: background-color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.floating-btn-left i {
    margin: 0;
}


.floating-btn:hover {
    background-color: #25d366; /* Color de fondo al pasar el cursor */
}

.floating-btn img {
    margin: 0;
}

.grid-sucursales {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    min-height: 400px;
}

.sucursales {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 10px;
    /*border: 1px solid #ccc; */
    /*background-color: #f9f9f9; */
}

.sucursales .item a {
    text-decoration: none;
    color: #808080;
    font-weight: 400;
}

.item span {
    font-weight: bold;
    font-size: 18px;
}

/* Estilo para el loader */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ocupa toda la altura de la ventana */
}

/* Efecto de rotación */
.loader-logo {
    width: 100px; /* Ajusta el tamaño de tu logo */
    height: 100px;
    padding: 8px;
    border-radius: 50%; /* Hacerlo redondo
    /* background-color: rgb(217, 0, 0); */
    background-color: #ffffff;;
    border: 2px solid #F7B022;
    animation: rotate 2s linear infinite;
    object-fit:contain; /* Asegura que la imagen no se deforme dentro del contenedor */
}

.menu-facturas {
    /*background-color: rgba(0, 123, 255, 0.2);*/
    border-radius: 24px;
    border: 1px solid #ffffff;
}
  
.menu-facturas:hover {
    background-color: rgba(0, 123, 255, 0.35);
    color: #ffffff;
}
  

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotateY(360deg); }
}

/* Asegurarse de que el contenido esté centrado */
#content {
    visibility: hidden; /* Se mantiene oculto hasta que el loader desaparezca */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.titulos {
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
    color: #F7B022;
}

.rotateImg {
    transition: transform 1.2s ease;
    transform-style: preserve-3d; /* Necesario para que el efecto 3D funcione */
}

.rotateImg:hover {
    transform: rotateY(360deg); /* Rota sobre el eje X */
}

.contactos .descripcion p {
    text-align: justify;
}

/* El carrusel ocupará el 100% de la altura de su contenedor */
.carousel, .carousel-item {
    height: 500px;
}


/* Las imágenes dentro del carrusel se ajustan para cubrir todo el espacio */
.carousel-item img {
    object-fit: cover; /* Las imágenes cubren todo el contenedor */
    width: 100%; /* Se ajustan al ancho del contenedor */
    height: 100%; /* Se ajustan a la altura del contenedor */
}

.banner-secundario {
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.banner-img {	
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    padding: 0px;
}

.navbar.fixed-navbar {
    position: fixed;
    height: 73px;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: top 0.3s;
    background-color: rgb(217, 0, 0);
    /*border-bottom: 2px solid #F7B022;*/
    /* border-bottom: 4px solid #ffffff; */
}

#logo-img {
    border-radius: 25px;
    background-color: #ffffff;
}

/* Subtítulos de tercer nivel (H3) */
h3 {
    color:#F7B022;; /* Amarillo brillante para los subtítulos de tercer nivel */
    text-align: center; /* Alineado centrado */
    font-weight: normal; /* Fuentes más ligeras */
    margin: 20px 0; /* Espaciado entre los subtítulos */
    
}
  
/* Transición suave al pasar el mouse */
h3:hover {
    color: #D32F2F; /* Cambio de color a rojo al pasar el mouse */
    cursor: pointer; /* Cambia el cursor a mano */
}

.nav-link.items-menu {
    font-weight: 400;
}

footer ul li {
    padding-bottom: 4px;
    padding-top: 4px;
}

/* Eliminar o reducir el sombreado en el input al recibir foco */
.input-group .form-control:focus {
    box-shadow: none; /* Elimina el sombreado */
    border-color: #ced4da; /* Opcional: puedes ajustar el color del borde si lo deseas */
}

.divisor-top {
    padding-top: 20px;
}

.divisor-bottom {
    padding-bottom: 20px;
}

.divisor {
    padding-top: 20px;
    padding-bottom: 20px;
}

.marquesina {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

.marquesina .scroll {
    display: inline-block;
    padding-left: 100%;
    animation: scroll-left 16s linear infinite;
}

.marquesina span {
    display: inline-block;
    padding-right: 2rem;
}

@keyframes scroll-left {
    0%   { transform: translateX(-25%); }
    100% { transform: translateX(-75%); }
}

.owl-carousel {
    position: relative; /* importante para que los botones se posicionen respecto al carrusel */
  }
  
.owl-nav {
    position: absolute;
    top: 50%;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* esto permite que los botones no bloqueen clics en el carrusel */
}
  
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
    pointer-events: auto; /* reactivamos clics en los botones */
    color: #fff !important;
    border: none;
    padding: 16px 16px;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    transition: opacity 0.3s;
}
  
.owl-nav button.owl-prev:hover,
.owl-nav button.owl-next:hover {
    opacity: 1;
}


#sec-2 {
    background-image: url("../img/sec-2/sec-bg-2.png");
    background-size: cover;
    background-position: center left;
    background-repeat: no-repeat;
    min-height: 420px;
    border-radius: 32px;
}
  
  

@media (max-width: 991.98px) { /* Dispositivos MD */
    .grid-sucursales {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;  /* Reducir el gap en dispositivos más pequeños */
        min-height: 350px;  /* Ajustar la altura mínima */
    }

    #datos-contacto {
        padding-top: 16px;
        row-gap: 10px;
    }
    
    
    #sec-2 {
        min-height: 180px;
    }
    
}
    
@media (max-width: 575.98px) { /* Dispositivos móviles (sm) */

    #owner {
        min-height: 420px;
    }

    .divisor {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .divisor-top {
        padding-top: 8px;
    }

    .divisor-bottom {
        padding-bottom: 8px;
    }

    /* Estilo base para todas las imágenes */
    #owner .owl-item img {
        width: auto;
        height: 420px;
        transition: transform 0.3s ease-in-out;
        object-fit: cover;
    }

    /* Estilo para la imagen del slide centrado */
    #owner .owl-item.center img {
        transform: scale(1.1);
    }

    .grid-sucursales {
        grid-template-columns: 1fr;
        gap: 16px;  /* Reducir más el gap en móviles */
        min-height: 300px;  /* Ajustar la altura mínima para móviles */
    }

    #footer h5 {
       text-align: center;
    }


    .menu-facturas-movil {
        border-bottom: 1px solid hwb(15 42% 2% / 0.825);
    }
      
    .menu-facturas-movil:hover {
        background-color: rgba(0, 123, 255, 0.35);
        color: #ffffff;
    }
      
}