/* =====================================================================
   BLOCO PRÓPRIO — não vem do designer.
   Estilos da seção "Sobre" (dados oficiais da campanha), exigidos para a
   verificação de identidade da Meta/Facebook.
   Fica em arquivo separado de propósito: assim o style.css continua sendo
   cópia verbatim do designer e o diff das próximas sincronizações fica limpo.
   ===================================================================== */

#fs-landing .sobre-section{
  background:var(--white);
}
#fs-landing .sobre-section .section-head{
  margin-bottom:8px;
}

#fs-landing .dados-grid{
  border-top:1px solid var(--line);
  margin-top:28px;
  max-width:720px;
}
#fs-landing .dado{
  display:flex;
  flex-wrap:wrap;
  gap:4px 20px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
}
#fs-landing .dado dt{
  flex:0 0 175px;
  font-family:'Sora', sans-serif;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gray);
  font-weight:600;
  padding-top:4px;
}
#fs-landing .dado dd{
  flex:1 1 240px;
  margin:0;
  font-size:15.5px;
  line-height:1.45;
  color:var(--navy);
  font-weight:700;
}
#fs-landing .dado dd a{
  color:var(--blue-2);
  text-decoration:none;
}
#fs-landing .dado dd a:hover{
  text-decoration:underline;
}

/* contatos clicáveis no rodapé */
#fs-landing footer a.fcontact{
  color:rgba(255,255,255,0.78);
  text-decoration:none;
  font-weight:700;
}
#fs-landing footer a.fcontact:hover{
  color:#fff;
  text-decoration:underline;
}

@media (min-width:700px){
  #fs-landing .dados-grid{margin-left:auto; margin-right:auto;}
}
@media (min-width:1024px){
  #fs-landing .dados-grid{max-width:820px;}
}

/* =====================================================================
   MODAL EM 3 ETAPAS — BLOCO PRÓPRIO (não vem do designer)
   Mesmo padrão das campanhas Felipe Sertanejo / Nikolas Ferreira.
   As medidas abaixo foram herdadas já validadas de lá — os comentários
   explicam por que cada número é o que é.
   ===================================================================== */

/* ---------------- progresso ---------------- */
#fs-landing .steps{margin-bottom:22px;}
#fs-landing .steps-bar{display:flex; gap:6px;}
#fs-landing .steps-bar i{
  flex:1; height:5px; border-radius:999px;
  background:#E5E7EB; transition:background .25s ease;
}
/* Verde escuro, e NÃO o dourado da marca. Medido contra o trilho #E5E7EB:
   o dourado #F2C438 dá 1,33:1 e o verde claro 2,34:1 — abaixo do mínimo de
   3:1 que um elemento de interface precisa para ser percebido como
   preenchido. #17914A dá 3,27:1. É o mesmo verde usado no painel interno. */
#fs-landing .steps-bar i.on{background:#17914A;}
/* O progresso nunca fica só na cor: o rótulo diz a etapa por extenso, que é
   também o que o leitor de tela anuncia. */
#fs-landing .steps-txt{
  display:block; margin-top:10px;
  font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gray);
}

/* ---------------- etapas ---------------- */
#fs-landing .step[hidden]{display:none;}
#fs-landing .step{animation:stepIn .26s ease-out;}
@keyframes stepIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:none;}
}

/* Caixa de erro do formulário. */
#fs-landing .form-erro{
  display:none; margin-bottom:14px; padding:12px 14px;
  background:#FDECEA; border:1.5px solid #F0B4AE; border-radius:12px;
  color:#8E2A1F; font-size:13px; font-weight:600; line-height:1.5;
}
#fs-landing .form-erro.on{display:block;}

/* O aceite precisa de área própria para poder ficar vermelho quando falta —
   sem isso ele só receberia focus(), sem nada visível. */
#fs-landing .field.invalid .consent{border-color:#C0392B;}
#fs-landing .consent{
  background:var(--off); border:1.5px solid var(--line);
  border-radius:12px; padding:14px; cursor:pointer;
}
#fs-landing .consent input{cursor:pointer;}
/* Reset explícito: este <label> vive dentro de um .field, e ".field label" é
   o rótulo de campo — 11px, CAIXA ALTA, com espaçamento entre letras. Sem
   anular aqui, o texto do aceite (o único com peso jurídico da página) sai
   inteiro em maiúsculas e fica ilegível. */
#fs-landing .consent label{
  cursor:pointer;
  text-transform:none; letter-spacing:normal; margin-bottom:0;
}

/* Campos com 16px: abaixo disso o Safari do iPhone dá zoom automático ao
   focar o campo e o layout salta. */
#fs-landing .modal .field input[type=text],
#fs-landing .modal .field input[type=tel],
#fs-landing .modal .field select{font-size:16px;}
#fs-landing .modal .field select{
  width:100%; background:var(--off); border:1.5px solid var(--line);
  color:var(--navy); padding:15px 16px; border-radius:12px;
  font-family:'Sora', sans-serif; font-weight:600;
  appearance:none; cursor:pointer;
}
#fs-landing .modal .field select:focus{outline:none; border-color:var(--blue-2);}
#fs-landing .field.invalid select{border-color:#C0392B;}

/* ---------------- linha de botões ---------------- */
#fs-landing .step-nav{display:flex; gap:10px; align-items:stretch; margin-top:2px;}
/* min-width:0 e padding menor anulam, SÓ aqui dentro, a regra que o designer
   aplica a .btn a partir de 1024px (min-width:280px; padding:20px 44px). Ela
   existe para o CTA solto da página, onde sobra espaço. Dentro do modal, ao
   lado do "Voltar", ela pediria 421px num espaço útil de 384px: o botão
   vazaria para fora do cartão e o modal ganharia rolagem horizontal. */
#fs-landing .step-nav .btn{
  flex:1 1 auto; width:auto;
  min-width:0;
  padding-left:24px; padding-right:24px;
}
#fs-landing .btn-voltar{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:20px 22px;
  background:#fff; color:var(--navy);
  border:1.5px solid var(--line); border-radius:999px;
  font-family:'Sora', sans-serif; font-weight:800; font-size:15px;
  letter-spacing:0.02em; text-transform:uppercase;
  cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
#fs-landing .btn-voltar:hover{background:var(--off); border-color:rgba(20,38,59,0.22);}
#fs-landing .btn-voltar svg{width:14px; height:14px; flex-shrink:0;}

/* Foco visível. Mudança de cor de borda sozinha não serve para quem navega
   por teclado: some contra o estado de erro e desaparece em alto contraste. */
#fs-landing .modal input:focus-visible,
#fs-landing .modal select:focus-visible,
#fs-landing .modal button:focus-visible,
#fs-landing .modal a:focus-visible{
  outline:3px solid #17914A;
  outline-offset:2px;
}

/* ---------------- tela final ---------------- */
#fs-landing .done{text-align:center; padding:6px 0 2px;}
#fs-landing .done .ok{
  width:58px; height:58px; margin:0 auto 18px;
  border-radius:50%; background:#E7F5ED;
  display:flex; align-items:center; justify-content:center;
}
#fs-landing .done .ok svg{width:28px; height:28px; stroke:#17914A; stroke-width:3; fill:none;}
#fs-landing .done h4{font-family:'Sora', sans-serif; font-size:20px; color:var(--navy); margin-bottom:10px; line-height:1.3;}
#fs-landing .done p{font-size:14px; color:var(--gray); font-weight:600; line-height:1.6;}
#fs-landing .done .conta-redirect{font-size:12.5px; margin-top:14px; letter-spacing:.02em;}

@media (prefers-reduced-motion: reduce){
  #fs-landing .step{animation:none;}
  #fs-landing .btn-voltar{transition:none;}
}

/* Botões lado a lado só quando há espaço de verdade. Medido: "Voltar" ocupa
   ~131px e "Entrar no grupo" ~280px; com a folga de 10px e os paddings do
   overlay (20+20) e do modal (28+28), lado a lado exige 517px de viewport —
   nenhum celular tem isso. Abaixo de 520px empilham em largura cheia, o
   principal fica embaixo, na área do polegar. A ordem do DOM é preservada
   (column, não column-reverse) para o foco por teclado seguir a ordem visual. */
@media (max-width:520px){
  #fs-landing .step-nav{flex-direction:column; gap:12px;}
  #fs-landing .step-nav .btn{flex:0 0 auto; width:100%;}
  #fs-landing .btn-voltar{flex:0 0 auto; width:100%;}
}

/* Marcador de campo opcional no modal. Discreto, mas presente: sem ele a
   pessoa não sabe que pode pular e trava tentando lembrar o nome exato. */
#fs-landing .opcional{
  text-transform:none; letter-spacing:normal;
  font-weight:600; color:var(--muted, #8A94A0);
}