* {
    box-sizing: border-box;
    overflow-x: none;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  --verde: #005357;
  --verde-oscuro: rgb(0 62 65);
  --naranja: #E84621;
  --naranja-oscuro: rgb(174 53 25);
  --gris: #D4D8DA;
  --gris-claro: #eeeeee;
  --blanco: #FBFBFB;
  --negro: #2E2D2C;
  --rounded: 0.5rem;
}

.banner-index {
    width: 100%;
    height: 40rem;
    background-image: url('../img/img-d.png');
    background-size: cover;
    background-position: left center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 3rem;
    align-items: center;
    text-align: center;
}

.main-header {
    position: relative;
    z-index: 2;
    width: 56rem;
}

.main-header>button {width: 28rem;}


.tecnologias, .servicios, .industrias-index, .form-content {
    max-width: 56rem;
    margin: auto;
    text-align: center;
}

.tecnologias {
    padding: 6rem 0rem 1.5rem;
    text-align: center;
}

.tecnologias-icons {
    display: flex;
    flex-direction: row;
    padding: 1rem 0rem;
    justify-content: space-around;
}

.tecnologia-icon {
    max-width: 15rem;
}

.icons-tec {
    width: 12rem;
    height: 7.125rem;
}

.lg-tec1 {
    margin: auto;
    background-image: url('../img/noroo.svg');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.lg-tec2 {
    margin: auto;
    background-image: url('../img/lg-calidad.svg');
    background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.lg-tec3 {
    margin: auto;
    background-image: url('../img/lg-invima.png');
    background-size:contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.servicios-cards {
    display: flex;
    flex-direction: row;
    gap: 0.1rem;
}

.card-service {
    min-height: 22rem;
    width: 33.33%;
    padding: 9rem 1rem 1rem;
    background-color: var(--gris);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--rounded);
    color: var(--blanco);
}

.text-service>h4, .text-service>p {color:var(--blanco);}

.c-bg-1, .c-bg-2, .c-bg-3 {
    position: relative; 
    overflow: hidden;
    isolation: isolate;
    z-index: 0;
}

.c-bg-1 {
    background-image: url('../img/bg-c-hormigon.jpg');
    background-size: cover;
    background-position: left center;
}

.c-bg-2 {
    background-image: url('../img/bg-c-imperbeabilizacion.jpg');
    background-size: cover;
    background-position: left center;
}

.c-bg-3 {
    background-image: url('../img/bg-c-anticorrosion.jpg');
    background-size: cover;
    background-position: left center;
}

.c-bg-1::before, .c-bg-2::before, .c-bg-3::before {
    content: ''; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.9) 60%);
    z-index: -1;
    opacity: 0.7;
    transition: opacity 0.3s ease-in-out;
}

.c-bg-1:hover::before, .c-bg-2:hover::before, .c-bg-3:hover::before {
    opacity: 0.9;
}


.text-service {text-align: left;}
.text-service>h4 {margin: 0; padding:0;}

.card-service>button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
}

.btn-icon2>img {
  height: 1rem;
}


.certificaciones {
    margin: 9rem 0rem;
    width: 100%;
    height: fit-content;
    padding: 0rem 3rem 4rem;

    background-color: var(--gris);
    background-image: url('../img/banner3.webp');
    background-size: cover;
    background-position: left center;

    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-certificaciones {width: 40rem;}
.content-certificaciones>button {width: 20rem;}

.certificaciones>.slider-container {
    margin-top: -2rem;
    margin-bottom: 2rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 25px 2px ;
}

.logos-certificaciones {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 3rem;
    justify-content: center;
}

.logo-certificacion {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
}

.logo-cer1 {
    background-image: url('../img/iso45001.webp');
    background-size: cover;
    background-position: center center;
}

.logo-cer2 {
    background-image: url('../img/iso12922.webp');
    background-size: cover;
    background-position: center center;
}

.logo-cer3 {
    background-image: url('../img/iso9001.webp');
    background-size: cover;
    background-position: center center;
}



.industrias-index {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.grid-index-industrias {
    margin: auto;
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.card-industria {
    max-width: 13rem;
    height: 14rem;
    border-radius: var(--rounded);
    padding: 0rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card-industria:hover {
    min-width: 13rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0rem;
}

.card-industria>a {display: none;}
.card-industria:hover>a {display: block;}


.form-content {
    display: flex;
    flex-direction: row;
    gap: 3rem;
}

.t-form-responsive {display: none;}
.t-form-web {display: block;}

.form-tittles>div>h1 {
    font-size: 2.1rem;
}

.form-tittles {
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12rem;
}

.form-tittles>h1 {margin: 0; padding: 0;}

.form-container {
    position: relative;
    top: -6rem;
}

.card-industria>h5 {
    color: var(--blanco);
    font-size: 1.3rem;
    transition: opacity 400ms ease;
    opacity: 1;
}

.card-industria:hover>h5 {
   opacity: 0;
   display: none;
}

.ci1, .ci2, .ci3, .ci4, .ci5, .ci6, .ci7, .ci8, .ci9{
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.ci1::before, .ci2::before, .ci3::before, .ci4::before, .ci5::before, .ci6::before, .ci7::before, .ci8::before, .ci9::before{
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 100%;
    
    background-image:linear-gradient(rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 0.7) 70%);
    transition: opacity 400ms ease;

    z-index: -1;
    opacity: 1;
}

.ci1:hover::before, .ci2:hover::before, .ci3:hover::before, .ci4:hover::before, .ci5:hover::before, .ci6:hover::before, .ci7:hover::before, .ci8:hover::before, .ci9:hover::before {
    opacity: 0.7;
}


.ci1 {
    background-image: url('../img/i-quimico.webp');
    background-size: cover;
    background-position: left center;

}

.ci2 {
    background-image: url('../img/i-construccion.jpg');
    background-size: cover;
    background-position: left center;
}

.ci3 {
    background-image: url('../img/i-alimentos.webp');
    background-size: cover;
    background-position: left center;
}

.ci4 {
    background-image: url('../img/i-medicina.webp');
    background-size: cover;
    background-position: left center;
}

.ci5 {
    background-image: url('../img/i-agricola.webp');
    background-size: cover;
    background-position: left center;
}

.ci6 {
    background-image: url('../img/i-automotriz.webp');
    background-size: cover;
    background-position: left center;
}

.ci7 {
    background-image: url('../img/i-transporte.webp');
    background-size: cover;
    background-position: left center;
}

.ci8 {
    background-image: url('../img/i-madera.webp');
    background-size: cover;
    background-position: left center;
}

.ci9 {
    background-image: url('../img/i-farmaceutica.jpg');
    background-size: cover;
    background-position: left center;
}


@media (max-width: 992px) {

    .banner-index { padding: 4rem 0rem;}

    .main-header {
        width: 90%;
}

.main-header>button {width: 100%;}

    .tecnologias, .servicios {
        max-width: 90%;
        margin: auto;
        text-align: center;
}

    .tecnologias-icons {
        display: flex;
        flex-direction: row;
        padding: 1rem 0rem;
        justify-content: space-around;
        align-items: center;
}

    .tecnologia-icon {
        max-width: 15rem;
        display: flex;
        flex-direction: column;
        align-items: center;
}

    .tecnologia-icon>p {
        font-size: 1rem;
    }

    .icons-tec {
        width: 10rem;
        height: 5rem;
}

    .servicios-cards {
    max-width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

    .card-service {
    min-height: 17rem;
    width: 100%;
    padding: 5rem 0rem 0rem;
    background-color: var(--gris);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--blanco);
    border-radius: var(--rounded);
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.25);
}

    .text-service {
        margin: auto;
        width: 85%;
        text-align: center;
        padding: 0rem 0rem 1rem;
    }

    .text-service>p {
        font-size: 1rem;
    }

    .c-bg-1::before, .c-bg-2::before, .c-bg-3::before {
    content: ''; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 100%);
    backdrop-filter: blur(10px);
    z-index: -1;
}

    .certificaciones {
    margin: 7rem 0rem;
    width: 100%;
    padding: 0rem 0rem 3rem 0rem;
    background-color: var(--gris);
    background-size: cover;
    background-position: left center;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

    .content-certificaciones {max-width: 90%; margin: auto;}
    .content-certificaciones>button {width: 100%;}
    .content-certificaciones>h3 {margin: 0; padding: 0; font-size: 1.5rem;}

    .logos-certificaciones {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    margin: 3rem 0rem;
}

    .logo-certificacion {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.5);
}

    .industrias-index {width: 100%; padding-bottom: 5rem;}
    .industrias-index>h2{width: 90%; margin: auto; order: 2;}

    .grid-index-industrias {
    min-width:fit-content;
    margin: auto;
    display: flex;
    overflow-x: visible;
    order: 1;
}

    .card-industria {
        max-width: 10rem;
        height: 12rem;
        border-radius: var(--rounded);
        padding: 0rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
}

    .card-industria:hover {
        min-width: 10rem;
    }

    .card-industria>h5 {
        font-size: 1rem;
    }

    .senal-slide {
        width: 90%;
        margin-top: 1rem;
        height: 1.3rem;
        display: none;
        background-image: url('../img/flecha-btn-img.svg');
        background-size: contain;
        background-position: right center;
        background-repeat: no-repeat;

    }

    .form-section-1 {
        width: 100%;
        padding: 0rem;
        margin-top: 3rem;
        background-image: none;
        background-size: cover;
        background-position: left center;
        display: flex;
    }

    .t-form-responsive {display: block;}
    .t-form-web {display: none;}

    .t-form-responsive>p {margin-bottom: 4rem;}

    form>small {
        margin-top: 1rem;
        font-size: 0.8rem;
    }

    .form-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0rem;
}

    .form-container {
    position: relative;
    top: 0;
}

    .ci1::before, .ci2::before, .ci3::before, .ci4::before, .ci5::before, .ci6::before, .ci7::before, .ci8::before, .ci9::before{
    content: '';

    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-image:linear-gradient(rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.9) 90%);
    transition: opacity 400ms ease;

    z-index: -1;
    opacity: 1;
}

}