/* ===========================================================================
   contato.css — páginas de captação de lead
   ---------------------------------------------------------------------------
     /contato             pages/contato.php          — MEDIDA na referência
                          (fale-conosco.php, 2026-08-28): título e subtítulo
                          centrados, um cartão largo com o formulário e três
                          cartões de canal embaixo. Sem hero, sem migalha e
                          sem mapa — a referência não tem nada disso
     /imovel-sob-encomenda  pages/imovel-sob-encomenda.php  — medida na
                          referência da Porto (imovel-sob-encomenda.php,
                          2026-09-11); herda o `.cartao-contato` daqui

   O formulário em si é componente do style.css (`.form-lead`); aqui fica o
   arranjo de cada página.
   =========================================================================== */

/* ===========================================================================
   /contato — MEDIDO NA REFERÊNCIA (fale-conosco.php do site no ar da PORTO,
   2026-09-11, viewport 1440)
   ---------------------------------------------------------------------------
     caixa ............ 1170x729,4, respiro 40px 50px 50px, fundo branco, SEM
                        borda e SEM raio, sombra `0 0 4px rgba(0,0,0,.1)`
     título da caixa .. "Fale Conosco" 22px/600 Poppins #071c1f, à ESQUERDA,
                        30 até o primeiro campo
     campos ........... duas colunas de 520 com 30 entre elas; nome | e-mail na
                        1ª fileira, telefone | tipo de contato na 2ª, mensagem
                        na largura toda
     campo de texto ... 60 de altura, respiro 1px 40px 1px 11px, borda 1px
                        #e4ecf2, SEM raio, 16px/400 Poppins #5c727d, 30 embaixo
     dropdown ......... 65 de altura (5 a mais que o campo de texto), respiro
                        0 30px 0 18px, borda 2px #e5eaee, 14px/400 Arial
     textarea ......... 150 de altura, respiro 15px 20px 15px 11px, 40 embaixo
     botão ............ 232x60, respiro 17px 40px, SEM raio, VERDE #198754,
                        16px/400 Poppins branco
     três cartões ..... 370 com 30 entre eles, respiro 50px 30px 25px, borda
                        2px #ededed, SEM raio, SEM sombra, fundo transparente,
                        tudo CENTRADO; título 24px/500 Poppins com 16 em cima e
                        15 embaixo; texto 16px/400 Arial #5c727d
     mapa ............. iframe de 400 de altura na largura do container

   ⚠ A CAIXA É A MESMA DA PÁGINA "IMÓVEL SOB ENCOMENDA" — medido nas duas em
   2026-09-11: 1170, respiro 40/50/50 e a mesma sombra. Por isso o desenho mora
   em `.cartao-contato`, que as duas páginas usam, e não numa classe só da
   /contato.

   ⚠ O BOTÃO É VERDE, e não na cor da marca: é o `btn-success` do Bootstrap que
   o legado deixou passar. Está replicado.

   ⚠ OS CARTÕES NÃO TÊM ÍCONE. O desenho da INOVA punha um glifo grande em
   cima do título; a Porto não tem nada disso.

   RESPONSIVO — MEDIDO janela por janela:

       janela      caixa            campos     botão              cartões
       ≥ 992 ....  40px 50px 50px   2 colunas  232x60 (17px 40px)  3 por linha
       768–991 ..  40px 50px 50px   2 colunas  212x56 (15px 30px)  empilhados
       ≤ 767 ....  40px 25px 50px   1 coluna   186x47 (12px 30px)  empilhados
                                               e 14px de corpo

   ⚠ O TÍTULO DA PÁGINA (h1) NÃO TEM DEGRAU AQUI: ele é da faixa compartilhada
   e os degraus dele moram no style.css.
   =========================================================================== */

/* A faixa do formulário: 120 de margem embaixo, e nada em cima — quem afasta
   do cabeçalho é a margem de 15 da própria faixa de migalhas. */
.contato-form {
    margin-bottom: 120px;
}

/* ⚠ SEM MARGEM LATERAL. A caixa mede exatamente o container (1170); a margem
   de 15 que havia aqui era do desenho da Inova, onde ela vivia dentro de uma
   coluna do Bootstrap. */
.cartao-contato {
    padding: 40px 50px 50px;
    /* O corpo herdado da referência (o body dela é 16px). Nada dentro da caixa
       usa isto — cada campo tem corpo próprio —, mas mantém a comparação de
       medida limpa. */
    font-size: 16px;
    border: 0;
    border-radius: 0;
    background: var(--cor-branco);
    box-shadow: 0 0 4px rgba(0, 0, 0, .1);
    /* Contexto herdado da referencia: 16/1.8, virando 14 abaixo de 992.
       So o aviso de privacidade herda, mas o degrau e o do site no ar. */
    font-size: 16px;
    line-height: 1.8;
}

/* ⚠ À ESQUERDA, não centrado. O da Inova era centrado e com um respiro de 10
   à esquerda; aqui ele começa na borda do respiro da caixa. */
/* ⚠ OS 10px À ESQUERDA SÃO DA REFERÊNCIA: sobra de um `border-left` que a
   folha dela zera e o respiro que fica. Sem eles o título nasce 10px à
   esquerda do lugar. */
.contato-form__titulo {
    margin: 0 0 30px;
    /* ⚠ A BARRINHA AZUL ANTES DO TEXTO é a borda esquerda do `.title-2` do
       tema: `border-left:2px solid var(--site-color-1)` + `padding-left:10px`.
       Eu tinha replicado só o recuo e o texto ficava solto. */
    border-left: 2px solid var(--cor-primaria);
    padding-left: 10px;
    font-family: var(--fonte-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cor-escura);
}

/* --- Campos --------------------------------------------------------------- */

/* O respiro entre as fileiras vem da margem de cada campo, então a grade só
   cuida das colunas. */
.cartao-contato .form-lead {
    gap: 0;
}

.cartao-contato .form-lead__campos {
    gap: 0 30px;
    padding-inline: 0;
}

.cartao-contato .campo {
    gap: 0;
    margin-bottom: 30px;
}

.cartao-contato .campo input,
.cartao-contato .campo textarea {
    border: 1px solid #e4ecf2;
    border-radius: 0;
    background: var(--cor-branco);
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--cor-texto);
}

.cartao-contato .campo input {
    height: 60px;
    padding: 1px 40px 1px 11px;
}

/* MEDIDO: 150 de altura e 40 de respiro embaixo — é esse pedaço que separa o
   campo do desafio (quando há) ou do botão. */
.cartao-contato .campo textarea {
    height: 150px;
    min-height: 150px;
    /* ⚠ 9,8 E NAO 30. Na referencia o `textarea` leva `margin-bottom:30` e o
       item que o envolve nao leva nada, e ainda sobra ~9,8 de folga da linha
       (o textarea e inline-block num bloco de 16/1.8). Total: 189,8.
       AQUI os 30 ja moram no `.campo` (grid), entao sobra so a folga. A folga
       acompanha o contexto herdado: 9,8 em 16/1.8 e 8,2 em 14/1.8 (abaixo de
       992), por isso o degrau la embaixo. */
    margin-bottom: 9.8px;
    padding: 15px 20px 15px 11px;
    resize: vertical;
}

.cartao-contato .campo input::placeholder,
.cartao-contato .campo textarea::placeholder {
    color: var(--cor-texto);
    /* 14 contra os 16 do campo. Medido. */
    font-size: 14px;
}

/* ⚠ O GLIFO DENTRO DO CAMPO É AZUL E DE 16px. MEDIDO na referência: Font
   Awesome sólido em #11509d, encostado 20px na direita, centrado na altura do
   campo — em NOME, E-MAIL, TELEFONE e MENSAGEM. O "Tipo de Contato" não tem.
   O componente (style.css) desenha 16px na cor da marca com o centro em 23px;
   aqui o campo tem 60 de altura, então o centro vai para 30. */
.cartao-contato .campo__icone {
    /* NAO e o centro do campo (30). La o `::before` e `top:35%` de um
       `.input-item` de 90 (campo 60 + margem 30) => 31.5: fica 1.5px
       abaixo do centro. Medido. */
    top: 31.5px;
    color: var(--cor-primaria);
}

/* No textarea ele não centra: fica no alto, a 30px do topo do campo. */
.cartao-contato .campo__icone--topo {
    top: 30px;
    transform: translateY(-50%);
}

.cartao-contato .campo__icone svg {
    height: 16px;
}

/* --- Dropdown "Tipo de Contato" ------------------------------------------- */

/* ⚠ 65 DE ALTURA CONTRA 60 DOS CAMPOS DE TEXTO, e borda de 2px contra 1. Ele
   fica 5px mais alto que o telefone ao lado — é o que o site no ar mostra (lá
   o `nice-select` tem medidas próprias, que não são as do campo). Igualar é
   uma linha; não foi feito para não divergir. */
.cartao-contato .campo--dropdown {
    margin-bottom: 30px;
}

.cartao-contato .dropdown__gatilho {
    height: 65px;
    padding: 0 30px 0 18px;
    border: 2px solid #e5eaee;
    border-radius: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: var(--cor-texto);
}

.cartao-contato .dropdown__texto--vazio,
.cartao-contato .dropdown__texto:not(.dropdown__texto--vazio) {
    color: var(--cor-texto);
}

.cartao-contato .dropdown__seta {
    position: absolute;
    right: 20px;
    width: auto;
    height: 14px;
    color: var(--cor-texto);
}

/* --- Desafio e botão ------------------------------------------------------ */

/* Um embaixo do outro, encostados à esquerda — na referência o desafio fica
   SOBRE o botão, com 48 de respiro entre eles. */
/* ⚠ A CAIXA DO WIDGET E 78, QUE E A DO reCAPTCHA DA REFERENCIA — o Turnstile
   desenha 65 (mais a folga da linha: 74,8 em 16/1.8, 73,2 em 14/1.8). Sao
   servicos diferentes (ver 6.7), entao o desenho do widget nunca vai bater;
   o que se iguala e a CAIXA, para tudo que vem abaixo cair no mesmo lugar. */
.cartao-contato .form-lead__turnstile {
    min-height: 78px;
}

.cartao-contato .form-lead__acoes {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
    margin-top: 0;
}

/* ⚠ VERDE, e sem raio: é o `btn-success` do Bootstrap que o legado deixou
   passar no lugar da cor da marca. O componente manda o botão esticar porque
   nas outras páginas ele ocupa a coluna. */
.cartao-contato .form-lead__acoes .btn {
    flex: 0 0 auto;
    min-width: 0;
    padding: 17px 40px;
    border: 1px solid #198754;
    border-radius: 0;
    background: #198754;
    color: var(--cor-branco);
    font-family: var(--fonte-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    /* `text-uppercase` do Bootstrap no HTML da referencia:
       <button class="btn btn-success text-uppercase"> */
    text-transform: uppercase;
}

.cartao-contato .form-lead__acoes .btn:hover {
    background: #157347;
    border-color: #146c43;
}

/* O aviso de privacidade é nosso — a referência tem aqui um <p> vazio, onde o
   JS dela escreveria o erro do envio. */
.cartao-contato .form-lead__aviso {
    margin-top: 20px;
}

/* --- Três cartões --------------------------------------------------------- */

.contato-canais {
    margin-bottom: 90px;
}

/* MEDIDO: cartões de 370 com 30 entre eles. As colunas da referência têm 400
   com 15 de respiro de cada lado, e a linha abre 15 para fora do container —
   é o que as margens negativas reproduzem. */
.contato-canais__grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: -15px;
    /* ⚠ SEM `stretch`. Medido: os três fecham 228/199/199 — cada um com a
       altura do seu texto. Esticados, os dois últimos ganhavam 29px que a
       referência não tem. */
    align-items: start;
}

/* ⚠ SEM RAIO, SEM SOMBRA E SEM FUNDO. O cartão da Inova era branco, arredondado,
   com um fio vermelho em cima e sombra; o da Porto é só um contorno fino. */
.contato-canal {
    margin-inline: 15px;
    /* ⚠ EM QUALQUER LARGURA, inclusive no desktop com os tres lado a lado:
       `.ltn__contact-address-item` da referencia tem `margin-bottom:30` fixo.
       Sem isso a area dos cartoes fechava 228 contra os 258 dela, e o mapa
       subia 30px. Vale tambem para o ULTIMO — la nao ha `:last-child`. */
    margin-bottom: 30px;
    padding: 50px 30px 25px;
    border: 2px solid #ededed;
    border-radius: 0;
    background: none;
    box-shadow: none;
    text-align: center;
}

.contato-canal__titulo {
    margin: 16px 0 15px;
    font-family: var(--fonte-display);
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cor-escura);
}

.contato-canal__texto {
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8;
    color: var(--cor-texto);
}

.contato-canal__texto a:hover {
    color: var(--cor-primaria);
}

/* --- Mapa ----------------------------------------------------------------- */

.contato-mapa {
    margin-bottom: 90px;
    /* A folga embaixo do iframe inline sai DAQUI: 9,8 em 16/1.8 e 8,2 em
       14/1.8, que é o contexto herdado da referência. Sem isto a seção fechava
       406 em qualquer largura, contra 409,8 / 408,2 dela. */
    font-size: 16px;
    line-height: 1.8;
}

.contato-mapa iframe {
    /* ⚠ SEM `display:block`. O iframe da referência é INLINE, e por isso a
       seção fecha ~8px mais alta que ele: é a folga da linha (8,2 em 14/1.8,
       9,8 em 16/1.8) — a mesma que aparece embaixo do textarea. Com `block` a
       folga sumia e a página inteira ficava 8 a 10px mais curta que a dela. */
    width: 100%;
    height: 400px;
    border: 0;
}

/* --- Responsivo ----------------------------------------------------------- */

/* O titulo do cartao desce em quatro degraus na referencia (medido):
   24 / 22 / 20 / 18 em 1200, 992 e 768. O texto desce so uma vez, em 992.
   Sao os passos globais de tipografia do tema legado; aqui ficam presos ao
   cartao porque e o unico lugar desta pagina que os usa. */
@media (max-width: 1199.98px) {
    .contato-canal__titulo {
        font-size: 22px;
    }
}

@media (max-width: 991.98px) {
    /* Na referência são `col-lg-4`: viram coluna inteira abaixo de 992. */
    .contato-canais__grade {
        grid-template-columns: 1fr;
    }

    .contato-mapa {
        font-size: 14px;
    }

    .cartao-contato .campo textarea {
        margin-bottom: 8.2px;
    }

    .cartao-contato {
        font-size: 14px;
    }

    .contato-canal__titulo {
        font-size: 20px;
    }

    .contato-canal__texto {
        font-size: 14px;
    }

    .cartao-contato .form-lead__acoes .btn {
        padding: 15px 30px;
    }
}

@media (max-width: 767.98px) {
    .contato-canal__titulo {
        font-size: 18px;
    }

    .cartao-contato {
        padding: 40px 25px 50px;
    }

    /* `col-md-6` some abaixo de 768: cada campo passa a ocupar a linha. */
    .cartao-contato .form-lead__campos {
        grid-template-columns: 1fr;
    }

    .cartao-contato .form-lead__acoes .btn {
        padding: 12px 30px;
        font-size: 14px;
    }
}

/* O componente (style.css) estica o botão em telas estreitas porque nas outras
   páginas ele ocupa a coluna. Aqui a referência mantém a largura do conteúdo em
   QUALQUER largura — medido até 375. */
@media (max-width: 575.98px) {
    .cartao-contato .form-lead__acoes .btn {
        width: auto;
        flex: 0 0 auto;
    }
}

/* ===========================================================================
   /imovel-sob-encomenda  —  "Imóvel sob Encomenda"
   MEDIDA NA REFERÊNCIA DA PORTO (imovel-sob-encomenda.php, 2026-09-11).
   ---------------------------------------------------------------------------
   A CAIXA, O TÍTULO, OS CAMPOS, O DROPDOWN, O TEXTAREA, OS ÍCONES E O BOTÃO SÃO
   OS MESMOS DA /contato — lá as duas páginas usam o mesmo `.ltn__form-box
   contact-form-box`, e aqui as duas usam a mesma `.cartao-contato`. Só a GRADE
   muda, e é o que está abaixo.

   ⚠ SAÍRAM DAQUI as regras `.contato-cabecalho*`, `.contato-mensagem` e
   `.solicite`, que desenhavam um cabeçalho centrado (h1 30px/700 #3e3e3e +
   subtítulo cinza) medido no `solicite-seu-imovel.php` — arquivo que NÃO EXISTE
   na Porto e responde 404 no site no ar. A página real usa a faixa de migalhas,
   como as outras internas. Ver BRIEFING.md.
   =========================================================================== */

/* A grade de lá é `row`/`col-md-*` com três larguras: 6+6, 6+6 e 4+4+4.
   Linhas de 90 / 95 / 95 — o campo de texto é 60 e o dropdown 65. */
.cartao-contato .form-lead__campos--encomenda {
    display: flex;
    flex-wrap: wrap;
    /* ⚠ `flex-start`, NÃO o `stretch` padrão. Na linha do telefone (60) com o
       "Tipo de Imóvel" (65), esticar deixaria o campo de texto com 65 — lá os
       dois ficam alinhados pelo TOPO, cada um com a sua altura. */
    align-items: flex-start;
    gap: 0;
    margin-inline: -15px;
}

.cartao-contato .form-lead__campos--encomenda .campo {
    padding-inline: 15px;
}

.cartao-contato .form-lead__campos--encomenda .campo--6 { width: 50%; }
.cartao-contato .form-lead__campos--encomenda .campo--4 { width: 33.333333%; }

/* ⚠ 24 EMBAIXO, não 48: aqui o bloco do desafio é `mb-4`; na /contato é `mb-5`.
   A caixa de 78 é a do reCAPTCHA de lá (ver a nota do .form-lead__acoes). */
.cartao-contato .encomenda-form__turnstile {
    min-height: 78px;
    margin-bottom: 24px;
}

@media (max-width: 767.98px) {
    /* `col-md-*` some abaixo de 768: todos passam a ocupar a linha. */
    .cartao-contato .form-lead__campos--encomenda .campo--6,
    .cartao-contato .form-lead__campos--encomenda .campo--4 {
        width: 100%;
    }
}

/* ===========================================================================
   RESPONSIVO DA /imovel-sob-encomenda
   ---------------------------------------------------------------------------
   ⚠ SÓ O QUE É DELA. Os degraus da /contato (caixa, campos, botão e cartões)
   moram no bloco de cima, medidos na Porto em 2026-09-11.

   ⚠ HAVIA AQUI UMA CÓPIA VELHA DELES, com os números da INOVA (botão indo e
   voltando, 217 → 187 → 217). Como vinha DEPOIS no arquivo e tinha a mesma
   especificidade, ela VENCIA a medição nova: o botão saía 194x50 onde a
   referência dá 212x56, e 209x51 onde ela dá 186x47. Removida.
   =========================================================================== */
@media (max-width: 991.98px) {
    .contato-cabecalho__titulo {
        font-size: 26px;
    }
}

@media (max-width: 767.98px) {
    .contato-cabecalho__titulo {
        font-size: 24px;
    }
}

/* ===========================================================================
   /enviar-depoimento — recurso do painel novo, sem referência no site antigo.
   Campos e comportamento vêm do beta/; o resto reaproveita a .cartao-contato
   e o .form-lead desta mesma página.
   =========================================================================== */
.depo-intro {
    margin: -10px 0 30px;
    color: var(--cor-texto);
}

/* MESMO ESTILO DO `.campo label` (style.css): versalete pequeno e suave. */
.depo-rotulo {
    margin: 10px 0 8px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cor-texto-suave);
}

/* ESTRELAS SEM JS: rádios do 5 ao 1, linha invertida, "~" pinta as de trás. */
.depo-estrelas {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 20px;
}

.depo-estrelas input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.depo-estrelas label {
    display: block;
    width: 30px;
    height: 30px;
    color: var(--cor-borda);
    cursor: pointer;
    transition: color var(--transicao);
}

.depo-estrelas svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.depo-estrelas input:checked ~ label,
.depo-estrelas input:hover ~ label,
.depo-estrelas label:hover ~ label,
.depo-estrelas label:hover {
    color: #f5a623;
}

.depo-estrelas input:focus-visible + label {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 2px;
}

/* FOTO — prévia redonda, como sai no carrossel de depoimentos. */
.depo-foto {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.depo-foto__preview {
    flex: none;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    border: 2px dashed var(--cor-borda);
    border-radius: 50%;
    overflow: hidden;
    transition: border-color var(--transicao);
}

.depo-foto__preview--invalido {
    border-color: #c0392b;
}

.depo-foto__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* `img { display: block }` do style.css ganharia do [hidden], e a <img> sem
   foto apareceria como ícone de imagem quebrada. */
.depo-foto__preview img[hidden] {
    display: none;
}

.depo-foto__placeholder {
    font-size: 28px;
    color: var(--cor-borda);
}

.depo-foto__controles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
}

.depo-foto__botao {
    padding: 8px 18px;
    border: 1px solid var(--cor-primaria);
    color: var(--cor-primaria);
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao);
}

.depo-foto__botao:hover {
    background: var(--cor-primaria);
    color: #fff;
}

.depo-foto__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.depo-foto__remover {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: #c0392b;
    cursor: pointer;
}

.depo-foto__ajuda,
.depo-foto__erro {
    flex-basis: 100%;
    font-size: 13px;
}

.depo-foto__erro {
    color: #c0392b;
}

/* Texto da estrela para leitor de tela: o SVG é decorativo. */
.depo-estrelas__texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ===========================================================================
   /trabalhe-conosco — O MESMO CARTÃO DA /contato
   ---------------------------------------------------------------------------
   ⚠ SEM MEDIÇÃO PRÓPRIA. A referência do legado tem outro desenho (faixa de
   banner e formulário solto na página); o Sami pediu em 2026-09-17, com o print
   da /contato, que esta página fosse igual à de lá. Então NADA aqui é medida
   nova: o cartão, os campos, os ícones, o textarea, o botão e o aviso são os
   blocos de cima, e a grade de colunas é a da /imovel-sob-encomenda. O que
   segue é só o que não existe em nenhuma das duas — as SEÇÕES (este é o único
   formulário do site com cinco) e a cara do `<select>` nativo.
   =========================================================================== */

/* COLUNA CHEIA NA GRADE DA ENCOMENDA: lá só existem 6 e 4 (`campo--largo` é
   `grid-column`, e a grade é flex — não vale). */
.cartao-contato .form-lead__campos--encomenda .campo--12 { width: 100%; }

.trabalhe-form__secao {
    margin: 0;
    padding: 0;
    border: 0;
}

/* O FIO ENTRE AS SEÇÕES é borda da seção seguinte — sem `<hr>` no HTML, que
   vinha com a borda dupla do navegador. A primeira não leva nada. */
.trabalhe-form__secao + .trabalhe-form__secao {
    margin-top: 10px;
    padding-top: 30px;
    border-top: 1px solid #e4ecf2;
}

/* A MESMA BARRINHA AZUL DO TÍTULO DO CARTÃO, dois corpos menor: é um subtítulo
   dentro dele, não um segundo título. */
.trabalhe-form__titulo {
    /* `<legend>` não aceita largura no desenho padrão dele; como a borda do
       fieldset é zero, não há encaixe a preservar. */
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding-left: 10px;
    border-left: 2px solid var(--cor-primaria);
    font-family: var(--fonte-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cor-escura);
}

/* OS CAMPOS DE LISTA SÃO O DROPDOWN CUSTOM (`campo--dropdown`), já desenhado
   no bloco da /contato — 65 de altura, borda de 2px, Arial 14 e a seta com
   haste. Não há nada a acrescentar aqui. */

/* O RÓTULO VISÍVEL É SÓ UM — a data de nascimento, que não tem placeholder.
   ⚠ ELE FICA EMBAIXO DO CAMPO (pedido do Sami em 2026-09-17): em cima, era o
   único rótulo visível da caixa e empurrava a data 24px para baixo, deixando-a
   desalinhada da idade ao lado. Embaixo, os dois campos nascem na mesma linha.
   Quem manda na ordem é o HTML (ver form-trabalhe.php); aqui é só o respiro.
   O corpo é o rótulo padrão do site: caixa alta, 12/700. */
.cartao-contato .campo label:not(.visualmente-oculto) {
    margin-top: 6px;
}

/* ⚠ O ÍCONE DO CAMPO É CENTRADO NA ALTURA DE 60. Na data e nos campos de lista
   não há ícone nosso (o navegador desenha o dele), então nada a fazer ali. */