/* Hero */

.hero {

    .hero-background {
        background: url('https://images.unsplash.com/photo-1485230405346-71acb9518d9c?q=80&w=2094&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') 50% 50%/cover;
        filter: brightness(75%);
    }

    .hero-content {
        background: rgba(var(--vig-rgb-blue), 0.3);
    }

    .hero-main {
        padding: calc(10vh + 0.3787 * min(60vmin, 380px)) 5vw 10vh;
    }

    .hero-slogan {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;

        img {
            width: min(85%, 330px, 50vh);
        }
    }

    .hero-text {
        padding-top: 1rem;
        text-align: center;
        font-size: min(4vh, 24px);
        font-weight: 500;
        line-height: 1.25;

        p {
            margin: 0;

            &:nth-of-type(1) {
                font-size: 1em;
            }

            &:nth-of-type(2) {
                font-size: 1.3em;
            }

            &:nth-of-type(3) {
                font-size: 1.3875em;
            }
        }
    }

    .hero-text-2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-size: 3vh;
        line-height: 1.25;

        p {
            font-weight: 700;
            font-style: normal;
            text-transform: uppercase;
            line-height: 1;
            margin: 0;

            &:nth-of-type(1) {
                font-size: 1.37em;
            }

            &:nth-of-type(2) {
                font-size: 1.77em;
            }
        }
    }

    @media (min-width: 576px) and (orientation: landscape) {
        .hero-main {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

        .hero-text {
            padding: 0;
        }
    }

    @media (min-width: 768px) {
        .hero-content {
            background: none;
        }

        .hero-main {
            display: flex;
            flex-direction: column;
            align-items: normal;
            padding: 32.6156vh 0 0 4vw;
            background: url("/assets/images/PLECA-02.svg") top left/contain no-repeat;
        }

        .hero-slogan {
            justify-content: normal;

            img {
                width: unset;
                height: 26vh;
            }
        }

        .hero-text {
            width: 35vw;
            text-align: left;
        }

        .hero-text-2 {
            position: absolute;
            right: 5vw;
            bottom: 7vh;
            width: 34vh;
            font-size: 3.9vh;
        }
    }
}

/* Nosotros section */
.site-section.nosotros {
    background: url('/assets/images/pexels-photo-34345215-1920.jpeg') 20% 40%/cover;

    .section-background {
        background: linear-gradient(to right, rgba(var(--vig-rgb-blue), 0.5), rgba(var(--vig-rgb-blue), 0.5));
        backdrop-filter: blur(0.5vw);
    }

    .grid {
        gap: 3.5rem;
    }

    .section-title {
        grid-area: 1 / 1 / span 1 / -1;
    }

    .section-text {
        grid-area: 2 / 1 / span 1 / -1;
        
        p {
            color: rgb(var(--vig-rgb-white));
        }
    }

    @media (min-width: 992px) {
        .section-background {
            background: linear-gradient(to right, transparent, rgba(var(--vig-rgb-blue), 0.5) 70%);
            mask-image: linear-gradient(to right, transparent, black 50%);
        }

        .section-title {
            text-align: right;
        }

        .section-text {
            grid-area: 2 / 4 / span 1 / -1;
        }
    }
}

/* Servicios section */

.site-section.servicios {
    .section-banner {
        background: linear-gradient(rgba(var(--vig-rgb-blue), 0.9), rgba(var(--vig-rgb-blue), 0.9)),
            url('/assets/images/IMG1-1920.png') center/cover fixed;
        background-position: 50% 50%;
    }

    .section-container {
        justify-content: center;
        align-items: center;
        gap: 3.5rem;
    }

    .section-title h2 {
        color: rgb(var(--vig-rgb-dark-blue));
    }

    .grid {
        max-width: 800px;
        gap: 1.5rem;
        grid-template-rows: repeat(4, 1fr);
    }

    button.gallery-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin-bottom: calc(-50% - 0.75rem);
        padding: 2rem;
        overflow: hidden;
        aspect-ratio: 1 / 1;
        grid-column-end: span 2;
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        z-index: 1;
        transition: all 0.2s ease-in 0s;

        &:nth-of-type(3n+1) {
            grid-column-start: 2;
        }

        &:nth-of-type(1) {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('https://images.unsplash.com/photo-1485230405346-71acb9518d9c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNDA1MjAyMQ&ixlib=rb-1.2.1&q=80&w=800') 10% 50%/cover;
            transform-origin: 50% 0%;
        }

        &:nth-of-type(2) {
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url('https://images.unsplash.com/photo-1617813884752-54618acb4b94?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNDA1MjAyMQ&ixlib=rb-1.2.1&q=80&w=800') 90% 50%/cover;
            transform-origin: 0% 50%;
        }

        &:nth-of-type(3) {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('https://images.unsplash.com/photo-1575261569688-399dd464cd13?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNDA1MjAyMQ&ixlib=rb-1.2.1&q=80&w=800') 50% 20%/cover;
            transform-origin: 100% 50%;
        }

        &:nth-of-type(4) {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                url('https://images.unsplash.com/photo-1653592956557-48ae49fc5ef5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzNDA1MjAyMQ&ixlib=rb-1.2.1&q=80&w=800') 50% 60%/cover;
            transform-origin: 50% 100%;
        }

        .item-title {
            transition: all 0.2s ease-in 0s;

            h3 {
                font-size: calc(3.2vw + 0.05rem);
                color: #FFF;
                text-align: center;
                font-variant: small-caps;
                font-weight: 600;
            }
        }

        .item-text {
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: all 0.2s ease-in 0s;

            p {
                margin: 0 16%;
                font-size: calc(2.6vw + -0.13125rem);
                color: #fff;
                text-align: center;
            }
        }

        &.focused {
            z-index: 2;

            .item-title {
                opacity: 0;
            }

            .item-text {
                opacity: 1;
                transition: all 0.2s ease-in 0.2s;
            }
        }
    }

    @media (min-width: 850px) {
        button.gallery-item {
            .item-title h3 {
                font-size: 1.75rem;
            }

            .item-text p {
                margin: 0 16%;
                font-size: 1.25rem;
            }
        }
    }

    @media (min-width: 992px) {
        .grid {
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }
    }
}

/* Tecnologia section */

.site-section.tecnologia {
    .section-background {
        background: url('https://images.unsplash.com/photo-1708807472445-d33589e6b090?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1548') 50% 50%/cover;
        filter: saturate(0.4) contrast(0.25) brightness(0.5);
    }

    .section-container {
        gap: 3.5rem;
    }

    .section-text {        
        p, ul {
            color: rgb(var(--vig-rgb-white));
            font-size: 1.5rem;
        }
    }
}

/* Compromiso section */
.site-section.compromiso {
    .section-background {
        background: url('https://images.unsplash.com/photo-1678906738494-a3bb80b86378?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1631') 50% 50%/cover;
    }

    .grid {
        gap: 2rem;
    }

    .section-title {
        grid-area: 1 / 1 / span 1 / -1;
    }

    .section-text {
        grid-area: 2 / 1 / span 1 / -1;
        
        p, ul {
            color: rgb(var(--vig-rgb-white));
            font-weight: 600;
        }
    }

    @media (min-width: 992px) {
        .section-title {
            grid-area: 1 / 1 / span 1 / span 3;
        }

        .section-text {
            grid-area: 2 / 1 / span 1 / span 3;
        }
    }
}

/* Contacto section */

.site-section.contacto {
    padding: 100px 0;
    background: linear-gradient(rgba(var(--vig-rgb-dark-blue), 0.9), rgba(var(--vig-rgb-dark-blue), 0.9)),
        url('https://images.pexels.com/photos/34345224/pexels-photo-34345224.jpeg') center/cover;

    .grid {
        row-gap: 1.5rem;
        grid-template-columns: repeat(1, 1fr);
        align-items: start;
    }

    form {

        label,
        button {
            text-transform: uppercase;
            font-weight: 600;
        }

        label {
            color: rgb(var(--vig-rgb-white));
        }

        button:hover {
            color: rgb(var(--vig-rgb-blue));
        }
    }

    @media (min-width: 576px) {
        .section-map {
            aspect-ratio: 16 / 9;
        }
    }

    @media (min-width: 768px) {
        .grid {
            gap: 3rem;
            grid-template-columns: repeat(2, 1fr);
        }

        .section-map {
            aspect-ratio: 1 / 1;
        }
    }

    @media (min-width: 992px) {
        .grid {
            gap: 6rem;
            grid-template-columns: repeat(2, 1fr);
        }

        .section-map {
            aspect-ratio: 16 / 9;
        }
    }
}