/* ===========================
   Fale Conosco page – imports shared modules + page-specific styles
   =========================== */
@import url('base.css');
@import url('components/topbar.css');
@import url('components/footer.css');
@import url('sections/linkedin.css');
@import url('responsive.css');

/* ===========================
   Hero
   =========================== */
.contato-hero {
    background:
        linear-gradient(180deg, rgba(11, 22, 65, 0) 0%, rgba(11, 22, 65, 1) 100%),
        linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('../img/hero-fale-conosco.png');
    background-size: cover;
    background-position: center;
    padding: 4rem 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 45rem;
}

.contato-hero__inner {
    width: 100%;
    max-width: 103.75rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.contato-hero__content {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 55rem;
}

.contato-hero__copy {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 51.875rem;
}

.contato-hero__title {
    color: #FFFFFF;
    font-family: var(--Font-Family-Heading-Heavy);
    font-size: 3.5rem;
    line-height: 4.1875rem;
    letter-spacing: -0.0625rem;
    font-weight: 400;
}

.contato-hero__subtitle {
    color: #FFFFFF;
    font-family: var(--Font-Family-Label);
    font-size: 1.5rem;
    line-height: 2.125rem;
    font-weight: 500;
}

/* ===========================
   Formulário
   =========================== */
.contato-form {
    background: #FFFFFF;
    padding: 7.5rem 80px;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    overflow: hidden;
}

.contato-form__inner {
    max-width: 80rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.contato-form__header {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
    align-self: stretch;
}

.contato-form__label {
    color: #0067CC;
    font-family: var(--Font-Family-Label);
    font-size: 0.875rem;
    line-height: 1.3125rem;
    letter-spacing: 0.09375rem;
    font-weight: 700;
    text-transform: uppercase;
}

.contato-form__title {
    color: #0B1641;
    font-family: var(--Font-Family-Heading-Heavy);
    font-size: 3rem;
    line-height: 3.625rem;
    letter-spacing: -0.0625rem;
    font-weight: 400;
}

.contato-form__description {
    color: #4B4C52;
    font-family: var(--Font-Family-Label);
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
}

.contato-form__card {
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-self: stretch;
    box-shadow: 8px 8px 48px 2px rgba(203, 203, 205, 1);
    overflow: hidden;
}

.contato-form__card-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contato-form__card-title {
    color: #0B1641;
    font-family: var(--Font-Family-Heading-Heavy);
    font-size: 2rem;
    line-height: 2.375rem;
    letter-spacing: -0.03125rem;
    font-weight: 400;
}

.contato-form__card-subtitle {
    color: #4B4C52;
    font-family: var(--Font-Family-Label);
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 400;
}

.contato-form__fields {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contato-form__row {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.contato-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    border-radius: 0.25rem;
}

.contato-form__field--full {
    flex: unset;
    width: 100%;
}

.contato-form__field-label {
    padding-left: 0.25rem;
    color: #3C3C3E;
    font-family: var(--Font-Family-Label);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}

.contato-form__field-label span {
    color: #9E0519;
}

.contato-form__input {
    background: #F5F5F5;
    border: none;
    border-radius: var(--corner-radius-xxs);
    padding: 0.75rem 0.5rem;
    min-height: 3rem;
    font-family: var(--Font-Family-Label);
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 400;
    color: #141415;
    width: 100%;
}

.contato-form__input::placeholder {
    color: #8D8E91;
}

.contato-form__textarea-wrapper {
    background: #F5F5F5;
    border-radius: var(--corner-radius-xxs);
    position: relative;
}

.contato-form__textarea {
    background: transparent;
    border: none;
    padding: 0.75rem 0.5rem;
    min-height: 7.5rem;
    font-family: var(--Font-Family-Label);
    font-size: 1rem;
    line-height: 1.375rem;
    font-weight: 400;
    color: #141415;
    width: 100%;
    resize: none;
}

.contato-form__textarea-icon {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    pointer-events: none;
}

.contato-form__textarea::placeholder {
    color: #8D8E91;
}

.contato-form__actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.contato-form__submit {
    background: #0067CC;
    border: none;
    border-radius: var(--corner-radius-xs);
    padding: 1rem;
    color: #FFFFFF;
    font-family: var(--Font-Family-Label);
    font-size: 1.125rem;
    line-height: 1.5625rem;
    font-weight: 500;
    cursor: pointer;
    width: 100%;
    text-align: center;
}

.contato-form__privacy {
    color: #3C3C3E;
    font-family: var(--Font-Family-Label);
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    text-align: center;
}

.contato-form__privacy a {
    color: #0067CC;
    text-decoration: underline;
}

/* Success state */
.contato-form__success {
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    height: 48.25rem;
    box-shadow: 8px 8px 48px 2px rgba(203, 203, 205, 1);
    overflow: hidden;
}

.contato-form__success-icon {
    background: #A7DDC7;
    border-radius: var(--corner-radius-xs);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contato-form__success-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-align: center;
}

.contato-form__success-title {
    color: #141415;
    font-family: var(--Font-Family-Heading-Heavy);
    font-size: 2rem;
    line-height: 2.375rem;
    letter-spacing: -0.03125rem;
    font-weight: 400;
}

.contato-form__success-description {
    color: #3C3C3E;
    font-family: var(--Font-Family-Label);
    font-size: 1.125rem;
    line-height: 1.5625rem;
    font-weight: 400;
}

/* ===========================
   Info
   =========================== */
.contato-info {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(220, 236, 250, 1) 100%);
    padding: 7.5rem 80px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
}

.contato-info__inner {
    max-width: 80rem;
    width: 100%;
}

.contato-info__card {
    background: #FFFFFF;
    border-radius: 0.5rem;
    padding: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    box-shadow: 8px 8px 48px 2px rgba(203, 203, 205, 1);
    position: relative;
    overflow: hidden;
}

.contato-info__content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 40rem;
}

.contato-info__label {
    color: #0067CC;
    font-family: var(--Font-Family-Label);
    font-size: 0.875rem;
    line-height: 1.3125rem;
    letter-spacing: 0.09375rem;
    font-weight: 700;
    text-transform: uppercase;
}

.contato-info__title {
    color: #0B1641;
    font-family: 'NexaXBold', 'Nexa XBold', sans-serif;
    font-size: 2.875rem;
    line-height: 3.105rem;
    letter-spacing: -0.0625rem;
    font-weight: 400;
}

.contato-info__email {
    color: #4B4C52;
    font-family: var(--Font-Family-Label);
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
}

.contato-info__links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.contato-info__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0067CC;
    font-family: var(--Font-Family-Label);
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
    text-decoration: underline;
}

.contato-info__link img {
    width: 1.5rem;
    height: 1.5rem;
    filter: brightness(0) saturate(100%) invert(25%) sepia(98%) saturate(1679%) hue-rotate(196deg) brightness(96%) contrast(101%);
}

.contato-info__image-wrapper {
    border-radius: 1.5rem;
    width: 22.375rem;
    height: 20.5rem;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contato-info__img-bg {
    position: absolute;
    width: 16.875rem;
    height: auto;
    opacity: 0.8;
    mix-blend-mode: luminosity;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.contato-info__img-bg--top {
    top: 5.5rem;
    right: 1.5rem;
}

.contato-info__img-bg--bottom {
    bottom: 5.5rem;
    left: 1.5rem;
}

.contato-info__img-center {
    position: relative;
    z-index: 1;
    width: 18rem;
    height: auto;
    filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.08));
}

/* ===========================
   CTA Section (Consumer insights)
   =========================== */
.contato-cta {
    background: #FFFFFF;
    padding: 7.5rem 80px;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.contato-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 80rem;
    width: 100%;
    position: relative;
}

.contato-cta__header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 40.4375rem;
}

.contato-cta__label {
    color: #0067CC;
    font-family: var(--Font-Family-Label);
    font-size: 0.875rem;
    line-height: 1.3125rem;
    letter-spacing: 0.09375rem;
    font-weight: 700;
    text-transform: uppercase;
}

.contato-cta__title {
    color: #0B1641;
    font-family: 'NexaXBold', 'Nexa XBold', sans-serif;
    font-size: 2.875rem;
    line-height: 3.105rem;
    letter-spacing: -0.0625rem;
    font-weight: 400;
}

.contato-cta__description {
    color: #4B4C52;
    font-family: var(--Font-Family-Label);
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
    max-width: 40.4375rem;
}

.contato-cta__wave {
    position: absolute;
    right: -2rem;
    top: 2.375rem;
    width: 48rem;
    height: auto;
    pointer-events: none;
}

/* ===========================
   Conteúdos relacionados
   =========================== */
.contato-content {
    background: #FFFFFF;
    border-radius: 1rem;
    padding: 5rem 80px;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.contato-content__inner {
    max-width: 91.5rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contato-content__title {
    color: #0B1641;
    font-family: var(--Font-Family-Heading-Heavy);
    font-size: 3rem;
    line-height: 120%;
    letter-spacing: -0.02em;
    font-weight: 400;
    max-width: 46rem;
}

.contato-content__title-highlight {
    color: #0067CC;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1200px) {
    .contato-form,
    .contato-info,
    .contato-cta {
        padding: 5rem 48px;
    }
}

@media (max-width: 768px) {
    .contato-hero {
        height: 28rem;
        padding: 2rem 1.5rem;
    }

    .contato-hero__title {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .contato-hero__subtitle {
        font-size: 1.125rem;
        line-height: 1.625rem;
    }

    .contato-form,
    .contato-info,
    .contato-cta {
        padding: 3rem 1.5rem;
    }

    .contato-form__row {
        flex-direction: column;
    }

    .contato-form__title {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .contato-info__card {
        flex-direction: column;
        gap: 2rem;
    }

    .contato-info__image-wrapper {
        width: 100%;
        height: 12rem;
    }

    .contato-cta__title {
        font-size: 2rem;
        line-height: 2.5rem;
    }

    .contato-cta__wave {
        display: none;
    }

    .contato-content {
        padding: 3rem 1.5rem;
    }
}