@import url(responsive.css);
@import url(fonts.css);
@import url(lazy-loading-effect.css);

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    /* Fuentes */
    --font-roboto-black-italic: 'Roboto-BlackItalic';
    --font-roboto-italic: 'Roboto-Italic';
    --font-roboto-light-italic: 'Roboto-LightItalic';
    --font-roboto-light: 'Roboto-Light';
    --font-roboto-black: 'Roboto-Black';
    --font-roboto-bold-italic: 'Roboto-BoldItalic';
    --font-roboto-bold: 'Roboto-Bold';
    --font-roboto-thin-italic: 'Roboto-ThinItalic';
    --font-roboto-thin: 'Roboto-Thin';
    --font-roboto-regular: 'Roboto-Regular';
    --font-roboto-medium: 'Roboto-Medium';
    --font-roboto-medium-italic: 'Roboto-MediumItalic';

    /* Tamaños de fuentes*/

    --fontsize-mini: 0.68rem;
    --fontsize-ultra-small: 0.933rem;
    --fontsize-small: 1rem;
    --fontsize-regular: 1.438rem;
    --font-size-regular-plus: 1.8rem;
    --fontsize-medium: 1.75rem;
    --fontsize-big: 2.4rem;
    --fontsize-ultra-big: 3.2rem;

    @media (max-width: 1000px) {
        --fontsize-big: 2.4rem;
    }

    /* Paleta de colores */
    --color-gray: #565656;
    --color-black: #000000;
    --color-white: #ffffff;
    --color-blue: #00197C;
    --color-blue-light: #0027A2;
    --color-red: #FF0000;
    --color-orange: #FF9400;
    --color-cyan: #97C1E9;

    /* Gradients */
    --gr-blue: linear-gradient(-90deg, rgba(0, 93, 181, 1) 0%, rgba(10, 40, 128, 1) 100%);
    --gr-blue-ttb: linear-gradient(0deg, rgba(0, 93, 181, 1) 0%, rgba(10, 40, 128, 1) 100%);
    --gr-blue-btt: linear-gradient(0deg, rgba(10, 40, 128, 80%) 0%, rgba(0, 93, 181, 80%) 100%);
    --gr-blue-full: linear-gradient(-90deg, rgba(10, 40, 128, 1) 100%, rgba(10, 40, 128, 1) 100%);
}

/* Animaciones */

@keyframes backgroundZoom {

    0%,
    100% {
        background-size: 100% 100%;
        /* Inicio y fin en tamaño normal */
    }

    50% {
        background-size: 150% 150%;
        /* Escala al 150% en el punto medio */
    }
}

/* Normalización */

html {
    overflow-x: hidden;
}

body {
    font-size: 16px;
}

picture {
    display: block;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.wh-100 {
    @extend .w-100;
    @extend .h-100;
}

img {
    vertical-align: top;
    height: auto;
}

.p-relative {
    position: relative;
}

.row.start {
    align-items: flex-start !important;
}

.p-absolute {
    position: absolute;
}

a,
button,
input[type="submit"] {
    cursor: pointer;
    @include m.transition;
}

main,
section,
header,
footer,
aside {
    width: 100%;
}

a {
    text-decoration: none;
}

textarea,
button,
input,
select,
option {
    outline: none;
}

.contenedor {
    width: min(80%, 1920px);
    margin-inline: auto;

    &.xl {
        width: min(94%, 1760px);
    }
}

video {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
}

ul {
    list-style: none;
}

/* Splide Estilos */
.splide {
    width: 100%;
}


/* Reutilizables */
/* -- Botones */

.btn-bordered {
    font-size: var(--fontsize-small);
    font-family: var(--font-roboto-bold);
    color: var(--color-blue);
    padding: 0.8rem 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
    border-radius: 5px;
    border: 3px solid var(--color-blue);
    transition: all .3s ease;

    &:hover {
        background: var(--color-blue);
        color: var(--color-white);
    }
}

.btn-blue {
    display: flex;
    background: var(--gr-blue);
    font-size: var(--fontsize-small);
    font-family: var(--font-roboto-black);
    color: var(--color-white);
    padding: 1rem 1.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    border-radius: 5rem !important;
    transition: all .3s ease;
    display: flex;
    width: max-content;
    gap: 0.4rem;
    transition: all .3s ease;

    span {
        font-family: var(--font-roboto-light);
        font-weight: normal;
        width: 0rem;
        opacity: 0;
        overflow: hidden;
        text-wrap: nowrap;
        transition: all .3s ease;

        b,
        strong {
            font-family: var(--font-roboto-bold);
        }
    }

    &::after {
        content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDIwIDE2IiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik0xMi4xNzM2IDAuMzA2MzI1QzExLjk4OTQgMC41MTgxOTQgMTEuODg3MyAwLjc4OTg4NSAxMS44ODU5IDEuMDcxNTJDMTEuODg0NSAxLjM1MzE2IDExLjk4NCAxLjYyNTg1IDEyLjE2NjEgMS44Mzk1M0wxNi43MjcxIDYuOTE0MzFIMC45Njg3NTNDMC45Njg3NTMgNi45MTQzMSAwLjAwMTI1MzkyIDcuMzk3NjIgMC4wMDEyNTM5MiA3Ljk5NzM4Qy0wLjAxMjEzMjYgOC4yNzAwNSAwLjA4MjA5MjEgOC41MzY5NyAwLjI2MzM1OCA4LjczOTg5QzAuNDQ0NjI0IDguOTQyODEgMC42OTgyMDkgOS4wNjUyNCAwLjk2ODc1MyA5LjA4MDQ1SDE2LjcyMjFMMTIuMTYxMiAxNC4xNTUyQzExLjk4MDcgMTQuMzY5NyAxMS44ODIzIDE0LjY0MjEgMTEuODgzNyAxNC45MjMyQzExLjg4NTEgMTUuMjA0NCAxMS45ODYxIDE1LjQ3NTggMTIuMTY4NiAxNS42ODg0QzEyLjI1NDUgMTUuNzg3IDEyLjM2MDQgMTUuODY1OCAxMi40NzkxIDE1LjkxOTZDMTIuNTk3OCAxNS45NzMzIDEyLjcyNjYgMTYuMDAwOCAxMi44NTY4IDE2QzEyLjk4NjkgMTUuOTk5MiAxMy4xMTU0IDE1Ljk3MDMgMTMuMjMzNSAxNS45MTUxQzEzLjM1MTYgMTUuODYgMTMuNDU2NiAxNS43Nzk5IDEzLjU0MTMgMTUuNjgwM0wxOS43MjIyIDguNzYzNjdDMTkuODA3NiA4LjY2MTUyIDE5Ljg3NiA4LjU0NjA4IDE5LjkyNDggOC40MjE4NEMxOS45NzU4IDguMjg4OSAyMC4wMDEzIDguMTQ3NDIgMjAgOC4wMDQ4OUMyMC4wMDE3IDcuNzI2NTkgMTkuOTAzIDcuNDU3MTQgMTkuNzIyMiA3LjI0Njc0TDEzLjUzODggMC4zMzEzNjdDMTMuNDU2NiAwLjIyOTk1NiAxMy4zNTM1IDAuMTQ3Nzk1IDEzLjIzNjYgMC4wOTA1OTU5QzEzLjExOTcgMC4wMzMzOTcgMTIuOTkxOSAwLjAwMjUzMjU4IDEyLjg2MTkgMC4wMDAxNDkzOTVDMTIuNzMyIC0wLjAwMjIzMzc5IDEyLjYwMzEgMC4wMjM5MjE0IDEyLjQ4NDMgMC4wNzY3OTU3QzEyLjM2NTQgMC4xMjk2NyAxMi4yNTk0IDAuMjA3OTk1IDEyLjE3MzYgMC4zMDYzMjVaIiBmaWxsPSJ3aGl0ZSIvPg0KPC9zdmc+");
    }

    &:hover {
        background: var(--gr-blue-full);

        span {
            &.short {
                opacity: 1;
                width: 8rem;
            }

            &.large {
                opacity: 1;
                width: 14rem;
            }
        }
    }
}


header {
    z-index: 100;
    overflow: clip;
    display: flex;
    position: fixed;
    transition: all 0.3s ease;

    .head-bg {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        z-index: -1;
        background-image: url(../img/backgrounds/banner-bg.webp);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transition: all .3s ease;
    }

    .header-container {
        display: flex;
        justify-content: space-between;
        padding-block: 2rem;
        transition: all .3s ease;

        .left {
            display: flex;
            height: 100%;
            justify-content: center;
            align-items: center;

            .logo {
                display: flex;
                height: 43px;
                transition: all 0.3s ease;

                img {
                    height: 100%;
                    transition: all .3s ease;
                }
            }
        }

        .right {
            display: flex;
            transition: all .3s ease;

            .info-container {
                display: flex;
                align-items: center;
                gap: 0.8rem;
                transition: all .3s ease;

                .btn-container {
                    display: flex;
                    gap: 0.8rem;

                    a {}
                }

                .separator {
                    width: 3px;
                    background: var(--gr-blue-ttb);
                    height: 140%;
                    transition: all .3s ease;
                }

                .info-aditional {
                    display: flex;
                    flex-direction: column;

                    span {
                        font-size: var(--fontsize-ultra-small);
                        font-family: var(--font-roboto-regular);
                        color: var(--color-black);
                        text-transform: uppercase;

                        &.blue {
                            font-size: var(--fontsize-ultra-small);
                            font-family: var(--font-roboto-bold);
                            color: var(--color-blue);
                        }
                    }
                }
            }
        }
    }

    &.scrolled {
        filter: drop-shadow(1px 2px 3px #0000003f);

        .head-bg {
            opacity: 1;
        }

        .header-container {
            padding-block: 0.5rem;

            .left {

                .logo {
                    height: 34px;

                    img {}
                }
            }

            .right {

                .info-container {
                    transition: all .3s ease;

                    .separator {
                        height: 110%;
                    }
                }
            }
        }
    }

}

main {
    .main-banner {
        background-position: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        display: flex;
        overflow: hidden;
        height: 85vh;

        .banner-container {
            display: flex;
            padding-bottom: 2.5rem;
            gap: 5rem;

            .left {
                width: 50%;
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
                justify-content: center;

                .info-banner {
                    display: flex;
                    flex-direction: column;

                    h4 {
                        color: var(--color-gray);
                        font-size: var(--fontsize-medium);
                        font-family: var(--font-roboto-light);
                        letter-spacing: 0.05rem;
                    }

                    h3 {
                        color: var(--color-black);
                        font-size: var(--fontsize-big);
                        font-family: var(--font-roboto-medium-italic);
                        text-transform: uppercase;
                        font-weight: normal;
                    }

                    h2 {
                        color: var(--color-blue);
                        font-size: var(--fontsize-ultra-big);
                        font-family: var(--font-roboto-black);
                        text-transform: uppercase;
                        line-height: 3.8rem;

                        span {
                            text-decoration: underline;
                            text-decoration-thickness: 0.5rem;
                            text-underline-offset: 0.6rem;
                        }
                    }
                }

                .iso-logos {
                    padding-block: 1rem;
                    display: flex;
                    gap: 0.8rem;

                    .logo {
                        width: 3.5rem;
                        height: 3.5rem;
                        display: flex;

                        img {}
                    }
                }

                .button-banner {
                    justify-content: flex-start !important;
                    display: flex;

                    a {}
                }
            }

            .right {
                width: 50%;
                display: flex;
                flex-direction: column;

                .rotative-items {
                    width: 100%;
                    height: 100%;
                    display: flex;

                    /* Carousel rotativo */
                    .prods_itesa {
                        width: 100%;
                        position: relative;
                        height: 100%;
                        /* Preferible 100% basado en su div padre*/
                        padding: 11px 0 16px;
                        margin: 0 auto;
                        text-align: center;

                        .dg-container {
                            position: relative;
                            width: 100%;
                            height: 100%;
                            justify-content: center;
                            align-items: center;
                            display: flex;


                            .bg {
                                position: absolute;
                                /*width: 100%;
                                height: 100%;*/
                                object-fit: contain;
                                justify-content: center;
                                align-items: center;
                                display: flex;
                                opacity: 0;
                                mix-blend-mode: color-dodge;
                                scale: 2.2;
                                transition: opacity .1s ease;

                                &.active {
                                    opacity: 1;
                                }
                            }


                            .dg-wrapper {
                                width: 100%;
                                height: 100%;
                                margin: 0 auto;
                                position: relative;
                                transform-style: preserve-3d;
                                perspective: 1200px;
                                justify-content: center;
                                align-items: center;
                                display: flex;

                                .wrap {
                                    width: 100%;
                                    height:250px;
                                    display: flex;
                                    position: absolute;
                                    justify-content: center;
                                    align-items: center;
                                    transition: all 0.5s ease-in-out;

                                    &:first-child {
                                        z-index: 2;
                                    }

                                    img {
                                        display: flex;
                                        height: 100%;
                                        object-fit: contain;
                                    }

                                    &.dg-transition {
                                        transition: all 0.5s ease-in-out;
                                    }

                                    &.dg-center {
                                        transition: all 0.5s ease-in-out;

                                        img {}
                                    }

                                    &.dg-transition-fast {
                                        transition: all 0.2s ease-in-out;
                                    }

                                    .img-container {
                                        display: flex;
                                        position: relative;
                                        width: 100%;
                                        height: 100%;
                                        justify-content: center;
                                        align-items: center;

                                        .img-fluid {
                                            z-index: 1;
                                        }
                                    }
                                }
                            }


                        }
                    }
                }

                #lightButton {
                    position: relative;
                    z-index: 5;
                    /* top: 60px; */
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.2rem;

                    li {
                        cursor: pointer;
                        display: inline-flex;
                        width: 11px;
                        height: 11px;
                        border-radius: 3px;
                        background: transparent;
                        border: 1px solid var(--color-blue-light);
                        transition: all .3s ease;

                        &.light {
                            width: 10px;
                            height: 10px;
                            background: var(--color-blue-light);
                        }
                    }
                }
            }

            .button-banner {
                justify-content: center;
                align-items: center;
                display: none;
                z-index: 1;
            }

        }

    }

    .brands-logos {
        justify-content: center;
        align-items: center;
        display: flex;
        height: 100%;
        padding-block: 2rem;

        .splide {
            width: 90%;

            .splide__slide {
                align-items: center;
                justify-content: center;
                display: flex;
                margin: 0 !important;

            }

            .splide__track {
                height: 67px;
            }

            .splide__list {
                gap: 40px;
            }
        }

        .brand {
            align-items: center;
            display: flex;
            justify-content: center;
            filter: grayscale(1);
            transition: all .6s ease;
            width: 140px;
            height: 67px;

            img {
                object-fit: contain;
                width: 100%;
                height: 100%;
            }

            &:hover {
                filter: grayscale(0);
            }
        }
    }

    .projects {
        display: flex;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        animation: backgroundZoom 40s linear infinite;
        height: 100vh;

        .container-projects {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            padding-block: 3.5rem;

            .title {
                display: flex;
                flex-direction: column;

                h2 {
                    font-family: var(--font-roboto-regular);
                    font-weight: normal !important;
                    color: var(--color-white);
                    text-transform: uppercase;
                    text-align: center;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 0.6rem;
                    font-size: var(--fontsize-medium);

                    span {
                        color: var(--color-blue);
                        background-color: white;
                        font-family: var(--font-roboto-bold);
                        font-weight: normal;
                        padding: 0.3rem 0.6rem;
                        border-radius: 0.313rem;
                    }
                }


                h3 {
                    font-size: var(--fontsize-big);
                    font-family: var(--font-roboto-black);
                    color: var(--color-white);
                    text-transform: uppercase;
                    text-align: center;

                    span {
                        text-decoration: underline;
                        text-decoration-thickness: 0.5rem;
                        text-underline-offset: 0.6rem;
                    }
                }
            }

            .main-projects {
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;

                .project {
                    display: flex;
                    flex-direction: column;
                    max-width: 18.5rem;
                    justify-content: center;
                    align-items: center;
                    padding: 0.8rem;
                    background-color: var(--color-white);
                    border-radius: 5px;
                    margin-inline: 2rem;
                    filter: drop-shadow(1px 5px 2px #0000006e);
                    transition: all 0.6s ease;

                    .card {
                        display: flex;
                        aspect-ratio: 1 / 1;
                        justify-content: center;
                        align-items: flex-start;
                        position: relative;
                        /* overflow: hidden; */
                        transition: all .6s ease;

                        .img-bg {
                            overflow: hidden;
                            position: absolute;
                            object-fit: cover;
                            width: 100%;
                            height: 100%;
                            z-index: 0;
                            transition: all .6s ease;

                            img {
                                object-fit: contain;
                                width: 100%;
                                object-position: center;
                            }
                        }


                        .top-head {
                            width: 100%;
                            display: flex;
                            align-items: start;
                            z-index: 1;
                            top: -1px;
                            position: relative;

                            img {
                                object-fit: contain;
                                width: 100%;
                                height: 100%;
                                transform-origin: top left;
                            }
                        }


                        .details {
                            display: flex;
                            position: absolute;
                            height: 100%;
                            align-items: center;
                            opacity: 0;
                            transition: all .6s ease;

                            ul {
                                display: flex;
                                flex-direction: column;
                                gap: 0.6rem;

                                li {
                                    font-family: var(--font-roboto-light);
                                    font-weight: normal;
                                    color: var(--color-white);
                                    display: flex;
                                    gap: 0.4rem;

                                    &::before {
                                        content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuMTI2NTMgMTEuNzYwMkM1LjAyMzY5IDExLjc2MDIgNC45MjA4NiAxMS43MTI4IDQuODQ5NjYgMTEuNjI1N0wzLjQ5NjggOS45NDg1MUMzLjQ0MTQyIDkuODc3MzEgMy40MDk3NyA5Ljc4MjM3IDMuNDE3NjggOS42ODc0NEMzLjQyNTU5IDkuNTkyNSAzLjQ3MzA2IDkuNTA1NDkgMy41NDQyNyA5LjQ1MDExTDUuNzc1MjcgNy42NTQyM0gwLjM1NTk5NkMwLjE1ODIxMiA3LjY1NDIzIDAgNy40OTYgMCA3LjI5ODIyVjQuNTg0NjJDMCA0LjM4Njg0IDAuMTU4MjEyIDQuMjI4NjIgMC4zNTU5OTYgNC4yMjg2Mkg1Ljk0OTMyTDQuMDExMDMgMi4yODI0MkMzLjk0Nzc0IDIuMjE5MTMgMy45MDgyMSAyLjEyNDIgMy45MDgyMSAyLjAyOTI2QzMuOTA4MjEgMS45MzQzMyAzLjk0Nzc0IDEuODQ3MyA0LjAxMTAzIDEuNzc2MUw1LjUzMDAyIDAuMjU3MTJDNS42NjQ1MSAwLjEyMjYyNyA1Ljg5Mzk1IDAuMTIyNjI3IDYuMDI4NDQgMC4yNTcxMkwxMS43NDgzIDUuOTg0OTRDMTEuODE5NiA2LjA1NjE0IDExLjg1OTEgNi4xNTEwNyAxMS44NTEyIDYuMjUzOTJDMTEuODQzMyA2LjM1Njc3IDExLjc5NTggNi40NDM4IDExLjcxNjcgNi41MDcwOUw1LjMyNDMyIDExLjY1NzRDNS4yODQ3NiAxMS43MzY1IDUuMjA1NjUgMTEuNzYwMiA1LjEyNjUzIDExLjc2MDJaTTQuMjcyMTIgOS43ODIzOEw1LjE4MTkyIDEwLjkwNThMMTAuOTg4OCA2LjIyMjI4TDUuNzk5IDEuMDI0NTJMNC43Nzg0MyAyLjA0NTA5TDcuMDcyNzQgNC4zMzkzOEM3LjE3NTU5IDQuNDQyMjIgNy4yMDcyMiA0LjU5MjU0IDcuMTUxODQgNC43MjcwNEM3LjA5NjQ2IDQuODYxNTMgNi45Njk5IDQuOTQwNjMgNi44Mjc0OSA0Ljk0MDYzSDAuNzM1NzQ5VjYuOTUwMTJINi43OTU4NEM2Ljk0NjE2IDYuOTUwMTIgNy4wODA2NCA3LjA0NTA2IDcuMTI4MSA3LjE4NzQ2QzcuMTc1NTcgNy4zMjk4NyA3LjEzNjAzIDcuNDg4MDkgNy4wMTczNiA3LjU4MzAzTDQuMjcyMTIgOS43ODIzOFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
                                    }

                                    b,
                                    strong {
                                        font-family: var(--font-roboto-bold);
                                        font-weight: normal;
                                    }
                                }
                            }
                        }
                    }

                    .title {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        padding-block: 0.6rem 0rem;

                        h3 {
                            display: flex;
                            font-family: var(--font-roboto-light);
                            font-size: var(--fontsize-regular);
                            color: var(--color-black);
                            text-transform: uppercase;
                            font-weight: normal;
                            gap: 0.3rem;

                            &::before {
                                width: min-content;
                                content: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxOCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjk1NjIgMC4yNjgwMzRDMTAuNzkwNSAwLjQ1MzQyIDEwLjY5ODUgMC42OTExNSAxMC42OTczIDAuOTM3NTg0QzEwLjY5NjEgMS4xODQwMiAxMC43ODU2IDEuNDIyNjIgMTAuOTQ5NSAxLjYwOTU5TDE1LjA1NDQgNi4wNTAwMkgwLjg3MTg3N0MwLjg3MTg3NyA2LjA1MDAyIDAuMDAxMTI4NTMgNi40NzI5MiAwLjAwMTEyODUzIDYuOTk3NzFDLTAuMDEwOTE5MyA3LjIzNjI5IDAuMDczODgyOSA3LjQ2OTg1IDAuMjM3MDIyIDcuNjQ3NDFDMC40MDAxNjIgNy44MjQ5NiAwLjYyODM4OCA3LjkzMjA5IDAuODcxODc3IDcuOTQ1MzlIMTUuMDQ5OUwxMC45NDUgMTIuMzg1OEMxMC43ODI3IDEyLjU3MzUgMTAuNjk0MSAxMi44MTE4IDEwLjY5NTMgMTMuMDU3OEMxMC42OTY2IDEzLjMwMzggMTAuNzg3NSAxMy41NDEzIDEwLjk1MTggMTMuNzI3NEMxMS4wMjkgMTMuODEzNiAxMS4xMjQzIDEzLjg4MjYgMTEuMjMxMiAxMy45Mjk2QzExLjMzOCAxMy45NzY3IDExLjQ1NCAxNC4wMDA3IDExLjU3MTEgMTRDMTEuNjg4MyAxMy45OTkzIDExLjgwMzkgMTMuOTc0IDExLjkxMDIgMTMuOTI1N0MxMi4wMTY1IDEzLjg3NzUgMTIuMTEwOSAxMy44MDc0IDEyLjE4NzEgMTMuNzIwM0wxNy43NSA3LjY2ODIxQzE3LjgyNjkgNy41Nzg4MyAxNy44ODg0IDcuNDc3ODIgMTcuOTMyMyA3LjM2OTExQzE3Ljk3ODIgNy4yNTI3OSAxOC4wMDEyIDcuMTI4OTkgMTggNy4wMDQyOEMxOC4wMDE2IDYuNzYwNzcgMTcuOTEyNyA2LjUyNDk5IDE3Ljc1IDYuMzQwOUwxMi4xODQ5IDAuMjg5OTQ2QzEyLjExMDkgMC4yMDEyMTEgMTIuMDE4MSAwLjEyOTMyIDExLjkxMjkgMC4wNzkyNzE0QzExLjgwNzcgMC4wMjkyMjI0IDExLjY5MjcgMC4wMDIyMTYwMSAxMS41NzU3IDAuMDAwMTMwNzJDMTEuNDU4OCAtMC4wMDE5NTQ1NyAxMS4zNDI4IDAuMDIwOTMxMiAxMS4yMzU4IDAuMDY3MTk2MkMxMS4xMjg5IDAuMTEzNDYxIDExLjAzMzQgMC4xODE5OTYgMTAuOTU2MiAwLjI2ODAzNFoiIGZpbGw9IiMwMDE5N0MiLz4KPC9zdmc+Cg==');
                            }
                        }

                        span {
                            font-size: var(--fontsize-regular);
                            font-family: var(--font-roboto-bold);
                            font-weight: normal;
                            color: var(--color-blue);
                            text-transform: uppercase;
                        }
                    }

                    &.effect {
                        filter: grayscale(1) blur(.1rem);
                        transform: scale(0.95);
                    }

                    &:hover {

                        .card {

                            .img-bg {
                                filter: brightness(0.3);
                            }

                            .details {
                                opacity: 1;
                            }
                        }

                        transform: scale(1.05);
                    }
                }
            }
        }
    }

    .international-certificates {
        display: flex;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .container-certificates {
            display: flex;
            height: 100%;
            overflow: hidden;

            .left {
                width: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 5rem;

                .title {
                    flex-basis: 50%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    h3 {
                        display: flex;
                        flex-direction: column;
                        font-family: var(--font-roboto-black-italic);
                        font-size: var(--font-size-regular-plus);
                        color: var(--color-white);

                        span {
                            text-transform: uppercase;
                            color: var(--color-orange);
                        }
                    }
                }

                .description {
                    flex-basis: 50%;
                    display: flex;

                    p {
                        color: var(--color-white);
                        font-size: var(--fontsize-small);
                        font-family: var(--font-roboto-light);

                        b,
                        strong {
                            font-family: var(--font-roboto-bold);
                        }
                    }
                }
            }

            .right {
                width: 50%;
                display: flex;
                justify-content: center;
                gap: 2rem;

                .iso-container {
                    opacity: 0;
                    display: flex;
                    background: white;
                    align-items: flex-end;
                    padding: 0.8rem;
                    height: 17rem;
                    transform: rotate(25deg);
                    border-radius: 0 0 5rem 5rem;
                    top: -3.2rem;
                    position: relative;

                    .rounded-div {
                        display: flex;

                        .img-iso {
                            width: 100px;
                            display: flex;
                            height: max-content;
                            transform: rotate(-25deg);
                            margin: 0.5rem;

                            img {
                                width: 100%;
                                object-fit: contain;
                            }
                        }
                    }

                    &.opacity-reduced {
                        opacity: 1;
                        transition: opacity 1.5s ease;

                        &:nth-child(1) {
                            transition-delay: 0s;
                        }

                        &:nth-child(2) {
                            transition-delay: 0.5s;
                        }

                        &.opacity-reduced:nth-child(3) {
                            transition-delay: 1s;
                        }
                    }
                }
            }
        }
    }

    .contact {
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
        display: flex;
        height: 100vh;

        .container-contact {
            display: flex;
            padding-block: 4rem;

            .left {
                width: 60%;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .title {
                    display: flex;
                    padding-block: 0.8rem;

                    h2 {
                        font-family: var(--font-roboto-regular);
                        font-size: 3.3rem;
                        color: var(--color-blue);
                        font-weight: normal;

                        b,
                        strong {
                            font-family: var(--font-roboto-bold);
                        }
                    }
                }

                .description {
                    display: flex;
                    width: 65%;
                    border-top: 2px dashed var(--color-cyan);
                    padding-block: 0.8rem;

                    p {
                        font-size: 1.25rem;
                        font-family: var(--font-roboto-regular);
                        font-weight: normal;
                    }
                }

                .button-contact {
                    display: flex;

                    a {}
                }
            }

            .right {
                width: 40%;
                display: flex;
                justify-content: center;
                align-items: center;

                .form {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 1rem;
                    background: var(--gr-blue-btt);
                    padding: 1.8rem;
                    border-radius: 1rem;

                    >p {
                        display: flex;
                        flex-direction: column;
                        font-size: 1.18rem;
                        font-family: var(--font-roboto-regular);
                        color: var(--color-white);
                        text-align: center;

                        b,
                        strong {
                            text-transform: uppercase;
                            font-family: var(--font-roboto-bold);
                        }
                    }

                    .wpcf7 {
                        width: 100%;
                        display: flex;
                        flex-direction: column;

                        .wpcf7-spinner {
                            display: none;
                        }

                        .wpcf7-response-output {
                            margin: 0;
                            color: var(--color-white);
                            font-family: var(--font-roboto-thin);
                        }
                        
                        .wpcf7-form-control-wrap {
                            width: 100%;
                        }
                        
                        @media (max-width: 768px) {
                            
                        }
                        
                        .wpcf7-recaptcha > div {
                            
                            @media (max-width: 768px) {
                            scale: 0.8;
                            /*left: -1.6rem;*/
                            position: relative;
                        }
                        }

                        form {
                            display: flex;
                            flex-direction: column;
                            gap: 0.5rem;
                            width: 100%;
                            justify-content: center;
                            align-items: center;
                            
                            >p {
                                width: 100%;
                            }

                            input {
                                width: 100%;
                                background-color: var(--color-white);
                                border-radius: 5px;
                                border: transparent;
                                outline: none;

                                &[type='text'],
                                &[type='tel'],
                                &[type='email'] {
                                    padding: 0.6rem;
                                }

                                &[type="submit"] {
                                    display: none;
                                }
                            }

                            textarea {
                                font-family: var(--font-roboto-regular) !important;
                                background-color: var(--color-white);
                                border-radius: 5px;
                                border: transparent;
                                outline: none;
                                padding: 0.6rem;
                                resize: none;
                                max-height: 5rem;
                                width: 100%;
                            }

                            input::placeholder,
                            textarea::placeholder {
                                font-size: 14px;
                                color: #B9B9B9;
                                font-weight: normal;
                            }

                            >a {
                                background-color: var(--color-red);
                                text-transform: uppercase;
                                font-size: var(--fontsize-small);
                                color: var(--color-white);
                                font-family: var(--font-roboto-light);
                                font-weight: normal;
                                text-align: center;
                                border-radius: 5px;
                                padding: 0.6rem 1rem;
                                justify-content: center;
                                display: flex;
                                align-items: center;
                                gap: 0.2rem;

                                b,
                                strong {
                                    font-family: var(--font-roboto-black);
                                }

                                &::after {
                                    opacity: 0;
                                    width: 0px;
                                    height: 1rem;
                                    margin-inline: 0rem;
                                    content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDIwIDE2IiBmaWxsPSJub25lIj4NCjxwYXRoIGQ9Ik0xMi4xNzM2IDAuMzA2MzI1QzExLjk4OTQgMC41MTgxOTQgMTEuODg3MyAwLjc4OTg4NSAxMS44ODU5IDEuMDcxNTJDMTEuODg0NSAxLjM1MzE2IDExLjk4NCAxLjYyNTg1IDEyLjE2NjEgMS44Mzk1M0wxNi43MjcxIDYuOTE0MzFIMC45Njg3NTNDMC45Njg3NTMgNi45MTQzMSAwLjAwMTI1MzkyIDcuMzk3NjIgMC4wMDEyNTM5MiA3Ljk5NzM4Qy0wLjAxMjEzMjYgOC4yNzAwNSAwLjA4MjA5MjEgOC41MzY5NyAwLjI2MzM1OCA4LjczOTg5QzAuNDQ0NjI0IDguOTQyODEgMC42OTgyMDkgOS4wNjUyNCAwLjk2ODc1MyA5LjA4MDQ1SDE2LjcyMjFMMTIuMTYxMiAxNC4xNTUyQzExLjk4MDcgMTQuMzY5NyAxMS44ODIzIDE0LjY0MjEgMTEuODgzNyAxNC45MjMyQzExLjg4NTEgMTUuMjA0NCAxMS45ODYxIDE1LjQ3NTggMTIuMTY4NiAxNS42ODg0QzEyLjI1NDUgMTUuNzg3IDEyLjM2MDQgMTUuODY1OCAxMi40NzkxIDE1LjkxOTZDMTIuNTk3OCAxNS45NzMzIDEyLjcyNjYgMTYuMDAwOCAxMi44NTY4IDE2QzEyLjk4NjkgMTUuOTk5MiAxMy4xMTU0IDE1Ljk3MDMgMTMuMjMzNSAxNS45MTUxQzEzLjM1MTYgMTUuODYgMTMuNDU2NiAxNS43Nzk5IDEzLjU0MTMgMTUuNjgwM0wxOS43MjIyIDguNzYzNjdDMTkuODA3NiA4LjY2MTUyIDE5Ljg3NiA4LjU0NjA4IDE5LjkyNDggOC40MjE4NEMxOS45NzU4IDguMjg4OSAyMC4wMDEzIDguMTQ3NDIgMjAgOC4wMDQ4OUMyMC4wMDE3IDcuNzI2NTkgMTkuOTAzIDcuNDU3MTQgMTkuNzIyMiA3LjI0Njc0TDEzLjUzODggMC4zMzEzNjdDMTMuNDU2NiAwLjIyOTk1NiAxMy4zNTM1IDAuMTQ3Nzk1IDEzLjIzNjYgMC4wOTA1OTU5QzEzLjExOTcgMC4wMzMzOTcgMTIuOTkxOSAwLjAwMjUzMjU4IDEyLjg2MTkgMC4wMDAxNDkzOTVDMTIuNzMyIC0wLjAwMjIzMzc5IDEyLjYwMzEgMC4wMjM5MjE0IDEyLjQ4NDMgMC4wNzY3OTU3QzEyLjM2NTQgMC4xMjk2NyAxMi4yNTk0IDAuMjA3OTk1IDEyLjE3MzYgMC4zMDYzMjVaIiBmaWxsPSJ3aGl0ZSIvPg0KPC9zdmc+");
                                    transition: all .3s ease;
                                }

                                &:hover {

                                    &::after {
                                        opacity: 1;
                                        width: 22px;
                                        margin-inline: 0.4rem;
                                    }
                                }
                            }
                        }
                    }



                    .secure {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 0.2rem;

                        span {
                            color: var(--color-white);
                            font-family: var(--font-roboto-regular);
                            font-size: 0.8rem;
                        }

                        .icon-container {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            max-width: 10px;

                            img {
                                object-fit: contain;
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }
    }
}

footer {

    .footer-sub-container {
        background-position: center;
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        display: flex;
        padding-block: 4rem;

        .logo-footer {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 75px;

            img {
                height: 100%;
            }
        }
    }

}
#thank-you-popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 3rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 1001; /* Popup debe estar en el frente */
    max-width: 28rem;

    /* Popup text alignment */
    text-align: center;

    h2 {
        font-family: var(--font-roboto-black);
        color: var(--color-blue);
        font-size: var(--fontsize-ultra-big);
    }

    p {
        font-size: var(--fontsize-small);
        font-family: var(--font-roboto-regular);
    }

    button {
        border: none;
        background: transparent;
        color: var(--color-white);
        position: absolute;
        top: -1.5rem;
        right: -1.5rem;
        font-size: 2rem;
        font-family: var(--font-roboto-bold);
        cursor: pointer;
    }
}

/* Overlay que cubre toda la pantalla */
#thank-you-overlay {
	display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--color-blue);
    opacity: 0.5;
    z-index: 1000;
}


#thank-you{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto;
    align-items: center;
    justify-content: center;

    background: url('../img/form-bg-scaled.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    h2 {
        font-family: var(--font-roboto-black);
        color: var(--color-blue);
        font-size: var(--fontsize-ultra-big);
        text-align: center;
        max-width: 85%;
    }
    
    p {
        font-size: var(--fontsize-small);
        font-family: var(--font-roboto-regular);
        text-align: center;
        max-width: 85%;
    }

}



/*************************/

.formychat-widget-custom-form{
    form{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        label{
            color: #000 !important;

            font-size: var(--fontsize-small);
            font-family: var(--font-roboto-regular);
            span.wpcf7-form-control-wrap{
                input{
                    border :1px solid rgb(209, 213, 219);
                    width: 100% !important;
                    color: #000 !important;

                    padding: 10px;
                    box-sizing: border-box;
                }
            }
        }
        .btn_wsap{
            input{
                border: unset;
                font-size: 1.2rem;
            }
        }
        .wpcf7-response-output{
            color: #333 !important;
        }
    }
}


.hs-form-b9a68b5d-92ac-4060-99ca-b9ea7ea8e2f1_85cd3bbf-df82-49fa-8a78-cab95e5e7552.hs-form{
    width: 90%;
    margin: auto;
}