/* =========================================================
   CONTATO (site público) v1.0 — 2026-07-08
   /assets/css/contato.css
   Usado por contato.php. Segue os tokens de assets/css/base.css
   (--color-primary, --radius-*, --shadow-*) — não existia ainda
   nenhum padrão de formulário no lado público do site, então este
   arquivo é a referência pra qualquer formulário público futuro.
========================================================= */

.contato-conteudo {
    padding-block: 0 60px;
}

/* =========================================================
   GRID PRINCIPAL: info (esquerda) + formulário (direita)
========================================================= */

.contato-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 56px;
}

/* =========================================================
   CARD DE INFORMAÇÕES OFICIAIS
========================================================= */

.contato-info {
    display: flex;
    flex-direction: column;
    gap: 26px;

    padding: 40px 32px;

    background: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);

    color: #fff;
}

.contato-info-bloco {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contato-info-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 44px;
    height: 44px;

    border-radius: 50%;
    background: rgba(255, 255, 255, .15);

    font-size: 17px;
}

.contato-info-icone-whatsapp {
    background: rgba(37, 211, 102, .28);
}

.contato-info-bloco h3 {
    margin: 0 0 4px;

    color: rgba(255, 255, 255, .72);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.contato-info-bloco a,
.contato-info-bloco p {
    margin: 0;

    color: #fff;
    font-size: 1rem;
    line-height: 1.55;
}

.contato-info-bloco a {
    transition: color .2s ease;
}

.contato-info-bloco a:hover {
    color: var(--color-hover);
}

.contato-info-redes {
    display: flex;
    gap: 12px;

    margin-top: auto;
    padding-top: 22px;

    border-top: 1px solid rgba(255, 255, 255, .18);
}

.contato-info-redes a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;

    transition: background .2s ease, color .2s ease;
}

.contato-info-redes a:hover {
    background: #fff;
    color: var(--color-primary);
}

/* =========================================================
   CARD DO FORMULÁRIO
========================================================= */

.contato-form-wrap {
    padding: 40px;

    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.contato-form-linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.contato-form-campo {
    display: flex;
    flex-direction: column;
    gap: 7px;

    margin-bottom: 20px;
}

.contato-form-campo label {
    color: var(--color-title);
    font-size: .9rem;
    font-weight: 700;
}

.contato-form-campo input,
.contato-form-campo textarea {
    padding: 13px 16px;

    background: #fbfcfd;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);

    color: var(--color-text);
    font-family: inherit;
    font-size: 1rem;

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

.contato-form-campo textarea {
    min-height: 150px;
    resize: vertical;
}

.contato-form-campo input:focus,
.contato-form-campo textarea:focus {
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(11, 106, 162, .12);
    outline: none;
}

.contato-form-campo.is-invalido input,
.contato-form-campo.is-invalido textarea {
    border-color: #e11d48;
}

/* honeypot: campo invisível pra humano (bot de formulário costuma
   preencher tudo que encontra no HTML) — ver comentário em contato.php */
.contato-form-honeypot {
    position: absolute;
    left: -9999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}

.contato-form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin: 6px 0 28px;
    padding-right: 8px;

    color: var(--color-text);
    font-size: .92rem;
    line-height: 1.55;

    cursor: pointer;
}

.contato-form-checkbox input {
    flex-shrink: 0;
    margin-top: 3px;

    width: 18px;
    height: 18px;

    accent-color: var(--color-primary);
    cursor: pointer;
}

.contato-form-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: 100%;
    min-height: 54px;

    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border: none;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);

    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;

    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.contato-form-botao:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--color-hover), var(--color-primary));
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.contato-form-botao:disabled {
    cursor: default;
    opacity: .7;
    transform: none;
}

/* =========================================================
   TELEFONE — código do país (bandeira + editável) + número (2026-07-08)
   Campo separado do WhatsApp (que agora é texto livre, ver .contato-form-
   campo padrão, sem classe própria). A bandeira BR só aparece enquanto o
   código for exatamente "55" (padrão) — se o Luciano mudar pra outro
   código, a bandeira só some, não troca pra bandeira de outro país (regra
   pedida por ele, pra não ter que mapear bandeira de cada país do mundo).
   Toggle feito via JS (contato.js) adicionando/removendo a classe
   .sem-bandeira no wrapper.
========================================================= */

.contato-telefone-grupo {
    display: flex;
    gap: 8px;
}

.contato-telefone-grupo input[type="tel"] {
    flex: 1;
    min-width: 0;
}

.contato-telefone-codigo-wrap {
    position: relative;
    flex-shrink: 0;

    width: 68px;
}

.contato-telefone-codigo-wrap .contato-telefone-codigo {
    width: 100%;
    padding-left: 28px;

    text-align: center;

    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, padding-left .15s ease;
}

.contato-telefone-codigo-wrap.sem-bandeira .contato-telefone-codigo {
    padding-left: 13px;
}

.contato-telefone-bandeira {
    position: absolute;
    left: 8px;
    top: 50%;

    font-size: 15px;
    line-height: 1;
    transform: translateY(-50%);

    pointer-events: none;
}

.contato-telefone-codigo-wrap.sem-bandeira .contato-telefone-bandeira {
    display: none;
}

@media(max-width: 575px) {

    .contato-telefone-grupo {
        gap: 6px;
    }

    /* 2026-07-28, print 97 — 58px cortava o "55" (só o padding-left de
       28px reservado pra bandeira "BR" já quase tomava a largura
       inteira). Aumentado pra 78px; o campo de telefone ao lado
       (flex:1) encolhe sozinho pra compensar — ele tinha espaço
       sobrando mesmo. */
    .contato-telefone-codigo-wrap {
        width: 78px;
    }

}

/* =========================================================
   ONDE ESTAMOS (mapa)
========================================================= */

.contato-mapa h2 {
    margin-bottom: 24px;

    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    text-align: center;
}

.contato-mapa-frame {
    aspect-ratio: 16 / 6;

    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);

    overflow: hidden;
}

.contato-mapa-frame iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media(max-width: 991px) {

    .contato-grid {
        grid-template-columns: 1fr;
    }

    .contato-info {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px 32px;
    }

    .contato-info-redes {
        width: 100%;
        margin-top: 0;
    }

    .contato-mapa-frame {
        aspect-ratio: 4 / 3;
    }

}

@media(max-width: 575px) {

    .contato-form-wrap {
        padding: 26px 20px;
    }

    .contato-form-linha {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contato-info {
        padding: 28px 22px;
    }

    .contato-info-bloco {
        width: 100%;
    }

}

/* reCAPTCHA v3 (2026-10-26) — selo escondido, aviso do Google em texto */
.grecaptcha-badge { visibility: hidden; }
.recaptcha-aviso { margin: 16px 0; font-size: 0.8rem; opacity: 0.8; }
.recaptcha-aviso a { color: inherit; text-decoration: underline; }