/* ─────────────────────────────────────────────────────────────────────────
   bkdg.center — landing do BKDG Center.

   Página única, HTML estático, zero JavaScript. O CSS abaixo é a folha
   inteira: primeiro os tokens canônicos (bloco :root copiado de
   docs/marca/tokens.css, sem edição), depois base, componentes e responsivo.

   Regra de ouro deste arquivo: nenhum hex cru no corpo do CSS. Se uma cor
   precisa existir, ou é um token ou é derivada de um token por color-mix.
   O motivo está na armadilha "cor escrita à mão em dois formatos": a troca
   de paleta de 2026-09-18 não pegou onze elementos porque a busca era por
   hex e o literal em rgb() não casou.
   ───────────────────────────────────────────────────────────────────────── */

/* ═════════════════════════════════════════════════════════════════════════
   1. TOKENS — cópia literal do :root de docs/marca/tokens.css
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Raw tokens (nomes preservados, valores DS v1.0) */
  --midnight:     #0A0A0A; /* Tinta */
  --azul-dark:    #0A0A0A; /* Tinta */
  --nuit:         #611E2C; /* Bordô (era Índigo Noite até 2026-09-18) */
  --spring:       #611E2C; /* Bordô — acento dominante (ver decision_notes; Terra máx 5% prevalece) */
  --mantis:       #4A4A45; /* texto secundário */
  /* --praxeti (Osso) NÃO é mais o fundo de página — permanece como token de cor
     "Osso" para USOS QUE NÃO SÃO FUNDO: texto/ícones claros sobre superfícies
     escuras (Nav no hero, cards --midnight, badges) e a cor do material "Osso" no
     elemento 3D isométrico (FoundationIsometric). Decisão explícita do produto:
     fundo de página passou a branco puro, mas o tom Osso continua existindo como
     cor da marca nesses outros contextos — por isso o valor NÃO muda aqui. */
  --praxeti:      #F1ECE2; /* Osso — cor de marca (texto sobre escuro / material 3D), NÃO usar como bg de página */
  --gray-dark:    #4A4A45;
  --gray-neutral: #D9D5CC;

  /* Semantic aliases — light theme (site default) */
  /* Fundo global = branco puro (decisão explícita do produto, contraria o
     brandbook Osso/#F1ECE2 de propósito — ver instruções da tarefa). */
  --bg-primary:       #FFFFFF; /* Branco puro — decisão explícita, substitui Osso como fundo padrão */
  --bg-secondary:     #F7F7F7; /* Cinza quase-branco neutro — dá contraste sutil a cards/painéis sobre o bg-primary branco (antes era um tom Osso mais escuro; precisa ser neutro agora que Osso não é mais a base) */
  --text-primary:     #0A0A0A; /* Tinta */
  --text-secondary:   #4A4A45;
  --text-tertiary:    #7D7B73;
  --border-secondary: #D9D5CC; /* divider */
  /* Levemente recalibrado (E4E0D7 → DFDACE): sobre o Osso antigo esse hairline já
     era quase invisível (contraste ~1.1:1); sobre o branco puro ficaria ainda mais
     achatado. Também é usado em indicadores de estado funcionais (dots/trilho de
     progresso em Sobre.jsx/Projetos.jsx), não só decoração — por isso ganhou um
     tom levemente mais escuro (ainda dentro da paleta neutra), sem virar tão
     visível quanto --border-secondary. */
  --border-tertiary:  #DFDACE;

  /* Accent (Bordô — acento estrutural/interativo) */
  --accent:           #611E2C;
  /* Os MESMOS canais do --accent, separados por espaço, para as transparências:
     `rgb(var(--accent-rgb) / 0.25)`. Existe porque não dá para aplicar alfa a uma
     cor hexadecimal guardada em custom property — e a alternativa que estava no
     código era pior: o Sobre.jsx carregava o RGB do acento escrito à mão como
     '44, 51, 99' em dois objetos de dados, que a troca de paleta de 2026-09-18
     não pegou (a busca era por hex, e literal em rgb() não casa). Onze elementos
     da seção continuaram azuis num site já bordô.
     OS DOIS ANDAM JUNTOS: o build confere (ver conferirAcento em prerender.mjs)
     e falha se um mudar sem o outro. */
  --accent-rgb:       97 30 44;
  /* O MESMO bordô, clareado para viver sobre Tinta. Não é uma segunda cor de
     marca: é a mesma matiz (347°) e a mesma saturação (53%), só com a luz em 46%
     em vez de 25%.
     POR QUE PRECISA EXISTIR, com número: #611E2C sobre #0A0A0A dá contraste de
     1.63:1 — abaixo de qualquer piso legível, some. O Terra Queimada que ocupava
     esses pontos dava 3.31:1, e era essa a razão técnica de ele estar lá. Esta
     variante dá 3.38:1 — repõe a legibilidade do Terra sem trazer o laranja de
     volta. Passa nos dois pisos que importam aqui: 3:1 para indicador de UI
     (o sublinhado da Nav) e 3:1 para texto grande (o item ativo do menu mobile,
     32px bold).
     USE SÓ sobre superfície escura. Sobre branco ela é fraca (5.86:1 contra os
     12.14:1 do bordô) — lá o token certo é --accent. */
  --accent-on-dark:   #B33751;

  /* Terra Queimada — alias reservado para acento editorial 5% (migra na Fase 2/3).
     ATENÇÃO desde a troca para o Bordô: os dois agora são quentes e avermelhados
     (Terra em 15°, Bordô em 347°). O teto de 5% do Terra deixou de ser só uma
     regra de sobriedade e virou o que impede os dois de brigarem na mesma tela. */
  --terra:            #A04A2C;

  /* Semantic status (tons sóbrios, não fluorescentes) */
  --warn:             #8A6E4B; /* ocre apagado */
  --error:            #7A2E22; /* tijolo escuro, distinto do Terra */

  /* Type scale — DS v1.0 (base 16px, rem) */
  --type-display-xl: 4.5rem;
  --type-display-lg: 3.5rem;
  --type-display-md: 2.5rem;
  --type-display-sm: 1.75rem;
  --type-heading-lg: 1.5rem;
  --type-heading-md: 1.25rem;
  --type-heading-sm: 1.125rem;
  --type-body-lg:    1.125rem;
  --type-body:       1rem;
  --type-body-sm:    0.875rem;
  --type-caption:    0.75rem;
  --type-caption-xs: 0.625rem;

  /* Aliases legados (mantidos — preservam nomes) */
  --type-h1:    2.5rem;
  --type-h2:    1.75rem;
  --type-h3:    1.5rem;
  --type-label: 0.75rem;

  /* Leading */
  --leading-tight: 1.05;
  --leading-snug:  1.15;
  --leading-body:  1.55;

  /* Display font — Zilla Slab.
     O DS v1.0 §3.1 especifica Instrument Serif; trocado em 2026-09-17 por decisão
     do produto, para o site ter uma família de display só, a mesma da arte
     editorial do blog. Override deliberado — não reverter num audit de DS.
     DIFERENÇA QUE IMPORTA AO AJUSTAR TAMANHOS: Instrument Serif tinha peso único
     400, era estreita e de alto contraste; Zilla Slab tem pesos reais e é bem
     mais larga e mais escura no mesmo corpo. Onde o título ficar pesado demais,
     baixe o peso antes de baixar o tamanho. */
  --font-display: 'Zilla Slab', Georgia, serif;

  /* Tracking */
  --tracking-display: -0.01em;
  --tracking-label:   0.08em;
  --tracking-tight:   -0.01em;
  --tracking-wide:    0.08em;

  /* Spacing (grade 4px) */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  48px;
  --space-xl:  64px;
  --space-2xl: 96px;

  /* Radius (D-03 — MÁX 4px) */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-xl: 4px;
}

/* ═════════════════════════════════════════════════════════════════════════
   2. TOKENS DESTA PÁGINA — derivados, nunca hex novo
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --font-body:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-label: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Medianiz única para nav, seções e rodapé: o piso de 20px é o que garante
     280px de coluna útil em 320px de tela sem rolagem horizontal. */
  --gutter: clamp(20px, 5vw, 56px);

  /* Respiro vertical de seção. Escala com a viewport, mas com teto — acima de
     ~1100px o branco já é suficiente e mais espaço só afasta o argumento. */
  --secao-y: clamp(56px, 9vw, 96px);

  /* Bordô escurecido para o estado ativo do botão. Derivado por color-mix a
     partir dos tokens; se a paleta trocar, este valor troca junto. */
  --accent-press: color-mix(in srgb, var(--accent) 82%, var(--midnight));
}

/* ═════════════════════════════════════════════════════════════════════════
   3. BASE
   ═════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* O rubber-band do iOS estica a cor do canvas. O topo da página é branco,
     então o canvas é branco; o rodapé escuro recebe tratamento próprio
     (ver .rodape). */
  background-color: var(--bg-primary);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  line-height: var(--leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* Foco visível em 2px, sempre (CONTRATO §5). O offset existe para o anel não
   encostar na tipografia; o raio respeita o teto de 4px (D-03). */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.pular {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  z-index: 20;
  padding: 14px var(--space-sm);
  background: var(--midnight);
  color: var(--praxeti);
  font-size: var(--type-body-sm);
  text-decoration: none;
  transform: translateY(-120%);
}
.pular:focus { transform: none; }

/* ═════════════════════════════════════════════════════════════════════════
   4. TIPOGRAFIA
   ═════════════════════════════════════════════════════════════════════════ */

/* Display = Zilla Slab. Nunca abaixo de 24px — por isso todo clamp tem piso
   explícito em rem, não em vw. Zilla é larga e escura: os pesos aqui são 400 e
   500, nunca 600/700, porque o caminho certo é baixar o peso antes do tamanho. */
.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.125rem, 1.4rem + 3.6vw, 3.5rem); line-height: var(--leading-tight); }
.display--lg { font-size: clamp(1.625rem, 1.15rem + 2.4vw, 2.5rem);  line-height: 1.12; max-width: 22ch; }
.display--sm { font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.75rem);  line-height: 1.2; text-wrap: pretty; }

/* Rótulos = IBM Plex Mono, SÓ em caixa-alta com tracking 0.08em.
   Mono em caixa-baixa não é da marca — por isso o text-transform mora aqui e
   não nas variações. */
.rotulo {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--type-caption);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}
/* Bordô sobre branco: 12,14:1. É o par correto para rótulo em fundo claro. */
.rotulo--acento { color: var(--accent); }
.lede {
  margin-top: var(--space-md);
  font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 54ch;
}

/* ═════════════════════════════════════════════════════════════════════════
   5. ESTRUTURA
   ═════════════════════════════════════════════════════════════════════════ */

.interior {
  --interior-max: 1160px;
  width: 100%;
  max-width: var(--interior-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Blocos de argumento único (investimento, conversão) não devem esticar a
   linha de leitura até 1160px. */
.interior--estreito { --interior-max: 820px; }

.secao {
  padding-block: var(--secao-y);
  /* A nav fixa tem 64px: sem isto o título da seção para embaixo dela quando
     alguém clica numa âncora do menu. */
  scroll-margin-top: 72px;
}
/* Filete de 1px como única separação entre seções. Substitui o recurso fácil
   de alternar fundos — o fundo é branco do começo ao fim, menos o rodapé. */
.secao--filete { border-top: 1px solid var(--border-secondary); }
.secao--abertura { padding-block-start: clamp(40px, 6vw, 72px); }

/* ═════════════════════════════════════════════════════════════════════════
   6. NAV — o Nav padrão da BKDG
   O mesmo em toda página da casa (regra em apps/CLAUDE.md): a marca, os menus
   Produtos e Conteúdo, o link para a BKDG e a conversa da página. Os painéis
   abrem com :hover e :focus-within, sem JavaScript; no celular, os mesmos
   links ficam num <details>. Fundo opaco, nunca translúcido com blur (D-04).
   ═════════════════════════════════════════════════════════════════════════ */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-secondary);
}
.nav__interior {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 64px;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav__marca {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-primary);
  flex: none;
}
/* A wordmark é SVG inline com fill=currentColor: herda Tinta aqui e Osso no
   rodapé. A largura sai da razão do viewBox (1083.1 / 284.2 = 3.811), para não
   depender de width:auto em elemento substituído. */
.wordmark {
  --wm-h: 20px;
  height: var(--wm-h);
  width: calc(var(--wm-h) * 3.811);
  /* O <symbol> não declara fill: quem pinta é esta linha. É o que faz a mesma
     wordmark sair Tinta na nav e Osso no rodapé sem duplicar o arquivo. */
  fill: currentColor;
  flex: none;
}

.nav__menu { display: flex; align-self: stretch; align-items: center; gap: 2px; }
/* O grupo ocupa a altura toda da nav: o painel abre em top:100% do interior,
   e o caminho do botão até ele tem que continuar dentro do grupo, senão o
   :hover cai na faixa entre o botão (44px) e a borda da nav (64px). */
.nav__grupo { display: flex; align-items: center; align-self: stretch; }
.nav__abre,
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 12px;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  font: inherit;
  font-size: var(--type-body-sm);
  color: var(--text-secondary);
  text-decoration: none;
  cursor: pointer;
}
/* A seta do menu é um traço em L girado: sem ícone, sem imagem. */
.nav__abre::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.nav__painel {
  position: absolute;
  top: 100%;
  left: var(--gutter);
  right: var(--gutter);
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md) var(--space-lg);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.nav__painel::before {
  /* Ponte invisível na largura do painel, cobrindo a faixa entre o botão e o
     painel: quem desce na diagonal até um item não sai do grupo no caminho. */
  content: '';
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 10px; /* (64px da nav − 44px do botão) / 2 */
}
.nav__grupo:hover .nav__painel,
.nav__grupo:focus-within .nav__painel { display: grid; }
@media (hover: hover) {
  .nav__grupo:hover .nav__abre,
  .nav__link:hover { color: var(--text-primary); background: var(--bg-secondary); }
}
.nav__grupo:focus-within .nav__abre { color: var(--text-primary); background: var(--bg-secondary); }

.nav__titulo {
  font-family: var(--font-label);
  font-size: var(--type-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}
.nav__item {
  display: grid;
  gap: 2px;
  margin-top: var(--space-xs);
  padding: 10px 12px;
  margin-inline: -12px;
  border-radius: var(--radius-md);
  text-decoration: none;
}
@media (hover: hover) {
  .nav__item:hover { background: var(--bg-secondary); }
}
.nav__nome { font-weight: 600; color: var(--text-primary); }
.nav__desc { font-size: var(--type-body-sm); color: var(--text-secondary); }
.nav__item[aria-current="page"] .nav__nome::after {
  content: 'você está aqui';
  margin-left: var(--space-xs);
  font-family: var(--font-label);
  font-size: var(--type-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}

/* Conversão: mesmo endereço do botão grande, alcançável de qualquer altura. */
.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  margin-left: auto;
  padding-inline: var(--space-sm);
  background: var(--midnight);
  color: var(--praxeti);
  border-radius: var(--radius-md);
  font-size: var(--type-body-sm);
  font-weight: 600;
  text-decoration: none;
}
@media (hover: hover) {
  .nav__cta:hover { background: var(--gray-dark); }
}
.nav__cta:active { background: var(--gray-dark); }

/* Em tela bem estreita (até 400px) o Nav aperta: vão menor, botão e marca um
   pouco menores, para "Falar com a BKDG" e o Menu caberem em 320px. */
@media (max-width: 400px) {
  .nav__interior { gap: var(--space-xs); }
  .nav .wordmark { --wm-h: 17px; }
  .nav__cta { padding-inline: 12px; font-size: var(--type-caption); }
}

/* No celular: a marca, a conversa e o Menu, que abre os mesmos links. */
.nav__gaveta { display: none; }
@media (max-width: 859px) {
  .nav__menu { display: none; }
  .nav__gaveta { display: block; flex: none; }
  .nav__gaveta summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-sm);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    font-size: var(--type-body-sm);
    cursor: pointer;
    list-style: none;
  }
  .nav__gaveta summary::-webkit-details-marker { display: none; }
  .nav__gaveta-corpo {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    padding: var(--space-sm) var(--gutter) var(--space-md);
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-secondary);
  }
  .nav__gaveta-corpo .nav__titulo { margin-top: var(--space-sm); }
  .nav__gaveta-corpo a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-primary);
    text-decoration: none;
  }
  .nav__gaveta-corpo a[aria-current="page"] { font-weight: 600; }
}

/* ═════════════════════════════════════════════════════════════════════════
   7. BLOCO 1 — ABERTURA
   ═════════════════════════════════════════════════════════════════════════ */

.abertura { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; }
.abertura__texto > .display--xl { margin-top: var(--space-md); max-width: 16ch; }

/* A abertura é curta e centrada: rótulo, título, uma frase e a conversa. O
   produto vem logo abaixo, no palco, e é ele que ocupa a tela. */
.abertura { justify-items: center; text-align: center; }
.abertura__texto { max-width: 760px; }
.abertura__texto > .display--xl { margin-inline: auto; }
.abertura__texto .lede { margin-inline: auto; max-width: 54ch; }

/* O palco: o motion sem moldura, em tela cheia de largura. Sem animação (ou
   sem suporte a animation-timeline), ele fica assim, aberto e reto. */
/* overflow-x: clip porque, inclinada, a borda de baixo da tela fica maior que a
   janela; clip corta sem criar barra de rolagem. */
.palco {
  position: relative;
  isolation: isolate;
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0 var(--gutter) var(--space-lg);
  perspective: 1600px;
  overflow-x: clip;
}
/* A faixa escura atrás do palco começa na altura da tela: é ela que faz a tela
   branca ler como objeto, e não como uma linha solta sobre o branco. */
.palco::before {
  content: '';
  position: absolute;
  inset: 22% 0 0;
  z-index: -1;
  background: var(--midnight);
}
/* Sobre a faixa Tinta a tela só precisa do filete fino para se separar. */
.palco__tela {
  max-width: 1160px;
  margin-inline: auto;
  overflow: hidden;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  transform-origin: 50% 0;
}
.palco__video,
.palco__estatica { width: 100%; height: auto; aspect-ratio: 16 / 9; vertical-align: top; }
.palco__legenda {
  max-width: 1160px;
  margin: var(--space-sm) auto 0;
  font-family: var(--font-label);
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gray-neutral);       /* sobre a faixa Tinta */
  /* O fundo dela é a faixa (::before); declarado aqui também, para quem mede o
     contraste subindo pelos ancestrais (o verify) achar o fundo verdadeiro. */
  background: var(--midnight);
}

.acao { margin-top: clamp(28px, 4vw, 40px); }
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding-inline: var(--space-md);
  background: var(--accent);
  color: var(--praxeti);          /* Osso sobre Bordô: 10,31:1 */
  border-radius: var(--radius-md); /* teto D-03 */
  font-size: var(--type-body);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 140ms ease;
}
@media (hover: hover) {
  .botao:hover { background: var(--accent-press); }
}
/* :active cobre o toque. O realce de hover fica fechado no @media acima
   porque o navegador emula :hover no touch e o estado gruda depois do clique. */
.botao:active { background: var(--accent-press); }

.acao__endereco {
  margin-top: var(--space-sm);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ═════════════════════════════════════════════════════════════════════════
   9. CARTÃO — um tratamento só, na página inteira

   Todo cartão da página (o problema, os quatro passos, o assistente e as
   publicações e os números da prova) é este objeto:
   superfície --bg-secondary com filete de 1px e, no canto, um sinal de 8px
   apagado. Ao passar o mouse ele vira peça de produto: a superfície sobe um
   degrau (branco), o filete e o sinal acendem em bordô, o cartão se ergue e
   inclina, e as camadas de dentro se afastam em profundidade (translateZ), a
   mais funda sendo o "No Center" do problema. Sem sombra, sem gradiente
   (D-04): a profundidade é geometria, não desfoque.

   Só cor e estado fora do @media de movimento: sob reduced-motion o hover
   ainda acende, mas nada se mexe. E todo hover fica em (hover: hover), porque
   o toque emula :hover e o estado gruda (ARMADILHAS.md).
   ═════════════════════════════════════════════════════════════════════════ */

.cartoes {
  list-style: none;
  display: grid;
  gap: var(--space-sm);
  margin-top: clamp(24px, 3.5vw, 36px);
}
.cartao {
  --cartao-pad: clamp(20px, 2.4vw, 28px);
  position: relative;
  min-width: 0;
  padding: var(--cartao-pad);
  /* Reserva a faixa do sinal no canto, para o título nunca passar por baixo. */
  padding-inline-end: calc(var(--cartao-pad) + 20px);
  background: var(--bg-secondary);
  border: 1px solid var(--border-tertiary);
  border-radius: var(--radius-md);   /* teto D-03 */
  transform-style: preserve-3d;
}
/* O sinal: um quadrado de 8px, vazado em repouso, cheio no hover. É o
   indicador de estado do cartão, não ornamento — e é o mesmo em todos. */
.cartao::after {
  content: '';
  position: absolute;
  top: var(--cartao-pad);
  inset-inline-end: var(--cartao-pad);
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--text-tertiary);
  border-radius: 1px;
}
.cartao > * { position: relative; }
.cartao > .rotulo { margin-bottom: var(--space-xs); }
.cartao__titulo {
  font-weight: 600;
  font-size: var(--type-body);
  line-height: 1.35;
  color: var(--text-primary);
  text-wrap: pretty;
}
.cartao__corpo {
  margin-top: var(--space-xs);
  font-size: var(--type-body-sm);
  color: var(--text-secondary);
}
/* O "No Center" do problema: a virada, separada do antes por um filete. */
.cartao__depois {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-secondary);
  font-size: var(--type-body-sm);
  color: var(--text-primary);
}

/* Cartão de prova: o número é o título. Mono em corpo grande, algarismos
   tabulares (os três números alinham de coluna a coluna, como numa ficha). */
.cartao--prova .cartao__titulo { display: grid; gap: 6px; font-weight: 400; color: var(--text-secondary); }
.cartao__antes {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-secondary);
}
.cartao__numero {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(2.5rem, 2rem + 2.2vw, 3.5rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

@media (hover: hover) {
  .cartao {
    transition: background-color 220ms ease, border-color 220ms ease;
  }
  .cartao:hover {
    background: var(--bg-primary);
    border-color: var(--accent);
  }
  .cartao:hover::after { background: var(--accent); border-color: var(--accent); }
  .cartao:hover .passo__rotulo { background: var(--accent); border-color: var(--accent); color: var(--praxeti); }
  .cartao:hover .cartao__depois b,
  .cartao:hover .cartao__numero { color: var(--accent); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cartao,
  .cartao > *,
  .cartao::after {
    transition:
      transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
      background-color 220ms ease,
      border-color 220ms ease,
      color 220ms ease;
  }
  /* A perspectiva vai no próprio transform, não no contêiner: cada cartão
     inclina em torno do próprio centro, e não de um ponto de fuga da grade. */
  .cartao:hover {
    transform: perspective(900px) translateY(-6px) rotateX(5deg) rotateY(-6deg);
  }
  /* As camadas se afastam: rótulo e índice à frente, título logo atrás, o
     corpo quase rente, e o "No Center" — o que importa — o mais à frente. */
  .cartao:hover > .rotulo,
  .cartao:hover > .passo__rotulo { transform: translateZ(40px); }
  .cartao:hover > .cartao__titulo,
  .cartao:hover > h3 { transform: translateZ(28px); }
  .cartao:hover > .cartao__corpo,
  .passo:hover > p:last-child { transform: translateZ(14px); }
  .cartao:hover > .cartao__depois { transform: translateZ(52px); }
  .cartao:hover::after { transform: translateZ(40px); }
}

/* ═════════════════════════════════════════════════════════════════════════
   10. BLOCO 2 — O PROBLEMA
   ═════════════════════════════════════════════════════════════════════════ */

/* Três colunas só a partir de 880px: as três dores têm comprimentos muito
   diferentes e, mais estreitas que ~260px, a terceira (duas frases curtas)
   vira um cartão órfão de uma linha. */
@media (min-width: 880px) {
  .cartoes--problema { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ═════════════════════════════════════════════════════════════════════════
   11. BLOCO 3 — COMO FUNCIONA
   ═════════════════════════════════════════════════════════════════════════ */

.passos {
  list-style: none;
  display: grid;
  gap: var(--space-sm);
  margin-top: clamp(32px, 5vw, 48px);
}
/* O passo é um .cartao (seção 9) em destaque: invertido em Tinta, com um bloco
   Bordô no topo (sobre Tinta, Bordô só como bloco, nunca como texto ou traço)
   e um rótulo com a palavra do passo no lugar do número. */
.passo {
  background: var(--midnight);
  border-color: var(--midnight);
  overflow: hidden;
}
.passo::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--accent);
}
.passo__rotulo {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--gray-dark);
  border-radius: var(--radius-sm);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--type-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--praxeti);
}
.passo .display--sm { margin-block: var(--space-sm) var(--space-xs); color: var(--praxeti); }
.passo p:last-child { color: var(--gray-neutral); font-size: var(--type-body-sm); }
@media (hover: hover) {
  /* No hover o passo continua escuro: o cartão comum fica branco, mas aqui o
     texto é Osso e sumiria. O que acende é a borda e o rótulo. */
  .passo.cartao:hover { background: var(--midnight); border-color: var(--accent-on-dark); }
}

@media (min-width: 700px)  { .passos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Quatro colunas só a partir de 1140px. Abaixo disso cada passo ficaria com
   menos de 250px e o passo 2 — o mais longo — passaria de dez linhas. */
@media (min-width: 1140px) { .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.fecho-direita {
  margin-top: clamp(32px, 5vw, 48px);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
  line-height: 1.25;
  max-width: 40ch;
  text-wrap: pretty;
}
@media (min-width: 700px) { .fecho-direita { margin-inline-start: auto; text-align: right; } }

/* ═════════════════════════════════════════════════════════════════════════
   12. BLOCO 4 — ESCOPO

   Os recursos em faixas alternadas, cada um com a tela do produto em vídeo;
   depois os cartões do assistente e das publicações.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Faixas de recursos: tela grande que se dissolve ──────────────────────────
   Limpas no branco, sem filete. A tela é o vídeo do produto, sem moldura, e
   a partir de 1000px a coluna dela passa do interior e vai até a borda da
   janela pelo lado de fora (o excesso de 100vw cai no overflow-x: clip da
   seção); ela esmaece para transparente nessa borda e na de baixo (máscara,
   não gradiente decorativo). Sem peça por cima: o vídeo já mostra o número e
   o gráfico em movimento, e uma cópia parada sobre ele confundia. Sem sombra
   nem brilho (D-04). */
.secao--sangra { overflow-x: clip; }
.recursos {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(40px, 5vw, 64px);
}
.recurso { display: grid; gap: var(--space-md); align-items: center; }
.recurso__texto .rotulo { font-size: var(--type-body-sm); }
.recurso__texto .display--md {
  margin-top: var(--space-xs);
  font-size: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  line-height: 1.1;
}
.recurso__texto .lista-marcada { margin-top: var(--space-md); gap: 14px; }
.recurso__texto .lista-marcada li { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem); }

/* No celular a tela vai de ponta a ponta da janela. */
.recurso__tela {
  position: relative;
  min-width: 0;
  margin-inline: calc(-1 * var(--gutter));
  padding-block: var(--space-sm) var(--space-lg);
}
.recurso__recorte {
  /* De que lado a tela se dissolve: o de fora da página. */
  --dissolve: to right;
  -webkit-mask-image: linear-gradient(var(--dissolve), black 78%, transparent), linear-gradient(to bottom, black 70%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(var(--dissolve), black 78%, transparent), linear-gradient(to bottom, black 70%, transparent);
  mask-composite: intersect;
}
/* Sem display aqui: vídeo ou imagem estática é decisão do par
   .midia-video / .midia-estatica (seção 15). */
.recurso__video,
.recurso__estatica {
  width: 100%;
  height: auto;
  aspect-ratio: 1440 / 646;
  vertical-align: top;
}

@media (min-width: 1000px) {
  /* Distância da borda do conteúdo até a borda da janela. */
  .recursos { --sangra: calc((100vw - min(100vw, 1160px)) / 2 + var(--gutter)); }
  /* Cada recurso ocupa quase a tela inteira, como uma seção própria: a altura é a
     janela menos o Nav (64px) e menos uns 180px, que deixam o topo da próxima
     faixa (a tela e o título) aparecer embaixo e chamam a rolagem. O conteúdo
     vai alinhado ao topo: centrado, a parte que aparecia era o vazio de cima. */
  .recurso {
    grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
    gap: 40px;
    align-items: start;
    padding-top: var(--space-lg);
    min-height: calc(100svh - 64px - 180px);
  }
  .recurso--tela-primeiro { grid-template-columns: minmax(0, 0.64fr) minmax(0, 0.36fr); }
  .recurso--tela-primeiro .recurso__tela { order: -1; }
  .recurso__tela { padding-block: var(--space-md); }
  .recurso--texto-primeiro .recurso__tela { margin-inline: 0 calc(-1 * var(--sangra)); }
  .recurso--tela-primeiro .recurso__tela { margin-inline: calc(-1 * var(--sangra)) 0; }
  .recurso--tela-primeiro .recurso__recorte { --dissolve: to left; }
}

.lista-marcada { list-style: none; display: grid; gap: var(--space-sm); }
.lista-marcada li {
  position: relative;
  padding-inline-start: var(--space-md);
  color: var(--text-secondary);
  font-size: var(--type-body-sm);
}
/* Marcador de lista: um traço curto de acento. É marcador funcional, não
   ornamento — substitui o disco padrão, que não é da marca. */
.lista-marcada li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 10px;
  height: 2px;
  background: var(--accent);
}

/* ═════════════════════════════════════════════════════════════════════════
   13. FICHA — o que já roda, o que está chegando, o que ele não faz

   Ficha de especificação de produto: um bloco só, em Tinta (a polaridade
   invertida é o que o separa dos cartões claros em volta), com três colunas
   no desktop e três linhas no celular. Cada estado tem o seu sinal, além do
   título: cheio (no ar), vazado e piscando (chegando), traço (fora do
   escopo). A coluna "fora" desce um degrau de superfície e de cor de texto.
   Sobre Tinta, o bordô é sempre --accent-on-dark, e só como sinal (3,38:1,
   piso de 3:1 de indicador); texto é Osso ou --gray-neutral.
   O zoom de rolagem está na seção 15.
   ═════════════════════════════════════════════════════════════════════════ */

.ficha {
  margin-top: clamp(40px, 6vw, 64px);
  perspective: 1600px;
  /* Inclinada, a borda de baixo fica mais larga que a coluna: clip corta sem
     criar barra de rolagem (o mesmo do palco). */
  overflow-x: clip;
}
.ficha__corpo {
  --ficha-filete: color-mix(in srgb, var(--praxeti) 18%, var(--midnight));
  display: grid;
  background: var(--midnight);
  color: var(--praxeti);
  border-radius: var(--radius-md);
  transform-origin: 50% 0;
}
.ficha__coluna {
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  background: var(--midnight);
}
.ficha__coluna + .ficha__coluna { border-top: 1px solid var(--ficha-filete); }
.ficha__coluna--fora {
  background: color-mix(in srgb, var(--praxeti) 7%, var(--midnight));
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.ficha__estado {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--type-body-sm);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--praxeti);
}
/* O sinal do estado, 10px. */
.ficha__estado::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 1px;
}
.ficha__coluna--no-ar .ficha__estado::before { background: var(--accent-on-dark); }
.ficha__coluna--chegando .ficha__estado::before { border: 1.5px solid var(--accent-on-dark); }
.ficha__coluna--fora .ficha__estado::before { height: 2px; background: var(--gray-neutral); }

.ficha__lista {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: var(--space-md);
}
.ficha__lista li {
  position: relative;
  padding-inline-start: 22px;
  font-size: var(--type-body-sm);
  color: var(--praxeti);
}
/* O marcador de cada item repete o sinal da coluna, menor. */
.ficha__lista li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 1px;
}
.ficha__coluna--no-ar li::before { background: var(--accent-on-dark); }
.ficha__coluna--chegando li::before { border: 1.5px solid var(--accent-on-dark); }
.ficha__coluna--fora li::before { top: 0.72em; height: 1.5px; background: var(--gray-neutral); }
.ficha__coluna--fora li { color: var(--gray-neutral); }

@media (min-width: 880px) {
  .ficha__corpo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ficha__coluna + .ficha__coluna { border-top: 0; border-inline-start: 1px solid var(--ficha-filete); }
  .ficha__coluna--fora { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
}

/* ═════════════════════════════════════════════════════════════════════════
   14. RODAPÉ
   ═════════════════════════════════════════════════════════════════════════ */

.rodape {
  background: var(--midnight);
  color: var(--praxeti);           /* Osso sobre Tinta: ~17:1 */
  padding-block: clamp(48px, 7vw, 80px);
  /* O rubber-band do iOS expõe o canvas abaixo do fim da página, que é branco.
     Este box-shadow não tem desfoque nenhum: é um retângulo sólido de Tinta
     desenhado abaixo do rodapé, não uma sombra (D-04 continua valendo). */
  box-shadow: 0 60vh 0 0 var(--midnight);
}
/* O rodapé padrão da BKDG (regra em apps/CLAUDE.md): marca e declaração à
   esquerda, as páginas da casa e as redes em colunas à direita, e uma linha
   de base com os direitos. */
.rodape__topo { display: grid; gap: var(--space-xl); }
.wordmark--rodape { --wm-h: 26px; }
.rodape__assinatura {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.35rem + 0.75vw, 1.75rem);
  line-height: 1.2;
  color: var(--praxeti);
}
.rodape__declaracao {
  margin-top: var(--space-sm);
  max-width: 42ch;
  font-size: var(--type-body-sm);
  color: var(--gray-neutral);
}
.rodape__colunas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-md);
}
.rodape__coluna { display: grid; align-content: start; }
.rodape__titulo {
  margin-bottom: var(--space-xs);
  font-family: var(--font-label);
  font-size: var(--type-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--gray-neutral);
}
/* Cada link com 44px de altura: alvo de toque (CONTRATO §5). */
.rodape__coluna a {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--type-body-sm);
  color: var(--praxeti);
  text-decoration: none;
}
@media (hover: hover) {
  .rodape__coluna a:hover {
    text-decoration-line: underline;
    /* --accent-on-dark é o único bordô legível sobre Tinta (3,38:1); aqui é
       indicador de UI, o texto do link continua Osso. */
    text-decoration-color: var(--accent-on-dark);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
}
.rodape__coluna a[aria-current="page"] { font-weight: 600; }
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--gray-dark);
  font-size: var(--type-caption);
  color: var(--gray-neutral);
}
/* Sobre Tinta o anel de foco bordô sumiria — sobre escuro o anel é Osso. */
.rodape :focus-visible,
.pular:focus-visible { outline-color: var(--praxeti); }

@media (min-width: 900px) {
  .rodape__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .rodape__colunas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═════════════════════════════════════════════════════════════════════════
   15. MOVIMENTO
   Tudo o que anima aqui é CSS: a página continua sem JavaScript. O título da
   abertura se desdobra palavra por palavra (FoldText, do React Bits, refeito
   em CSS), os blocos surgem conforme a página rola e os números contam até o
   valor (os dois com animation-timeline: view(); navegador sem suporte mostra
   a página parada e inteira). Sob reduced-motion nada disso roda, e o vídeo
   não vira vídeo pausado: vira imagem estática (CONTRATO §5), por isso o par
   .midia-video / .midia-estatica.
   Nota para quem adicionar animação aqui: animation-fill-mode NUNCA "both". O
   quadro final continua valendo e o transform dele anula :hover e :active em
   silêncio. Quando precisar só do quadro inicial durante o atraso, use
   "backwards".
   ═════════════════════════════════════════════════════════════════════════ */

.midia-estatica { display: none; }

@property --n {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* O título dobra a partir de uma dobradiça no topo, em cascata. */
  .dobra { display: inline-block; perspective: 700px; }
  .dobra__peca {
    display: inline-block;
    transform-origin: 50% 0;
    animation: dobra 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) backwards;
    animation-delay: calc(0.2s + var(--i) * 0.14s);
  }
  @keyframes dobra {
    from { opacity: 0; transform: rotateX(-92deg); }
  }

  /* "Chegando": o sinal da coluna pisca devagar, como luz de algo em curso.
     Só o do título; os marcadores dos itens ficam parados. */
  .ficha__coluna--chegando .ficha__estado::before {
    animation: pisca 1.6s steps(2, jump-none) infinite;
  }
  @keyframes pisca {
    to { opacity: 0.25; }
  }

  @supports (animation-timeline: view()) {
    /* Cada bloco das seções entra de baixo quando chega na tela. */
    main > .secao:not(.secao--abertura) .interior > :not(.ficha) {
      animation: surge linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    @keyframes surge {
      from { opacity: 0; transform: translateY(36px); }
    }

    /* O palco: a tela sobe, se endireita e cresce até a largura da página
       conforme a rolagem. Antes do trecho ela fica no quadro inicial
       (backwards); depois, no estado normal: reta e inteira. */
    .palco__tela {
      animation: palco linear backwards;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }
    @keyframes palco {
      from { transform: translateY(90px) rotateX(26deg) scale(0.8); }
      60% { transform: translateY(0) rotateX(0) scale(0.88); }
      to { transform: none; }
    }

    /* A ficha do "hoje" usa o mesmo movimento do palco: sobe, se endireita e
       cresce conforme a rolagem. A entrada dela é esta; por isso fica fora do
       "surge" acima. */
    .ficha__corpo {
      animation: palco linear backwards;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }

    /* O número conta de 0 até o valor enquanto o cartão entra. O valor real
       continua no HTML para leitor de tela e para quem não tem suporte; o
       desenhado é o ::before, escondido da leitura. */
    .conta {
      --n: var(--alvo);
      counter-reset: n var(--n);
      animation: conta linear backwards;
      animation-timeline: view();
      animation-range: entry 20% cover 45%;
    }
    .conta::before { content: counter(n); content: counter(n) / ""; }
    .conta__valor {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    @keyframes conta {
      from { --n: 0; }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-fill-mode: backwards !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Vídeo em loop vira IMAGEM ESTÁTICA, não vídeo pausado (CONTRATO §5).
     `display: none` no <video> também impede o autoplay de começar, então o
     arquivo não é baixado por quem pediu menos movimento. */
  .midia-video { display: none; }
  .midia-estatica { display: block; }
}

/* ═══ PRÉVIA (worktree) — FAQ e ajustes ═══ */
/* Perguntas: o título fixo à esquerda com a saída para conversar; à direita,
   os grupos de perguntas. Cada pergunta é um cartão que abre (details com
   name="faq": uma abre e a anterior fecha, sem JavaScript). */
.faq { display: grid; gap: var(--space-lg); }
.faq__apoio { margin-top: var(--space-sm); color: var(--text-secondary); }
.faq__contato {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.faq__grupos { display: grid; gap: var(--space-lg); }
.faq__titulo {
  margin-bottom: var(--space-xs);
  font-family: var(--font-label);
  font-size: var(--type-caption);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--accent);
}
.faq__item {
  margin-top: var(--space-xs);
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: 56px;
  padding: var(--space-sm) var(--space-md);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
/* O sinal de mais, feito de dois traços sólidos; aberto, o traço vertical some
   e vira menos. */
.faq__item summary { position: relative; padding-right: 56px; }
.faq__item summary::before,
.faq__item summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: var(--space-md);
  background: currentColor;
  translate: 0 -50%;
}
.faq__item summary::after { width: 14px; height: 2px; }
.faq__item summary::before { width: 2px; height: 14px; right: calc(var(--space-md) + 6px); }
.faq__item[open] summary::before { display: none; }
.faq__item[open] { background: var(--bg-primary); border-color: var(--accent); }
@media (hover: hover) {
  .faq__item:hover { border-color: var(--text-tertiary); }
  .faq__item[open]:hover { border-color: var(--accent); }
}
.faq__item p {
  padding: 0 var(--space-md) var(--space-md);
  max-width: 68ch;
  color: var(--text-secondary);
}
@media (min-width: 1000px) {
  .faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: var(--space-xl); align-items: start; }
  .faq__cabeca { position: sticky; top: calc(64px + var(--space-lg)); }
}
.cartoes--dois { grid-template-columns: minmax(0, 1fr); margin-top: clamp(48px, 7vw, 96px); }
@media (min-width: 700px) { .cartoes--dois { grid-template-columns: repeat(2, minmax(0, 1fr)); } }