/* components.css — as peças reaproveitadas em várias páginas. O arquivo mais
   longo do projeto. Depende de tokens.css e base.css, e carrega depois de
   layout.css.

   O que está aqui é o vocabulário do site: um botão se comporta igual em
   qualquer lugar, e um card também. Estrutura de página fica em layout.css.

     1. Botões            5. FAQ              9. Texto corrido
     2. Rótulos           6. Menu mobile     10. Formulário
     3. Cards             7. WhatsApp        11. Case Finder
     4. Estatísticas      8. Processo        12. Modal */

/* ---------- 1. Botões ----------
   Três pesos, e a diferença entre eles é o que organiza a página:

     --primary   a ação principal — navy sólido, ou dourado sobre navy
     --outline   a alternativa
     --text      a saída discreta

   A regra prática é uma só ação primária por bloco. Duas competindo entre si
   não dobram a conversão: fazem a pessoa parar para escolher.

   Todos têm os cinco estados: normal, hover, active, focus-visible e
   disabled. Faltar um estado é o que faz um botão parecer quebrado. */
.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-space-2xs);
  /* min-height garante o alvo de toque de 44px exigido no mobile */
  min-height: 2.875rem;
  padding: 0.75rem 1.5rem;
  border: var(--fp-hairline) solid transparent;
  border-radius: var(--fp-radius-pill);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-extrabold);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fp-duration-fast) var(--fp-ease-out),
              color var(--fp-duration-fast) var(--fp-ease-out),
              border-color var(--fp-duration-fast) var(--fp-ease-out),
              transform var(--fp-duration-fast) var(--fp-ease-out),
              box-shadow var(--fp-duration) var(--fp-ease-out);
}

.fp-btn:active { transform: translateY(1px); }

/* Desabilitado: sem cursor, sem movimento, sem falsa promessa de clique.
   Opacidade sozinha não basta — o `pointer-events` evita o clique fantasma. */
.fp-btn:disabled,
.fp-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

.fp-btn__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  transition: transform var(--fp-duration) var(--fp-ease-out);
}

.fp-btn:hover .fp-btn__icon--arrow { transform: translateX(3px); }

/* ---------- Primário ---------- */
.fp-btn--primary {
  background: var(--fp-navy);
  color: var(--fp-on-navy);
  box-shadow: var(--fp-shadow-soft);
}

.fp-btn--primary:hover {
  background: var(--fp-navy-deep);
  box-shadow: var(--fp-shadow-lift);
}

.fp-btn--primary:active { background: var(--fp-navy-deep); }

/* Sobre navy o primário inverte: dourado é o que sobressai ali */
.fp-on-dark .fp-btn--primary,
.fp-hero .fp-btn--primary,
.fp-cta-band .fp-btn--primary {
  background: var(--fp-gradient-gold);
  color: var(--fp-navy-deep);
  box-shadow: var(--fp-shadow-gold);
}

.fp-on-dark .fp-btn--primary:hover,
.fp-hero .fp-btn--primary:hover,
.fp-cta-band .fp-btn--primary:hover { filter: brightness(1.06); }

/* ---------- Dourado ----------
   O texto vai em navy: dourado com texto branco reprova em contraste. */
.fp-btn--gold {
  background: var(--fp-gradient-gold);
  color: var(--fp-navy-deep);
  box-shadow: var(--fp-shadow-gold);
}

.fp-btn--gold:hover { filter: brightness(1.06); }
.fp-btn--gold:active { filter: brightness(0.98); }

/* ---------- Contorno ---------- */
.fp-btn--outline {
  background: transparent;
  color: var(--fp-text);
  border-color: var(--fp-border);
}

.fp-btn--outline:hover {
  border-color: var(--fp-accent);
  color: var(--fp-accent);
  background: color-mix(in oklab, var(--fp-gold) 8%, transparent);
}

/* Cabeçalho e menu lateral são navy, mas não carregam `.fp-on-dark`: a cor
   vem do próprio componente. Sem estarem nesta lista, o botão de contorno
   sairia com texto escuro sobre fundo escuro. */
.fp-on-dark .fp-btn--outline,
.fp-header .fp-btn--outline,
.fp-drawer .fp-btn--outline,
.fp-hero .fp-btn--outline,
.fp-cta-band .fp-btn--outline {
  color: var(--fp-on-navy);
  /* 40%, e não 35%. Composta sobre o navy, a 35% a borda rendia 2,99:1 — um
     fio abaixo dos 3:1 que a WCAG 1.4.11 exige do contorno de um controle.
     A 40% chega a 3,55:1, e a olho nu as duas são a mesma borda. */
  border-color: color-mix(in oklab, var(--fp-on-navy) 40%, transparent);
}

.fp-on-dark .fp-btn--outline:hover,
.fp-header .fp-btn--outline:hover,
.fp-drawer .fp-btn--outline:hover,
.fp-hero .fp-btn--outline:hover,
.fp-cta-band .fp-btn--outline:hover {
  border-color: var(--fp-gold);
  color: var(--fp-gold);
  background: color-mix(in oklab, var(--fp-gold) 12%, transparent);
}

/* ---------- Texto ---------- */
.fp-btn--text {
  background: none;
  border-color: transparent;
  padding-inline: 0.25rem;
  color: var(--fp-accent-text);
  box-shadow: none;
}

.fp-btn--text:hover {
  color: var(--fp-navy);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.fp-on-dark .fp-btn--text { color: var(--fp-gold); }
.fp-on-dark .fp-btn--text:hover { color: var(--fp-gold-soft); }

/* ---------- WhatsApp ----------
   Contornado, nunca preenchido. O verde entra como sinal de qual canal é
   aquele, não como bloco de cor: cheio, ele disputava com o dourado e
   derrubava a sobriedade da página.

   Quando o WhatsApp for a ação principal de uma seção, o caminho é `--primary`
   com o ícone do WhatsApp. O peso vem do dourado; o reconhecimento, do ícone. */
.fp-btn--wa {
  background: transparent;
  color: var(--fp-wa);
  border-color: color-mix(in oklab, var(--fp-wa) 45%, transparent);
  box-shadow: none;
}

.fp-btn--wa:hover {
  border-color: var(--fp-wa);
  background: color-mix(in oklab, var(--fp-wa) 8%, transparent);
  color: var(--fp-wa-dark);
}

/* Sobre navy o verde escuro desapareceria — clareia para manter o contraste */
.fp-on-dark .fp-btn--wa,
.fp-hero .fp-btn--wa,
.fp-cta-band .fp-btn--wa {
  color: var(--fp-wa-light);
  border-color: color-mix(in oklab, var(--fp-wa-light) 45%, transparent);
}

.fp-on-dark .fp-btn--wa:hover,
.fp-hero .fp-btn--wa:hover,
.fp-cta-band .fp-btn--wa:hover {
  color: var(--fp-wa-light);
  border-color: var(--fp-wa-light);
  background: color-mix(in oklab, var(--fp-wa-light) 12%, transparent);
}

/* ---------- Modificadores ---------- */
.fp-btn--block { width: 100%; }
.fp-btn--lg { min-height: 3.25rem; padding-inline: 2rem; font-size: var(--fp-text-base); }
.fp-btn--sm { min-height: 2.25rem; padding: 0.4rem 1rem; font-size: var(--fp-text-xs); }

/* Em tela de toque o botão pequeno volta aos 44px que a WCAG pede. A
   consulta é `pointer: coarse` e não largura de tela porque quem determina o
   tamanho do alvo é o dedo: um tablet grande precisa do alvo maior, e uma
   janela de desktop estreita, não. */
@media (pointer: coarse) {
  .fp-btn--sm { min-height: 2.75rem; padding-inline: 1.15rem; }
}

/* Rede de segurança para tela estreita. O `nowrap` está certo em quase todo
   lugar: botão com rótulo partido em duas linhas fica pobre. Mas com rótulo
   longo a 375px ele deixa de ser questão de estética e vira defeito — o
   botão ultrapassa a largura da tela e empurra a página inteira, criando
   rolagem horizontal em todas as seções, e não só naquela. Abaixo de 480px
   o rótulo tem permissão para quebrar. */
@media (max-width: 29.99em) {
  .fp-btn {
    white-space: normal;
    max-width: 100%;
  }
}

/* ---------- 2. Rótulos ---------- */
.fp-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-3xs);
  padding: 0.25rem 0.7rem;
  border: var(--fp-hairline) solid color-mix(in oklab, var(--fp-gold) 40%, transparent);
  border-radius: var(--fp-radius-pill);
  background: color-mix(in oklab, var(--fp-gold) 10%, transparent);
  color: var(--fp-accent-text);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-extrabold);
}

.fp-on-dark .fp-tag { color: var(--fp-gold); }

/* ---------- 3. Cards ----------
   A base é a mesma para todos: superfície, borda fina, cantos suaves. As
   variantes só mudam o que precisam.

   O hover é contido de propósito — três pixels de elevação e a borda
   esquentando. Card que salta ao passar o mouse chama atenção para o próprio
   movimento, e não para o que está escrito nele. */
.fp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-xs);
  padding: var(--fp-space-lg);
  background: var(--fp-surface);
  border: var(--fp-hairline) solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  text-decoration: none;
  transition: border-color var(--fp-duration) var(--fp-ease-out),
              box-shadow var(--fp-duration) var(--fp-ease-out),
              transform var(--fp-duration) var(--fp-ease-out);
}

/* Filete dourado que se revela no topo */
.fp-card::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline: var(--fp-space-lg);
  height: 2px;
  background: var(--fp-gradient-gold);
  border-radius: var(--fp-radius-pill);
  opacity: 0;
  transition: opacity var(--fp-duration) var(--fp-ease-out);
}

/* :focus-within faz o card reagir também à navegação por teclado */
.fp-card:hover,
.fp-card:focus-within {
  border-color: color-mix(in oklab, var(--fp-gold) 45%, var(--fp-border));
  box-shadow: var(--fp-shadow-soft);
  transform: translateY(-3px);
}

.fp-card:hover::before,
.fp-card:focus-within::before { opacity: 1; }

.fp-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--fp-accent);
  transition: transform var(--fp-duration) var(--fp-ease-out);
}

.fp-card:hover .fp-card__icon { transform: scale(1.06); }

.fp-card__title {
  font-size: var(--fp-text-lg);
  font-weight: var(--fp-weight-extrabold);
}

.fp-card__text {
  font-size: var(--fp-text-sm);
  color: var(--fp-text-muted);
  line-height: var(--fp-leading-normal);
}

/* Seta "saiba mais" — avança no hover do card inteiro */
.fp-card__more {
  margin-top: auto;
  padding-top: var(--fp-space-2xs);
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-3xs);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-semibold);
  color: var(--fp-accent-text);
}

.fp-card__more svg {
  width: 1rem;
  height: 1rem;
  transition: transform var(--fp-duration) var(--fp-ease-out);
}

.fp-card:hover .fp-card__more svg { transform: translateX(4px); }

/* ---------- Card de diferencial ----------
   Sem link e sem elevação, porque é informação e não destino. O numeral
   dourado dá a hierarquia sem sugerir que há algo para clicar. */
.fp-card--feature {
  background: transparent;
  border-color: transparent;
  border-inline-start: 2px solid color-mix(in oklab, var(--fp-gold) 35%, transparent);
  border-radius: 0;
  padding: var(--fp-space-2xs) 0 var(--fp-space-2xs) var(--fp-space-md);
  gap: var(--fp-space-3xs);
}

.fp-card--feature:hover,
.fp-card--feature:focus-within {
  transform: none;
  box-shadow: none;
  border-color: transparent;
  border-inline-start-color: var(--fp-gold);
}

.fp-card--feature::before { content: none; }

.fp-card__num {
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-2xl);
  font-weight: var(--fp-weight-extrabold);
  color: var(--fp-accent);
  line-height: 1;
}

/* ---------- Card de conteúdo ---------- */
.fp-card--content { padding: 0; overflow: hidden; }

.fp-card__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--fp-surface-alt);
}

.fp-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--fp-duration-slow) var(--fp-ease-out);
}

.fp-card--content:hover .fp-card__media img { transform: scale(1.04); }

.fp-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-2xs);
  padding: var(--fp-space-md) var(--fp-space-lg) var(--fp-space-lg);
}

/* ---------- Card de unidade ---------- */
.fp-unit {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-sm);
  padding: var(--fp-space-lg);
  background: var(--fp-surface);
  border: var(--fp-hairline) solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
}

/* Com uma unidade só, o card ocupa a linha inteira e se centraliza, em vez
   de ficar largado na metade esquerda de uma grade de duas colunas. Ao
   cadastrar a segunda unidade a grade volta ao normal sozinha. */
.fp-unit:only-child {
  grid-column: 1 / -1;
  max-width: 36rem;
  margin-inline: auto;
  width: 100%;
}

.fp-unit__city {
  display: flex;
  align-items: baseline;
  gap: var(--fp-space-2xs);
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-2xl);
  font-weight: var(--fp-weight-extrabold);
}

.fp-unit__uf {
  font-family: var(--fp-font-sans);
  font-size: var(--fp-text-xs);
  font-weight: var(--fp-weight-extrabold);
  letter-spacing: var(--fp-tracking-wide);
  color: var(--fp-accent-text);
}

.fp-unit__row {
  display: flex;
  gap: var(--fp-space-2xs);
  font-size: var(--fp-text-sm);
  color: var(--fp-text-muted);
  line-height: var(--fp-leading-normal);
}

.fp-unit__row svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15em;
  color: var(--fp-accent);
}

.fp-unit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fp-space-2xs);
  margin-top: auto;
  padding-top: var(--fp-space-2xs);
}

@media (max-width: 29.99em) {
  .fp-unit__actions .fp-btn { width: 100%; }
}

/* ---------- 4. Estatísticas ----------
   Fora do ar enquanto o escritório não confirmar os números — ver
   `estatisticas.ativo` em config.js e o limite do Provimento 205/2021. */
.fp-stats {
  display: grid;
  gap: var(--fp-space-lg);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}

@media (min-width: 48em) {
  .fp-stats { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
}

.fp-stat { display: flex; flex-direction: column; gap: var(--fp-space-3xs); }

.fp-stat__value {
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-4xl);
  font-weight: var(--fp-weight-extrabold);
  line-height: 1;
  color: var(--fp-accent);
}

.fp-on-dark .fp-stat__value { color: var(--fp-gold); }

.fp-stat__label {
  font-size: var(--fp-text-xs);
  letter-spacing: var(--fp-tracking-wide);
  text-transform: uppercase;
  color: var(--fp-text-muted);
}

/* ---------- 5. FAQ ----------
   Sobre <details>/<summary> nativos: abrir, fechar, teclado, leitor de tela e
   busca do navegador dentro do conteúdo fechado vêm prontos, sem JavaScript.
   O CSS aqui só troca a aparência do que já funciona. */
.fp-faq { border-top: var(--fp-hairline) solid var(--fp-border); }

.fp-faq__item { border-bottom: var(--fp-hairline) solid var(--fp-border); }

.fp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-space-md);
  padding-block: var(--fp-space-md);
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-lg);
  font-weight: var(--fp-weight-extrabold);
  cursor: pointer;
  list-style: none;
  transition: color var(--fp-duration-fast) var(--fp-ease-out);
}

.fp-faq__q::-webkit-details-marker { display: none; }
.fp-faq__q:hover { color: var(--fp-accent-text); }

/* Sinal +/− desenhado em CSS: gira ao abrir */
.fp-faq__sign {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--fp-accent);
}

.fp-faq__sign::before,
.fp-faq__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--fp-duration) var(--fp-ease-out);
}

.fp-faq__sign::after { transform: rotate(90deg); }
[open] .fp-faq__sign::after { transform: rotate(0deg); }

.fp-faq__a {
  padding-bottom: var(--fp-space-md);
  max-width: var(--fp-measure);
  color: var(--fp-text-muted);
}

/* ---------- 6. Menu lateral ----------
   Quem abre, fecha, prende o foco e trava a rolagem é menuMobile(), em
   main.js. Aqui fica só a aparência e o deslizar. */
.fp-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: var(--fp-hairline) solid color-mix(in oklab, var(--fp-on-navy) 30%, transparent);
  border-radius: var(--fp-radius);
  color: var(--fp-on-navy);
  cursor: pointer;
  transition: border-color var(--fp-duration-fast) var(--fp-ease-out);
}

.fp-header__toggle:hover { border-color: var(--fp-gold); }

/* Ícone hambúrguer que vira X */
.fp-header__toggle span {
  position: relative;
  width: 1.125rem;
  height: 1.5px;
  background: currentColor;
  transition: background var(--fp-duration-fast) var(--fp-ease-out);
}

.fp-header__toggle span::before,
.fp-header__toggle span::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--fp-duration) var(--fp-ease-out);
}

.fp-header__toggle span::before { transform: translateY(-5px); }
.fp-header__toggle span::after { transform: translateY(5px); }

[aria-expanded="true"] span { background: transparent; }
[aria-expanded="true"] span::before { transform: rotate(45deg); }
[aria-expanded="true"] span::after { transform: rotate(-45deg); }

.fp-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--fp-z-drawer);
  display: grid;
  grid-template-columns: 1fr min(22rem, 88vw);
  visibility: hidden;
}

.fp-drawer.is-open { visibility: visible; }

.fp-drawer__scrim {
  background: color-mix(in oklab, var(--fp-navy-deep) 62%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--fp-duration) var(--fp-ease-out);
  border: 0;
  cursor: pointer;
}

.fp-drawer.is-open .fp-drawer__scrim { opacity: 1; }

.fp-drawer__panel {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-lg);
  padding: var(--fp-space-lg) var(--fp-space-md);
  padding-top: calc(var(--fp-header-h) + var(--fp-space-sm));
  background: var(--fp-gradient-navy);
  color: var(--fp-on-navy);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--fp-duration-slow) var(--fp-ease-out);
}

.fp-drawer.is-open .fp-drawer__panel { transform: translateX(0); }

.fp-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.fp-drawer__link {
  display: block;
  padding-block: var(--fp-space-xs);
  border-bottom: var(--fp-hairline) solid var(--fp-border-inverse);
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-xl);
  font-weight: var(--fp-weight-extrabold);
  text-decoration: none;
}

.fp-drawer__link[aria-current] { color: var(--fp-gold); }

/* Itens entram em cascata quando o painel abre */
.fp-drawer.is-open .fp-drawer__list > li {
  animation: fp-drawer-item var(--fp-duration) var(--fp-ease-out) both;
  animation-delay: calc(var(--i, 0) * 45ms + 90ms);
}

@keyframes fp-drawer-item {
  from { opacity: 0; transform: translateX(1rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fp-drawer.is-open .fp-drawer__list > li { animation: none; }
}

/* Sub-lista das áreas dentro do menu mobile */
.fp-drawer__sub {
  list-style: none;
  margin: var(--fp-space-2xs) 0 0;
  padding-inline-start: var(--fp-space-sm);
  border-inline-start: var(--fp-hairline) solid var(--fp-border-inverse);
  display: flex;
  flex-direction: column;
}

.fp-drawer__sub a {
  display: block;
  padding-block: var(--fp-space-3xs);
  min-height: 2.25rem;
  font-size: var(--fp-text-sm);
  color: var(--fp-on-navy-muted);
  text-decoration: none;
}

.fp-drawer__sub a:hover { color: var(--fp-gold); }

/* Ações do menu: o `gap` do painel separa blocos, não ações irmãs. */
.fp-drawer__acoes { display: grid; gap: var(--fp-space-2xs); }

/* Trava o scroll do fundo com o menu aberto */
body.fp-no-scroll { overflow: hidden; }

@media (min-width: 64em) {
  .fp-drawer { display: none; }
}

/* ---------- 7. Botão flutuante de WhatsApp ----------
   Aparece depois de meia tela de rolagem, controlado por main.js. */
.fp-wa-float {
  position: fixed;
  inset-block-end: var(--fp-space-md);
  inset-inline-end: var(--fp-space-md);
  z-index: var(--fp-z-whatsapp);
  display: inline-flex;
  align-items: center;
  gap: var(--fp-space-2xs);
  height: 3.25rem;
  padding-inline: 1rem;
  /* Navy da marca com filete dourado: o ícone do WhatsApp já entrega o
     reconhecimento, sem precisar de um bloco verde flutuando na tela. */
  background: var(--fp-navy);
  color: var(--fp-on-navy);
  border: var(--fp-hairline) solid color-mix(in oklab, var(--fp-gold) 45%, transparent);
  border-radius: var(--fp-radius-pill);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-weight-extrabold);
  text-decoration: none;
  box-shadow: var(--fp-shadow-lift);
  transition: transform var(--fp-duration) var(--fp-ease-out),
              opacity var(--fp-duration) var(--fp-ease-out);
}

.fp-wa-float svg {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  color: var(--fp-gold);
}

.fp-wa-float:hover {
  transform: scale(1.04);
  border-color: var(--fp-gold);
}

/* Entra só depois que o visitante rolou — não atrapalha o hero */
.fp-wa-float:not(.is-visible) {
  opacity: 0;
  transform: translateY(1rem) scale(0.9);
  pointer-events: none;
}

/* No celular vira só o ícone: ocupa menos tela */
@media (max-width: 47.99em) {
  .fp-wa-float__label { display: none; }
  .fp-wa-float { width: 3.25rem; padding-inline: 0; justify-content: center; }
}

/* ---------- 8. Processo ----------
   As etapas do atendimento, do primeiro contato ao acompanhamento. */
.fp-process {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--fp-space-lg);
  counter-reset: fp-step;
}

@media (min-width: 48em) {
  .fp-process { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
}

.fp-process__item {
  position: relative;
  counter-increment: fp-step;
  padding-top: var(--fp-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-3xs);
}

/* Numeral serifado grande, em dourado translúcido */
.fp-process__item::before {
  content: counter(fp-step, decimal-leading-zero);
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-3xl);
  font-weight: var(--fp-weight-extrabold);
  line-height: 1;
  color: color-mix(in oklab, var(--fp-gold) 70%, transparent);
}

/* Filete ligando as etapas — só no desktop, onde ficam lado a lado */
.fp-process__item::after {
  content: "";
  position: absolute;
  inset-block-start: var(--fp-space-md);
  inset-inline-start: 2.5rem;
  width: calc(100% - 2.5rem);
  height: var(--fp-hairline);
  background: linear-gradient(90deg, var(--fp-border), transparent);
}

.fp-process__item:last-child::after { content: none; }

@media (max-width: 47.99em) {
  .fp-process__item::after { content: none; }
}

.fp-process__title { font-size: var(--fp-text-lg); font-weight: var(--fp-weight-extrabold); }

.fp-process__text {
  font-size: var(--fp-text-sm);
  color: var(--fp-text-muted);
  line-height: var(--fp-leading-normal);
}

/* ---------- 9. Texto corrido ----------
   Para páginas de leitura longa — hoje só a Política de Privacidade. O resto
   do site é feito de blocos; aqui o conteúdo é um texto só, e quem organiza a
   leitura é o ritmo vertical, não o componente.

   A largura vem de `--fp-measure` porque linha comprida cansa: passando de
   uns 75 caracteres, o olho perde o começo da linha seguinte. */
.fp-prose {
  max-width: var(--fp-measure);
  color: var(--fp-text-muted);
  line-height: var(--fp-leading-relaxed);
}

.fp-prose > * + * { margin-top: var(--fp-space-sm); }

.fp-prose h2 {
  margin-top: var(--fp-space-xl);
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-xl);
  font-weight: var(--fp-weight-extrabold);
  line-height: var(--fp-leading-tight);
  letter-spacing: var(--fp-tracking-tight);
  color: var(--fp-text);
}

.fp-prose > h2:first-child { margin-top: 0; }

.fp-prose ul {
  margin-left: var(--fp-space-sm);
  padding-left: var(--fp-space-xs);
  display: grid;
  gap: var(--fp-space-3xs);
}

.fp-prose li::marker { color: var(--fp-accent); }

.fp-prose strong { color: var(--fp-text); font-weight: var(--fp-weight-extrabold); }

/* ---------- 10. Formulário ----------
   Só o de contato, que monta a mensagem e abre o WhatsApp — ver
   js/formulario.js. As bordas usam `--fp-border-field`, e não o filete comum
   dos cards: a WCAG exige mais contraste de um controle do que de um enfeite. */
.fp-field {
  display: flex;
  flex-direction: column;
  gap: var(--fp-space-3xs);
  margin-bottom: var(--fp-space-sm);
}

.fp-label { font-size: var(--fp-text-sm); font-weight: var(--fp-weight-extrabold); }

.fp-input,
.fp-textarea,
.fp-select {
  width: 100%;
  min-height: 2.875rem;
  padding: 0.65rem 0.875rem;
  background: var(--fp-surface);
  color: var(--fp-text);
  border: var(--fp-hairline) solid var(--fp-border-field);
  border-radius: var(--fp-radius);
  transition: border-color var(--fp-duration-fast) var(--fp-ease-out),
              box-shadow var(--fp-duration-fast) var(--fp-ease-out);
}

.fp-input:focus,
.fp-textarea:focus,
.fp-select:focus {
  outline: none;
  border-color: var(--fp-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--fp-gold) 30%, transparent);
}

.fp-input:disabled,
.fp-textarea:disabled,
.fp-select:disabled {
  background: var(--fp-surface-alt);
  color: var(--fp-text-muted);
  cursor: not-allowed;
}

.fp-textarea { min-height: 8rem; resize: vertical; }

.fp-hint { font-size: var(--fp-text-xs); color: var(--fp-text-muted); }

/* Confirmação do formulário. Como o erro, carrega ícone além da cor. */
.fp-sucesso {
  display: flex;
  align-items: center;
  gap: var(--fp-space-3xs);
  color: var(--fp-success);
  font-size: var(--fp-text-sm);
}

.fp-sucesso::before { content: "✓"; font-weight: var(--fp-weight-extrabold); }

/* Erro carrega ícone além da cor — não depender só de cor é regra WCAG */
.fp-error {
  display: flex;
  align-items: center;
  gap: var(--fp-space-3xs);
  font-size: var(--fp-text-xs);
  color: var(--fp-danger);
  font-weight: var(--fp-weight-medium);
}

.fp-error::before { content: "⚠"; font-size: 0.9em; }

[aria-invalid="true"] { border-color: var(--fp-danger); }

/* ---------- 11. Case Finder ----------
   O assistente "Encontre a área ideal para o seu caso". Todo o conteúdo
   destas classes é criado por js/case-finder.js — procurar por elas no HTML
   não encontra nada. */
.fp-finder {
  position: relative;
  padding: var(--fp-space-lg);
  background: var(--fp-surface);
  border: var(--fp-hairline) solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  box-shadow: var(--fp-shadow-soft);
}

@media (min-width: 48em) {
  .fp-finder { padding: var(--fp-space-xl); }
}

.fp-finder__progress {
  height: 3px;
  background: var(--fp-surface-alt);
  border-radius: var(--fp-radius-pill);
  overflow: hidden;
  margin-bottom: var(--fp-space-lg);
}

.fp-finder__bar {
  height: 100%;
  width: 0;
  background: var(--fp-gradient-gold);
  border-radius: inherit;
  transition: width var(--fp-duration-slow) var(--fp-ease-out);
}

.fp-finder__step { font-size: var(--fp-text-xs); color: var(--fp-text-muted); }

.fp-finder__question {
  font-family: var(--fp-font-display);
  font-size: var(--fp-text-2xl);
  font-weight: var(--fp-weight-extrabold);
  margin-block: var(--fp-space-2xs) var(--fp-space-md);
}

.fp-finder__options {
  display: grid;
  gap: var(--fp-space-2xs);
  margin: 0;
  padding: 0;
  border: 0;
}

.fp-finder__option {
  display: flex;
  align-items: center;
  gap: var(--fp-space-xs);
  width: 100%;
  min-height: 3.25rem;
  padding: var(--fp-space-xs) var(--fp-space-sm);
  background: var(--fp-surface);
  border: var(--fp-hairline) solid var(--fp-border);
  border-radius: var(--fp-radius);
  font-size: var(--fp-text-base);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--fp-duration-fast) var(--fp-ease-out),
              background var(--fp-duration-fast) var(--fp-ease-out),
              transform var(--fp-duration-fast) var(--fp-ease-out);
}

.fp-finder__option:hover {
  border-color: var(--fp-accent);
  background: var(--fp-surface-alt);
  transform: translateX(3px);
}

.fp-finder__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fp-space-sm);
  margin-top: var(--fp-space-md);
}

.fp-finder__back {
  background: none;
  border: 0;
  padding: var(--fp-space-3xs) 0;
  color: var(--fp-text-muted);
  font-size: var(--fp-text-sm);
  cursor: pointer;
}

.fp-finder__back:hover { color: var(--fp-accent-text); }

.fp-finder__result { display: flex; flex-direction: column; gap: var(--fp-space-sm); }

.fp-finder__actions { display: flex; flex-wrap: wrap; gap: var(--fp-space-2xs); }

@media (max-width: 29.99em) {
  .fp-finder__actions .fp-btn { width: 100%; }
}

/* Ressalva obrigatória: o assistente orienta, não é consulta jurídica */
.fp-finder__disclaimer {
  font-size: var(--fp-text-xs);
  color: var(--fp-text-muted);
  padding-top: var(--fp-space-2xs);
  border-top: var(--fp-hairline) solid var(--fp-border);
}

/* Dentro do modal o cartão perde a moldura: o próprio modal já é a moldura */
.fp-modal .fp-finder {
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ---------- 12. Modal ----------
   Sobre o <dialog> nativo. O `showModal()` entrega foco preso, Esc para
   fechar e fundo inerte sem uma linha de JavaScript nosso. Reimplementar isso
   à mão daria mais código e um resultado menos acessível. */
.fp-modal {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(44rem, calc(100svh - 2rem));
  /* Centraliza na tela. O navegador já daria `margin: auto` a um <dialog>
     aberto por showModal(), mas o `* { margin: 0 }` do reset em base.css
     anula essa regra — sem esta linha o modal encosta no canto superior
     esquerdo. No mobile a regra do fim deste arquivo troca para `auto 0 0`
     e ele vira folha presa na base da tela. */
  margin: auto;
  padding: 0;
  border: var(--fp-hairline) solid var(--fp-border);
  border-radius: var(--fp-radius-lg);
  background: var(--fp-surface);
  color: var(--fp-text);
  box-shadow: var(--fp-shadow-lift);
  overflow: visible;
}

.fp-modal::backdrop {
  /* O fallback dentro do var() não é decoração. `::backdrop` só passou a
     herdar custom properties do elemento de origem em 2024 (Chrome 122,
     Safari 17.4, Firefox 125). Antes disso ele não tinha pai na cadeia de
     herança, `var(--fp-navy-deep)` resolvia como inválido e a declaração
     inteira caía — o modal abria sem escurecer o fundo. Como o projeto já
     usa color-mix (Chrome 111+), existe uma faixa real de navegadores que
     entende a função mas não herda a variável; o hex cobre essa faixa. */
  background: color-mix(in oklab, var(--fp-navy-deep, #061329) 65%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Entrada: o modal sobe e cresce um pouco. `allow-discrete` permite animar
   a partir de display:none, sem precisar de classe intermediária em JS. */
@media (prefers-reduced-motion: no-preference) {
  .fp-modal {
    opacity: 0;
    transform: translateY(1rem) scale(0.98);
    transition: opacity var(--fp-duration) var(--fp-ease-out),
                transform var(--fp-duration) var(--fp-ease-out),
                overlay var(--fp-duration) allow-discrete,
                display var(--fp-duration) allow-discrete;
  }

  .fp-modal[open] { opacity: 1; transform: none; }

  @starting-style {
    .fp-modal[open] { opacity: 0; transform: translateY(1rem) scale(0.98); }
  }

  .fp-modal::backdrop { opacity: 0; transition: opacity var(--fp-duration) var(--fp-ease-out); }
  .fp-modal[open]::backdrop { opacity: 1; }
}

.fp-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fp-space-sm);
  padding: var(--fp-space-lg) var(--fp-space-lg) var(--fp-space-sm);
}

.fp-modal__title { font-size: var(--fp-text-xl); }

.fp-modal__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.25rem -0.25rem 0 0;
  background: none;
  border: var(--fp-hairline) solid var(--fp-border);
  border-radius: var(--fp-radius-pill);
  color: var(--fp-text-muted);
  cursor: pointer;
  transition: border-color var(--fp-duration-fast) var(--fp-ease-out),
              color var(--fp-duration-fast) var(--fp-ease-out);
}

.fp-modal__close:hover { border-color: var(--fp-accent); color: var(--fp-accent); }
.fp-modal__close svg { width: 1rem; height: 1rem; }

.fp-modal__body {
  padding: 0 var(--fp-space-lg) var(--fp-space-lg);
  overflow-y: auto;
  max-height: calc(100svh - 12rem);
  overscroll-behavior: contain;
}

/* No celular o modal encosta nas bordas e ganha a tela quase toda */
@media (max-width: 35.99em) {
  .fp-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92svh;
    margin: auto 0 0;
    border-radius: var(--fp-radius-lg) var(--fp-radius-lg) 0 0;
    border-inline: 0;
    border-block-end: 0;
  }
}