/* ========================================
   CONTATO
   CSS EXCLUSIVO DA PÁGINA
======================================== */


/* ========================================
   FLUXO PRINCIPAL
======================================== */

.contact-main-flow {
    position: relative;

    width: 100%;

    background:
        linear-gradient(
            180deg,
            #071c2d 0%,
            #09263a 42%,
            #f4f2ec 42%,
            #f4f2ec 100%
        );
}


/* ========================================
   HERO
======================================== */

.contact-hero {
    position: relative;

    width: 100%;

    padding: 85px 0 150px;

    overflow: hidden;
}


.contact-hero::before {
    content: "";

    position: absolute;

    top: -310px;
    right: -190px;

    width: 650px;
    height: 650px;

    border: 1px solid rgba(22, 184, 166, 0.12);
    border-radius: 50%;

    pointer-events: none;
}


.contact-hero::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 32%;
    height: 4px;

    background-color: var(--color-secondary);
}


.contact-hero__container {
    position: relative;

    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;
    padding: 0 32px;

    display: grid;
    grid-template-columns: 1fr 0.62fr;

    gap: 100px;

    align-items: end;

    z-index: 2;
}


/* ========================================
   CONTEÚDO DO HERO
======================================== */

.contact-hero__content {
    max-width: 760px;
}


.contact-hero__back {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 54px;

    color: rgba(255, 255, 255, 0.46);

    font-size: 13px;
    font-weight: 500;

    transition: var(--transition);
}


.contact-hero__back span {
    color: var(--color-secondary);

    font-size: 16px;

    transition: transform 0.25s ease;
}


.contact-hero__back:hover {
    color: var(--color-white);
}


.contact-hero__back:hover span {
    transform: translateX(-4px);
}


.contact-hero__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color: var(--color-secondary);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}


.contact-hero__eyebrow::before {
    content: "";

    width: 32px;
    height: 2px;

    background-color: var(--color-secondary);
}


.contact-hero__title {
    max-width: 850px;

    margin-bottom: 28px;

    color: var(--color-white);

    font-family: var(--font-primary);
    font-size: clamp(50px, 5.4vw, 80px);
    font-weight: 600;

    line-height: 1.02;
    letter-spacing: -3px;
}


.contact-hero__title span {
    display: block;

    color: var(--color-secondary);
}


.contact-hero__description {
    max-width: 680px;

    margin-bottom: 45px;

    color: rgba(255, 255, 255, 0.62);

    font-size: 17px;
    line-height: 1.8;
}


/* ========================================
   CANAIS DO HERO
======================================== */

.contact-hero__channels {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    max-width: 720px;

    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-left: 1px solid rgba(255, 255, 255, 0.13);
}


.contact-hero__channel {
    min-height: 105px;

    padding: 20px;

    display: grid;
    grid-template-columns: 35px 1fr;

    gap: 14px;

    align-items: center;

    border-right: 1px solid rgba(255, 255, 255, 0.13);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


.contact-hero__channel:hover {
    background-color: rgba(255, 255, 255, 0.04);

    transform: translateY(-3px);
}


.contact-hero__channel-number {
    color: var(--color-secondary);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
}


.contact-hero__channel div {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


.contact-hero__channel small {
    color: rgba(255, 255, 255, 0.40);

    font-size: 10px;
}


.contact-hero__channel strong {
    color: var(--color-white);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
}


/* ========================================
   ASIDE DO HERO
======================================== */

.contact-hero__aside {
    padding: 30px;

    border: 1px solid rgba(255, 255, 255, 0.13);

    background-color: rgba(255, 255, 255, 0.035);
}


.contact-hero__aside-label {
    display: block;

    margin-bottom: 18px;

    color: var(--color-secondary);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}


.contact-hero__aside > p {
    margin-bottom: 28px;

    color: rgba(255, 255, 255, 0.64);

    font-size: 14px;
    line-height: 1.7;
}


.contact-hero__aside-list {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}


.contact-hero__aside-list > div {
    padding: 17px 0;

    display: flex;
    flex-direction: column;

    gap: 5px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}


.contact-hero__aside-list span {
    color: rgba(255, 255, 255, 0.38);

    font-size: 9px;
    text-transform: uppercase;
}


.contact-hero__aside-list strong {
    color: rgba(255, 255, 255, 0.76);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
}


/* ========================================
   ÁREA DE CONTATO
======================================== */

.contact-area {
    position: relative;

    width: 100%;

    padding: 0 0 145px;
}


.contact-area__container {
    position: relative;

    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;
    padding: 0 32px;

    display: grid;
    grid-template-columns: 1.08fr 0.92fr;

    gap: 75px;

    align-items: start;

    z-index: 3;
}


/* ========================================
   FORMULÁRIO
======================================== */

.contact-form-wrapper {
    margin-top: -75px;

    padding: 45px;

    background-color: var(--color-white);

    border: 1px solid rgba(16, 42, 67, 0.11);

    box-shadow:
        0 30px 70px rgba(8, 27, 44, 0.14);
}


.contact-form-wrapper__header {
    margin-bottom: 38px;
}


.contact-form-wrapper__eyebrow {
    display: block;

    margin-bottom: 14px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}


.contact-form-wrapper__header h2 {
    margin-bottom: 15px;

    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: clamp(31px, 3vw, 43px);
    font-weight: 600;

    line-height: 1.15;
    letter-spacing: -1.2px;
}


.contact-form-wrapper__header p {
    max-width: 620px;

    color: var(--color-text-secondary);

    font-size: 14px;
    line-height: 1.75;
}


/* ========================================
   ESTRUTURA DO FORMULÁRIO
======================================== */

.contact-form {
    display: flex;
    flex-direction: column;

    gap: 22px;
}


.contact-form__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}


.contact-form__field {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


.contact-form__field label {
    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 600;
}


.contact-form__field label span {
    color: var(--color-secondary-dark);
}


.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    width: 100%;

    padding: 14px 15px;

    border: 1px solid rgba(16, 42, 67, 0.16);
    border-radius: 8px;

    outline: none;

    background-color: #fbfcfd;
    color: var(--color-primary-dark);

    font-family: var(--font-secondary);
    font-size: 14px;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}


.contact-form__field input,
.contact-form__field select {
    height: 52px;
}


.contact-form__field textarea {
    min-height: 145px;

    resize: vertical;

    line-height: 1.65;
}


.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
    color: #9ba6af;
}


.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
    border-color: var(--color-secondary);

    background-color: var(--color-white);

    box-shadow:
        0 0 0 4px rgba(22, 184, 166, 0.09);
}


.contact-form__field.is-invalid input,
.contact-form__field.is-invalid select,
.contact-form__field.is-invalid textarea {
    border-color: #b94343;

    box-shadow:
        0 0 0 3px rgba(185, 67, 67, 0.07);
}


.contact-form__error,
.contact-form__privacy-error {
    min-height: 15px;

    color: #b94343;

    font-size: 11px;
    line-height: 1.4;
}


/* ========================================
   CONTADOR DA MENSAGEM
======================================== */

.contact-form__message-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;
}


.contact-form__message-footer > span {
    flex-shrink: 0;

    color: var(--color-text-secondary);

    font-size: 10px;
}


/* ========================================
   PRIVACIDADE
======================================== */

.contact-form__privacy {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    cursor: pointer;
}


.contact-form__privacy input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}


.contact-form__privacy-box {
    width: 22px;
    height: 22px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 1px;

    border: 1px solid rgba(16, 42, 67, 0.22);
    border-radius: 5px;

    background-color: var(--color-white);
    color: transparent;

    font-size: 11px;
    font-weight: 700;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}


.contact-form__privacy input:checked
+ .contact-form__privacy-box {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);

    color: var(--color-white);
}


.contact-form__privacy input:focus-visible
+ .contact-form__privacy-box {
    box-shadow:
        0 0 0 4px rgba(22, 184, 166, 0.12);
}


.contact-form__privacy-text {
    color: var(--color-text-secondary);

    font-size: 12px;
    line-height: 1.65;
}


.contact-form__privacy-text a {
    color: var(--color-secondary-dark);

    font-weight: 600;
}


.contact-form__privacy-text a:hover {
    text-decoration: underline;
}


/* ========================================
   BOTÃO DO FORMULÁRIO
======================================== */

.contact-form__submit {
    min-height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    padding: 0 26px;

    border: none;
    border-radius: 999px;

    background-color: var(--color-primary-dark);
    color: var(--color-white);

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


.contact-form__submit:hover {
    background-color: var(--color-secondary-dark);

    transform: translateY(-2px);
}


.contact-form__submit span {
    font-size: 19px;

    transition: transform 0.25s ease;
}


.contact-form__submit:hover span {
    transform: translateX(5px);
}


.contact-form__note {
    color: var(--color-text-secondary);

    font-size: 10px;
    line-height: 1.5;

    text-align: center;
}


/* ========================================
   INFORMAÇÕES DE CONTATO
======================================== */

.contact-info {
    padding-top: 55px;
}


.contact-info__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.9px;
    text-transform: uppercase;
}


.contact-info__eyebrow::before {
    content: "";

    width: 32px;
    height: 2px;

    background-color: var(--color-secondary);
}


.contact-info__title {
    margin-bottom: 24px;

    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: clamp(38px, 3.8vw, 55px);
    font-weight: 600;

    line-height: 1.08;
    letter-spacing: -1.8px;
}


.contact-info__title span {
    display: block;

    color: var(--color-secondary-dark);
}


.contact-info__description {
    margin-bottom: 42px;

    color: var(--color-text-secondary);

    font-size: 15px;
    line-height: 1.8;
}


/* ========================================
   LISTA DE CANAIS
======================================== */

.contact-info__list {
    border-top: 1px solid rgba(16, 42, 67, 0.16);
}


.contact-info__item {
    position: relative;

    display: grid;
    grid-template-columns: 38px 1fr 30px;

    gap: 16px;

    padding: 24px 0;

    border-bottom: 1px solid rgba(16, 42, 67, 0.16);

    transition:
        padding-left 0.25s ease,
        background-color 0.25s ease;
}


.contact-info__item:hover {
    padding-left: 10px;
}


.contact-info__item-number {
    padding-top: 3px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
}


.contact-info__item div {
    display: flex;
    flex-direction: column;
}


.contact-info__item small {
    margin-bottom: 5px;

    color: var(--color-text-secondary);

    font-size: 9px;
    text-transform: uppercase;
}


.contact-info__item strong {
    margin-bottom: 8px;

    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 600;
}


.contact-info__item p {
    max-width: 420px;

    color: var(--color-text-secondary);

    font-size: 12px;
    line-height: 1.6;
}


.contact-info__item-arrow {
    display: flex;
    justify-content: flex-end;

    padding-top: 6px;

    color: var(--color-secondary-dark);

    font-size: 17px;

    transition: transform 0.25s ease;
}


.contact-info__item:hover
.contact-info__item-arrow {
    transform: translateX(5px);
}


/* ========================================
   AVISO
======================================== */

.contact-info__notice {
    margin-top: 30px;
    padding: 22px 24px;

    border-left: 3px solid var(--color-secondary);

    background-color: var(--color-white);
}


.contact-info__notice span {
    display: block;

    margin-bottom: 8px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.7px;
    text-transform: uppercase;
}


.contact-info__notice p {
    color: var(--color-text-secondary);

    font-size: 12px;
    line-height: 1.65;
}


/* ========================================
   PROCESSO DO ATENDIMENTO
======================================== */

.contact-process {
    width: 100%;

    padding: 135px 0 145px;

    background-color: var(--color-white);
}


.contact-process__container {
    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;
    padding: 0 32px;
}


.contact-process__header {
    margin-bottom: 72px;
}


.contact-process__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.9px;
    text-transform: uppercase;
}


.contact-process__eyebrow::before {
    content: "";

    width: 32px;
    height: 2px;

    background-color: var(--color-secondary);
}


.contact-process__heading {
    display: grid;
    grid-template-columns: 1.1fr 0.65fr;

    gap: 90px;

    align-items: end;
}


.contact-process__title {
    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: clamp(43px, 4.3vw, 64px);
    font-weight: 600;

    line-height: 1.07;
    letter-spacing: -2.1px;
}


.contact-process__title span {
    display: block;

    color: var(--color-secondary-dark);
}


.contact-process__description {
    color: var(--color-text-secondary);

    font-size: 15px;
    line-height: 1.8;
}


/* ========================================
   ETAPAS
======================================== */

.contact-process__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(16, 42, 67, 0.15);
    border-bottom: 1px solid rgba(16, 42, 67, 0.15);
}


.contact-process__step {
    min-height: 300px;

    padding: 32px 30px;

    display: flex;
    flex-direction: column;

    border-right: 1px solid rgba(16, 42, 67, 0.15);

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


.contact-process__step:last-child {
    border-right: none;
}


.contact-process__step:hover {
    background-color: #f7f9fc;

    transform: translateY(-5px);
}


.contact-process__number {
    margin-bottom: 70px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
}


.contact-process__step small {
    display: block;

    margin-bottom: 9px;

    color: var(--color-text-secondary);

    font-size: 9px;
    text-transform: uppercase;
}


.contact-process__step h3 {
    margin-bottom: 13px;

    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 600;
}


.contact-process__step p {
    color: var(--color-text-secondary);

    font-size: 13px;
    line-height: 1.7;
}

/* ======================================================
   RESPONSIVIDADE
====================================================== */

.contact-hero__container,
.contact-area__container,
.contact-process__container,
.contact-hero__content,
.contact-form-wrapper,
.contact-info{
    min-width:0;
}

/* ==========================================
   1200px
========================================== */

@media (max-width:1200px){

.contact-hero__container{
    grid-template-columns:1fr .8fr;
    gap:60px;
}

.contact-area__container{
    grid-template-columns:1fr .9fr;
    gap:50px;
}

.contact-process__heading{
    gap:60px;
}

}


/* ==========================================
   992px
========================================== */

@media (max-width:992px){

.contact-hero{

    padding:70px 0 110px;

}

.contact-hero__container{

    grid-template-columns:1fr;

    gap:60px;

}

.contact-hero__content{

    max-width:100%;

}

.contact-hero__aside{

    max-width:650px;

}

.contact-area{

    padding-bottom:90px;

}

.contact-area__container{

    grid-template-columns:1fr;

    gap:70px;

}

.contact-form-wrapper{

    margin-top:0;

}

.contact-info{

    padding-top:0;

}

.contact-process{

    padding:100px 0;

}

.contact-process__heading{

    grid-template-columns:1fr;

    gap:25px;

}

.contact-process__steps{

    grid-template-columns:1fr;

}

.contact-process__step{

    min-height:auto;

    border-right:none;

    border-bottom:1px solid rgba(16,42,67,.15);

}

.contact-process__step:last-child{

    border-bottom:none;

}

}


/* ==========================================
   768px
========================================== */

@media (max-width:768px){

.contact-hero__container,
.contact-area__container,
.contact-process__container{

    padding-left:20px;
    padding-right:20px;

}

.contact-hero__title{

    font-size:clamp(38px,9vw,56px);

    letter-spacing:-1.5px;

}

.contact-hero__description{

    font-size:15px;

}

.contact-hero__channels{

    grid-template-columns:1fr;

}

.contact-form-wrapper{

    padding:28px;

}

.contact-form__row{

    grid-template-columns:1fr;

}

.contact-info__title{

    font-size:clamp(34px,8vw,46px);

}

.contact-process__title{

    font-size:clamp(36px,8vw,48px);

}

}


/* ==========================================
   576px
========================================== */

@media (max-width:576px){

.contact-hero{

    padding:55px 0 90px;

}

.contact-hero__back{

    margin-bottom:30px;

}

.contact-hero__title{

    font-size:36px;

}

.contact-hero__channels{

    max-width:100%;

}

.contact-hero__channel{

    min-height:auto;

    padding:18px;

}

.contact-hero__aside{

    padding:22px;

}

.contact-form-wrapper{

    padding:22px;

}

.contact-form-wrapper__header h2{

    font-size:30px;

}

.contact-form__submit{

    width:100%;

}

.contact-info__title{

    font-size:34px;

}

.contact-info__item{

    grid-template-columns:30px 1fr;

}

.contact-info__item-arrow{

    display:none;

}

.contact-process{

    padding:80px 0;

}

.contact-process__title{

    font-size:34px;

}

.contact-process__step{

    padding:24px 0;

}

.contact-process__number{

    margin-bottom:30px;

}

}