/* ============================================================================
   CONTATO · formulário em 62%, contato direto em 38%; coluna única abaixo de
   900px. Usado pela home e pela página Sobre.
   ========================================================================= */

#contato{--motion-enter:240ms}
[data-contato-grid]{display:grid;grid-template-columns:minmax(0,62fr) minmax(0,38fr);column-gap:var(--space-6);align-items:stretch;margin-top:var(--space-5)}
[data-form]{display:flex;flex-direction:column;gap:28px}
[data-campo]{display:flex;flex-direction:column;gap:8px}
[data-rot]{font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:color-mix(in srgb,var(--tinta) 70%,transparent)}

/* CAMPO · contorno completo de 1px, retangular, sobre uma superfície rebaixada:
   o papel escurecido 3% na direção da tinta, que mantém a matiz quente. Nunca
   mistura com branco. O grão fica embaixo do conteúdo, não dentro do campo.
   No foco o fundo sobe para o papel cheio: o campo em foco é o mais claro da
   tela, e é isso que diz onde a pessoa está. */
:root{--campo-fundo:#EBE8E3;--campo-fio:color-mix(in srgb,var(--tinta) 30%,transparent);--campo-fundo-off:#E4E1DB}
[data-entrada]{width:100%;height:52px;min-height:44px;padding:0 16px;border:1px solid var(--campo-fio);border-radius:0;background:var(--campo-fundo);color:var(--tinta);font:400 var(--size-body)/1.5 var(--font-sans);-webkit-appearance:none;appearance:none;transition:border-color var(--motion-instant) var(--ease-state),background-color var(--motion-instant) var(--ease-state)}
[data-entrada]:hover{border-color:color-mix(in srgb,var(--tinta) 55%,transparent)}
[data-entrada]:focus,[data-entrada]:focus-visible{background:var(--papel);border:2px solid var(--ferrugem);padding:0 15px;outline:none}
[data-entrada]:disabled{background:var(--campo-fundo-off);border-color:color-mix(in srgb,var(--tinta) 18%,transparent);color:color-mix(in srgb,var(--tinta) 45%,transparent);cursor:not-allowed}
[data-entrada][aria-invalid="true"]{border-color:var(--ferrugem)}
textarea[data-entrada]{height:132px;padding:16px;line-height:1.6;resize:vertical}
textarea[data-entrada]:focus,textarea[data-entrada]:focus-visible{padding:15px}
[data-entrada]::placeholder{color:color-mix(in srgb,var(--tinta) 45%,transparent)}

/* SELECT PRÓPRIO · o menu nativo não aceita estilo (a faixa azul vem do sistema
   operacional), então o campo é um combobox com listbox própria: mesmo contorno
   e altura dos inputs, fundo opaco igual ao do campo, raio 0, sem sombra, sem
   fio entre as opções. A lista é absoluta dentro do campo, então acompanha a
   rolagem. Um input oculto leva o valor no POST. */
[data-sel-wrap]{position:relative}
button[data-sel]{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;color:color-mix(in srgb,var(--tinta) 45%,transparent)}
button[data-sel][data-preenchido="sim"]{color:var(--tinta)}
button[data-sel] [data-caret]{display:flex;align-items:center;color:color-mix(in srgb,var(--tinta) 60%,transparent);transition:transform 160ms var(--ease-state)}
button[data-sel][aria-expanded="true"] [data-caret]{transform:rotate(180deg)}
[data-lista]{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;margin:0;padding:0;list-style:none;background:var(--campo-fundo);border:1px solid var(--campo-fio);max-height:308px;overflow:auto}
/* Apontado: lavagem de ferrugem a 8% mais barra de 2px na borda esquerda, com o
   recuo compensado para o texto não deslocar. Selecionado: peso 500 e traço
   curto à direita, nunca só cor. */
[data-opcao]{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px;font:400 15px/1.4 var(--font-sans);cursor:pointer;background:transparent;border-left:2px solid transparent;padding:0 16px}
[data-opcao][data-apontado="sim"]{background:color-mix(in srgb,var(--ferrugem) 8%,transparent);border-left-color:var(--ferrugem);padding-left:14px}
[data-opcao][aria-selected="true"]{font-weight:500}
[data-opcao] [data-opcao-traco]{flex:0 0 auto;width:12px;height:1px;background:transparent}
[data-opcao][aria-selected="true"] [data-opcao-traco]{background:var(--ferrugem)}
@media (prefers-reduced-motion:reduce){button[data-sel] [data-caret]{transition:none}}

[data-erro]{margin:0;font:400 13px/1.5 var(--font-sans);color:var(--ferrugem)}
[data-linha]{margin:0;font:400 15px/1.5 var(--font-sans);color:color-mix(in srgb,var(--tinta) 85%,transparent)}
/* Isca de robô: fora da tela, fora do foco, fora do leitor. */
[data-isca]{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
[data-ok]{border-top:1px solid var(--tinta);padding-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}
[data-ok] h3{margin:0;font:500 var(--size-t3)/var(--lh-t3) var(--font-sans)}
[data-ok] p{margin:0;font:400 var(--size-caption)/var(--lh-caption) var(--font-mono);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-muted)}
[data-falha]{margin:0;font:400 13px/1.6 var(--font-sans);color:var(--ferrugem);max-width:52ch}
[data-envio]{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start;margin-top:4px}
[data-direto]{display:flex;flex-direction:column;gap:var(--space-1)}
/* Os links do contato direto são itens de uma coluna flex, e por padrão
   esticariam para a largura da coluna: a caixa clicável ficava com 671px para
   um texto de 178px, e sobrava meio metro de "mãozinha" sobre papel vazio.
   O alvo termina onde o texto termina. */
[data-direto-links]{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font:400 var(--size-body-sm)/1.5 var(--font-sans)}
[data-direto-bloco]{display:flex;flex-direction:column;gap:4px}
[data-direto] [data-rot]+[data-rot],[data-direto-bloco]+[data-rot]{margin-top:32px}

@media (max-width:899px){[data-contato-grid]{grid-template-columns:minmax(0,1fr);row-gap:var(--space-5)}}