/* Vokattus · Revenda — seções 12 a 20 (kit, fábrica, passos, convocados (com a escassez), FAQ, CTA final, rodapé, flutuante).
   Prefixo f-. Só tokens de base.css. */

/* ---------- comuns ---------- */
.f-cabeca { display: grid; gap: var(--espaco-4); padding-bottom: var(--espaco-8); border-bottom: var(--borda-fina) solid var(--linha); margin-bottom: var(--espaco-12); }
.f-cabeca .titulo-secao { max-width: 18ch; }
@media (min-width: 900px) {
  .f-cabeca { grid-template-columns: var(--aurea-maior) 1fr; align-items: end; gap: var(--espaco-12); }
  .f-cabeca .apoio { justify-self: end; }
}
.f-acao { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-3); margin-top: var(--espaco-12); text-align: center; }
.f-acao--esq { align-items: flex-start; text-align: left; margin-top: var(--espaco-8); }
.f-micro { font-size: 13px; line-height: 20px; color: var(--texto-fraco); max-width: 52ch; }
.f-icone { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
@media (max-width: 480px) { .f-acao .vk-btn { width: 100%; padding-inline: var(--espaco-4); } }

/* ---------- 12. Kit ---------- */
.f-kit__corpo { display: grid; gap: var(--espaco-8); }
.f-kit__lista { list-style: none; margin: 0; padding: 0; border-top: var(--borda-fina) solid var(--texto); }
.f-kit__item { display: grid; grid-template-columns: 20px 1fr; gap: var(--espaco-4); padding-block: var(--espaco-6); border-bottom: var(--borda-fina) solid var(--linha); }
.f-kit__item .f-icone { margin-top: 4px; }
.f-kit__nome { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.1; text-transform: uppercase; margin-bottom: var(--espaco-2); }
.f-kit__item p { color: var(--texto-suave); font-size: 15px; line-height: 24px; max-width: 52ch; }
@media (min-width: 900px) {
  .f-kit__corpo { grid-template-columns: var(--aurea-menor) 1fr; gap: var(--espaco-16); align-items: start; }
  .f-kit__lista { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--espaco-8); }
  .f-kit__item { padding-block: var(--espaco-8); }
}

/* ---------- 13. Fábrica ---------- */
.f-fabrica__grade { display: grid; gap: var(--espaco-8); }
.f-fabrica__foto { filter: grayscale(1); }
.f-fabrica__texto { display: flex; flex-direction: column; gap: var(--espaco-4); }
.f-fabrica__texto .titulo-secao { margin-bottom: var(--espaco-2); }
.f-numeros { display: grid; grid-template-columns: 1fr 1fr; margin: var(--espaco-6) 0 0; border-block: var(--borda-fina) solid var(--linha); }
.f-numeros__item { padding: var(--espaco-6) var(--espaco-4) var(--espaco-6) 0; min-width: 0; }
.f-numeros__item + .f-numeros__item { border-left: var(--borda-fina) solid var(--linha); padding-left: var(--espaco-4); }
.f-numeros__valor { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 4vw, 48px); line-height: 1; text-transform: uppercase; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.f-numeros dd { margin: var(--espaco-2) 0 0; font-size: 14px; line-height: 20px; color: var(--texto-suave); }
.f-fabrica__dado { font-size: 12px; line-height: 18px; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-fraco); }
@media (min-width: 900px) {
  .f-fabrica__grade { grid-template-columns: 1fr var(--aurea-menor); gap: var(--espaco-16); align-items: center; }
  .f-fabrica__foto { --ph-ratio: 1 / 1 !important; }
}

/* ---------- 14. Passos ---------- */
.f-passos__lista { list-style: none; margin: 0; padding: 0; display: grid; counter-reset: none; }
.f-passo { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: var(--espaco-4); padding-block: var(--espaco-6); border-top: var(--borda-fina) solid var(--linha); }
.f-passo:first-child { border-top-color: var(--texto); }
.f-passo__num { grid-row: span 2; font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: .85; }
.f-passo__nome { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.1; text-transform: uppercase; margin-bottom: var(--espaco-2); }
.f-passo p { color: var(--texto-suave); font-size: 15px; line-height: 24px; }
@media (min-width: 900px) {
  .f-passos__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--borda-fina) solid var(--texto); }
  .f-passo { grid-template-columns: 1fr; border-top: 0; padding: var(--espaco-8) var(--espaco-6) 0 0; }
  .f-passo + .f-passo { border-left: var(--borda-fina) solid var(--linha); padding-left: var(--espaco-6); }
  .f-passo__num { grid-row: auto; font-size: 96px; margin-bottom: var(--espaco-8); }
}

/* ---------- 15. Convocados ---------- */
.f-conv { overflow: hidden; }
.f-conv__tt { position: absolute; right: -6%; bottom: -8%; width: min(70vw, 760px); height: auto; opacity: .05; pointer-events: none; }
.f-conv__grade { position: relative; display: grid; gap: var(--espaco-12); }
.f-conv__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-6); }
.f-conv__texto .vk-etiqueta { flex-wrap: wrap; }
.f-conv__texto .vk-etiqueta .pendente { outline-color: var(--cinza-600); }
.f-conv__sub { font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-fraco); margin-top: var(--espaco-4); }
.f-conv__lista { list-style: none; margin: 0; padding: 0; width: 100%; border-top: var(--borda-fina) solid var(--linha); }
.f-conv__lista li { position: relative; padding: var(--espaco-4) 0 var(--espaco-4) var(--espaco-8); border-bottom: var(--borda-fina) solid var(--linha); color: var(--texto-suave); }
.f-conv__lista li::before { content: ""; position: absolute; left: 0; top: 24px; width: 16px; height: 9px; background: url("../../assets/logo/simbolo-tt-branco.png") center / contain no-repeat; }
.f-conv__foto { filter: grayscale(1); }
@media (min-width: 900px) {
  .f-conv__grade { grid-template-columns: 1fr var(--aurea-menor); gap: var(--espaco-16); align-items: center; }
}
/* versão A */
.f-depo__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--espaco-8); }
.f-depo__card { display: flex; flex-direction: column; gap: var(--espaco-4); }
.f-depo__citacao { margin: 0; font-size: 17px; line-height: 28px; }
.f-depo__autor { font-family: var(--font-display); font-weight: 500; font-size: 20px; text-transform: uppercase; }
.f-depo__cidade { font-size: 13px; color: var(--texto-fraco); }
@media (min-width: 900px) { .f-depo__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Linha de escassez (antiga seção 16, fundida na 15 em 11/11) */
.f-conv__escassez { margin-top: var(--espaco-6); padding-top: var(--espaco-4); border-top: var(--borda-fina) solid var(--linha-forte); font-size: 16px; line-height: 26px; max-width: 46ch; }


/* ---------- 17. FAQ ---------- */
.f-faq__grade { display: grid; gap: var(--espaco-8); }
.f-faq__cabeca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-6); }
.f-faq__link { letter-spacing: .14em; text-align: left; line-height: 20px; }
.f-faq .vk-faq__item summary { font-size: 20px; }
@media (max-width: 480px) { .f-faq .vk-faq__item summary { font-size: 18px; } }
@media (min-width: 900px) {
  .f-faq__grade { grid-template-columns: var(--aurea-menor) 1fr; gap: var(--espaco-16); align-items: start; }
  .f-faq__cabeca { position: sticky; top: calc(var(--altura-header) + var(--espaco-8)); }
}

/* ---------- 18. CTA final ---------- */
.f-final { border-top: var(--borda-fina) solid var(--linha); padding-block: var(--espaco-32); }
@media (max-width: 720px) { .f-final { padding-block: var(--espaco-24); } }
.f-final__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--espaco-6); }
.f-final__titulo { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(44px, 7.4vw, 96px); line-height: .92; letter-spacing: -.01em; max-width: 14ch; text-wrap: balance; }
.f-final__texto { margin-inline: auto; }
.f-final__btn { min-width: min(100%, 360px); }
.f-perfil { display: grid; gap: var(--espaco-3); justify-items: center; margin-top: var(--espaco-2); }
.f-perfil__rotulo { font-size: 12px; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; color: var(--texto-fraco); }
.f-perfil__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--espaco-2); }
.f-chip { min-height: 44px; padding: 0 var(--espaco-4); background: var(--fundo); color: var(--texto-suave); border: var(--borda-fina) solid var(--linha-forte); border-radius: var(--raio-0); font-size: 13px; line-height: 16px; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.f-chip:hover { border-color: var(--texto); color: var(--texto); }
.f-chip[aria-pressed="true"] { background: var(--texto); color: var(--fundo); border-color: var(--texto); }
.f-final__assinatura { margin-top: var(--espaco-12); width: min(100%, 420px); }
.f-final__assinatura img { width: 100%; height: auto; }

/* ---------- 19. Rodapé ---------- */
.f-rodape__h { margin: 0 0 var(--espaco-4); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-fraco); }
.f-rodape__txt { font-size: 14px; color: var(--texto-suave); }
.f-rodape a { display: inline-block; padding-block: 4px; }
.f-rodape .vk-rodape__frase + .vk-rodape__frase { margin-top: var(--espaco-2); }
@media (max-width: 720px) {
  .f-rodape .vk-rodape__grid { grid-template-columns: 1fr; }
  .f-rodape { padding-bottom: calc(var(--espaco-8) + 80px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 20. Botão flutuante ---------- */
.f-flutuante { position: fixed; z-index: 50; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: var(--espaco-3); pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; }
.f-flutuante--ativo { opacity: 1; transform: none; }
.f-flutuante--ativo .f-flutuante__btn { pointer-events: auto; }
.f-flutuante__btn { width: 60px; height: 60px; display: grid; place-items: center; background: var(--preto); color: var(--branco); border: var(--borda-media) solid var(--branco); border-radius: var(--raio-0); text-decoration: none; transition: background-color .15s ease, color .15s ease; }
.f-flutuante__btn:hover { background: var(--branco); color: var(--preto); border-color: var(--preto); }
.f-flutuante__btn:focus-visible { outline: var(--borda-media) solid var(--branco); outline-offset: 3px; box-shadow: 0 0 0 5px var(--preto); }
.f-flutuante__dica { background: var(--branco); color: var(--preto); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .08em; padding: 10px 12px; border: var(--borda-fina) solid var(--preto); white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .3s ease, transform .3s ease; }
.f-flutuante__dica--ativa { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .f-flutuante, .f-flutuante__dica { transform: none; } }

/* ---------- Revisão final ---------- */
/* Botão do bloco à esquerda ocupa a largura toda no celular, como nos outros blocos */
.f-acao--esq { width: 100%; }
/* O TT gigante de fundo fica só no desktop: no celular ele aparecia cortado como um bloco cinza solto */
@media (max-width: 899px) { .f-conv__tt { display: none; } }
/* Fotos de apoio mais baixas no celular para a leitura não virar uma sequência de caixas vazias */
@media (max-width: 899px) {
  .f-kit__foto, .f-fabrica__foto, .f-conv__foto { --ph-ratio: 4 / 3 !important; }
}
/* Rodapé: links com alvo de toque de 44px */
.f-rodape a { padding-block: 10px; }
.f-rodape ul { gap: 0; }
/* Botão flutuante: some quando um CTA está embaixo dele (js/fim.js) */
.f-flutuante--sobre-cta { opacity: 0 !important; }
.f-flutuante--sobre-cta .f-flutuante__btn { pointer-events: none !important; }
@media (max-width: 720px) { .f-flutuante__btn { width: 56px; height: 56px; } }
@media (max-width: 480px) { .f-conv__texto .vk-etiqueta { letter-spacing: .1em; } }

/* Rodapé com duas colunas: marca e comercial (11/11) */
.f-rodape .vk-rodape__grid { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 720px) { .f-rodape .vk-rodape__grid { grid-template-columns: 1fr; } }
/* Passos: uma linha só entre o título e a lista (11/11) */
.f-passos .f-cabeca { border-bottom: 0; padding-bottom: 0; }
@media (max-width: 720px) { .f-passos .f-passo:first-child { border-top: 0; } }
.f-rodape .vk-rodape__grid { grid-template-columns: 1fr; }

/* ---------- Revisão final de UI (11/11) ---------- */
/* Fábrica e Passos são duas seções brancas seguidas: uma linha fina marca a troca */
.f-fabrica + .f-passos { border-top: var(--borda-fina) solid var(--linha); }
/* CTA final: título em duas linhas, sem "PARA A" sozinho no meio */
.f-final__titulo { max-width: 18ch; }
/* Rodapé: itens da base alinhados ao centro; no celular, um embaixo do outro */
.f-rodape .vk-rodape__base { align-items: center; }
.f-rodape .vk-rodape__base a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; }
@media (max-width: 720px) {
  .f-rodape .vk-rodape__base { flex-direction: column; align-items: flex-start; gap: var(--espaco-2); }
}
/* Link da política no mesmo corpo do resto da base do rodapé */
.f-rodape .vk-rodape__base a { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
/* Dica do flutuante: no celular quebra em duas linhas em vez de sair da tela pela esquerda */
@media (max-width: 480px) {
  .f-flutuante__dica { white-space: normal; max-width: calc(100vw - 56px - 12px - 32px); }
}
.f-fabrica__foto { filter: none; }