:root {
    --estrutura-section-gap: 3rem;
    --estrutura-card-bg: #f4efe7;
}

.page-estrutura {
    .container__footer {
        .conhecer_portifolio {
            display: none;
        }
    }
}

.container__hero {
    width: 100%;
    height: 9.75rem;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #8f8e8a;

    picture,
    picture img {
        width: 100%;
        height: 100%;
    }

    picture img {
        object-fit: cover;
        object-position: center;
    }

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.12) 58%, rgba(0, 0, 0, 0.04));
    }

    .hero-logo-transparente {
        height: 100%;
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 1;
        transform: translateY(-50%);
        opacity: 0.76;
    }

    > p {
        width: calc(100% - (var(--page-gutter) * 2));
        max-width: var(--page-max);
        position: absolute;
        left: 50%;
        z-index: 2;
        color: var(--white);
        font-size: 1.875rem;
        font-weight: 400;
        line-height: 1.18;
        transform: translateX(-50%);
    }
}

.container__cobertura-integrada {
    max-width: var(--page-max);
    display: grid;
    gap: 2rem;
    margin: 0 auto var(--estrutura-section-gap);

    .cobertura-introducao {
        display: grid;
        gap: 1.25rem;
        padding: 2.5rem var(--page-gutter);
        background: var(--estrutura-card-bg);
        text-align: center;
    }

    h1 {
        color: var(--aunare-green);
        font-size: 1.875rem;
        font-weight: 400;
        line-height: 1.2;
    }

    .cobertura-introducao p {
        color: var(--medium-text);
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.4;
    }

    .cobertura-localizacoes {
        width: calc(100% - (var(--page-gutter) * 2));
        display: grid;
        gap: 1rem;
        margin: 0 auto;

        > img {
            width: 100%;
            margin-bottom: 0.5rem;
        }

        > section {
            display: grid;
            gap: 0.5rem;
        }

        h2 {
            color: var(--aunare-green);
            font-size: 0.875rem;
            font-weight: 500;
            line-height: 1.2;
            text-transform: uppercase;
        }

        dl {
            display: grid;
            margin: 0;
        }

        dl div {
            display: grid;
            grid-template-columns: minmax(6.5rem, 0.75fr) minmax(0, 1.25fr);
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--light-border);
        }

        dt,
        dd {
            color: var(--medium-text);
            font-size: 0.75rem;
            line-height: 1.3;
        }

        dt {
            color: var(--aunare-purple);
            font-weight: 600;
        }

        dd {
            margin: 0;
            text-align: right;
        }

        .pacto-andino {
            margin-top: 0.5rem;
            color: var(--medium-text);
            font-size: 0.9375rem;
            font-weight: 400;
            text-align: center;
            text-transform: none;

            strong {
                color: var(--aunare-purple);
            }
        }
    }
}

.container__nossa-sede {
    padding: 2.5rem var(--page-gutter);
    background: var(--estrutura-card-bg);

    > div {
        max-width: 48rem;
        display: grid;
        justify-items: center;
        gap: 1.25rem;
        margin: 0 auto;
        text-align: center;
    }

    h2 {
        color: var(--aunare-green);
        font-size: 1.875rem;
        font-weight: 400;
        line-height: 1.2;
    }

    h3 {
        color: var(--aunare-purple);
        font-size: 0.9375rem;
        font-weight: 600;
        line-height: 1.3;
    }

    p {
        color: var(--medium-text);
        font-size: 0.8125rem;
        font-weight: 400;
        line-height: 1.4;
    }

    ul {
        width: 100%;
        display: grid;
        gap: 0.625rem;
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: left;
    }

    li {
        display: grid;
        grid-template-columns: 1.125rem minmax(0, 1fr);
        align-items: start;
        gap: 0.625rem;
    }

    li img {
        width: 1.125rem;
        height: 1.125rem;
    }

    h4 {
        color: var(--medium-text);
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.35;
    }
}

.container__centro-integrado {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: var(--page-max);
    display: grid;
    gap: 2rem;
    margin: var(--estrutura-section-gap) auto;

    > header {
        display: grid;
        gap: 1rem;
        text-align: center;

        h2 {
            color: var(--aunare-green);
            font-size: 1.875rem;
            font-weight: 400;
            line-height: 1.2;
        }

        p {
            color: var(--aunare-purple);
            font-size: 0.875rem;
            font-weight: 600;
            line-height: 1.35;
        }
    }

    .cards-indicadores {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;

        article {
            min-height: 8.5rem;
            display: grid;
            grid-template-rows: auto auto;
            align-content: center;
            gap: 0.625rem;
            padding: 1rem 0.75rem;
            border: 1px solid var(--light-border);
            border-radius: 0.75rem;
            text-align: center;
            box-shadow: 0 0.25rem 0.75rem rgba(76, 31, 81, 0.05);
        }

        h3 {
            color: var(--medium-text);
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.3;
        }

        strong {
            grid-row: 1;
            color: var(--aunare-purple);
            font-size: 1.5rem;
            line-height: 1.1;
        }
    }

    .diferenciais-operacionais {
        display: grid;
        justify-items: center;
        gap: 1.25rem;
        text-align: center;

        > h2 {
            color: var(--aunare-green);
            font-size: 1.875rem;
            font-weight: 400;
            line-height: 1.2;
        }

        > p {
            color: var(--medium-text);
            font-size: 0.8125rem;
            font-weight: 400;
            line-height: 1.4;
        }

        ul {
            width: 100%;
            display: grid;
            gap: 0.875rem;
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: left;
        }

        li {
            display: grid;
            grid-template-columns: 1.125rem minmax(0, 1fr);
            align-items: start;
            gap: 0.625rem;
        }

        img {
            width: 1.125rem;
            height: 1.125rem;
        }

        h3 {
            color: var(--medium-text);
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.35;
        }
    }
}

.container__estrutura-cta {
    background: var(--background-cream);

    > div {
        width: calc(100% - (var(--page-gutter) * 2));
        max-width: var(--page-max);
        display: grid;
        gap: 1.5rem;
        margin: 0 auto;
        padding: 3rem 0;
    }

    h2 {
        max-width: 22rem;
        justify-self: center;
        color: var(--aunare-purple);
        font-size: 1.875rem;
        font-weight: 400;
        line-height: 1.18;
        text-align: center;
    }

    a {
        min-width: 19rem;
        min-height: 3rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        padding: 0.375rem 1.5rem;
        border: 1px solid var(--medium-text);
        border-radius: 999rem;
        color: var(--medium-text);
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1;
        transition: background 180ms ease, color 180ms ease;
    }

    a:hover {
        color: var(--white);
        background: var(--aunare-purple);
    }
}

@media (min-width: 768px) {
    :root {
        --estrutura-section-gap: 4.5rem;
    }

    .container__hero {
        height: 18rem;

        > p {
            font-size: 2.5rem;
        }
    }

    .container__cobertura-integrada {
        width: calc(100% - (var(--page-gutter) * 2));
        grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1fr);
        align-items: center;
        gap: 4rem;
        padding-top: 4rem;

        .cobertura-introducao {
            padding: 0;
            background: transparent;
            text-align: left;
        }

        h1 {
            font-size: 2.5rem;
        }

        .cobertura-introducao p {
            font-size: 1rem;
        }

        .cobertura-localizacoes {
            width: 100%;
            padding: 1.25rem;
            border: 1px solid var(--light-border);
            border-radius: 0.75rem;
        }
    }

    .container__nossa-sede {
        padding-top: 4rem;
        padding-bottom: 4rem;

        h2 {
            font-size: 2.5rem;
        }

        h3,
        p {
            font-size: 1rem;
        }

        h4 {
            font-size: 0.9375rem;
        }
    }

    .container__centro-integrado {
        > header h2,
        .diferenciais-operacionais > h2 {
            font-size: 2.5rem;
        }

        > header p,
        .diferenciais-operacionais > p {
            font-size: 1rem;
        }

        .cards-indicadores {
            grid-template-columns: repeat(4, minmax(0, 1fr));

            article {
                min-height: 9rem;
            }

            h3 {
                font-size: 0.875rem;
            }

            strong {
                font-size: 1.75rem;
            }
        }

        .diferenciais-operacionais {
            ul {
                max-width: 48rem;
            }

            h3 {
                font-size: 0.9375rem;
            }
        }
    }

    .container__estrutura-cta {
        > div {
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 2rem;
            padding: 4.75rem 0;
        }

        h2 {
            max-width: 34rem;
            justify-self: start;
            font-size: 2.25rem;
            text-align: left;
        }

        a {
            justify-self: end;
            font-size: 1rem;
        }
    }
}

@media (min-width: 992px) {
    .container__hero {
        height: 19.5rem;

        > p {
            font-size: 3rem;
        }
    }

    .container__cobertura-integrada {
        h1 {
            font-size: 3rem;
        }
    }

    .container__nossa-sede {
        h2 {
            font-size: 3rem;
        }

        ul {
            li {
                h4 {
                    font-size: 1rem;
                }
            }
        }
    }

    .container__centro-integrado {
        > header h2,
        .diferenciais-operacionais > h2 {
            font-size: 3rem;
        }
    }
}