@charset "utf-8";
/* CSS Document */

/* BARRA DE NAVEGACION */
/* Agrega un margen superior al cuerpo para evitar que se solape con la barra de navegación */
	 
	 body {
    margin-top: 80px; /* Ajusta según sea necesario para evitar el solapamiento */
}

	   .container-fluid {
        padding-left: 0 !important;
    }

/* Otros estilos CSS existentes ... */

/* Establece un fondo y espaciado para la barra de navegación */
.navbar {
	padding: 0px;
}

.navbar-custom {
    background-color: #0097B2;
   ; /* Ajusta según sea necesario */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.navbar-brand img {
    width: 100px;
    height: 100px;
    padding: 0px;
	border-bottom-left-radius: 10px;
}

/* Ajusta los estilos para los íconos en la barra de navegación */
.navbar-nav .nav-link {
    color: #FFF; /* Ajusta según sea necesario */
    margin-right: 15px; /* Ajusta según sea necesario */
}

.navbar-nav .nav-link:hover {
    color: #615B68; /* Cambia el color al pasar el ratón si lo deseas */
}

.navbar-custom {
    background-color: #0097B2;
}

/* QUIENES SOMOS */

.miDiv  {
    position: relative;
    max-width: 100%;
    background-color: #615B68;
}

.miDiv img {
    max-width: 100%;
    height: auto;
    display: block;
    filter: brightness(65%); /* Ajusta el brillo de la imagen (70% más oscuro) */
}

#palabraCambiante {
    font-family: 'Roboto', sans-serif;
}

.miDiv h1 {
    position: absolute;
    top: 30%;
    left: 50%;
	padding-bottom: 20px;
    transform: translate(-50%, -50%);
    color: #FFF;
    font-family: 'Orbitron', sans-serif;
    font-size: 5em; /* Tamaño inicial del texto */
    transition: font-size 1s ease-in-out, opacity 1s ease-in-out; /* Agregar transición para font-size y opacity */
    margin: 0;
    line-height: 1.5;
    text-align: center;
    opacity: 0; /* Agregamos la propiedad opacity para que inicialmente sea 0 */
    width: 100%;
    z-index: 2; /* Asegura que la imagen esté detrás de la capa */
}

.miDiv h3 {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    color: #FFF;
    text-align: center;
    margin-top: 20px;
    margin: 0;
    font-size: 1.5em;
    z-index: 2; /* Asegura que la imagen esté detrás de la capa */
}



@media (max-width: 430px){

    .miDiv h1 {
    position: absolute;
    top: 30%;
    left: 50%;
	padding-top: 150px;
	padding-bottom: 100px;
    transform: translate(-50%, -50%);
    color: #FFF;
    font-family: 'Orbitron', sans-serif;
    font-size: 10px; /* Tamaño inicial del texto */
    transition: font-size 1s ease-in-out, opacity 1s ease-in-out; /* Agregar transición para font-size y opacity */
    margin: 0;
    line-height: 1.5;
    text-align: center;
    opacity: 0; /* Agregamos la propiedad opacity para que inicialmente sea 0 */
    width: 100%;
    z-index: 2; /* Asegura que la imagen esté detrás de la capa */
}

    .miDiv h3 {
        font-size: 1em; /* Ajusta el tamaño del texto secundario para pantallas más pequeñas */
        padding-top: 40px;
    }

	.textoSuperior p {
    font-size: 15px;
		
}	
}


/* SOBRE NOSOTROS */
.divSuperior {
    display: flex;
    align-items: center;
    background-color: #615B68;
	padding-bottom: 20px;	
}

.divSuperior img {
    max-width: 40%;
    margin: 20px;
    border-radius: 5px;
}

.textoSuperior {
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 20px;
    color: #FFF;
}

.divInferior {
    display: flex;
    justify-content: space-around;
    padding: 20px;
}

.parte1,
.parte2,
.parte3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    text-align: center;
}

.parte1 img,
.parte2 img,
.parte3 img {
    width: 200px; /* Cambiado a 100% para que todas tengan el mismo ancho */
    height: auto; /* Ajusta la altura deseada */
    object-fit: cover; /* O ajusta según sea necesario (cover, contain, etc.) */
    margin-top: 10px; /* Ajusta el margen superior según sea necesario */
    border-radius: 7px;
}

.parte1 h3,
.parte2 h3,
.parte3 h3 {

    margin-top: 10px; /* Ajusta el margen superior según sea necesario */
}

.parte1 h7,
.parte2 h7,
.parte3 h7 {

    margin-bottom:10px;/* Ajusta el margen superior según sea necesario */

}

.iconosParte {
    display: flex;
    justify-content: center;
}

.iconosParte i {
    margin: 0 10px; /* Ajusta el espaciado entre los iconos según sea necesario */
}

.Ubi {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 60vh;
}

.map {
    flex: 1; /* Cada uno ocupa 50% del ancho */
    height: 100%; /* Ajusta su altura al contenedor */
    display: flex;
    justify-content: center;
    align-items: center;
}

.map iframe {
    width: 90%;
    height: 90%;
    border: 10px;
    border-radius: 7px;
}
.contact {
    display: flex;
    justify-content:right;
    align-items: center;
    color: #615B68;
   padding-left: 0px;
   padding-right: 60px;
}
.contact a i {
    color:#615B68 !important;
}
@media (max-width: 425px) {
	
    .Ubi {
        display: flex;
        flex-direction: column; /* Cambia de fila (row) a columna (column) */
        width: 100%;
        height: auto; /* Opcional: ajusta el alto automáticamente si necesario */
    }
    .map {
        padding: 20px;
       }     
    .contact {
        display: block; /* Cambia a su valor inicial predeterminado */
        justify-content: unset; /* Elimina la alineación horizontal */
        align-items: unset; /* Elimina la alineación vertical */
        padding-left: unset; /* Elimina el relleno izquierdo */
        padding-right: unset; /* Elimina el relleno derecho */
       padding: 20px;
       
    }
   
    }

/* SERVICIOS */
.image-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 20px;
}

.image-container {
    width: 30%;
    margin: 10px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: transform 0.3s;
}

.image-container p {
    max-width: 500px; /* Ajusta el ancho según tus necesidades */
    margin: 5px 0; /* Centra el texto horizontalmente */
    height: 0 auto; /* Ajusta la altura deseada */
    text-align: center;
}

.image-container h3{

    height: 40px;
    text-align: center;
    justify-content: center;
}

.image-container:hover {
    transform: scale(1.1);
}

.image-container img {
    width: 100%;
    height: 170px;

    border-bottom: 1px solid #ddd;
}

/* Contenedor de cuadros */
.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
   
    margin-top: 50px;
}

/* Cuadro genérico */
.box {
    position: relative;
    width: 31%;
    height: 430px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 10px; /* Añadido para bordes redondeados */
	cursor: pointer; /* Cambiado para que el cursor sea una mano */
}

.box img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    transition: 0.3s;
    border-radius: 10px; /* Añadido para bordes redondeados */
}

.box .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 89%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 10px; /* Añadido para bordes redondeados */
    opacity: 1; /* Cambiado para que esté visible por defecto */
}

@media (max-width: 1024px) {
	
	
.box {
   
	height: 330px;
   
}

.box img {
 
    height: 280px;
 
}
	
	
	
	
}

/* Agrega estilos CSS para organizar los bloques de imágenes */
.image-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.image-row {
    display: flex;
    justify-content: space-around;
    width: 100%;
    height: auto;
    max-width: 1200px; /* Ajusta según sea necesario */
    margin: 10px auto; /* Centra los bloques */
}

.image-container {
    margin: 10px;
    text-align: center;
    width: 300px; /* Puedes ajustar el ancho según tus necesidades */
    height: 450px; /* Puedes ajustar la altura según tus necesidades */
}
@media (max-width: 430px){
	.image-container {
    
    height: 400px; /* Puedes ajustar la altura según tus necesidades */
}
}
/* Estilos adicionales según sea necesario */

/* Establece un tamaño común para el texto en cada contenedor */
.image-container h3,
.image-container p {
    font-size: 16px; /* Puedes ajustar el tamaño según tus preferencias */
    padding-top: 15px;
}

.imagen-ajustada {
    width: 10%; /* Ajusta el ancho según tus necesidades o al mismo valor que la imagen de referencia */
    height: auto; /* Mantiene la proporción de aspecto original */
    /* Otros estilos según sea necesario */
}

.contenido {
    display: flex;
    background-color: #615B68;
	
}

.imagen-principal {
   width: 60%; /* Hace que la imagen sea responsive al 100% del ancho */
        height: auto;
        max-width: 100%;
}

.info {
    padding-top: 50px;
    padding-left: 30px;
    padding-right: 30px;
    max-width: 700px;
    /* Ajusta según sea necesario */
    /* Alinea el texto a la izquierda en pantallas más pequeñas */
}

.info h4 {
    font-size: 16px;
    padding-bottom: 20px;
}

.info p {
    font-size: 13px;
}

/* Media Query para pantallas más pequeñas, como dispositivos móviles */
@media (max-width: 768px) {
    /* Ajustes para el menú de navegación */
    .navbar-nav {
        flex-direction: column;
        text-align: center;
    }

    .navbar-nav .nav-item {
        margin: 5px 0;
    }

	
    /*Servicios */
    .image-row {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra los elementos horizontalmente */
    }

    .divSuperior {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra los elementos horizontalmente */
    }
    .divSuperior img {
        max-width: 100%; /* Utiliza el 100% del ancho disponible */
        height: auto;
    }

    .textoSuperior {
        margin: 30px;
        font-size: 10px;
        color: #FFF;
    }

    .parte1 img,
    .parte2 img,
    .parte3 img {
        width: 250px; /* Cambiado a 100% para que todas tengan el mismo ancho */
        height: 250px; /* Ajusta la altura deseada */
        object-fit: cover; /* O ajusta según sea necesario (cover, contain, etc.) */
        margin-top: 10px; /* Ajusta el margen superior según sea necesario */
    }

    .divInferior {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra los elementos horizontalmente */
        text-align: center; /* Centra el texto */
    }

    .parte1,
    .parte2,
    .parte3 {
        margin-bottom: 20px; /* Agrega un espacio entre cada parte */
    }

 
    .iconosParte {
        display: flex;
        justify-content: center; /* Centra los iconos horizontalmente */
    }

    .iconosParte i {
        margin: 0 10px; /* Agrega un espacio entre los iconos */
    }

    .contenido {
        flex-direction: column; /* Cambia a disposición vertical */
        text-align: center; /* Alinea todo al centro en dispositivos móviles */
    }

    .imagen-principal {
        width: 100%; /* Hace que la imagen sea responsive al 100% del ancho */
        height: auto;
        max-width: 100%;
    }

    .info {
        max-width: 100%; /* Aprovecha todo el ancho disponible en dispositivos móviles */
    }
}

/* Experiencias */

.Exp {
    background-color: #615B68;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 30px;
    padding-right: 20px;
}
.Exp h1 {
    text-align: center;
    color: #FFF;
}

.Exp p {
    text-align: center;
    color: #FFF;
    font-size: 25px;
}

.MEXP {
    display: flex;
    flex-direction: column;
}

.content {
    margin-left: 10px;
    align-content: center;
    padding-top: 50px;
}

.content h2,p,h4 {
    padding-top: 10px;
    padding-right: 30px;
    padding-left: 20px;
}

@media (max-width: 768px) {
	
	.item {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center; /* Alinear al centro horizontalmente */
}

.item img {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  object-fit: cover; /* Ajusta el tamaño manteniendo la proporción y cubriendo todo el contenedor */
	margin: 20px;
	padding: 5px;
}

    .content {
        max-width: 100%; /* Aprovecha todo el ancho disponible en dispositivos móviles */
		padding-top: 30px;
    }
}


footer {
    background-color: #0097B2;
    padding-top: 20px;
    color: white !important;
    display: flex;
    justify-content: space-around; /* Puedes ajustar el espacio entre los elementos según tus necesidades */
    align-items: center;
    text-align: center;
}

footer div {
    flex: 1; /* Esto hace que los divs tengan el mismo ancho */
}

footer img {
    width: 70px;
    height: 70px;
    margin-right: 10px;
}

@media (max-width: 768px) {
    footer {
        flex-direction: column;
        align-items: center;
    }

    footer div {
        flex: 1;
        margin-bottom: 10px; /* Añade un margen entre los divs en modo columna */
    }
}