/* ==================================================
   Pagina de contato da Show de Imoveis
   Mesma identidade da Sobre e do blog:
     fundo #F7F8F9, cartao #FFF, texto #222, Montserrat 300
     titulos 600, azul #024059, vermelho #CE0101, cantos 4px
     largura 1140px
   Ordem: capa, canais em bento (sobem por cima da capa),
   formulario com o "o que acontece depois", escritorio.
   ================================================== */

.sdi-contato {
    --branco: #FFFFFF;
    --fundo: #F7F8F9;
    --texto: #222222;
    --suave: #545B60;
    --vermelho: #CE0101;
    --azul: #024059;
    --azul-claro: #0A5876;
    --borda: #E1E6EA;
    --sombra: 0 1px 2px rgba(6, 28, 40, .05), 0 10px 30px rgba(6, 28, 40, .07);
    --ease: cubic-bezier(.22, 1, .36, 1);

    background: var(--fundo);
    color: var(--texto);
    font-family: Montserrat, system-ui, sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;
    overflow-x: clip;
}

.sdi-contato *,
.sdi-contato *::before,
.sdi-contato *::after { box-sizing: border-box; }

.sdi-contato p { margin: 0; }

.sdi-ct-largura {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
}

.sdi-contato svg { width: 20px; height: 20px; flex: none; }

/* ---------- capa ---------- */

.sdi-ct-capa {
    padding: 64px 0 118px;
    background-color: #0B2B3C;
    background-size: cover;
    background-position: center 60%;
    text-align: center;
    color: #fff;
}

@media (min-width: 768px) {
    .sdi-ct-capa { padding: 92px 0 150px; }
}

.sdi-ct-olho {
    margin-bottom: 14px !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .75);
}

.sdi-ct-capa h1 {
    max-width: 860px;
    margin: 0 auto;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.22;
    color: #fff;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .sdi-ct-capa h1 { font-size: 48px; line-height: 1.2; }
}

.sdi-ct-sub {
    max-width: 620px;
    margin: 16px auto 0 !important;
    font-size: 17px;
    color: rgba(255, 255, 255, .88);
    text-wrap: balance;
}

.sdi-ct-botoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 30px;
}

.sdi-ct-botao {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid #fff;
    border-radius: 4px;
    background: #fff;
    color: var(--azul);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sdi-ct-botao:hover,
.sdi-ct-botao:focus-visible {
    background: var(--azul-claro);
    border-color: var(--azul-claro);
    color: #fff;
}

.sdi-ct-botao-vazado { background: transparent; color: #fff; }

.sdi-ct-botao-vazado:hover,
.sdi-ct-botao-vazado:focus-visible { background: #fff; border-color: #fff; color: var(--azul); }

/* ---------- canais em bento ---------- */

.sdi-ct-canais {
    position: relative;
    z-index: 2;
    margin-top: -72px;
}

@media (min-width: 768px) {
    .sdi-ct-canais { margin-top: -96px; }
}

.sdi-ct-bento {
    display: grid;
    gap: 14px;
}

@media (min-width: 620px) {
    .sdi-ct-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sdi-ct-card-zap { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
    .sdi-ct-bento {
        grid-template-columns: 1.25fr 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 16px;
    }
    .sdi-ct-card-zap { grid-column: 1; grid-row: 1 / span 2; }
}

.sdi-ct-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    padding: 22px 22px 20px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--branco);
    box-shadow: var(--sombra);
    color: var(--texto);
    text-decoration: none;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s ease;
}

a.sdi-ct-card:hover,
a.sdi-ct-card:focus-visible {
    transform: translateY(-3px);
    border-color: #cfd8de;
    box-shadow: 0 2px 4px rgba(6, 28, 40, .06), 0 18px 40px rgba(6, 28, 40, .12);
}

.sdi-ct-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #EEF3F6;
    color: var(--azul);
}

.sdi-ct-rotulo {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--suave);
}

.sdi-ct-valor {
    margin-top: 4px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #000;
    text-decoration: none;
    overflow-wrap: break-word;
}

.sdi-ct-valor-longo { font-size: 16px; overflow-wrap: normal; }

a.sdi-ct-valor:hover { color: var(--azul); }

.sdi-ct-mini {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
}

.sdi-ct-mini a,
.sdi-ct-copiar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--branco);
    color: var(--azul);
    font: 500 13px/1 Montserrat, system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.sdi-ct-copiar svg { width: 15px; height: 15px; }

.sdi-ct-mini a:hover,
.sdi-ct-copiar:hover,
.sdi-ct-mini a:focus-visible,
.sdi-ct-copiar:focus-visible {
    border-color: var(--azul);
    background: var(--azul);
    color: #fff;
}

.sdi-ct-acao {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--azul);
}

.sdi-ct-acao svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
a.sdi-ct-card:hover .sdi-ct-acao svg { transform: translateX(4px); }

/* o WhatsApp e o card principal: azul da marca, maior */
.sdi-ct-card-zap {
    padding: 28px;
    border-color: var(--azul);
    background: var(--azul);
    color: #fff;
}

.sdi-ct-card-zap .sdi-ct-icone { width: 52px; height: 52px; background: rgba(255, 255, 255, .12); color: #fff; }
.sdi-ct-card-zap .sdi-ct-icone svg { width: 26px; height: 26px; }
.sdi-ct-card-zap .sdi-ct-rotulo { color: rgba(255, 255, 255, .72); }
.sdi-ct-card-zap .sdi-ct-valor { font-size: 26px; color: #fff; }

@media (min-width: 960px) {
    .sdi-ct-card-zap .sdi-ct-valor { font-size: 30px; }
}

.sdi-ct-desc {
    max-width: 380px;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .84);
}

.sdi-ct-card-zap .sdi-ct-acao {
    min-height: 46px;
    margin-top: auto;
    padding: 0 20px;
    border-radius: 4px;
    background: #fff;
    color: var(--azul);
}

.sdi-ct-card-zap .sdi-ct-desc + .sdi-ct-acao { margin-top: 24px; }

@media (min-width: 960px) {
    .sdi-ct-card-zap .sdi-ct-desc + .sdi-ct-acao { margin-top: auto; }
    .sdi-ct-card-zap .sdi-ct-desc { margin-bottom: 24px; }
}

a.sdi-ct-card-zap:hover,
a.sdi-ct-card-zap:focus-visible { border-color: var(--azul-claro); background: var(--azul-claro); }

/* ---------- secoes ---------- */

.sdi-ct-secao { padding: 56px 0; }
.sdi-ct-secao-branca { background: var(--branco); }

@media (min-width: 768px) {
    .sdi-ct-secao { padding: 80px 0; }
}

.sdi-ct-h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.25;
    color: #000;
    text-wrap: balance;
}

@media (min-width: 768px) {
    .sdi-ct-h2 { font-size: 35px; line-height: 42px; }
}

.sdi-ct-centro { text-align: center; }

/* ---------- formulario ---------- */

.sdi-ct-form-grade {
    display: grid;
    gap: 22px;
    align-items: start;
}

@media (min-width: 960px) {
    .sdi-ct-form-grade { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 28px; }
}

.sdi-ct-form-caixa {
    padding: 26px 20px;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--branco);
    box-shadow: var(--sombra);
}

@media (min-width: 768px) {
    .sdi-ct-form-caixa { padding: 38px 40px 34px; }
}

.sdi-ct-intro {
    margin-top: 8px !important;
    color: var(--suave);
}

.sdi-ct-form { margin-top: 26px; transition: opacity .22s ease, transform .22s ease; }
.sdi-ct-form.saindo { opacity: 0; transform: translateY(-6px); }

.sdi-ct-campos {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px 16px;
}

.sdi-ct-campo { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }

@media (min-width: 620px) {
    .sdi-ct-c6 { grid-column: span 6; }
    .sdi-ct-c5 { grid-column: span 5; }
    .sdi-ct-c7 { grid-column: span 7; }
}

.sdi-ct-campo label,
.sdi-ct-campo legend {
    display: block;
    margin: 0 0 7px;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto);
}

.sdi-ct-campo input[type="text"],
.sdi-ct-campo input[type="tel"],
.sdi-ct-campo input[type="email"],
.sdi-ct-campo select,
.sdi-ct-campo textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid #CED6DC;
    border-radius: 4px;
    background: #fff;
    color: #111;
    font: 400 16px/1.4 Montserrat, system-ui, sans-serif;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.sdi-ct-campo select {
    padding-right: 40px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23545B60' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 18px;
}

.sdi-ct-campo textarea { min-height: 116px; resize: vertical; }

.sdi-ct-campo input::placeholder,
.sdi-ct-campo textarea::placeholder { color: #8A9399; font-weight: 300; }

.sdi-ct-campo input:focus,
.sdi-ct-campo select:focus,
.sdi-ct-campo textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(2, 64, 89, .14);
}

.sdi-ct-campo.com-erro input,
.sdi-ct-campo.com-erro textarea { border-color: var(--vermelho); }

.sdi-ct-campo.com-erro input:focus { box-shadow: 0 0 0 3px rgba(206, 1, 1, .12); }

.sdi-ct-erro {
    display: block;
    min-height: 0;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--vermelho);
}

.sdi-ct-erro:empty { display: none; }

.sdi-ct-faixa { transition: opacity .2s ease; }
.sdi-ct-faixa.apagado { opacity: .4; }

/* chips de escolha */
.sdi-ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.sdi-ct-chip { position: relative; margin: 0 !important; font-weight: 400 !important; }

.sdi-ct-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.sdi-ct-chip span {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #CED6DC;
    border-radius: 999px;
    background: #fff;
    color: var(--suave);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.sdi-ct-chip:hover span { border-color: var(--azul); color: var(--azul); }

.sdi-ct-chip input:checked + span {
    border-color: var(--azul);
    background: var(--azul);
    color: #fff;
}

.sdi-ct-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(2, 64, 89, .22); }

/* isca pra robo, fora da tela */
.sdi-ct-isca { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.sdi-ct-enviar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    margin-top: 26px;
}

.sdi-ct-botao-form {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 30px;
    border: 0;
    border-radius: 4px;
    background: var(--azul);
    color: #fff;
    font: 500 15px/1 Montserrat, system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, opacity .2s ease;
}

.sdi-ct-botao-form:hover,
.sdi-ct-botao-form:focus-visible { background: var(--azul-claro); color: #fff; }

.sdi-ct-botao-form:disabled { cursor: progress; opacity: .8; }

.sdi-ct-botao-form.carregando::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sdi-ct-gira .7s linear infinite;
}

@keyframes sdi-ct-gira { to { transform: rotate(360deg); } }

.sdi-ct-lgpd { flex: 1 1 240px; font-size: 13px; line-height: 1.55; color: var(--suave); }
.sdi-ct-lgpd a { color: var(--azul); text-decoration: underline; text-underline-offset: 2px; }

.sdi-ct-erro-geral { margin-top: 14px !important; font-size: 14px; font-weight: 500; color: var(--vermelho); }
.sdi-ct-erro-geral:empty { display: none; }

/* sucesso */
.sdi-ct-sucesso {
    margin-top: 26px;
    padding: 34px 26px;
    border-radius: 6px;
    background: #F2F7F9;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
    outline: none;
}

.sdi-ct-sucesso.entrando { opacity: 1; transform: none; }

.sdi-ct-sucesso-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
}

.sdi-ct-sucesso-icone svg { width: 28px; height: 28px; }

.sdi-ct-sucesso h3 { margin: 16px 0 8px; font-size: 22px; font-weight: 600; color: #000; }
.sdi-ct-sucesso p { max-width: 440px; margin: 0 auto 22px !important; color: var(--suave); }

/* o que acontece depois */
.sdi-ct-depois {
    padding: 28px 24px;
    border-radius: 6px;
    background: #0B2B3C;
    color: rgba(255, 255, 255, .86);
}

@media (min-width: 960px) {
    .sdi-ct-depois { position: sticky; top: 110px; padding: 34px 30px; }
}

.sdi-ct-depois h3 { margin: 0 0 20px; font-size: 20px; font-weight: 600; color: #fff; }

.sdi-ct-depois ol { margin: 0; padding: 0; list-style: none; counter-reset: passo; }

.sdi-ct-depois li {
    position: relative;
    margin: 0 0 20px;
    padding-left: 46px;
    font-size: 15px;
    line-height: 1.6;
    counter-increment: passo;
}

.sdi-ct-depois li::before {
    content: counter(passo);
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.sdi-ct-depois li strong { display: block; margin-bottom: 2px; font-weight: 600; color: #fff; }

.sdi-ct-creci {
    margin-top: 6px !important;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .7);
}

/* ---------- escritorio ---------- */

.sdi-ct-escritorio {
    display: grid;
    margin-top: 34px;
    overflow: hidden;
    border: 1px solid var(--borda);
    border-radius: 6px;
    background: var(--branco);
    box-shadow: var(--sombra);
}

@media (min-width: 900px) {
    .sdi-ct-escritorio { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

.sdi-ct-mapa { min-height: 300px; background: #E9EEF1; }

.sdi-ct-mapa iframe { display: block; width: 100%; height: 100%; min-height: 300px; border: 0; }

@media (min-width: 900px) {
    .sdi-ct-mapa, .sdi-ct-mapa iframe { min-height: 400px; }
}

.sdi-ct-endereco {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px;
}

@media (min-width: 900px) {
    .sdi-ct-endereco { justify-content: center; padding: 40px 36px; }
}

.sdi-ct-endereco address {
    margin: 6px 0 0;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5;
    color: #000;
}

.sdi-ct-dica { margin-top: 12px !important; font-size: 14px; color: var(--suave); }

.sdi-ct-rotas {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.sdi-ct-rota {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--azul);
    border-radius: 4px;
    background: var(--azul);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.sdi-ct-rota:hover,
.sdi-ct-rota:focus-visible { background: var(--azul-claro); border-color: var(--azul-claro); color: #fff; }

.sdi-ct-rota-vazada { background: #fff; color: var(--azul); }
.sdi-ct-rota-vazada:hover,
.sdi-ct-rota-vazada:focus-visible { background: var(--azul); color: #fff; }

.sdi-ct-copiar-end { min-height: 44px; border-radius: 4px; }

/* ---------- aviso ---------- */

.sdi-ct-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 9999;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    border-radius: 6px;
    background: #0B2B3C;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.sdi-ct-toast.visivel { opacity: 1; transform: translate(-50%, 0); }

.sdi-contato a:focus-visible,
.sdi-contato button:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 3px; }

.sdi-ct-capa a:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .sdi-contato *,
    .sdi-contato *::before { transition: none !important; animation: none !important; }
}

/* previa da mensagem que abre no WhatsApp, preenche o card alto no desktop */
.sdi-ct-bolha { display: none; }

@media (min-width: 960px) {
    .sdi-ct-bolha {
        display: block;
        align-self: flex-end;
        max-width: 300px;
        margin: 26px 0 24px;
        padding: 12px 14px 8px;
        border-radius: 14px 14px 4px 14px;
        background: rgba(255, 255, 255, .1);
        font-size: 14px;
        line-height: 1.5;
        color: #fff;
    }
    .sdi-ct-bolha small {
        display: block;
        margin-top: 4px;
        font-size: 11px;
        text-align: right;
        color: rgba(255, 255, 255, .6);
    }
    .sdi-ct-card-zap .sdi-ct-desc { margin-bottom: 0; }
}

/* ---------- acabamento v1.1 ---------- */

.sdi-ct-cep { white-space: nowrap; }

/* "Voce quer": 2 por linha no celular, todas numa linha no desktop */
@media (max-width: 619px) {
    .sdi-ct-chips-obj { display: grid; grid-template-columns: 1fr 1fr; }
    .sdi-ct-chips-obj .sdi-ct-chip span { width: 100%; justify-content: center; padding: 0 8px; font-size: 13px; white-space: nowrap; }
}

@media (min-width: 620px) {
    .sdi-ct-chips { flex-wrap: nowrap; }
}

/* celular: canais em linha (icone ao lado do texto), metade da altura */
@media (max-width: 619px) {
    .sdi-ct-bento { gap: 10px; }
    .sdi-ct-card:not(.sdi-ct-card-zap) {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        padding: 16px;
    }
    .sdi-ct-card:not(.sdi-ct-card-zap) .sdi-ct-icone {
        grid-row: 1 / span 2;
        width: 40px;
        height: 40px;
        margin: 0;
    }
    .sdi-ct-card:not(.sdi-ct-card-zap) .sdi-ct-rotulo { font-size: 11px; }
    .sdi-ct-card:not(.sdi-ct-card-zap) .sdi-ct-valor { margin-top: 0; font-size: 18px; }
    .sdi-ct-card:not(.sdi-ct-card-zap) .sdi-ct-valor-longo { font-size: 15px; }
    .sdi-ct-card:not(.sdi-ct-card-zap) .sdi-ct-mini,
    .sdi-ct-card:not(.sdi-ct-card-zap) .sdi-ct-acao {
        grid-column: 2;
        padding-top: 10px;
    }
    .sdi-ct-card-zap { padding: 22px; }
}
