/* =========================================================
   CONTATO - FLUXO SIMPLES
========================================================= */

.contact-simple-section {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            var(--surface-soft) 100%
        );
}

.contact-simple-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(320px, 0.85fr);

    align-items: start;

    gap:
        clamp(
            36px,
            6vw,
            82px
        );
}


/* =========================================================
   CARD PRINCIPAL
========================================================= */

.contact-request-card {
    padding:
        clamp(
            26px,
            4vw,
            44px
        );

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    background:
        var(--white);

    box-shadow:
        var(--shadow);
}

.contact-request-heading {
    max-width: 650px;

    margin-bottom: 34px;
}

.contact-request-heading h2 {
    margin-bottom: 15px;
}

.contact-request-heading > p:not(.eyebrow) {
    max-width: 580px;

    margin-bottom: 0;
}


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

.contact-form-simple {
    display: grid;

    gap: 24px;
}

.contact-field-group,
.contact-channel-block {
    padding: 24px;

    border:
        1px solid
        var(--border);

    border-radius: 18px;

    background:
        #fbfbfe;
}

.contact-step-heading {
    display: flex;

    margin-bottom: 17px;

    align-items: center;

    gap: 14px;
}

.contact-step-heading > div {
    min-width: 0;
}

.contact-step-number {
    display: grid;

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    place-items: center;

    color:
        var(--brand);

    border:
        1px solid
        rgba(45, 32, 199, 0.12);

    border-radius: 12px;

    background:
        var(--brand-soft);

    font-size: 0.68rem;
    font-weight: 900;
}

.contact-field-label {
    display: block;

    color:
        var(--ink);

    font-size: 0.94rem;
    font-weight: 800;

    line-height: 1.3;
}

.contact-step-heading small {
    display: block;

    margin-top: 3px;

    color:
        var(--muted);

    font-size: 0.72rem;
}

.required-mark {
    color:
        var(--brand);
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   INPUT / SELECT
========================================================= */

.contact-input,
.contact-select {
    width: 100%;
    min-height: 56px;

    padding:
        0 16px;

    color:
        var(--ink);

    border:
        1px solid
        #d9dbe7;

    border-radius: 12px;

    outline: none;

    background:
        var(--white);

    font-size: 0.92rem;

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

.contact-input::placeholder {
    color:
        #9296a7;
}

.contact-input:hover,
.contact-select:hover {
    border-color:
        #c4c6d5;
}

.contact-input:focus,
.contact-select:focus {
    border-color:
        var(--brand);

    box-shadow:
        0 0 0 4px
        rgba(45, 32, 199, 0.10);

    background:
        var(--white);
}

.contact-input[aria-invalid="true"],
.contact-select[aria-invalid="true"],
.contact-services[aria-invalid="true"] {
    border-color:
        #b42318;

    box-shadow:
        0 0 0 4px
        rgba(180, 35, 24, 0.08);
}

.contact-field-help,
.contact-field-error {
    margin:
        8px 0 0;

    font-size: 0.75rem;

    line-height: 1.45;
}

.contact-field-help {
    color:
        var(--muted);
}

.contact-field-error {
    color:
        #b42318;

    font-weight: 650;
}


/* =========================================================
   SERVIÇOS
========================================================= */

.contact-services {
    display: grid;

    margin: 0;

    padding: 0;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    border: 0;
}

.contact-service-option {
    position: relative;

    display: flex;

    min-height: 54px;

    padding: 13px 14px;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        #dfe0e9;

    border-radius: 12px;

    background:
        var(--white);

    cursor: pointer;

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

.contact-service-option:hover {
    border-color:
        rgba(45, 32, 199, 0.32);

    background:
        #faf9ff;
}

.contact-service-option:has(input:checked) {
    border-color:
        rgba(45, 32, 199, 0.42);

    background:
        var(--brand-soft);

    box-shadow:
        0 0 0 3px
        rgba(45, 32, 199, 0.07);
}

.contact-service-option input {
    width: 18px;
    height: 18px;

    flex: 0 0 18px;

    accent-color:
        var(--brand);
}

.contact-service-option span {
    color:
        var(--ink);

    font-size: 0.82rem;
    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   CANAIS DE CONTATO
========================================================= */

.contact-channel-block {
    background:
        linear-gradient(
            145deg,
            #f8f7ff,
            #efeeff
        );

    border-color:
        rgba(45, 32, 199, 0.13);
}

.contact-channel-instruction {
    margin:
        -2px 0 18px;

    color:
        var(--text);

    font-size: 0.84rem;
}

.contact-channel-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.contact-channel-button {
    width: 100%;

    min-height: 56px;
}

.contact-channel-button:disabled {
    color:
        #9296a7;

    border-color:
        #dfe0e8;

    background:
        #ededf3;

    box-shadow: none;

    transform: none;

    cursor: not-allowed;

    opacity: 1;
}

.contact-channel-button:disabled:hover {
    color:
        #9296a7;

    border-color:
        #dfe0e8;

    background:
        #ededf3;

    box-shadow: none;

    transform: none;
}

.contact-ready-message {
    margin-top: 15px;

    padding-top: 14px;

    color:
        var(--muted);

    border-top:
        1px solid
        rgba(45, 32, 199, 0.10);

    font-size: 0.76rem;
}

.contact-ready-message.is-ready {
    color:
        var(--brand-dark);

    font-weight: 700;
}


/* =========================================================
   CARD DE ORIENTAÇÃO
========================================================= */

.contact-help-card {
    position: sticky;

    top: 130px;

    padding:
        clamp(
            26px,
            4vw,
            38px
        );

    overflow: hidden;

    color:
        white;

    border-radius:
        var(--radius-large);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(129, 120, 242, 0.34),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            var(--brand-deep),
            var(--brand-dark)
        );

    box-shadow:
        var(--shadow-large);
}

.contact-help-card .eyebrow {
    color:
        #b9b3ff;
}

.contact-help-card h2 {
    margin-bottom: 16px;

    color:
        white;
}

.contact-help-card > p:not(.eyebrow) {
    color:
        #b6b8c8;
}

.contact-help-list {
    display: grid;

    margin-top: 28px;

    gap: 10px;
}

.contact-help-list > div {
    display: grid;

    grid-template-columns:
        38px 1fr;

    align-items: center;

    gap: 13px;

    padding: 15px 0;

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

.contact-help-list > div:last-child {
    border-bottom: 0;
}

.contact-help-list span {
    display: grid;

    width: 34px;
    height: 34px;

    place-items: center;

    color:
        #d5d1ff;

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

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.07);

    font-size: 0.65rem;
    font-weight: 900;
}

.contact-help-list p {
    margin: 0;

    color:
        #d2d3df;

    font-size: 0.83rem;
}

.contact-help-card .contact-note {
    margin-top: 28px;

    padding: 18px;

    color:
        white;

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

    background:
        rgba(255, 255, 255, 0.07);
}

.contact-help-card .contact-note strong {
    color:
        white;
}

.contact-help-card .contact-note p {
    color:
        #bec0cf;
}


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

@media (min-width: 1600px) {

    .contact-simple-layout {
        gap: 92px;
    }

    .contact-request-card {
        padding: 48px;
    }
}


@media (max-width: 1050px) {

    .contact-simple-layout {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(280px, 0.9fr);

        gap: 34px;
    }

    .contact-help-card {
        top: 112px;
    }
}


@media (max-width: 850px) {

    .contact-simple-layout {
        grid-template-columns: 1fr;
    }

    .contact-help-card {
        position: static;
    }
}


@media (max-width: 600px) {

    .contact-request-card,
    .contact-help-card {
        padding: 22px 18px;

        border-radius: 20px;
    }

    .contact-request-heading {
        margin-bottom: 25px;
    }

    .contact-field-group,
    .contact-channel-block {
        padding: 19px 16px;
    }

    .contact-services,
    .contact-channel-actions {
        grid-template-columns: 1fr;
    }

    .contact-input,
    .contact-select {
        min-height: 54px;

        font-size: 16px;
    }
}