@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&display=swap');

/*
font-family: "Exo", sans-serif;
*/

@font-face {
    font-family: mmcfont;
    src: url(../font/exo.ttf);
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;

   
}


body{
    width: 100%;
    height: 100%;
    font-family: mmcfont;
     
}

/*===BOTON DE WATHSAPP===*/
.btn-wsp{
    position: fixed;
    width: 55px;
    height: 55px;
    line-height: 55px;
    bottom: 30px;
    right: 30px;
    background: green;
    color: white;
    border-radius: 50px;
    text-align: center;
    font-size: 50px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index: 999;
}

.btn-wsp:hover{
    text-decoration: none;
    color: green;
    background-color: white;
}

/*===HEADER===*/

.header_2 {
    background-color: #0071BC;
}

.container_2 {
    max-width: 1200px;
    height: 25px;
    margin: 0 auto;
}

.menu_2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;

}

.menu_2 .navbar_2 ul {
    display: flex;
    align-items: center;
    
}

.menu_2 .navbar_2 ul li a{
    font-size: 14px;
    padding: 0 20px;
    color: white;
    display: block;
    font-weight: 400;
}

.menu_2 .navbar_2 ul li a:hover {
    color: black;
}
.header{
    background-color: black;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    height: 80px;

}

.menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    z-index: 998;
    
}

.menu .navbar ul{
    display: flex;
    align-items: center;
}

.menu .navbar ul li a{
    font-size: 16px;
    padding: 0 20px;
    color: white;
    display: block;
    font-weight: 600;
  
}


.menu .navbar ul li a:hover {
    color: #0071BC;
}


#menu {
    display: none;
}
.menu-icono {
    width: 45px;
}

.menu label {
    cursor: pointer;
    display: none;
}

.boton_header{
        height: 35px;
        padding: 0 10px;
        background-color:rgb(41, 128, 82);
        color: white;
        text-transform: uppercase;
        font: 15px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(33, 40, 105, 0.2);
        font-weight: 700;
        cursor: pointer;
}
  
/*===CARRUSEL===*/

.slider_box{
    width: 100%;
    height: 500px;
    margin: 0; 
    overflow: hidden; 
    position: relative;
    
}

.slider_box ul {
    display: flex;
    padding: 0;
    width: 400%;
    animation: slide 12s infinite alternate ease-in-out;
    
}


.slider_box li{
    width: 100%;
    list-style: none;
    position: relative;
}

.slider_box li::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.5); /* Color negro con opacidad 0.5 */
    z-index: 1;
}

.texto {
    position: absolute;
    text-align: left;
    padding: 0 150px;
    top: 280px;
    color: rgb(255, 255, 255);
    
    z-index: 2;
}

.texto h2{
    font-size: 35px;
    margin-bottom: 45px;
    margin: 0;
    padding-right: 150px;
}


.slider_box img{
    width: 100%; 
    height: 500px;
    object-fit:cover;
    position: relative;
    z-index: 0;
    
        
}

@keyframes slide {
    0% {  margin-left: 0;}
    20% { margin-left: 0;}

    25% {  margin-left: -100%;}
    45% { margin-left: -100%;}

    50% {  margin-left: -200%;}
    70% { margin-left: -200%;}

    75% {  margin-left: -300%;}
    100% { margin-left: -300%;}

}

/*BARRA DE CARRUSEL PARA CONTACTO*/

.barra_contacto{
    
    background-color: rgba(0, 0, 0, 0.9); /* Fondo oscuro con opacidad */
    text-align: center; /* Centrar elementos */
    position: absolute; /* Posicionamiento fijo */
    bottom: 0; /* Coloca la barra al final */
    width: 100%; /* Ocupa el ancho completo del contenedor */
    height: 65px;
    z-index: 3; /* Asegura que esté encima del carrusel */
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Centrar horizontalmente los elementos */
    align-items: center; /* Centrar verticalmente los elementos */
}


.datos_conta {
    display: flex;
    justify-content: center; /* Centrar horizontalmente los elementos */
    align-items: center; /* Centrar verticalmente los elementos */
    
}

.datos_conta ul {
    list-style: none; /* Eliminar viñetas de la lista */
    padding: 0; /* Eliminar el relleno predeterminado de la lista */
    margin: 0; /* Eliminar los márgenes predeterminados de la lista */
    justify-content: center; /* Centrar los elementos */
    display: flex; /* Alinear elementos en fila */
    animation: none; 
   
}

.datos_conta nav{
    margin: 0 100px; /* Espacio entre los elementos de contacto */
    display: flex;
    align-items: center;
    padding: auto;

}

.datos_conta nav div{
    padding: 0 10px;
}

.datos_icono img {
    /* Estilos de los íconos */
    height: 40px;
       
}

.datos_texto h3 {
    margin: 0; /* Eliminar el margen predeterminado de los encabezados */
    font-size: 20px; /* Tamaño del texto */
   
    color: rgb(251, 251, 251);

}


/*SECCION DE EMPRESA*/
.container_empresa{
    margin: 0 auto;
    width: 100%;
    background-color: #535f83;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container_empresa img{
    max-width: 750px;
   
}
.text_empresa{
    color: white;
   
    text-align: center;
    margin-left: 30px ;
    margin-right: 30px;
}

.text_empresa h2{
    font-size: 36px;
}

.text_empresa p {
    font-size: 16px;
   margin-top: 20px;
}

.enlace_asesoria {
    color: white;
}

.boton_nosotros{
        margin-top: 20px;
        height: 35px;
        padding: 0 10px;
        background-color:rgb(41, 128, 82);
        color: white;
        text-transform: uppercase;
        font: 15px;
        border-radius: 10px;
        box-shadow: 0 0 20px rgba(50, 153, 146, 0.2);
      
        font-weight: 700;
        cursor: pointer;
}

.boton_nosotros:hover{
    background-color: blue;
    box-shadow: 0 0 10px rgba(79, 129, 143, 2.2);
}

/*======SERVICIOS======*/

.services {
    padding: 80px 0;
    text-align: center;
    width: 100%;
    height: 100%;
    
    
    
}
.services h2{
    font-size: 40px;
    line-height: 1;
    color:#0071BC;
    margin-bottom: 10px;
    
    text-transform: uppercase;
   
    
}

.services-content {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    
}

.enlace_para_servicios {
    color: white;
}
.services-1 {
   
    flex-basis: calc(20% - 30px);
    background-color: #22B573;
    padding: 40px;
    box-shadow: 0 0 10px rgba(33, 40, 150, 0.2);
    border-radius: 25px;
    color: white;
    
}

.services-1:hover {
    background-color: #0071BC;
    color:white;
    cursor:pointer;

}
.services-1 img{
    margin-bottom: 10px;
}
.services-1 h3 {
    font-size: 20px;
    line-height: 1.2;
}

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

footer {
    padding: 80px 15% 80px;
}

.footer_box{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
    gap: 3.5rem;
    background: black;
}
.footer-content h4{
    color: white;
    margin-bottom: 1.5rem;
    font-size: 20px;
   
}

.footer-content li {
    margin-bottom: 16px;
}

.footer-content li a{
    display: block;
    color: grey;
    font-size: 15px;
    font-weight: 400;
    transition: all .40s ease;
   
}

.footer-content li a:hover {
    transform: translateY(-3px) translatex(-5px);
    color: #22B573;

}

.footer-content p{
    color: white;
    font-size:12px;
    line-height: 30px;
    margin:20px 0;
    
}

.icons a{
    display: inline-block;
    font-size: 22px;
    color: white;
    margin-right: 17px;
    transition: all .40s ease;
}
.icons a:hover {
    color:#0071BC;
    transform: translateY(-5px);
}

.footer-conta div{
    display: flex;
    color: white;
   
    font-size: 16px;
}
.footer-conta h4{
    color: rgb(137, 137, 211);
    margin-bottom: 1.5rem;
    font-size: 18px;
   
}

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

.copyright {
    padding: 0;
    margin: 0;
    display: flex;
    background-color: rgb(67, 62, 62);
    align-items: center;
    align-content: center;
    justify-content: center;
    
}
.copyright p{
    color: white;
   
    padding-left: 10px;
}

/*======INTRODUCCION DE PAGINAS======*/


.container_introduccion{
    width: 100%;
    height: 500px;
    
}

.capa_introduccion{
    background-color: black;
    position: absolute;
    width: 100%;
    height: 500px;
    opacity: 1.0;
}


.container_introduccion::before {
    content: '';
    background-color: rgb(0, 0, 0);
    position: absolute;
    width: 100%;
    height: 500px;
    opacity: 0.5;
    z-index: 100;

}

.introduccion_content img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    
}

.introduccion_content h2{
    padding: 0;
    top: 170px;
    margin: 10%;
    position: absolute;
  
    color: white;
    font-size: 50px;
    z-index: 101;

}

.datos-al {
    position: absolute;
    width: 100%;
    height: 65px;
    z-index: 104;
    bottom: 0;
    align-items: center;
    align-content: center;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);
}

.datos-al img{
    height: 45px;
}

.datos_content_introduccion{
    display: flex;
    
}

.datos_content_introduccion li{
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin: 0 90px;
}

.datos_content_introduccion div{
    padding: 0 10px;
}

.datos-al-texto {
    color: white;
   
}


/*======SWIPER DE SERVICIOS======*/

.container_card{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 30px ;

}

.card {
    position: relative;
    width: 400px;
    height: 550px;
    margin: 12px;
    
}
.card_2da {
    position: inline;
}

.card .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    transition: .5s;
}

.card .front {
    transform: perspective(600px) rotateY(0deg);
    box-shadow: 0 5px 10px #000; 
}

.card .front img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card .front h3{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    background: rgba(0,0,0,.8);
    text-align: center;
    
}

.card .back {
    transform: perspective(600px) rotateY(180deg) ;
    background: #535f83;
    padding: 15px;
    color: #f3f3f3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    box-shadow:  0 5px 10px #000;
}

.card .back .link {
    border-top: solid 1px #f3f3f3;
    height: 50px;
    line-height: 50px;
   
}

.card .back .link a{
    color: #f3f3f3;

}

.card .back h3{
    font-size: 25px;
    margin-top: 20px;
    letter-spacing: 2px;
    
}

.card .back p {
    letter-spacing: 1px;
   
}

.card:hover .front {
    transform: perspective(600px) rotateY(180deg);
}

.card:hover .back {
    transform: perspective(600px) rotateY(360deg);
}

/*=====NOSOTROS======*/

.general {
    display: flex;
}

.general-1 {
    width: 50%;
    padding: 100px 250px 100px 100px;
    background-color:  rgb(246, 246, 246);
}
.general-2 {
    background-image: url(../Imagenes/Mision.jpg);
    background-position: center center;
    background-repeat: no-repeat ;
    background-size: cover;
    width: 50%;
}

.general-3 {
    background-image: url(../Imagenes/vision.jpg);
    background-position: center center;
    background-repeat: no-repeat ;
    background-size: cover;
    width: 50%;
}


.general h2{
    font-size: 55px;
    line-height: 70px;
    color:#0071BC;
    text-transform: uppercase;
    margin-bottom: 20px;
   
}

.general p {
    font-size: 16px;
    color: #414247 ;
    margin:25px 0 45px 0;
   
}


/*======VALORES DE NOSOTROS======*/

.coffee {
    padding: 100px 0;
    background-color: rgb(246, 246, 246);
    position: relative;
}

.coffee-content{
    text-align: center;
}

.coffee-content h2{
    font-size: 55px;
    line-height: 70px;
    color:#22B573;
    text-transform: uppercase;
    padding: 0 250px;
    margin-bottom: 15px;
   
}

.txt-p {
    font-size: 16px;
    color: #2b2c2c;
    padding: 0 250px;
    margin-bottom: 35px;
   
}


.coffee-group {
    display: flex;
    justify-content: space-between;
    
    
}




.coffee-1 {
    padding: 20px 25px;
    background-color: #dfe4e5;
    border-radius: 20px;
    margin: 1%;

}
.coffee-1 img {
    width: 80px;
}

.coffee-1 h3 {
    color:#0071BC;
    font-size: 20px;
    margin-bottom: 15px;
   
    margin-top: 10px;
}



/*======PALABRAS EMOTIVAS======*/

.contenedor_emotivo{
    width: 100%;
    height: 300px;
    background-color: rgb(47, 82, 66);
    padding-top: 80px;
    align-items: center;
    text-align: center;
    margin: 0;
}

.contenedor_emotivo h2{
   
    color: white;
    font-size: 40px;
    margin-bottom: 30px;
}

.contenedor_emotivo p{
   
    color: white;
    font-size: 16px;
    padding: 0 70px 0 70px;
}
/*======PAGINA DE CONTACTO======*/

.container_contacto{
  
  
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 130vh;
}

.form-content  {
    background: linear-gradient(
        50deg,
        rgb(64, 67, 88) 50%,
        rgba(40,42,55,0.7)
        ),
        url(../Imagenes/fondo\ de\ contacto.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 50px;
        width: 1000px;
        border-radius: 25px;
}

.form-content h2{
    color: white;
    font-size: 40px;
    margin-bottom: 25px;
}

form {
    display: flex;
    flex-direction: column;
    width: 50%;
}

label {
    font-size: 17px;
    color: #ffffff;
    margin-bottom: 10px;
}

input , textarea {
    padding: 17px 14px;
    background-color: #c5c5cd;
    border: 0;
    font-size: 15px;
    color: #141415;
    margin-bottom: 20px;
    border-radius: 10px;
}

:focus .form-content {
    outline: 3px solid #f1f1f1;
}

.btn{

    background-color: #488970;
    width: 150px;
    align-self: flex-end;
    cursor: pointer;
    color: white;
}

.btn:hover {
    background-color: #1b71b2;
}

/*======PROYECTOS======*/


.titulo_proyecto{
    text-align: center;
   
    margin-top: 60px;
    margin-bottom: 40px;
}

.titulo_proyecto h2{
    color:#22B573 ;
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 10px;

}

.titulo_proyecto h3{
    font-size: 18px;
    color: rgb(101, 101, 101);
}

.gym_container {
    display: flex;
}

.gym-1 {
    width: 50%;
    padding: 100px 250px 100px 100px;
    background-color:  rgb(255, 255, 255);
}
.gym-2 {
    background-image: url(../Imagenes/proyecto2.jpg);
    background-position: center center;
    background-repeat: no-repeat ;
    background-size: cover;
    width: 50%;
}

.gym-3 {
    background-image: url(../Imagenes/proyecto3.jpg);
    background-position: center center;
    background-repeat: no-repeat ;
    background-size: cover;
    width: 50%;
}


.gym-1 h2{
    font-size: 30px;
    line-height: 40px;
    color:#0071BC;
    text-transform: uppercase;
    margin-bottom: 20px;
   
}

.gym-1 p {
    font-size: 16px;
    color: #414247 ;
  
    
    text-align: justify;
    font-weight: 600;
}

/*======BLOG======*/

.blog_container{
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
}


.texto_blog h2{
    font-size: 30px;
   
    color: #0071BC;
    margin-bottom: 10px;
    margin-top: 70px;

}

.texto_blog h3{
   
    color: #22B573;
    margin-bottom: 20px;
}

.texto_blog p{
    font-size: 16px;
    
    color: rgb(77, 77, 77);
    font-weight: 600;
    text-align: justify;
   
}

.imagen_blog img{
    display: block;
    max-width: 900px;
    max-height: 500px;
    box-shadow:  0 5px 20px #000;
    margin: 40px auto;
}

/*======ENLACES LEGALES======*/

.enlaces_container {

    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;

}

.txt_legales h2{

    font-size: 25px;
  
    color: #02416b;
    margin-bottom: 10px;
    margin-top: 40px;

}

.txt_legales p{

    font-size: 16px;

    color: rgb(77, 77, 77);
    font-weight: 600;
    text-align: justify;

}

.txt_legales ul {
    
    color: rgb(77, 77, 77);
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: 400;
    margin: 20px 20px;
    text-align: justify;
}
/*======RESPONSIVE======*/


@media (max-width:1690px){

    footer {
        padding: 50px 9% 40px;
    }

}
@media (max-width:1120px) {
    .footer{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, auto));
        gap: 2.5rem;
    }

    .text_empresa h2{
        font-size: 27px;
    }

    .text_empresa p {
        
        font-size: 10px;
    }
    .boton_nosotros{
        font-size: 20px;
    }
    
}
@media (max-width:700px) {
    .footer{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, auto));
        gap: 2rem;
    }


    .copyright img{
        height: 20;
        
    }
    .copyright p{
        font-size: 4px;
    }

    .text_empresa h2{
        font-size: 27px;
    }

    .text_empresa p{
        
        font-size: 10px;
    }

    .text_empresa h2{
        font-size: 10px;
    }

    .text_empresa p{
        
        font-size: 8px;
    }
    .boton_nosotros{
        font-size: 20px;
    }
    
}
@media (max-width:991px) {

    .menu {
        margin-left: 10px;
        margin-right: 40px;
        padding: 5px;
        position: relative;
    }

    .menu label {
        display: initial;
    }
    
    .menu .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #435eb0;
        display: none;
    }

    .menu .navbar li:hover {
    background-color:#22B573;
    }
    .menu .navbar ul {
        flex-direction: column;
    }

    .menu .navbar ul li {
        width: 100%;
        padding: 20px 0;

    }

    .menu .navbar ul li a:hover {
        color: white;
    }

    #menu:checked ~ .navbar {
        display: initial;

    }
   
    .services {
        padding: 50px 30px 30px 30px;
    }
    .services-content {
        margin-bottom: 30px ;
    }
    .services-1 {
        padding: 10px;
        
    }

    .services-1 img{
        margin-bottom: 10px;
        width: 40px;
        height: 40px;
    }
    .services-1 h3 {
        font-size: 15px;
        line-height: 1.2;
    }

    .container_empresa{
        display:inline-block;
        background-color: #535f83;
        padding-bottom: 20px;
    }

    .container_empresa img{
        max-width: 100%;
    }

    .slider_box {
        width: 100%; 
     }

     .texto a{
        position: absolute;
        text-align: center;
        align-content: center;
        padding: 0 360px;
        top: 170px;
        left: 140px;
        color: rgb(255, 255, 255);
      
        cursor: pointer;
        margin: 20px;
        padding: 0;
    }
    
    .texto h2{
        font-size: 35px;
        margin: 15px;
    }
     
    .services h2{
        font-size: 15px;
    }
 
    .coffee {
        padding: 30px;
    }

    .tft-p {
        padding: 0;
    }
    .coffee-content h2 {
        padding: 0;
    }

    .coffee-group {
        flex-direction: column;
        margin-bottom: 0;
    }

    .coffee-img {
        display: none;
    }

    .general {
        flex-direction: column;
    }

    .general-1 {
        width: 100%;
        padding: 30px;
        text-align: center;
    }

    .general-2,  .general-3 {
        display: none;
    }

    .form-content {
        width: 100%;
    }

    .form {
        width: 100%;
    }

    .titulo_proyecto h2{
        font-size: 15px;
    }

    .titulo_proyecto h3{
        font-size: 10px;
        margin-left: 20px;
        margin-right: 20px;
    }

    .gym_container {
        flex-direction: column;
    }

    .gym-1 {
        width: 100%;
        padding: 30px;
        text-align: center;
    }

    .gym-2,  .gym-3 {
        display: none;
    }
}