/* fuentes */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    /* colores de logo suministrados por diseño grafico */
    --verde_o: #178336;
    --verde_c: #119b39;
    --azul_o: #1f2d53;
    --azul_p: #264c9a;
    /* colores corporativos suministrados por diseño grafico */
    --Mostaza: #f9b233;
    --Carmín: #be1622;
    --Gris: #cbbba0;
    --gris-claro: #f8f8f8;
    --Marrón: #281c0f;
    --Azul:#150f28;
    --blanco:#fff;
    --negro: #000;
    --text-color: #333;
    /* fuentes */
    --ff-montserrat: 'Montserrat', sans-serif;
    --ff-roboto:  'Roboto', sans-serif;
    --ff-poppins: 'Poppins', sans-serif;
    /* sombras */
    --shadow-color-1: rgba(0, 0, 0, .1);
    --shadow-color-3: rgba(0, 0, 0, .3);
    --shadow-color-5: rgba(0, 0, 0, .5);
    /* transiciones */
    --trans-03: all .3s ease;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--ff-poppins);
    /* color: var(--text-color); */
}
body {
    background: url(../recursos/background-img.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    /* contenedores conmunes */
    .father100vh {
        width: 100%;
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
    }



/* boton */
    .button {
    all: unset;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.6em 1.2em;
    border-radius: 1rem;
    font-size: 1.3em;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
    transition: all .3s ease;
    z-index: 20;

    }
    .button p {
        color: var(--azul_o) !important;
        font-weight: 600;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: var(--trans-03);
        z-index: 2;
    }

    .button:hover p{
        color: var(--blanco) !important;
    }


    .button:active {
    border-color: var(--verde_c);
    }

    .button::after, .button::before {
    content: "";
    position: absolute;
    width: 9em;
    aspect-ratio: 1;
    background: var(--verde_c);
    opacity: 80%;
    border-radius: 50%;
    transition: transform 500ms, background 300ms;
    z-index: -1;
    }

    .button::before {
    left: 0;
    transform: translateX(-8em);
    }

    .button::after {
    right: 0;
    transform: translateX(8em);
    }

    .button:hover:before {
    transform: translateX(-1em);
    }

    .button:hover:after {
    transform: translateX(1em);
    }

    .button:active:before,
    .button:active:after {
    background: var(--verde_o);
    }

/* ==================================HOME================================= */

.father-home {
    background:linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.1)),url("../recursos/header-index2.webp");
    background-position: center;
    background-position-y: top;
    background-repeat: no-repeat;
    background-size: cover;
    height: 95dvh;
}

.container-header {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    width: 80%;
    height: 100%;
}

.container-header .container-header__info {
    display: flex;
    position: relative;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
    width: 100%;
    
}

.container-header .container-header__info .container-header__info__text h1{
    color: var(--azul_o);
    font-size: 3rem;
}

.container-header .container-header__info .container-header__info__text h1 span {
    color: var(--verde_o);
}

.container-header .container-header__info .container-header__info__text p:nth-child(2) {
    font-size: 2.5rem;
    font-weight: 600;
}

.container-header .container-header__info .container-header__info__text p:nth-child(3) {
    font-size: 1.5rem;
    font-weight: 600;
}

/* ==================================Importancia de respirar aire limpio================================= */

.father-air-clean {
width: 100%;
min-height: 100dvh;
display: flex;
justify-content: center;
padding-bottom: 3rem;
}

.father-air-clean .container-air-clean {
    width: 90%;
    padding-top: 3%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.father-air-clean .container-air-clean .air-clean-title {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.father-air-clean .container-air-clean .air-clean-title h3 {
    font-size: 2.8vw;
    font-weight: 600;
    color: var(--verde_o);
    width: 100%;
    text-align: center;
}

.father-air-clean .container-air-clean .air-clean-title p {
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
}

.father-air-clean .container-air-clean .air-clean-title p span {
    color: var(--verde_o);
    font-weight: 600;
}

.father-air-clean .container-air-clean .air-clean-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.father-air-clean .container-air-clean .air-clean-cards h3 {
    font-size: 2.3vw;
    font-weight: 600;
    color: var(--verde_c);
    width: 100%;
    text-align: center;
}

.father-air-clean .container-air-clean .air-clean-cards .cards-air-clean {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    
}

.father-air-clean .container-air-clean .air-clean-cards .cards-air-clean .card {
    box-shadow: 0 2px 5px rgba(38, 76, 154,.3);
    background: #f8f8f8;
    border-radius: 10% 10px 10% 10%;
    width: 21rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.father-air-clean .container-air-clean .air-clean-cards .cards-air-clean .card .card-img {
    width: 90%;

    border-radius: 10% 10px 10% 10%;
    overflow: hidden;
    height: 15rem;
    margin-top: 2rem;
    

}

.father-air-clean .container-air-clean .air-clean-cards .cards-air-clean .card .card-img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: var(--trans-03);
}

.father-air-clean .container-air-clean .air-clean-cards .cards-air-clean .card .card-img img:hover {
    transform: scale(1.1);
}

.father-air-clean .container-air-clean .air-clean-cards .cards-air-clean .card .card-info {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.father-air-clean .container-air-clean .air-clean-cards .cards-air-clean .card .card-info h4 {
    color: var(--azul_o);
    width: 90%;
    font-size: 1.5rem;
}

.father-air-clean .container-air-clean .air-clean-cards .cards-air-clean .card .card-info p {
    width: 90%;
    padding-bottom: 1rem;
    
}

/* ==================================Herramientas de trabajo================================= */

.tools_father {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 2rem;
    padding-bottom: 3rem;


}

.tools_father .tools_father-title {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.tools_father .tools_father-title h2 {
    font-size: 2.8vw;
    font-weight: 600;
    color: var(--verde_o);
    width: 100%;
    text-align: center;
}

.tools_father .tools_father-title p {
    width: 100%;
    text-align: center;
}

.tools_father .tools_father-title p span {
    color: var(--verde_o);
    font-weight: 600;
}


/* acordeon responsive 650px */

.accordion {
   /*  max-width: 530px; */
    width: 80%;
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 4px  rgba(0,0,0,.2);
   /*  display: none; */
}

.accordion .accordion-content {
    background: #f2f2f2;
    border-radius: 4px;
    margin: 10px 0;
}

.accordion-content.open {
    padding-bottom: 10px;
}

.accordion .accordion-content .title-accordion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    min-height: 3.12rem;
    cursor: pointer;
    transition: all .2s ease;
}

.accordion-content.open .title-accordion {
    min-height: 2.18rem;
}



.accordion .accordion-content .title-accordion span,
.accordion .accordion-content .title-accordion i {
    color: var(--verde_o);
    font-weight: 600;
    font-size: 1.3rem;
}

.accordion .accordion-content .description-accordion {
    display: flex;
    gap: .5rem;
    justify-content: space-around;
    align-items: center;
    height: 0;
    overflow: hidden;
    transition:all .2s linear;

}

.accordion .accordion-content .description-accordion .img-tools-accordion {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accordion .accordion-content .description-accordion .img-tools-accordion img {
    height: 200px;
    object-fit: cover;
}

.accordion .accordion-content .description-accordion .info-tools-accordion {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.accordion .accordion-content .description-accordion .info-tools-accordion a {
    padding: .5rem 1.6rem;
}


.accordion-content.open .description-accordion {
    padding: 7rem 0;
} 

.accordion .accordion-content .description-accordion p {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    text-align: center;
}

.accordion .accordion-content .description-accordion a {
    padding: 1.2em 1.3em;;
}

/* ==================================Nosotros================================= */
.father_nosotros {
    width: 100%;
    height: 80dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:url(../recursos/bg-nosotros.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.father_nosotros .container_nosotros {
    width: 90%;
    height: 100%;
    display: flex;
    align-items: start;
    flex-direction: column;

}

.father_nosotros .container_nosotros .nosotros_father-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.father_nosotros .container_nosotros .info_nosotros_general {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.father_nosotros .container_nosotros .info_nosotros_general .info_nosotros1 {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 90%;
    
    
}


.father_nosotros .container_nosotros .info_nosotros_general .info_nosotros1 .info_nosotros_description {
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1% 2%;
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.5)),url(/recursos/Logo_vs.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    backdrop-filter: blur( 7px );
    border-radius: 15px;
}

.father_nosotros .container_nosotros .info_nosotros_general .info_nosotros1 .info_nosotros_description h3 {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    color: var(--verde_o);
}

.father_nosotros .container_nosotros .info_nosotros_general .info_nosotros1 .info_nosotros_description h2 {
    width: 100%;
    text-align: center;
    font-size: 2.5rem;
    color: var(--azul_o);
}

.father_nosotros .container_nosotros .info_nosotros_general .info_nosotros1 .info_nosotros_description p{
    width: 100%;
    text-align: center;
    font-size: 1.1rem;
}


.padre {
    height: 100vh;
    width: 100%;
}

/* ========================Servicios========================= */

/* new services */

.services {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    min-height: 100vh;

}

.services .introduction_services {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.services .introduction_services .title_services {
    font-size: 2.8vw;
    font-weight: 600;
    color: var(--verde_o);
    width: 100%;
    text-align: center;
}

.services .introduction_services .text__services {
    width: 100%;
    text-align: center;
    width: 90%;
}


.container_carrusel {
    width: 100%;
    height:  auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transition: .6s ease;
}

.container_carrusel .item_carrusel {
    display: flex;
    width: 100%;
    height: 23rem;
    border-radius: 1rem;

}

.container_carrusel .item_carrusel article {

    height: 100%;
    width: 40%;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}


.container_carrusel .item_carrusel .img_card_service img {
    height: 100%;
    position: absolute;
    top: 0;
    left: -20%;
    object-fit: cover;
    border-radius: 1rem;
    transition: .3s ease;
}

.container_carrusel .item_carrusel .img_card_service img:hover {
    transform: scale(1.1);
}

.container_carrusel .item_carrusel .info_card_service {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 3%;
    gap: 2rem;
}

.container_carrusel .item_carrusel .info_card_service h3 {
    width: 100%;
    text-align: center;
    color: var(--verde_c);
    font-size: 2rem;
    font-weight: 600;
}

.container_carrusel .item_carrusel .info_card_service p {
    width: 100%;
    text-align: center;
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 600;
}


.swiper {
    width: 90%;
    height: auto;
}

.service_wrapper {
    transition: .6s ease;
}


.swiper .swiper-button-prev,
.swiper .swiper-button-next{
    --swiper-navigation-size:22px;
    color: var(--verde_o);
    font-weight: 600;

}

.swiper-pagination-bullet {
    background-color: var(--verde_o);
}

/*========================= COntactos =============================*/

.contact {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 0 2%;
    padding-top: 2rem;


}

.contact .title_contact {
    width: 100%;
    text-align: center;
    font-size: 2.5rem;
    color: var(--verde_o);
    
}


.contact .section__formulario {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 1rem;
    overflow: hidden;
}



    /* Formulario */

.form {
    display: flex;
    gap: 1rem;
    width: 100%;
    padding: 20px;
    border-radius: 16px;
    width: 100%;
    flex-direction: column;

}
.section__formulario .formulario .form .text-area{
    width: 100%;
}

.form label {
    position: relative;
    width: 100%;
}

.form label .input  {
    width: 400px;
    padding: 15px 10px 20px 10px;
    outline: 0;
    border: 1px solid rgba(105, 105, 105, 0.397);
    border-radius: 10px;

}

.form label .input::placeholder {
    color: var(--verde_o);
}

.form label select.input {
    width: 100%;
    text-align: center;
    color: var(--verde_o);
    font-weight: 600;

}


.form label textarea {
    resize: none;
    width: 110%;
}

.form label textarea::placeholder {
    color: var(--verde_o);
}

.form .btn_form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact .section__formulario .formulario .form .button:hover {
    color: var(--blanco);
}

/* =====================footer========================= */

.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: rgb(75,192,108);
    background: linear-gradient(142deg, rgba(75,192,108,1) 35%, rgba(38,76,154,1) 86%);
}

.footer .container-footer {
    width: 90%;
    display: flex;
    flex-direction: column;
    padding: 2rem 0 0 0;
    gap: 1rem;
}

.footer .container-footer .zone1 {
    width: 100%;
    display: flex;
    align-items: top;
    justify-content: space-between;
}

.footer .container-footer .zone2 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--blanco);
}

.footer .container-footer .zone1 article:nth-child(1) {
    width: 25%;
    display: flex;
    align-items: top;
    justify-content: center;
}

.footer .container-footer .zone1 article:nth-child(1) img {
    width: 150px;
    height: 150px;
    transition: var(--trans-03);
}

.footer .container-footer .zone1 article:nth-child(1) a {
    text-decoration: none;
    transition: var(--trans-03);
}

.footer .container-footer .zone1 article:nth-child(1) a:hover img {
    transform: scale(1.1);
}

.footer .container-footer .zone1 article:nth-child(2) {
    width: 25%;
    display: flex;
    align-items: top;
    justify-content: center;
}

.footer .container-footer .zone1 article:nth-child(2) ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* gap: 1rem; */
}

.footer .container-footer .zone1 article:nth-child(2) ul li {
    list-style:  none;
    color: var(--blanco);
    transition: var(--trans-03);
}

.footer .container-footer .zone1 article:nth-child(2) ul .title-service-footer {
    font-size: 1.5rem;
    font-weight: 600;
}

.footer .container-footer .zone1 article:nth-child(2) ul li a {
    text-decoration: none;
    color: var(--blanco);
    transition: var(--trans-03);
}

.footer .container-footer .zone1 article:nth-child(2) ul .option-service-footer:hover a{
    color: var(--Azul);
}


.footer .container-footer .zone1 article:nth-child(3) {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 1rem;
}

.footer .container-footer .zone1 article:nth-child(3) h3 {
    width: 100%;
    text-align: center;
    color: var(--blanco);
    font-size: 1.5rem;
}

.footer .container-footer .zone1 article:nth-child(3) p {
    color: var(--blanco);
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.footer .container-footer .zone1 article:nth-child(3) p i {
    font-size: 1.5rem;
}

.footer .container-footer .zone1 article:nth-child(3) p a {
    text-decoration: none;
    color: var(--blanco);
    transition: var(--trans-03);
}

.footer .container-footer .zone1 article:nth-child(3) p a:hover {
    color: var(--Azul);
}

.footer .container-footer .zone2 span {
    color: var(--blanco);
}

.footer .container-footer .zone2 a {
    text-decoration: none;
    color: var(--blanco);
}