/* ==========================================================================
   formulario.css — o formulário PÚBLICO do site (vocabulário `.fm-*`).

   Mora no app porque o componente é do MÓDULO (DOUTRINA.md §Organização de
   módulos): a página que o hospeda carrega esta folha depois do landing.css.

   Identidade DUAE: fundo marrom (fecha a página junto com o rodapé),
   hairlines de ouro, linhas retas (radius 0), Cormorant no título e
   Montserrat Light no resto. Consome os tokens `--duae-*` / `--lp-*` do
   `landing.css`, SEMPRE com fallback — folha que depende cegamente de um
   token quebra em silêncio (`frontend-css-design` §1c).

   ⚠️ Layout de formulário não é coberto por teste: mexeu aqui, confira no
   navegador (DOUTRINA.md §CSS de formulário).
   ========================================================================== */
.fm {
    padding: clamp(3.5rem, 7vw, 5.5rem) var(--lp-respiro-x, 2rem) clamp(4rem, 8vw, 6rem);
    background-color: var(--duae-marrom, #593B2D);
    border-top: var(--duae-hairline, 1px solid rgba(171, 149, 94, 0.5));
}

.fm__grade {
    max-width: var(--lp-largura-max, 78rem);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
}

.fm__texto {
    margin-top: 1.25rem;
    font-size: 0.9375rem;
    color: color-mix(in srgb, var(--duae-branco, #fff) 76%, transparent);
    max-width: 32rem;
}

/* O WhatsApp continua sendo a via principal — o formulário é a alternativa
   de quem não quer conversar agora. Rosé: apoio pontual nesta microcopy. */
.fm__alternativa {
    margin-top: 1.75rem;
    font-size: 0.8125rem;
    color: color-mix(in srgb, var(--duae-branco, #fff) 60%, transparent);
}

.fm__alternativa a {
    color: var(--duae-rose, #E1BAB1);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--duae-rose, #E1BAB1) 55%, transparent);
    transition: color 0.25s ease, border-color 0.25s ease;
}

.fm__alternativa a:hover,
.fm__alternativa a:focus-visible {
    color: var(--duae-branco, #fff);
    border-bottom-color: var(--duae-branco, #fff);
}

/* Caixa do formulário: véu preto sobre o marrom + hairline de ouro. Dá o
   contraste que os campos precisam sem introduzir uma cor nova. */
.fm__caixa {
    padding: clamp(1.75rem, 3.5vw, 2.75rem);
    background-color: color-mix(in srgb, var(--duae-preto, #0d0b0a) 45%, transparent);
    border: var(--duae-hairline, 1px solid rgba(171, 149, 94, 0.5));
}

/* ── Aviso do PRG (mensagem recebida / confira os campos) ────────────────── */
.fm-avisos {
    display: grid;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
}

/* ⚠️ OBRIGATÓRIO. A região nasce no DOM vazia e com o atributo `hidden` (o
   `aria-live` só anuncia se ela já estava na página quando o texto chega). Mas
   `hidden` é só `display: none` do navegador, e a regra de classe acima o
   VENCE por especificidade — sem esta linha, a caixa vazia apareceria em toda
   página, com o `margin-bottom` abrindo um buraco acima do formulário. */
.fm-avisos[hidden] {
    display: none;
}

/* O JS move o foco para cá ao responder: o foco por teclado tem de ser
   visível, mas sem o contorno do clique. */
.fm-avisos:focus {
    outline: none;
}

.fm-avisos:focus-visible {
    outline: 1px solid var(--duae-ouro, #AB955E);
    outline-offset: 4px;
}

.fm-aviso {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    font-size: 0.8125rem;
    color: var(--duae-branco, #fff);
    background-color: color-mix(in srgb, var(--duae-ouro, #AB955E) 14%, transparent);
    border-left: 2px solid var(--duae-ouro, #AB955E);
}

.fm-aviso--erro {
    background-color: color-mix(in srgb, var(--color-erro, #E1BAB1) 14%, transparent);
    border-left-color: var(--color-erro, #E1BAB1);
}

.fm-aviso__losango {
    width: 0.4rem;
    height: 0.4rem;
    flex-shrink: 0;
    border: 1px solid currentColor;
    transform: rotate(45deg);
}

/* ── Campos ─────────────────────────────────────────────────────────────── */
.fm-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.fm-campo {
    display: grid;
    gap: 0.5rem;
}

/* Mensagem ocupa a linha inteira — texto longo em meia coluna é hostil. */
.fm-campo--largo {
    grid-column: 1 / -1;
}

.fm-campo > label {
    font-size: 0.625rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--duae-ouro, #AB955E);
}

/* ⚠️ Fundo fixo ⇒ cor de texto fixa NO MESMO seletor (nunca herdar) — e
   `font-family: inherit` porque input/textarea não herdam a fonte do body. */
.fm-campo input,
.fm-campo textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: inherit;
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--duae-branco, #fff);
    background-color: color-mix(in srgb, var(--duae-preto, #0d0b0a) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--duae-ouro, #AB955E) 40%, transparent);
    border-radius: 0;
    outline: none;
    resize: vertical;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.fm-campo input:focus,
.fm-campo textarea:focus {
    border-color: var(--duae-ouro, #AB955E);
    background-color: color-mix(in srgb, var(--duae-preto, #0d0b0a) 70%, transparent);
}

.fm-campo input::placeholder,
.fm-campo textarea::placeholder {
    color: color-mix(in srgb, var(--duae-branco, #fff) 34%, transparent);
}

.fm-campo__erro,
.fm-form__erro {
    grid-column: 1 / -1;
    font-size: 0.75rem;
    color: var(--color-erro, #E1BAB1);
}

/* ── Honeypot: invisível para gente, preenchível por robô ───────────────── */
.fm-honeypot {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ── Ações ──────────────────────────────────────────────────────────────── */
.fm-form__acoes {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* Mesmo desenho do `.lp-cta` (outline ouro, hover invertido): o botão de
   envio e o CTA de WhatsApp são o mesmo gesto na página. Redeclarado aqui —
   e não com `class="lp-cta"` no HTML — para o módulo não depender de uma
   classe de outro app no MARKUP. */
.fm-form__enviar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.95rem 2.4rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--duae-ouro, #AB955E);
    background-color: color-mix(in srgb, var(--duae-preto, #0d0b0a) 30%, transparent);
    border: 1px solid var(--duae-ouro, #AB955E);
    border-radius: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.fm-form__enviar:hover,
.fm-form__enviar:focus-visible {
    background-color: var(--duae-ouro, #AB955E);
    color: var(--duae-preto, #0d0b0a);
}

.fm-form__icone {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.fm-form__nota {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--duae-branco, #fff) 55%, transparent);
}

/* ── Responsivo ─────────────────────────────────────────────────────────── */
@media (max-width: 62rem) {
    .fm__grade {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 40rem) {
    .fm-form {
        grid-template-columns: 1fr;
    }

    .fm__caixa {
        padding: 1.5rem 1.25rem;
    }
}