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

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

    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.22) 50%, rgba(0, 0, 0, 0.08));
    }

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

    h1 {
        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__oportunidades {
    background: var(--background-cream);

    h2{
        width: calc(100% - (var(--page-gutter) * 2));
        max-width: 52rem;
        margin-right: auto;
        margin-left: auto;
        color: var(--aunare-purple);
        font-weight: 400;
        text-align: center;
    }

    h2 {
        padding-top: 2.25rem;
        font-size: 1.5rem;
        line-height: 1.22;
    }

    p {
        width: calc(100% - (var(--page-gutter) * 2));
        max-width: 52rem;
        margin-right: auto;
        margin-left: auto;
        padding-top: 0.75rem;
        padding-bottom: 2.25rem;
        font-size: 1rem;
        text-align: center;
    }
}

.container__formulario-contato,
.container__fale-com-aunare {
    width: calc(100% - (var(--page-gutter) * 2));
    max-width: var(--page-max);
    margin-right: auto;
    margin-left: auto;
}

.container__formulario-contato {
    display: grid;
    gap: 2rem;
    margin-top: var(--contato-section-gap);
    margin-bottom: var(--contato-section-gap);

    > article {
        display: grid;
        gap: 1.25rem;
        text-align: center;
    }

    article h2 {
        color: var(--aunare-purple);
        font-size: 1.75rem;
        font-weight: 400;
        line-height: 1.2;
    }

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

    form {
        display: grid;
        gap: 0.875rem;
        padding: 1.5rem;
        border-radius: 1rem;
        background: var(--white);
        box-shadow: 0 0.375rem 1.5rem rgba(76, 31, 81, 0.1);
    }

    form h2 {
        color: var(--aunare-purple);
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .form-grid {
        display: grid;
        gap: 0.75rem;
    }

    label {
        display: grid;
    }

    label span {
        width: 1px;
        height: 1px;
        position: absolute;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    input,
    textarea {
        width: 100%;
        border: 1px solid rgba(111, 104, 94, 0.55);
        border-radius: 0.625rem;
        color: var(--dark-text);
        font-size: 0.875rem;
        font-weight: 400;
        background: var(--white);
    }

    input {
        min-height: 2.5rem;
        padding: 0.5rem 0.875rem;
    }

    textarea {
        min-height: 7rem;
        resize: vertical;
        padding: 0.75rem 0.875rem;
    }

    input::placeholder,
    textarea::placeholder {
        color: rgba(111, 104, 94, 0.72);
    }

    input:focus-visible,
    textarea:focus-visible {
        border-color: rgba(76, 31, 81, 0.5);
        outline: 0.1875rem solid rgba(76, 31, 81, 0.2);
    }

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

    button {
        min-width: 7rem;
        min-height: 2.75rem;
        justify-self: center;
        padding: 0.5rem 1.75rem;
        border: 0;
        border-radius: 0.5rem;
        color: var(--white);
        font-size: 0.875rem;
        font-weight: 600;
        background: var(--aunare-purple);
        cursor: pointer;
        transition: background 180ms ease;
    }

    button:hover {
        background: #36163a;
    }

    button:focus-visible {
        outline: 0.1875rem solid rgba(76, 31, 81, 0.22);
        outline-offset: 0.1875rem;
    }
}

.container__fale-com-aunare {
    display: grid;
    margin-bottom: var(--contato-section-gap);
    text-align: center;

    > img {
        width: 100%;
        height: 18rem;
        border-radius: 0.75rem 0.75rem 0 0;
        object-fit: cover;
        object-position: center;
    }

    article {
        display: grid;
        align-content: center;
        gap: 1.25rem;
        padding: 2rem 1.25rem;
        border-radius: 0 0 0.75rem 0.75rem;
        background: var(--contato-card-bg);
    }

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

    address {
        display: grid;
        gap: 0.375rem;
        color: var(--medium-text);
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1.35;

        a {
            color: var(--aunare-purple);
            font-weight: 600;
            line-height: 1.2;
        }
    }
}

@media (min-width: 576px) {
    .container__fale-com-aunare {
        max-width: var(--page-max);
        grid-template-columns: minmax(0, 0.58fr) minmax(20rem, 1fr);
        align-items: center;
        gap: .5rem;

        > img {
            height: 100%;
            min-height: 17.5rem;
            border-radius: 0.75rem;
        }

        article {
            height: 100%;
            min-height: 17.5rem;
            border-radius: 0.75rem;
            text-align: end;
        }
    }
}

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

    .container__hero {
        height: 18rem;

        h1 {
            font-size: 2.5rem;
        }
    }

    .container__oportunidades {
        h2 {
            padding-top: 3rem;
            font-size: 1.75rem;
        }

        p {
            padding-bottom: 3rem;
        }
    }

    .container__formulario-contato {
        grid-template-columns: minmax(0, 0.8fr) minmax(24rem, 1.2fr);
        align-items: start;
        gap: 4rem;

        > article {
            text-align: left;
        }

        article h2 {
            font-size: 2rem;
        }

        form {
            padding: 2rem;
        }

        .form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .field-full {
            grid-column: 1 / -1;
        }

        button {
            justify-self: start;
        }
    }

    .container__fale-com-aunare {
        max-width: var(--page-max);
        grid-template-columns: minmax(18rem, 0.58fr) minmax(0, 1fr);
        align-items: center;
        gap: 1rem;

        > img {
            height: 17.5rem;
            border-radius: 0.75rem;
        }

        article {
            min-height: 17.5rem;
            padding: 2.5rem;
            border-radius: 0.75rem;
            text-align: end;
        }

        h2 {
            font-size: 2.5rem;
        }
    }
}

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

        h1 {
            font-size: 3rem;
        }
    }

    .container__oportunidades {
        h2 {
            font-size: 2rem;
        }

        p {
            font-size: 1.125rem;
        }
    }

    .container__formulario-contato {
        article h2 {
            font-size: 2.25rem;
        }

        article p {
            font-size: 1rem;
        }
    }

    .container__fale-com-aunare {
        > img {
            height: 19rem;
        }

        article {
            min-height: 19rem;
        }

        h2 {
            font-size: 3rem;
        }

        address {
            font-size: 1rem;
        }
    }
}