/* Página de contato.
 *
 * Tem CSS próprio porque antes usava o da conta (.secao-conta / .conta-card), feito para
 * tela de login: .conta-card é max-width 420px, e o formulário de contato — que tem
 * textarea e dois campos por linha — ficava espremido numa coluna estreita no meio de uma
 * tela larga vazia. Aqui ele divide a largura com os canais diretos, e o WhatsApp aparece
 * sem rolagem: para a maioria das dúvidas ele resolve mais rápido que o formulário.
 */

.secao-contato-pagina {
    /* O cabeçalho é fixo; sem este padding o título nasce atrás dele. */
    padding: 110px 0 80px;
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
}

.contato-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

/* ---------- Formulário ---------- */

.contato-form {
    background: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    padding: 28px;
}

/* Dois campos curtos por linha (nome/e-mail, telefone/empresa): reduz a altura do
   formulário sem apertar nada. Abaixo de 700px volta a uma coluna. */
.contato-linha {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contato-campo { margin-bottom: 16px; }

.contato-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: .85rem;
    color: var(--cor-texto-cinza);
}

.contato-opcional { opacity: .6; }

.contato-campo input,
.contato-campo textarea {
    width: 100%;
    padding: 12px 14px;
    background: #0a0f0e;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm);
    color: var(--cor-texto-claro);
    font-family: var(--fonte-corpo);
    font-size: .95rem;
    transition: border-color var(--dur-rapida) ease;
}

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

.contato-campo input::placeholder,
.contato-campo textarea::placeholder { color: #5c6b68; }

.contato-campo input:focus,
.contato-campo textarea:focus {
    outline: none;
    border-color: var(--cor-destaque);
}

/* :invalid puro marcaria de vermelho todo campo obrigatório ainda VAZIO no primeiro
   carregamento — antes de a pessoa digitar nada. :user-invalid só reage depois da
   interação, que é quando o aviso significa algo. */
.contato-campo input:user-invalid,
.contato-campo textarea:user-invalid { border-color: #e88; }

.contato-envio {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.contato-botao {
    padding: 13px 30px;
    border: 0;
    border-radius: var(--raio-pill);
    background: var(--grad-dourado);
    color: var(--cor-primaria);
    font-family: var(--fonte-titulo);
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: transform var(--dur-rapida) var(--ease-suave),
                box-shadow var(--dur-rapida) ease;
}

.contato-botao:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--brilho-dourado);
}

.contato-botao:disabled { opacity: .6; cursor: progress; }

/* Sem altura reservada: a mensagem de status só existe depois do envio, e uma linha
   vazia permanente empurraria o botão para cima do nada. */
.contato-resposta {
    margin: 0;
    font-size: .88rem;
    color: var(--cor-destaque);
}

/* ---------- Canais diretos ---------- */

.contato-canais {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contato-canal {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--cor-fundo-card);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-md);
    color: var(--cor-texto-claro);
    text-decoration: none;
    transition: transform var(--dur-media) var(--ease-suave),
                border-color var(--dur-media) ease,
                box-shadow var(--dur-media) ease;
}

.contato-canal:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--dourada-rgb), .8);
    box-shadow: var(--brilho-dourado);
}

.contato-canal i {
    font-size: 1.6rem;
    color: var(--cor-destaque);
    flex: 0 0 auto;
    width: 28px;
    text-align: center;
}

.contato-canal span { display: flex; flex-direction: column; gap: 3px; }
.contato-canal strong { font-size: .98rem; }
.contato-canal small { font-size: .82rem; color: var(--cor-texto-cinza); }

/* O WhatsApp é o canal que resolve na hora: ganha a borda da marca para ser o primeiro
   elemento que o olho encontra na coluna. */
.contato-canal--destaque {
    border-color: rgba(var(--dourada-rgb), .55);
    background: linear-gradient(135deg, rgba(var(--dourada-rgb), .10), var(--cor-fundo-card) 60%);
}

.contato-dica {
    padding: 18px;
    border: 1px dashed var(--cor-borda);
    border-radius: var(--raio-md);
}

.contato-dica h3 {
    font-size: .95rem;
    color: var(--cor-destaque);
    margin: 0 0 10px;
}

.contato-dica ul { margin: 0; padding-left: 18px; }

.contato-dica li {
    font-size: .87rem;
    color: var(--cor-texto-cinza);
    margin-bottom: 6px;
}

.contato-dica li:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
    .contato-grid { grid-template-columns: 1fr; }

    /* No celular os canais vêm ANTES do formulário: quem abre a página no telefone
       quase sempre quer o WhatsApp, não digitar num teclado pequeno. */
    .contato-canais { order: -1; }
}

@media (max-width: 700px) {
    .secao-contato-pagina { padding: 92px 0 64px; }
    .contato-linha { grid-template-columns: 1fr; }
    .contato-form { padding: 20px; }
}