/*===============Propiedades Globales================*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
    text-align: center;
}


/*===================MENU==========================*/

#menu {
    position: fixed; /* Fija el navbar en la parte superior */
    top: 0; /* Mantiene el navbar en la parte superior */
    left: 0; /* Asegura que comience desde el borde izquierdo */
    width: 100%; /* Ocupa todo el ancho de la pantalla */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    background-color: #c1ebeb; /* Fondo sólido para que se vea bien */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Agrega una sombra sutil */
}


 #menu a, button{
     font-size: 18px !important;
     font-weight: 600;
    
 }

 #menu a{
     color:#3f3f3f;
     
 }

 /* Estilos para el logo */
.logo {
    height: 50px;  /* Ajusta el tamaño según necesites */
    width: auto;   /* Mantiene las proporciones de la imagen */
    object-fit: contain;  /* Asegura que la imagen se ajuste correctamente sin distorsionarse */
}


 .icono img {
    width: 100px; /* Ajusta el tamaño de la imagen */
    height: 100px; /* Mantén las proporciones cuadradas */
    border-radius: 50%; /* Hace el borde completamente redondo */
    border: 2px solid #fff; /* Opcional: añade un borde blanco */
    object-fit: cover; /* Ajusta la imagen al contenedor redondo */
}

/*===================SLIDER DE IMAGENES==========================*/

.carousel-inner {
    max-height:39rem !important;
}

/*===================SECCION NUESTRO EQUIPO IMAGEN==========================*/

#img-equipo{
    max-height:30rem !important;
    width:43%;
}

/*===================SECCION TIPOS DE SERVICIOS==========================*/

.tipos-de-servicios {
    padding: 4rem 1rem;
    background-color: #f9f9f9;
}

.tipos-de-servicios h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #3f3f3f;
    margin-bottom: 2rem;
}

.icono-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icono-wrap:hover {
    transform: translateY(-10px);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.7); /*ajusta la sombra de los cuadros de el apartado de servicios*/
}

.icono-wrap img {
    width: 180px;
    height: 180px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.icono-wrap h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1b2a4e;
    margin-bottom: 0.5rem;
}

.icono-wrap p {
    font-size: 1rem;
    color: #666666;
    line-height: 1.6;
}

/*=============SECCIÓN CARRUSEL CLIENTES=========*/

#carrusel-servicios-seccion {
    padding: 3rem 1rem;
    background-color: #f9f9f9;
    text-align: center;
}

/* Estilo del título */
#titulo-carrusel {
    font-size: 1.8rem;
    font-weight: 600;
    color: #3f3f3f;
    margin-bottom: 1.5rem;
}

#carrusel-clientes {
    padding: 3rem 1rem;
    background-color: #f9f9f9;
    text-align: center;
}

/* Ajustar imágenes del carrusel */
#carrusel-servicios .carousel-item {
    text-align: center;
}

#carrusel-servicios .carrusel-servicios-imagen {
    width: 30%;  /* Tamaño adecuado */
    max-height: 150px;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el mouse */
#carrusel-servicios .carrusel-servicios-imagen:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

#carrusel-servicios .carousel-control-prev,
#carrusel-servicios .carousel-control-next {
    filter: invert(0); /* Esto evita que sean blancas o grises */
    opacity: 1; /* Asegura que sean completamente visibles */
}

#carrusel-servicios .carousel-control-prev-icon,
#carrusel-servicios .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.7); /* Cambia el color de las flechas */
    border-radius: 35%; /* Hace que las flechas tengan un fondo redondo */
    padding: 10px; /* Ajusta el tamaño del fondo */
}

/* Hacer responsive */
@media (max-width: 768px) {
    #carrusel-servicios .carrusel-servicios-imagen {
        width: 30%;
        max-height: 100px;
    }
}

@media (max-width: 576px) {
    #carrusel-servicios .carrusel-servicios-imagen {
        width: 45%;
        max-height: 80px;
    }
}



/*=========================UBICACION DE LA EMPRESA===============================*/

.map-container {
    position: relative;
    width: 100%; /* El mapa ocupará el 100% del ancho del contenedor */
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0; /* Altura inicial en 0 para usar el padding */
    overflow: hidden;
    border-radius: 12px; /* Opcional: bordes redondeados */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra opcional */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%; /* Ancho completo del contenedor */
    height: 50%; /* Altura completa según el padding */
    border: 0; /* Sin bordes */
}

@media (max-width: 576px) {
    .map-container {
        padding-bottom: 75%; /* Cambia la relación de aspecto para pantallas móviles */
    }
}



/*=========================MEDIA QUERIES PARA RESPONSIVE==========================*/

@media (max-width: 768px) {
    .tipos-de-servicios h2 {
        font-size: 2rem;
    }

    .icono-wrap {
        padding: 1rem;
    }

    .icono-wrap h3 {
        font-size: 1.25rem;
    }

    .icono-wrap p {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .icono-wrap img {
        width: 120px;
        height: 120px;
    }

    .icono-wrap h3 {
        font-size: 1.1rem;
    }

    .icono-wrap p {
        font-size: 0.85rem;
    }
}


/*===================SECCION NUESTRO EQUIPO MAPA==========================*/
#local {
    margin-top:50px;
    background-color: #f3f3f3;
    display:flex;
    justify-content: center; 
    padding-bottom: 300px; 
}

.mapa {
    background: url(../img/mapaglobal.png);
    width:225%;
    height:730px;
}


.wrapper-local {
    width:50%;
    margin-left:100px;
    padding-top:150px;
}


/*===========================SECCION EQUIPO MIAMI==================================*/
#numeros-local{
    margin:0 !important;
    padding:0 !important;
}
#numeros-local div {
    padding: 0 20px 0 0;   
    text-align:left;
    height:48px;
}

#numeros-local div:not(:last-child) {
    border-right: 2px solid #3f3f3f;
  }
#numeros-local div:not(:first-child) {
    padding-left:20px;
  }

#numeros-local p{
    margin:0;
}

/*=========================CONTACTOS BACKGROUND================================*/

#bg-contactos{
    position:relative;
} 

 #seccion-contacto{
    background-color: #1b2a4e;
    min-height:50px;
    position:relative;
}

/*=========================SECCIÓN DE CONTACTOS================================*/
/* Contenedor general de la sección */
#contacto .container {
    margin-top: 2rem;
    padding: 2rem 0;
}

/* Cuadros de información */
.contact-info .shadow-box {
    display: flex; /* Activa Flexbox */
    text-align: center; /* Alinea verticalmente ícono y texto */
    align-items: center;
    flex-direction: column; /* Organiza en columna */
    justify-content: center; /* Alinea horizontalmente hacia la izquierda */
    gap: 25px; /* Espaciado entre el ícono y el texto */
    background: #ffffff; /* Fondo blanco */
    border-radius: 12px; /* Bordes redondeados */
    padding: 20px; /* Espaciado interno */
    width: 100%;
    margin-bottom: 20px; /* Separación entre los cuadros */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animación */
}

.contact-info .shadow-box:hover {
    transform: translateY(-10px); /* Levanta el cuadro al hacer hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Intensifica la sombra */
}

/* Iconos en los cuadros */
.contact-info .shadow-box i {
    font-size: 40px; /* Tamaño del ícono */
    color: #1b2a4e; /* Color del ícono */
    margin-right: 15px; /* Espaciado entre ícono y texto */
}

/* Títulos y textos */
.contact-info .shadow-box h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1b2a4e;
    margin-bottom: 0.5rem;
}

.contact-info .shadow-box p {
    font-size: 1rem;
    color: #666666;
    margin: 0;
}

/* Contenedor del mapa */
.map-container {
    position: relative;
    width: 100%; /* El mapa ocupa todo el ancho de la columna */
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 12px; /* Bordes redondeados */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Sombra */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Sin bordes */
}

/* Responsivo */
@media (max-width: 768px) {
    .contact-info .shadow-box {
        padding: 15px;
    }

    .contact-info .shadow-box i {
        font-size: 35px;
    }

    .contact-info .shadow-box h3 {
        font-size: 1.25rem;
    }

    .contact-info .shadow-box p {
        font-size: 0.9rem;
    }

    #contacto .container {
        padding: 1rem 0;
    }
}

/*=========================FOOTER================================*/

footer {
    background: #1b2a4e;
    padding: 20px 0;
    color: #f3f3f3;
}

.footer-container {
    display: flex;
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 20px; /* Espaciado entre los elementos */
}

.footer-item {
    display: flex;
    align-items: center; /* Alinea verticalmente ícono y texto */
    gap: 10px; /* Espaciado entre el ícono y el texto */
}

.footer-item i {
    font-size: 50px; /* Ajusta el tamaño del ícono */
    color: #f3f3f3;
}

.footer-item p {
    margin: 0;
    font-size: 16px; /* Ajusta el tamaño del texto */
}



/*=========================MEDIA QUERIES PANTALLA ANCHA================================*/

@media (max-width:1200px){
    #intro, #equipo {
        width:90% !important;
        margin:auto;
    }
  
    #local {
        flex-wrap: wrap;
        padding-top:30px;
   }
   .wrapper-local {
    width:90%;
    margin:auto;
    padding-top:50px;    
   }
 
}
/*=========================MEDIA QUERIES PANTALLA SM================================*/


@media (max-width:768px) {

    #intro, #equipo{
        width:90% !important;
        margin:auto;
    }

    
    #img-equipo{
        max-height:20rem !important;
        width:90%;
    }
    .wrapper-local {
        width:90%;
        margin:auto;
        padding-top:50px;    
    }
    #local {
        flex-wrap: wrap;
    }
    .mapa img {
        width:100%;
        height:auto;
    }
   
}
/*=========================MEDIA QUERIES PANTALLA EXTRA-SM================================*/

@media (max-width: 576px) {
    #servicios-fila-2 {
        width:100% !important;
    }
    #servicios-fila-1 {
        width:100% !important;
    }

    .icono-wrap{
        flex-wrap:wrap !important;
        justify-content: center !important;
        text-align: center;
    }
}