/* =====================================================================
   BIO-DESIGN.CSS — camada de identidade da /bio
   ---------------------------------------------------------------------
   Mira (web-designer). Entra DEPOIS de assets/style.css e depois do
   <style> estrutural da Vera dentro de bio.html.

   NÃO reescreve style.css. NÃO toca no HTML. NÃO toca na copy.
   Só substitui tokens do :root, a tipografia e o acabamento.

   Continuidade: mesma casa de joao-sales-portugal-2026-06 (noir + ouro,
   Cormorant Garamond + Inter) e de lc001-js-qualificacao (mesmo noir,
   mesmo ouro, controles de formulário arredondados r=12).
   NÃO é a casa do dpc-melodrama (Desafio do Ator: branco + vermelho) —
   aquilo é outra sub-marca, produto, não a pessoa.

   ORDEM DE CARGA: como o <style> da Vera está dentro do bio.html e vence
   por ordem em empate de especificidade, todas as regras que colidem com
   ele estão qualificadas com `body` / `body.page-form`. Assim este
   ficheiro funciona INDEPENDENTE de onde o <link> for colocado no <head>.
   ===================================================================== */


/* =====================================================================
   1. TIPOGRAFIA — sem CDN
   ---------------------------------------------------------------------
   Zero requisição externa (invariante 7.5 do README). As duas famílias
   são as MESMAS já usadas nas páginas dele, servidas localmente.

   Ficheiros (presentes desde 07/09 — Gage):
     assets/fonts/cormorant-garamond-italic-500.woff2      (latin)
     assets/fonts/cormorant-garamond-italic-500-ext.woff2  (latin-ext)
     assets/fonts/cormorant-garamond-600.woff2             (latin)
     assets/fonts/cormorant-garamond-600-ext.woff2         (latin-ext)
     assets/fonts/inter-variable.woff2                     (latin)
     assets/fonts/inter-variable-ext.woff2                 (latin-ext)

   Origem: Google Fonts (Cormorant Garamond v21, Inter v20), subsets
   oficiais, SIL Open Font License 1.1 — redistribuição local permitida.

   Por que dois ficheiros por face: o `unicode-range` faz o latin-ext só
   ser pedido se a página tiver um caractere fora do Latin-1. Português
   inteiro (ã, ç, õ, é, ü) cabe no latin — na prática o -ext nunca é
   baixado, mas fica no servidor caso entre um nome estrangeiro.

   O romano 600 existe porque o WORDMARK (.bio-wordmark, §"troca de
   papéis") usa var(--fonte-titulo) em font-style: normal / weight 600.
   Sem esta face o nome da mentoria caía no fallback serifado do sistema.

   `local()` vem primeiro: se a fonte estiver instalada na máquina, nem
   há pedido. Se o ficheiro faltar, o 404 é silencioso e a pilha de
   fallback assume — a página NÃO quebra e continua com a mesma intenção
   visual (serifada humanista em itálico no título, grotesca no corpo).
   ===================================================================== */

/* ── Cormorant Garamond · itálico 500 — título/citação ─────────────── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: local('Cormorant Garamond Medium Italic'),
       local('CormorantGaramond-MediumItalic'),
       url('fonts/cormorant-garamond-italic-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: local('Cormorant Garamond Medium Italic'),
       local('CormorantGaramond-MediumItalic'),
       url('fonts/cormorant-garamond-italic-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Cormorant Garamond · romano 600 — WORDMARK do banner ──────────── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Cormorant Garamond SemiBold'),
       local('CormorantGaramond-SemiBold'),
       url('fonts/cormorant-garamond-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Cormorant Garamond SemiBold'),
       local('CormorantGaramond-SemiBold'),
       url('fonts/cormorant-garamond-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Inter · variável 400–700 — corpo, rótulos, botão ──────────────
   Um ficheiro cobre 400/500/600/700: o eixo `wght` é contínuo. Quatro
   estáticos custariam ~4 pedidos e ~120 KB; o variável custa 47 KB. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local('Inter'),
       local('Inter Variable'),
       url('fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local('Inter'),
       local('Inter Variable'),
       url('fonts/inter-variable-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =====================================================================
   2. TOKENS — a paleta da casa
   ===================================================================== */

:root {
  /* ── Tinta (fundos) ──────────────────────────────────────────────── */
  --tinta-900:      #0A0A0A;   /* fundo da página — igual ao Portugal   */
  --tinta-800:      #121212;   /* superfície (banner, rodapé)           */
  --tinta-700:      #191919;   /* campo de formulário                   */
  --tinta-600:      #1F1E1B;   /* campo em foco / hover                 */

  /* ── Creme (texto) ───────────────────────────────────────────────── */
  --creme-100:      #F5F1E8;   /* texto principal — igual ao Portugal   */
  --creme-200:      #D8D3C9;   /* corpo longo (o subtítulo do banner)   */
  --creme-400:      #A8A29A;   /* rótulos, hints, microcopy             */
  --creme-600:      #8E8983;   /* jurídico, rodapé                      */

  /* ── Ouro (acento) ───────────────────────────────────────────────── */
  /* #C9A961 é o valor do Portugal; o LC001 usa #C8A96E (1 unidade de
     deriva). Unifico no do Portugal, que é a página mais resolvida.    */
  --ouro-500:       #C9A961;   /* acento, botão, título                 */
  --ouro-400:       #D9BB73;   /* hover, anel de foco                   */
  --ouro-sombra:    rgba(201, 169, 97, 0.22);
  --ouro-veu:       rgba(201, 169, 97, 0.10);

  /* ── Estado ──────────────────────────────────────────────────────── */
  --erro-400:       #E08D82;   /* 7.83:1 no fundo — o #D4756B do
                                  Portugal dá 6.18 e some no campo      */

  /* ── Linhas ──────────────────────────────────────────────────────── */
  --linha-fina:     rgba(245, 241, 232, 0.10);  /* decorativa           */
  --linha-media:    rgba(245, 241, 232, 0.16);
  --linha-campo:    #6B675E;   /* limite de CONTROLE: 3.51:1 contra a
                                  página e 3.12:1 contra o campo →
                                  cumpre WCAG 1.4.11 nos dois lados     */

  /* ── Ritmo (8pt, herdado do style.css, só o topo é novo) ─────────── */
  --sp1: 8px; --sp2: 16px; --sp3: 24px;
  --sp4: 32px; --sp5: 48px; --sp6: 72px;
  --sp7: 96px;

  /* ── Raio ────────────────────────────────────────────────────────── */
  --r-controle:     12px;      /* igual ao LC001                        */
  --r-painel:       18px;
  --r-pilula:       999px;

  /* ── Sombra ──────────────────────────────────────────────────────── */
  --sombra-media:   0 10px 30px rgba(0, 0, 0, 0.45);
  --sombra-ouro:    0 8px 26px rgba(201, 169, 97, 0.18);

  /* ── Famílias ────────────────────────────────────────────────────── */
  /* Fallback escolhido para PROXIMIDADE, não por hábito: Iowan Old
     Style (iOS) e Palatino (macOS/Windows) são garaldes de eixo
     inclinado, como a Cormorant. Georgia ficaria pesada demais e
     mudaria o carácter do título. Times fecha a pilha.                 */
  --fonte-titulo:   'Cormorant Garamond', 'Iowan Old Style',
                    'Palatino Linotype', Palatino, 'Times New Roman', serif;
  --fonte-corpo:    'Inter', system-ui, -apple-system, 'Segoe UI',
                    Roboto, Helvetica, Arial, sans-serif;

  /* ── Escala fluida ───────────────────────────────────────────────── */
  --fs-micro:       0.78rem;
  --fs-mini:        0.84rem;
  --fs-peq:         0.92rem;
  --fs-base:        1rem;
  --fs-corpo:       clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  --fs-medio:       clamp(1.2rem,  1.08rem + 0.5vw,  1.45rem);
  --fs-titulo:      clamp(2.25rem, 1.55rem + 3.1vw,  3.85rem);

  /* ── Compatibilidade com os tokens da Vera ───────────────────────── */
  /* O style.css e o <style> de bio.html leem estes nomes. Aponto-os
     para a paleta acima em vez de duplicar valores.                    */
  --bg:          var(--tinta-900);
  --fg:          var(--creme-100);
  --fg-muted:    var(--creme-400);
  --linha:       var(--linha-fina);
  --superficie:  var(--tinta-800);
  --acento:      var(--ouro-500);
  --acento-fg:   var(--tinta-900);
  --radius:      var(--r-controle);
}

/* Diz ao browser que a interface é escura. Sem isto, o dropdown nativo
   do <select>, a barra de rolagem, o checkbox e o preenchimento
   automático voltam a ser brancos no Windows e no Firefox — é o defeito
   mais comum de formulário escuro. */
:root { color-scheme: dark; }


/* =====================================================================
   3. BASE
   ===================================================================== */

body.page-form {
  font-family: var(--fonte-corpo);
  font-size: 17px;
  line-height: 1.6;
  color: var(--creme-100);
  background: var(--tinta-900);
  /* Véu de ouro atrás do banner: a lógica da marca-d'água da referência,
     sem símbolo nenhum inventado. É luz, não desenho. */
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(201,169,97,0.09) 0%, rgba(201,169,97,0) 62%);
  background-repeat: no-repeat;
  background-attachment: scroll;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.page-form ::selection { background: var(--ouro-500); color: var(--tinta-900); }

/* Foco: um anel só, sempre visível, sempre do lado de fora.
   O offset garante que o anel cai no fundo da página (10.66:1) mesmo
   quando o elemento é o botão dourado — onde um anel dourado colado ao
   fundo dourado seria invisível (1.21:1). */
body.page-form :focus-visible {
  outline: 2px solid var(--ouro-400);
  outline-offset: 3px;
  border-radius: var(--r-controle);
}
/* Sem :focus nu — só :focus-visible — para o toque no telemóvel não
   deixar o anel pendurado depois do tap. */
body.page-form :focus:not(:focus-visible) { outline: none; }


/* =====================================================================
   4. SHELL E RITMO VERTICAL
   ===================================================================== */

body.page-form .bio-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--sp4) var(--sp3) var(--sp6);
}
@media (min-width: 860px) {
  body.page-form .bio-shell { padding: var(--sp6) var(--sp4) var(--sp7); }
}


/* =====================================================================
   5. BANNER — a única peça de persuasão da página
   ---------------------------------------------------------------------
   Composição: no telemóvel, coluna única — título, frase, e por baixo
   uma FAIXA horizontal de 4 quadros baixos (≈104px de altura). Ninguém
   que veio do Instagram para preencher um formulário deve rolar meia
   tela de decoração antes do primeiro campo.
   A partir de 860px a faixa vira o painel 2x2 desencontrado ao lado da
   copy — a leitura em Z da referência.
   ===================================================================== */

body.page-form .bio-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--sp4);
  padding: var(--sp4);
  border: 1px solid var(--linha-media);
  border-radius: var(--r-painel);
  background:
    linear-gradient(168deg, #17150F 0%, var(--tinta-800) 46%, var(--tinta-900) 100%);
  box-shadow: var(--sombra-media);
}

/* Fio de ouro no topo do painel: assina a peça sem ocupar espaço. */
body.page-form .bio-banner::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(201,169,97,0) 0%, var(--ouro-500) 22%, var(--ouro-500) 78%, rgba(201,169,97,0) 100%);
  opacity: .55;
  pointer-events: none;
}

/* Halo quente atrás da coluna de copy — o papel da marca-d'água da
   referência: dar peso ao lado do texto sem competir com ele. */
body.page-form .bio-banner::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -30%; left: -18%;
  width: 78%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201,169,97,0.13) 0%, rgba(201,169,97,0) 68%);
  pointer-events: none;
}

@media (min-width: 860px) {
  body.page-form .bio-banner {
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: var(--sp5);
    padding: var(--sp5) var(--sp5) var(--sp5) var(--sp5);
  }
}

/* ── Título ──────────────────────────────────────────────────────────
   Serifada em itálico, no acento — que é exatamente o gesto da
   referência, executado com a fonte que já é dele (Cormorant Garamond
   está no <head> da página de Portugal). O rótulo é funcional
   ("Formulário de candidatura"); o itálico dá-lhe classe sem lhe dar
   uma promessa que a copy não faz.                                    */
body.page-form .bio-titulo {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-titulo);
  line-height: 1.0;
  letter-spacing: -0.012em;
  color: var(--ouro-500);
  margin: 0 0 var(--sp3);
  text-wrap: balance;
}

/* ── A frase ─────────────────────────────────────────────────────────
   É o texto do João e é a persuasão inteira da página: não vai em cor
   apagada. Fica em creme-200 (13.28:1), um degrau abaixo do branco só
   para o título continuar a mandar.                                    */
body.page-form .bio-sub {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-corpo);
  font-weight: 400;
  line-height: 1.58;
  letter-spacing: 0.002em;
  color: var(--creme-200);
  margin: 0;
  max-width: 46ch;
}


/* =====================================================================
   6. MOSAICO DE PROVA
   ---------------------------------------------------------------------
   O estado vazio é DESENHADO, não é um buraco. A lógica vem da
   referência: lá, 5 dos 7 cartões também não têm foto nenhuma — são
   blocos sólidos da cor da marca. O bloco sólido não é um placeholder,
   é o ritmo da composição. Aqui os quadros são painéis lacados em duas
   tintas quentes, com fio de ouro e brilho no topo. Sem foto, lê-se
   como marchetaria. Com foto, o <img> cobre o painel e o painel vira
   moldura. Nenhum dos dois estados exige tocar neste ficheiro.
   ===================================================================== */

body.page-form .bio-mosaico {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* faixa horizontal, telemóvel */
  gap: 8px;
  align-items: start;
}

/* Quando houver foto real (CONFIG_BIO.V.FOTOS_PROVA), a faixa abre em
   2x2 já no telemóvel: rosto pequeno demais não é prova de nada.
   Progressivo — se :has() não existir, fica a faixa de 4, que continua
   correta. */
@supports selector(:has(img)) {
  @media (max-width: 859px) {
    body.page-form .bio-mosaico:has(img) { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  }
}

body.page-form .bio-quadro {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(201, 169, 97, 0.20);
  background: linear-gradient(158deg, #211C13 0%, #131110 58%, #0E0D0C 100%);
  box-shadow: inset 0 1px 0 rgba(201, 169, 97, 0.16);
}

/* Duas tintas alternadas, como na referência. */
body.page-form .bio-quadro[data-slot="prova-2"],
body.page-form .bio-quadro[data-slot="prova-4"] {
  background: linear-gradient(158deg, #15140F 0%, #0F0E0C 60%, #0B0B0A 100%);
  border-color: rgba(201, 169, 97, 0.13);
}

/* Vinco diagonal de luz — dá superfície ao painel vazio. Some assim que
   entra foto (a foto fica por cima e o vinco iria sujá-la). */
body.page-form .bio-quadro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(122deg,
    rgba(245,241,232,0) 38%, rgba(245,241,232,0.045) 50%, rgba(245,241,232,0) 62%);
  pointer-events: none;
}

/* ── Estado COM foto ─────────────────────────────────────────────────
   O <img> é injetado por bio.js e cobre o painel. Preto-e-branco de
   propósito: quatro fotos de origens diferentes (luz, câmara, fundo)
   só ficam num conjunto se perderem a cor — é o que a referência faz.  */
body.page-form .bio-quadro img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;   /* enquadra o terço superior: rosto no
                                    sítio, olhos nunca cortados        */
  display: block;
  filter: grayscale(1) contrast(1.05) brightness(0.96);
}

/* Véu quente por cima da foto, para o conjunto pertencer à página em
   vez de flutuar sobre ela. Só existe quando existe foto. */
@supports selector(:has(img)) {
  body.page-form .bio-quadro:has(img)::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,0.42) 100%),
                var(--ouro-veu);
    pointer-events: none;
  }
}

/* ── Painel desencontrado a partir de 860px ──────────────────────────
   A segunda coluna desce: é o que dá movimento à referência. Deslocação
   estática, não é animação — nada a desligar em reduced-motion.       */
@media (min-width: 860px) {
  body.page-form .bio-mosaico {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding-bottom: 30px;          /* reserva o espaço do desencontro   */
  }
  body.page-form .bio-quadro:nth-child(2),
  body.page-form .bio-quadro:nth-child(4) { transform: translateY(30px); }
  body.page-form .bio-quadro { border-radius: 16px; }
}


/* =====================================================================
   7. SELO DE PERTENCIMENTO
   ---------------------------------------------------------------------
   Hoje `hidden` (CONFIG_BIO.V.SELO = null) e é assim que deve ficar até
   haver credencial verificável. O lugar dele está desenhado: pílula
   centrada por baixo do mosaico. NÃO copiei o crachá circular sobreposto
   da referência — aquilo é um selo de instituição, com arte própria;
   sem o ficheiro da instituição, um círculo desenhado em CSS seria um
   selo inventado.
   ===================================================================== */

body.page-form .bio-selo {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: var(--sp3);
  padding: 7px 16px;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ouro-500);
  background: rgba(201, 169, 97, 0.07);
  border: 1px solid rgba(201, 169, 97, 0.38);
  border-radius: var(--r-pilula);
}
@media (min-width: 860px) {
  /* Quando o mosaico está desencontrado, o selo desce com a coluna 2. */
  body.page-form .bio-selo { margin-top: calc(var(--sp3) + 30px); }
}


/* =====================================================================
   8. FORMULÁRIO
   ===================================================================== */

body.page-form .bio-form {
  max-width: 560px;
  margin: var(--sp6) auto 0;
}
body.page-form .bio-grid { gap: var(--sp3); }

/* ── Rótulo ──────────────────────────────────────────────────────── */
body.page-form .bio-form .label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--fonte-corpo);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--creme-400);
  /* As perguntas longas (Q3 e Q7) são frases inteiras — em versalete
     apertado ficariam ilegíveis. Deixo-as respirar. */
  line-height: 1.45;
}
/* Rótulo de pergunta longa volta a caixa normal: uma frase de 60
   caracteres em maiúsculas é uma parede. */
body.page-form .campo[data-campo="q3_tracao"] .label,
body.page-form .campo[data-campo="q7_cena"]   .label,
body.page-form .campo[data-campo="q4_videos"] .label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-peq);
  font-weight: 600;
  color: var(--creme-200);
}

/* ── Campo de texto ──────────────────────────────────────────────── */
body.page-form .bio-form .input,
body.page-form .bio-form .select {
  width: 100%;
  min-height: 52px;                 /* alvo de toque muito acima de 44 */
  padding: 14px 16px;
  font-family: var(--fonte-corpo);
  font-size: 16px;                  /* 16px trava o zoom automático do
                                       iOS ao focar o campo            */
  line-height: 1.4;
  color: var(--creme-100);
  background: var(--tinta-700);
  border: 1px solid var(--linha-campo);
  border-radius: var(--r-controle);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
body.page-form .bio-form .input::placeholder { color: var(--creme-400); }

body.page-form .bio-form .input:hover,
body.page-form .bio-form .select:hover { border-color: #8A867C; }

/* Foco: anel externo (do :focus-visible global) + a borda acende.
   Dois sinais, nenhum deles só cor: o anel é geometria nova. */
body.page-form .bio-form .input:focus-visible,
body.page-form .bio-form .select:focus-visible {
  background: var(--tinta-600);
  border-color: var(--ouro-400);
  outline: 2px solid var(--ouro-400);
  outline-offset: 2px;
}

/* Preenchimento automático do Chrome: sem isto o campo fica azul-claro
   com texto preto no meio de uma página escura. */
body.page-form .bio-form .input:-webkit-autofill,
body.page-form .bio-form .input:-webkit-autofill:hover,
body.page-form .bio-form .input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--creme-100);
  -webkit-box-shadow: inset 0 0 0 1000px var(--tinta-700);
  caret-color: var(--creme-100);
  transition: background-color 9999s ease-out;
}

/* ── SELECTS ─────────────────────────────────────────────────────────
   O ponto mais feio de qualquer formulário: a seta do sistema, o texto
   truncado e o menu branco por baixo. Tratamento:
     · appearance:none e seta própria em SVG embutido (sem ficheiro,
       sem CDN, sem tocar no HTML);
     · reserva de 44px à direita para a seta nunca encostar no texto;
     · <option> pintadas — no Windows e no Firefox o menu nativo herda
       estas cores em vez de abrir branco;
     · enquanto nada estiver escolhido, o texto do placeholder fica em
       creme-400 — o campo lê-se como "por preencher" sem depender só
       da cor: o rótulo por cima continua a dizer o que é.
   ================================================================== */
body.page-form .bio-form .select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23C9A961' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px 9px;
  cursor: pointer;
  text-overflow: ellipsis;
}
body.page-form .bio-form .select:focus-visible {
  /* a seta acende junto com a borda */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5L7 7.5L13 1.5' stroke='%23D9BB73' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.page-form .bio-form .select option {
  background-color: var(--tinta-700);
  color: var(--creme-100);
  padding: 10px;
}
body.page-form .bio-form .select option[value=""] { color: var(--creme-400); }

/* Estado "ainda por escolher". Progressivo: o bio.js não põe `required`
   no elemento, por isso :invalid não serve — :has() + :checked serve. */
@supports selector(:has(option:checked)) {
  body.page-form .bio-form .select:has(option[value=""]:checked) { color: var(--creme-400); }
}

/* ── Hint ────────────────────────────────────────────────────────── */
body.page-form .bio-form .hint {
  margin-top: 7px;
  font-size: var(--fs-mini);
  line-height: 1.45;
  color: var(--creme-400);
}

/* ── Erro de campo ───────────────────────────────────────────────────
   A informação NUNCA é só a cor. São três sinais somados:
     1. a barra vertical à esquerda do campo (forma);
     2. o sinal "!" antes do rótulo (glifo);
     3. o vermelho (cor).
   Falta o quarto, que não é meu: `aria-invalid` no controle — é uma
   linha no bio.js, está no relatório.                                 */
body.page-form .campo-erro .input,
body.page-form .campo-erro .select {
  border-color: var(--erro-400);
  box-shadow: inset 3px 0 0 0 var(--erro-400);
}
body.page-form .campo-erro .label { color: var(--erro-400); }
body.page-form .campo-erro .label::before {
  content: '!';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px; height: 15px;
  margin-right: 7px;
  vertical-align: -2px;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: var(--tinta-900);
  background: var(--erro-400);
  border-radius: 50%;
}

/* ── Mensagem de erro geral ──────────────────────────────────────── */
body.page-form .erro {
  margin-top: var(--sp3);
  padding: 12px 14px;
  font-size: var(--fs-peq);
  font-weight: 600;
  line-height: 1.45;
  color: var(--erro-400);
  background: rgba(224, 141, 130, 0.08);
  border-left: 3px solid var(--erro-400);
  border-radius: 0 var(--r-controle) var(--r-controle) 0;
}


/* =====================================================================
   9. LGPD
   ---------------------------------------------------------------------
   A linha do consentimento é um bloco de toque próprio, não uma nota de
   rodapé. Fica dentro de uma caixa levemente elevada porque é a última
   coisa antes do botão e tem de ser lida.
   ===================================================================== */

body.page-form .lgpd {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--sp4);
  padding: 14px 16px;
  min-height: 56px;                  /* alvo de toque com folga        */
  font-size: var(--fs-peq);
  line-height: 1.5;
  color: var(--creme-200);
  background: var(--tinta-800);
  border: 1px solid var(--linha-fina);
  border-radius: var(--r-controle);
  cursor: pointer;
  transition: border-color .16s ease;
}
body.page-form .lgpd:hover { border-color: var(--linha-media); }
body.page-form .lgpd:focus-within { border-color: var(--ouro-400); }

body.page-form .lgpd input {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin: 2px 0 0;
  accent-color: var(--ouro-500);     /* o check fica dourado, não azul */
  cursor: pointer;
}
body.page-form .lgpd .link-pendente,
body.page-form .link-pendente {
  text-decoration: line-through;
  text-decoration-color: var(--creme-600);
  color: var(--creme-400);
  opacity: 1;                         /* opacity .5 do style.css afunda
                                         o contraste; a cor já diz     */
  cursor: default;
}
body.page-form .lgpd a { color: var(--ouro-400); text-decoration: underline; text-underline-offset: 2px; }


/* =====================================================================
   10. BOTÃO
   ---------------------------------------------------------------------
   Ouro sólido, texto quase-preto: 8.80:1. Largura total no telemóvel,
   56px de altura. Raio 12, como o do LC001 — DESCARTEI o border-radius:0
   da referência: a casa dele é arredondada em todos os controles das
   três páginas, e um botão de canto vivo aqui leria como outra marca.
   ===================================================================== */

body.page-form .bio-cta,
body.page-form .btn-primary {
  display: block;
  width: 100%;
  margin-top: var(--sp4);
  padding: 18px var(--sp3);
  font-family: var(--fonte-corpo);
  font-size: clamp(0.94rem, 0.86rem + 0.35vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.045em;
  line-height: 1.25;
  text-align: center;
  color: var(--tinta-900);
  background: var(--ouro-500);
  border: 1px solid var(--ouro-500);
  border-radius: var(--r-controle);
  box-shadow: var(--sombra-ouro);
  cursor: pointer;
  transition: background-color .16s ease, box-shadow .16s ease, transform .1s ease;
}
body.page-form .bio-cta:hover:not(:disabled) {
  background: var(--ouro-400);
  border-color: var(--ouro-400);
  box-shadow: 0 10px 30px rgba(201, 169, 97, 0.26);
}
body.page-form .bio-cta:active:not(:disabled) { transform: translateY(1px); }

/* ── Estado "a enviar" ───────────────────────────────────────────────
   O bio.js só faz duas coisas: troca o texto para "Enviando…" e põe
   `disabled`. Não há classe. Uso o próprio :disabled — nesta página o
   botão nunca está desativado por outro motivo.
   A barra que corre não é decoração: sem ela, uma rede lenta parece um
   clique que não pegou e a pessoa carrega outra vez. Com reduced-motion
   a barra congela cheia e o texto "Enviando…" carrega o recado sozinho. */
body.page-form .bio-cta:disabled {
  position: relative;
  overflow: hidden;
  background: var(--ouro-500);
  border-color: var(--ouro-500);
  color: rgba(10, 10, 10, 0.72);
  box-shadow: none;
  cursor: progress;
  opacity: 1;                        /* o .4 do style.css apagava o
                                        texto e o estado ficava ilegível */
}
body.page-form .bio-cta:disabled::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 40%;
  background: rgba(10, 10, 10, 0.55);
  animation: bio-enviando 1.15s ease-in-out infinite;
}
@keyframes bio-enviando {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

body.page-form .bio-form .microcopy {
  margin-top: var(--sp2);
  max-width: none;
  font-size: var(--fs-mini);
  color: var(--creme-400);
  text-align: center;
}


/* =====================================================================
   11. TELA DE RECEBIDO
   ---------------------------------------------------------------------
   Sem `display` nesta regra: quem controla a troca é
   `body.enviado #bio-sucesso` no <style> da Vera.
   ===================================================================== */

body.page-form #bio-sucesso {
  max-width: 560px;
  margin: var(--sp6) auto 0;
  padding: var(--sp5) var(--sp4);
  text-align: center;
  background: linear-gradient(168deg, #17150F 0%, var(--tinta-800) 60%, var(--tinta-900) 100%);
  border: 1px solid var(--linha-media);
  border-radius: var(--r-painel);
  box-shadow: var(--sombra-media);
}
body.page-form #bio-sucesso h2 {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-medio);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ouro-500);
  margin: 0 0 var(--sp2);
}
body.page-form #bio-sucesso .sub {
  margin: 0;
  font-size: var(--fs-corpo);
  line-height: 1.6;
  color: var(--creme-200);
}


/* =====================================================================
   12. RODAPÉ
   ===================================================================== */

body.page-form .bio-rodape {
  max-width: 560px;
  margin: var(--sp6) auto 0;
  padding-top: var(--sp3);
  border-top: 1px solid var(--linha-fina);
  text-align: center;
}
body.page-form .bio-rodape .legal {
  font-size: var(--fs-mini);
  line-height: 1.6;
  color: var(--creme-600);
}
body.page-form .bio-rodape .legal + .legal { margin-top: 6px; }


/* =====================================================================
   13. MOVIMENTO REDUZIDO
   ---------------------------------------------------------------------
   Não há animação decorativa nesta página. A única que existe é a barra
   do botão a enviar — e ela para aqui, ficando cheia como marca estática
   de "em curso". O texto "Enviando…" continua a dizer tudo.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.page-form *,
  body.page-form *::before,
  body.page-form *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  body.page-form .bio-cta:disabled::after {
    width: 100%;
    transform: none;
    animation: none;
  }
}


/* =====================================================================
   14. CONTRASTE FORÇADO (Windows High Contrast)
   ---------------------------------------------------------------------
   Nesses modos as cores de fundo desaparecem. O anel de foco e o limite
   dos campos passam a usar as cores do sistema para não sumirem.
   ===================================================================== */

@media (forced-colors: active) {
  body.page-form :focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  body.page-form .bio-form .input,
  body.page-form .bio-form .select,
  body.page-form .bio-cta { border: 1px solid ButtonBorder; }
  body.page-form .bio-form .select { background-image: none; padding-right: 16px; appearance: auto; }
  body.page-form .bio-quadro { border: 1px solid CanvasText; }
}


/* =====================================================================
   MARCA — gancho .bio-marca, que estava listado como em falta.
   Existe agora porque o João fechou o nome em 07/09.
   Wordmark em Inter versalete largo (o nome é curto e institucional: a
   serifada itálica está reservada ao título e repeti-la aqui competiria
   com ele). Descritor em creme, separado por fio de ouro fino.
   Só tokens já definidos acima — nenhuma cor nova.
   ===================================================================== */
body.page-form .bio-marca {
  margin-bottom: clamp(20px, 3.4vw, 34px);
  padding-bottom: clamp(16px, 2.6vw, 24px);
  border-bottom: 1px solid var(--linha-fina);
}
body.page-form .bio-wordmark {
  margin: 0 0 10px;
  font-family: var(--fonte-corpo);
  font-size: clamp(.72rem, 1.6vw, .82rem);
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ouro-500);
}
body.page-form .bio-descritor {
  margin: 0;
  max-width: 44ch;
  font-family: var(--fonte-corpo);
  font-size: clamp(.94rem, 2.1vw, 1.02rem);
  line-height: 1.5;
  color: var(--creme-400);
}
/* Composição 2: o descritor assume e o chamado à candidatura sai. */
body.marca-so .bio-sub { display: none; }
body.marca-so .bio-descritor { color: var(--creme-200); font-size: clamp(1rem, 2.3vw, 1.1rem); }


/* Palavra realçada dentro de um rótulo (hoje: "mensal" no faturamento).
   Sobe do creme-400 dos rótulos para o creme-100, ganhando peso. Não usa
   o ouro: o ouro é do título e do botão, e um rótulo não compete com eles. */
body .label .rotulo-destaque {
  font-weight: 600;
  color: var(--creme-100);
}

/* =====================================================================
   TROCA DE PAPÉIS NO BANNER — pedido do João, 07/09.
   O nome do produto passa a ser o elemento dominante; "Formulário de
   candidatura" recua a eyebrow. O gesto serifado da casa não se perde:
   migra do título para o nome, em romano (o itálico versaleteado de três
   palavras ficaria instável) com tracking aberto.
   ===================================================================== */

/* Eyebrow — era o papel do wordmark antes desta troca. */
body.page-form .bio-titulo {
  font-family: var(--fonte-corpo);
  font-style: normal;
  font-size: clamp(.7rem, 1.5vw, .78rem);
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ouro-500);
  margin: 0 0 clamp(14px, 2.2vw, 20px);
}

/* A marca deixa de ser um bloco separado por fio: passa a ser o título. */
body.page-form .bio-marca {
  margin-bottom: clamp(20px, 3.4vw, 32px);
  padding-bottom: 0;
  border-bottom: 0;
}
body.page-form .bio-wordmark {
  font-family: var(--fonte-titulo);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(2.1rem, 7.4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--creme-100);
  margin: 0 0 clamp(12px, 2vw, 18px);
}
body.page-form .bio-descritor {
  color: var(--creme-200);
  font-size: clamp(.98rem, 2.2vw, 1.08rem);
  max-width: 42ch;
}

/* "mensal" — segundo degrau de destaque, a pedido. Passa ao ouro e a
   caixa alta; é a única palavra em ouro dentro do formulário. */
body.page-form .label .rotulo-destaque {
  font-weight: 700;
  color: var(--ouro-500);
  text-transform: uppercase;
  letter-spacing: .04em;
}
