/* For Boomers — brand layer over the design system.
   Aligns the DS accent scale to the official logo-pack blues:
   #25A8FF claro · #1670EE principal · #082D73 escuro · #061F55 profundo */
/* Camada de marca. Carrega DEPOIS do design system Cerne, então tudo aqui vence.
   Ratios medidos com `python tools/wcag.py` — público 50-65 mira AAA (7:1), não AA.
   O azul vivo #1670EE reprovava em 4.58:1 como link e como fundo de botão; o accent
   sóbrio que o próprio Cerne já definia (#28406e) dá 10.25:1 nos dois sentidos. */
:root {
  /* Escala navy do Cerne — antes era sobrescrita pela rampa vívida, que quebrava o contraste. */
  --navy-950: #060a12;
  --navy-900: #0b1220;
  --navy-800: #111c30;
  --navy-700: #16233d;
  --navy-600: #1b2a4a;
  --navy-500: #28406e; /* SIGNAL ACCENT — 10.25:1 sobre branco */
  --navy-400: #3f5a8c;
  --navy-300: #7089b3;
  --navy-200: #aebedb;
  --navy-100: #dde4f0;
  --navy-50:  #f0f3f9;

  --brand: #28406e;        /* 10.25:1 */
  --brand-hover: #1b2a4a;  /* 14.22:1 — escurece no hover */
  --brand-active: #111c30; /* 16.79:1 */
  --brand-ink: #0b1220;
  --text-link: #28406e;    /* 10.25:1 */
  --surface-brand-soft: #f0f3f9;
  --surface-dark: #0b1220;
  --gradient-panel: linear-gradient(165deg, #16233d 0%, #0b1220 100%);

  /* Anel de foco: o anterior (#b9d6fd) dava 1.49:1 — era invisível.
     15 componentes usam este token, então isto conserta os 15 de uma vez. */
  --focus-ring: 0 0 0 3px #ffffff, 0 0 0 6px #28406e;

  /* Azul vivo herdado: só decoração sem texto (ilustração, gráfico). Nunca texto, nunca fundo de botão. */
  --brand-vivid-decorative-only: #1670EE;

  /* letter-spacing negativo é proibido pelo contrato (DESIGN.md §3), mas o
     design system aplica `h1..h4 { letter-spacing: var(--tracking-tight) }`
     em base.css, e o token vale -0.006em. Os seletores por atributo lá
     embaixo só alcançam quem declara o valor INLINE — então os títulos que
     dependem do token escapavam. Medido em 2026-08-10: 26 títulos das
     páginas legais renderizavam -0.12px a -0.168px. Zerar aqui mata a
     violação na origem e cobre qualquer título futuro. */
  --tracking-display: 0;
  --tracking-tight: 0;
}

/* Legibilidade para o público real do site (sócios de banca, 50-65, lendo texto denso).
   O Cerne entregava corpo 16px/1.5; aqui sobe para 18px/1.6 e o piso vai de 13px para 15px.
   Escala pelo token, não por remendo local — quem usa --text-base sobe junto. */
:root {
  --text-xs:   0.9375rem; /* 15 — era 13; nada abaixo disto renderiza */
  --text-sm:   1rem;      /* 16 — era 15 */
  --text-base: 1.125rem;  /* 18 — era 16, o corpo */
  --text-lg:   1.25rem;   /* 20 — era 18, parágrafo de abertura */
  --leading-normal: 1.6;  /* era 1.5 */
  --leading-relaxed: 1.7; /* era 1.6 */

  /* Texto "muted" apontava para --ink-500 (#6b7078, 4.98:1) — é o texto dos cards,
     ou seja, o corpo real do site. Repontado para --ink-600 (8.09:1). Um token,
     todos os cards. --ink-700 daria 11.77:1 mas apaga a hierarquia visual. */
  --text-muted: #4c5058;

  /* --text-faint apontava para #8b9099 (3.07:1) — usado nos títulos de coluna do rodapé
     e no copyright, em 13-14px maiúsculo. Contraste baixo em texto pequeno é o pior caso. */
  --text-faint: #4c5058; /* 8.09:1 */
}

/* Eyebrow do DS renderiza a 13px (--text-xs original) — abaixo do piso de 16px
   do contrato. Achado da auditoria do momento de marca (2026-08). */
.fb-eyebrow { font-size: 1rem; }

/* Piso de tamanho: rótulos de 13-14px sobem para 15px.
   Maiúsculas com tracking 0.14em em 13px são o texto mais difícil da página.

   Esta regra estava MORTA de dois jeitos (auditoria 2026-08-10): sem
   `!important`, o style inline vencia; e o escopo só cobria footer/nav,
   deixando de fora tudo dentro de `main` (badges 01/02/03, rótulos
   "Antes"/"Depois", links de apoio). Medido: os rótulos "Serviços" e
   "Empresa" do rodapé renderizavam 13px em TODA página do site. */
main [style*="font-size: 13px"], main [style*="font-size: 14px"],
footer [style*="font-size: 13px"], footer [style*="font-size: 14px"],
nav [style*="font-size: 13px"], nav [style*="font-size: 14px"] {
  font-size: 15px !important;
}

/* ============================================================
   CORPO DE TEXTO — um par tamanho/entrelinha por papel.
   ------------------------------------------------------------
   Medido ao vivo em 2026-08-10: a Home renderizava 9 combinações
   de tamanho/entrelinha e a Coach 14, enquanto as duas páginas
   legais usavam UMA (20px/1.65) — e eram, de longe, as mais
   legíveis do site. O corpo que vende estava menor (16px) que o
   corpo que ninguém lê (20px), e abaixo dos 17-20px do contrato.

   `!important` é obrigatório aqui: style inline vence qualquer
   seletor sem ele. A regra anterior deste bloco subia 16px→17px
   SEM !important — ou seja, estava morta desde que foi escrita.

   Dois papéis apenas:
     corpo        17px / 1.6   (cards, formulários, FAQ, listas)
     prosa longa  20px / 1.65  (seções de leitura corrida)
   O lead do hero (clamp 17-20 / 1.55) fica fora: texto maior pede
   entrelinha proporcionalmente menor, então 1.55 ali está certo.
   ============================================================ */
main [style*="font-size: 16px"],
main [style*="font-size: 17px"] {
  font-size: 17px !important;
  line-height: 1.6 !important;
}
main [style*="clamp(16px, 2vw, 18px)"] {
  font-size: clamp(17px, 2vw, 18px) !important;
  line-height: 1.6 !important;
}
/* ============================================================
   PÁGINAS LEGAIS — alinhamento justificado (documento formal).
   ------------------------------------------------------------
   Justificar sem hifenizar abre "rios" de espaço em branco entre
   as palavras. As duas páginas declaram lang="pt-BR", então
   `hyphens: auto` separa as sílabas pelas regras do português e
   as linhas fecham sem buraco.

   Abaixo de 640px a coluna fica estreita demais: com poucas
   palavras por linha, o justificado vira espaçamento grotesco
   mesmo com hífen. Nessa faixa volta a alinhar à esquerda.

   Só parágrafos e itens de lista — títulos justificados ficam
   com o mesmo defeito e nenhum ganho.
   ============================================================ */
html[data-fb-page="Termos-de-Uso.dc"] main :is(p, li),
html[data-fb-page="Politica-de-Privacidade.dc"] main :is(p, li) {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
          hyphens: auto;
  hyphenate-limit-chars: 6 3 3; /* não quebra palavra curta nem deixa 1-2 letras órfãs */
}
@media (max-width: 640px) {
  html[data-fb-page="Termos-de-Uso.dc"] main :is(p, li),
  html[data-fb-page="Politica-de-Privacidade.dc"] main :is(p, li) {
    text-align: left;
    -webkit-hyphens: manual;
            hyphens: manual;
  }
}

/* Respostas do FAQ: o <p> não tem largura própria e herda o container de
   820px da seção (que existe para o H2, não para leitura corrida). Medido:
   87-92 caracteres por linha na Coach e 89 na Home — a pior medida do site,
   justamente onde o visitante tira as dúvidas de compra. 32rem fecha em
   ~65 caracteres. Os <p> do FAQ não têm max-width inline, então não precisa
   de !important. */
main details p { max-width: 32rem; }

/* H2 sem line-height inline (páginas legais) herda --leading-tight: 1.08 do
   design system e cola as duas linhas quando o título quebra no celular.
   Os H2 das outras páginas declaram 1.12/1.14 inline e ignoram esta regra. */
main h2 { line-height: 1.25; }

/* Prosa longa. `line-height: 1.65` no inline já é o marcador desse
   papel no projeto (só as seções de leitura corrida o usam), então
   ele serve de seletor. Sobe a 20px para bater os ~70 caracteres
   por linha das páginas legais — a Coach media 82, acima do teto
   tipográfico de 75. Especificidade (0,2,1) vence o corpo acima. */
main [style*="font-size: 17px"][style*="line-height: 1.65"] {
  font-size: 20px !important;
  line-height: 1.65 !important;
}

/* overflow-x: clip (não hidden) — hidden torna o body um scroll container e
   quebra o view() dos reveals, que passa a medir contra o body em vez do
   viewport. clip corta sem criar scroller; navegador sem clip fica no hidden. */
body { margin: 0; background: var(--surface-page); overflow-x: hidden; overflow-x: clip;
       font-size: var(--text-base); line-height: var(--leading-normal); }
img { max-width: 100%; }

/* Link dentro de texto corrido precisa de sublinhado: cor sozinha não é sinal suficiente. */
a { color: var(--text-link); text-underline-offset: 2px; }
a:hover { color: var(--brand-hover); }
main p > a, main li > a { text-decoration: underline; text-decoration-thickness: 1px; }
main p > a:hover, main li > a:hover { text-decoration-thickness: 2px; }

/* Alvo de toque: 48px mínimo em qualquer coisa clicável, com folga entre alvos vizinhos. */
a[class*="btn"], button, [role="button"] { min-height: 48px; }

/* CTA primário: o inline `background: var(--brand)` estava computando transparente
   (texto branco sobre seção branca = invisível), embora `border: 1px solid var(--brand)`
   no MESMO elemento resolvesse. Fixa background-color explicitamente. */
a[style*="background: var(--brand)"] {
  background-color: var(--brand) !important;
  color: #fff !important;
}

/* Botão fantasma sobre painel escuro: a borda vinha em branco 35% (2.63:1, abaixo do
   mínimo de 3.0 para controle de UI). O estilo é inline no .dc.html, daí o !important. */
a[style*="rgba(255,255,255,0.35)"], a[style*="rgba(255, 255, 255, 0.35)"] {
  border-color: rgba(255, 255, 255, 0.62) !important; /* 4.6:1 sobre o painel */
  border-width: 2px !important;
}

/* FAQ aberto por padrão, via CSS. O atributo `open` no HTML e o `.open` via JS
   são revertidos pelo runtime React que renderiza os .dc.html; regra de estilo
   ele não desfaz. Com 4 perguntas não há motivo para esconder a resposta. */
#faq details > *:not(summary) { display: block !important; }
#faq details .fb-chev { transform: rotate(180deg); }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
details[open] summary .fb-chev { transform: rotate(180deg); }

@keyframes fb-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fb-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fb-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Interatividade — micro-interações e reveals.
   Tudo aqui, nunca nos .dc.html (exports do Open Design são
   sobrescritos). Movimento só com prefers-reduced-motion livre.
   ============================================================ */

/* Foco visível: NENHUMA regra aqui de propósito. O design system já aplica
   :focus-visible { box-shadow: var(--focus-ring) } (base.css) com o anel DUPLO
   branco+navy do --focus-ring definido acima — calibrado para passar 3:1 sobre
   fundo claro E sobre os painéis escuros. Um outline de cor única por cima
   media 1.5-1.8:1 sobre --gradient-panel (auditado 2026-08); não reintroduzir. */

/* Toque: sem atraso de double-tap e sem o realce cinza default do navegador —
   o feedback de :active abaixo é quem confirma o tap. */
a[class*="btn"], button, [role="button"], main a[href][style*="border-radius: 12px"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  /* Press: resposta física ao clique/toque — botões E cards (o card é navegação
     primária; em touch não existe hover, então o press é o único feedback). */
  :is(a[class*="btn"], button, [role="button"]):active,
  main a[style*="background: var(--brand)"]:active,
  main a[href][style*="border-radius: 12px"]:active { transform: translateY(1px); }
  :is(a[class*="btn"], button, [role="button"]) {
    transition: transform var(--dur-instant) var(--ease-sharp);
  }

  /* Cards (qualquer <a href> com raio 12px inline — no export atual isso é
     sempre um card clicável; display varia entre block e flex, então não
     entra no seletor). A transition redeclara a inline (que só cobre
     border/box-shadow) para o transform também deslizar — daí o !important. */
  @media (hover: hover) {
    main a[href][style*="border-radius: 12px"] {
      transition: border-color var(--dur) var(--ease-sharp),
                  box-shadow var(--dur) var(--ease-sharp),
                  transform var(--dur-fast) var(--ease-out) !important;
    }
    main a[href][style*="border-radius: 12px"]:hover {
      transform: translateY(-3px);
    }
  }
}

/* Reveal ao rolar — CSS puro (view timeline): zero JS, zero conflito com o
   runtime React dos .dc.html. Navegador sem suporte ignora o bloco inteiro
   e o conteúdo fica visível desde o início — nada depende disto.
   Notas de calibração (auditoria 2026-08):
   - A faixa entry 0%→30% conclui o fade logo na borda inferior da tela: a
     janela em que algo fica semi-transparente é mínima, e rolar de volta
     quase não re-esconde conteúdo (view() é scrubbed por spec, não one-shot).
   - A duração (--dur-slow) NÃO controla velocidade aqui — com timeline de
     view() o progresso vem 100% da posição de scroll; o valor só precisa
     ser não-zero. Mudar --dur-slow não muda nada neste efeito.
   - :focus-within desliga a animação da seção na hora: Tab para um link de
     um card fora da tela nunca deixa o alvo focado semi-transparente.
   - Páginas de seção única (Avaliação, Sugestões) não têm reveal — decisão
     consciente, formulário curto não precisa de entrada coreografada. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > section:not(:first-of-type) > div {
      animation: fb-enter var(--dur-slow) var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
    main > section:not(:first-of-type) > div:focus-within {
      animation: none;
    }
  }
}

/* Impressão: sem posição de scroll não há timeline — seções nunca roladas
   poderiam sair em branco no papel/PDF. Reset explícito. */
@media print {
  main > section > div { animation: none !important; opacity: 1 !important; transform: none !important; }
  #fb-texto-ctl { display: none; }
}

/* Controle A−/A+ (criado pelo bloco apendado no support.js; fora da árvore
   React). Borda navy: o contorno é o identificador do botão sobre página
   branca, então precisa de 3:1 — --brand dá 10.25:1. */
#fb-texto-ctl {
  position: fixed; right: 14px; bottom: 14px; z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
}
#fb-texto-ctl button {
  min-width: 56px; min-height: 48px; border-radius: 12px;
  border: 2px solid var(--brand); background: #fff; color: var(--brand);
  font: 700 20px/1 var(--font-sans, system-ui); cursor: pointer;
  box-shadow: 0 2px 8px rgba(6, 31, 85, .16);
}
#fb-texto-ctl button:hover { background: var(--surface-brand-soft); }
#fb-texto-ctl button:disabled { opacity: .45; cursor: default; }

/* ============================================================
   Trilha curricular (Treinamentos + Coach Individual).
   Grid de colunas FIXAS: com flex, cada título empurrava a
   descrição para uma posição diferente e a coluna saía irregular
   (defeito apontado pelo dono em 2026-08-10). Aqui as três
   colunas são as mesmas em todas as linhas, então as descrições
   alinham. Abaixo de 760px vira duas linhas por módulo.
   ============================================================ */
.fb-modulo {
  display: grid;
  grid-template-columns: 34px minmax(0, 250px) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px 20px;
  padding: 14px 16px;
  border-radius: 10px;
}
.fb-modulo--ativo { background: var(--surface-brand-soft); }
.fb-modulo-n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--text-heading);
}
.fb-modulo--ativo .fb-modulo-n { color: var(--brand); }
.fb-modulo-t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--text-strong);
  margin: 0;
}
.fb-modulo-d {
  font-family: var(--font-sans);
  font-size: 17px;   /* mesmo par do corpo (17/1.6) — ver bloco CORPO DE TEXTO */
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}
/* Empilhado: o número segura a coluna 1 e título/descrição ocupam a 2. */
@media (max-width: 760px) {
  .fb-modulo { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 16px; }
  .fb-modulo-d { grid-column: 2; }
}

/* ============================================================
   Direção B — "Tecnológica calorosa" (aprovada pelo dono em
   2026-08-10 para o site inteiro; ver revisão de sombra no
   DESIGN.md §1). Origem: reskin-B.css (previews). Regras de
   página única usam html[data-fb-page="Home.dc"] — o atributo é
   posto pelo bloco apendado do support.js antes do primeiro paint.
   ============================================================ */

/* Letter-spacing negativo zerado no site todo (contrato §3; o runtime
   normaliza -.0Xem para -0.0Xem no DOM — os dois formatos cobertos). */
[style*="letter-spacing: -.02em"], [style*="letter-spacing: -0.02em"],
[style*="letter-spacing: -.015em"], [style*="letter-spacing: -0.015em"],
[style*="letter-spacing: -.01em"], [style*="letter-spacing: -0.01em"] {
  letter-spacing: 0 !important;
}

/* Botão secundário: borda inline 1px var(--border-strong) media 1.36:1
   sobre navy-50 (< 3:1 de UI). Espec do DESIGN.md §6. */
main a[style*="border: 1px solid var(--border-strong)"] {
  border: 2px solid #082d73 !important;
}

/* Eyebrows viram chip (pílula + ponto azul decorativo). main .fb-eyebrow
   (0,1,1) vence o .fb-eyebrow{font-size:1rem} do topo deste arquivo. */
main .fb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  font-size: 1.0625rem; /* piso 17px do DESIGN.md §3 */
  border-radius: 999px;
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
}
main .fb-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-vivid-decorative-only);
  flex: none;
}
/* Chip com fundo branco onde a seção é navy-50 (senão a pílula some). */
html[data-fb-page="Home.dc"] main > section:nth-of-type(1) .fb-eyebrow,
#como .fb-eyebrow,
html[data-fb-page="Home.dc"] main > section:nth-of-type(5) .fb-eyebrow {
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 18, 32, 0.06);
}

/* Hero da Home: gradiente diagonal + malha de pontos + glow azul-vivo
   decorativo. SÓ Home — as outras páginas têm aberturas próprias. */
html[data-fb-page="Home.dc"] main > section:nth-of-type(1) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy-50) 0%, #ffffff 60%);
}
/* Aurora: dois blobs de gradiente desfocados derivando MUITO devagar
   (24s/32s) — vida ambiente sem vertigem. (A malha de pontos anterior
   foi removida a pedido do dono: "pontilhado terrível".) */
html[data-fb-page="Home.dc"] main > section:nth-of-type(1)::before {
  content: "";
  position: absolute;
  top: -18%; right: -12%;
  width: 58%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(22, 112, 238, .16) 0%,
    rgba(37, 168, 255, .10) 40%,
    rgba(22, 112, 238, 0) 70%);
  filter: blur(46px);
  pointer-events: none;
}
html[data-fb-page="Home.dc"] main > section:nth-of-type(1)::after {
  content: "";
  position: absolute;
  bottom: -30%; left: -14%;
  width: 52%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(40, 64, 110, .18) 0%,
    rgba(222, 228, 240, .22) 45%,
    rgba(240, 243, 249, 0) 72%);
  filter: blur(52px);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-fb-page="Home.dc"] main > section:nth-of-type(1)::before {
    animation: fb-aurora-a 24s ease-in-out infinite alternate;
  }
  html[data-fb-page="Home.dc"] main > section:nth-of-type(1)::after {
    animation: fb-aurora-b 32s ease-in-out infinite alternate;
  }
}
@keyframes fb-aurora-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-7%, 9%) scale(1.14); }
}
@keyframes fb-aurora-b {
  0%   { transform: translate(0, 0) scale(1.1); }
  100% { transform: translate(9%, -7%) scale(1); }
}

/* Título do hero com gradiente navy profundo→brand (todos os tons ≥7:1
   sobre o fundo claro), deslizando devagar. Só onde background-clip:text
   existe — sem suporte, fica a cor sólida inline normal. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html[data-fb-page="Home.dc"] main > section:nth-of-type(1) h1 {
    background: linear-gradient(100deg, #101214 0%, #28406e 45%, #082d73 70%, #101214 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #101214 !important; /* fallback pintado se o clip falhar em runtime */
  }
  @media (prefers-reduced-motion: no-preference) {
    html[data-fb-page="Home.dc"] main > section:nth-of-type(1) h1 {
      animation: fb-tinta 9s ease-in-out infinite alternate;
    }
  }
}
@keyframes fb-tinta {
  0%   { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

/* Boominho vivo: flutuação suave contínua (depois que o momento de marca
   termina — o delay deixa a entrada acabar antes do primeiro ciclo). */
@media (prefers-reduced-motion: no-preference) {
  main img[src*="mascote"] {
    animation: fb-flutua 5s ease-in-out 1.8s infinite alternate;
  }
}
@keyframes fb-flutua {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}
html[data-fb-page="Home.dc"] main > section:nth-of-type(1) > div {
  position: relative;
  z-index: 1;
}

/* Ritmo de fundos na Home: #como e a seção da citação em navy-50. */
#como[style*="background: var(--surface-soft)"] {
  background: var(--surface-brand-soft) !important;
}
html[data-fb-page="Home.dc"] main > section:nth-of-type(5)[style*="background: var(--white)"] {
  background: var(--surface-brand-soft) !important;
}

/* Cards de #servicos: barra de acento navy→azul-vivo, sombra em camadas
   tingida (revisão de sombra no DESIGN.md §1), número como badge. */
#servicos a[href][style*="border-radius: 12px"] {
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(11, 18, 32, .06), 0 10px 22px -12px rgba(40, 64, 110, .38);
}
#servicos a[href][style*="border-radius: 12px"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--navy-500) 0%, var(--brand-vivid-decorative-only) 100%);
}
#servicos a[href][style*="border-radius: 12px"] > span[style*="font-family: var(--font-mono)"] {
  display: inline-flex !important;
  font-size: 1.0625rem !important; /* piso 17px — era 13px inline */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #servicos a[href][style*="border-radius: 12px"]:hover {
    /* !important: o runtime converte style-hover em .scpN:hover com tudo
       !important — sem isto a regra é morta. */
    box-shadow: 0 2px 4px rgba(11, 18, 32, .08), 0 16px 32px -14px rgba(40, 64, 110, .48) !important;
  }
  /* Spotlight que segue o mouse (coords --mx/--my postas pelo support.js).
     ::after livre (o ::before é a barra de acento); overflow:hidden já corta. */
  #servicos a[href][style*="border-radius: 12px"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
      rgba(22, 112, 238, .10), transparent 65%);
    opacity: 0;
    transition: opacity 200ms var(--ease-out);
    pointer-events: none;
  }
  #servicos a[href][style*="border-radius: 12px"]:hover::after { opacity: 1; }
}

/* ==========================================================================
   #como — "a linha da auditoria" (pedido do dono 2026-08-10: seção mais
   moderna/viva). Uma linha de progresso se desenha ligando 1→2→3 ao rolar,
   e cada etapa ganha um ✓ que se carimba quando a linha passa — o lema
   "o que a máquina faz, você confere" virando movimento. Geometria medida
   ao vivo: círculos 48px, centro a 24px do topo, colunas ~15/50/85%.
   ========================================================================== */
#como div[style*="minmax(260px"] { position: relative; }
#como div[style*="minmax(260px"] > div { position: relative; z-index: 1; }

/* Círculos numerados: halo branco + posição para o carimbo. */
#como span[style*="border-radius: 50%"] {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px #fff, 0 12px 22px -10px rgba(40, 64, 110, .4);
}

/* A linha (só no layout de 3 colunas — empilhado ela não faz sentido). */
@media (min-width: 900px) {
  #como div[style*="minmax(260px"]::before {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 23px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--navy-200), var(--brand) 50%, var(--navy-200));
    transform-origin: left center;
  }
}

/* O carimbo ✓ de cada etapa (canto do círculo, branco com traço navy). */
#como span[style*="border-radius: 50%"]::after {
  content: "";
  position: absolute;
  right: -7px;
  bottom: -5px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  border: 2px solid var(--brand);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328406e' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
  box-shadow: 0 2px 6px rgba(11, 18, 32, .22);
}

/* Coreografia por scroll: a linha se traça primeiro, os ✓ carimbam na ordem
   em que a linha os alcança. Sem view(): tudo estático completo. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @media (min-width: 900px) {
      #como div[style*="minmax(260px"]::before {
        animation: fb-linha linear both;
        animation-timeline: view();
        animation-range: entry 5% entry 50%;
      }
    }
    #como span[style*="border-radius: 50%"]::after {
      animation: fb-carimbo linear both;
      animation-timeline: view();
    }
    #como div[style*="minmax(260px"] > div:nth-child(1) span[style*="border-radius: 50%"]::after { animation-range: entry 15% entry 25%; }
    #como div[style*="minmax(260px"] > div:nth-child(2) span[style*="border-radius: 50%"]::after { animation-range: entry 27% entry 37%; }
    #como div[style*="minmax(260px"] > div:nth-child(3) span[style*="border-radius: 50%"]::after { animation-range: entry 40% entry 50%; }
  }
}
@keyframes fb-linha {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes fb-carimbo {
  from { opacity: 0; transform: scale(.35); }
  to   { opacity: 1; transform: scale(1); }
}

/* Etapas vivas no hover: coluna levita, o anel do número acende. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #como div[style*="minmax(260px"] > div {
    transition: transform var(--dur) var(--ease-out);
    border-radius: 14px;
  }
  #como div[style*="minmax(260px"] > div:hover { transform: translateY(-4px); }
  #como div[style*="minmax(260px"] > div:hover span[style*="border-radius: 50%"] {
    box-shadow: 0 0 0 6px #fff, 0 0 0 9px rgba(40, 64, 110, .30),
                0 14px 26px -10px rgba(40, 64, 110, .5);
    transition: box-shadow var(--dur) var(--ease-out);
  }
}

@media print {
  #como div[style*="minmax(260px"]::before,
  #como span[style*="border-radius: 50%"]::after { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Botões primários (site todo): maiores, raio maior, sombra tingida. */
main a[style*="background: var(--brand)"],
main button[style*="background: var(--brand)"] {
  min-height: 60px !important;
  padding: 0 32px !important;
  font-size: 18px !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 26px -10px rgba(40, 64, 110, .55), 0 2px 6px rgba(11, 18, 32, .18) !important;
  position: relative;
  overflow: hidden;
}
/* Brilho varrendo o botão no hover (uma passada, 650ms). */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  main a[style*="background: var(--brand)"]::after,
  main button[style*="background: var(--brand)"]::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -80%;
    width: 50%;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
  }
  main a[style*="background: var(--brand)"]:hover::after,
  main button[style*="background: var(--brand)"]:hover::after {
    animation: fb-brilho 650ms var(--ease-out);
  }
}
@keyframes fb-brilho {
  0%   { left: -80%; }
  100% { left: 130%; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  main a[style*="background: var(--brand)"],
  main button[style*="background: var(--brand)"] {
    /* !important: o CTA do hero tem transition inline (só background). */
    transition: background var(--dur-fast) var(--ease-sharp),
                box-shadow var(--dur) var(--ease-sharp),
                transform var(--dur-fast) var(--ease-out) !important;
  }
  main a[style*="background: var(--brand)"]:hover,
  main button[style*="background: var(--brand)"]:hover {
    box-shadow: 0 18px 34px -10px rgba(40, 64, 110, .62), 0 2px 6px rgba(11, 18, 32, .2) !important;
    transform: translateY(-2px);
  }
}

/* Painéis escuros: brilho ciano decorativo no canto, conteúdo por cima. */
main div[style*="background: var(--gradient-panel)"] {
  position: relative;
  overflow: hidden;
}
main div[style*="background: var(--gradient-panel)"]::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 217, 242, .22) 0%, rgba(57, 217, 242, 0) 70%);
  pointer-events: none;
}
/* O brilho ciano respira devagar (7s ida-e-volta) — o painel fica vivo. */
@media (prefers-reduced-motion: no-preference) {
  main div[style*="background: var(--gradient-panel)"]::before {
    animation: fb-respira 7s ease-in-out infinite alternate;
  }
}
@keyframes fb-respira {
  0%   { opacity: .55; transform: scale(.94); }
  100% { opacity: 1; transform: scale(1.08); }
}
main div[style*="background: var(--gradient-panel)"] > * {
  position: relative;
  z-index: 1;
}

/* Chip "NOVIDADE · GRATUITO": 15px inline → piso 17px. Seletor por
   border-radius inteiro (imune à normalização de rgba do runtime). */
main div[style*="background: var(--gradient-panel)"] span[style*="border-radius: 999px"] {
  font-size: 1.0625rem !important;
}

/* ============================================================
   Momento de marca — "Boominho cumprimenta" (vencedor rodada 2,
   modo PERSISTENTE escolhido pelo dono: o balão fica até a pessoa
   rolar/clicar/teclar). Elementos .fb-halo/.fb-balao são injetados
   pelo bloco do support.js só na Home; o gate fb-momento-pendente
   entra no <html> ANTES do primeiro paint (script síncrono no head).
   ============================================================ */
html[data-fb-page="Home.dc"] main > section:first-of-type div[style*="flex: 0 1 320px"] {
  position: relative;
}
.fb-halo {
  position: absolute;
  top: 50%; left: 50%;
  width: 130%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--navy-100) 0%, var(--navy-50) 45%, rgba(240, 243, 249, 0) 72%);
  pointer-events: none;
  opacity: 0;
}
main img[src*="mascote"] { position: relative; z-index: 1; }
.fb-balao {
  position: absolute;
  z-index: 2;
  left: 46%; top: 0;
  width: clamp(170px, 45vw, 210px);
  background: #fff;
  color: var(--text-heading);
  padding: 14px 18px;
  border-radius: 16px;
  /* Borda 3:1 carrega a separação; sombra é reforço (DESIGN.md §1 revisado). */
  border: 2px solid #8b96a4;
  box-shadow: 0 10px 28px rgba(11, 18, 32, .18), 0 2px 6px rgba(11, 18, 32, .10);
  transform-origin: 11.5% 100%;
  opacity: 0;
}
.fb-balao::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  left: 22px; bottom: -8px;
  background: #fff;
  border-radius: 0 0 4px 0;
  border-right: 2px solid #8b96a4;
  border-bottom: 2px solid #8b96a4;
  transform: rotate(45deg);
}
.fb-balao p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.65;
  letter-spacing: 0;
}
.fb-balao strong { font-weight: 700; color: var(--brand); }

/* Persistência: enquanto o momento está ativo, o balão fica visível —
   com ou sem motion (reduced-motion vê tudo estático, sem animação). */
html.fb-momento-pendente .fb-balao { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* Mascote escondido só até o play começar — o gate síncrono garante
     que esta regra existe antes do primeiro paint (zero flash/rebobina). */
  html.fb-momento-pendente:not(.fb-momento-rodando) main img[src*="mascote"] { opacity: 0; }
  html.fb-momento-rodando .fb-halo {
    animation: fb-halo-seq 1500ms cubic-bezier(.2, 0, 0, 1) both;
  }
  html.fb-momento-rodando main img[src*="mascote"] {
    animation: fb-mascote-in 400ms cubic-bezier(.2, 0, 0, 1) 100ms both;
  }
  html.fb-momento-rodando .fb-balao {
    animation: fb-balao-in 300ms cubic-bezier(.2, 0, 0, 1) 400ms both;
  }
  /* Dispensa (rolou/clicou/teclou): fade curto e fim. */
  html.fb-momento-fim .fb-balao {
    opacity: 0;
    transition: opacity 300ms var(--ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  html.fb-momento-fim .fb-balao { opacity: 0; transition: none; }
}
@keyframes fb-halo-seq {
  0%    { opacity: 0; }
  30%   { opacity: 1; }
  83.3% { opacity: 1; }
  100%  { opacity: 0; }
}
@keyframes fb-mascote-in {
  0%   { opacity: 0; transform: scale(.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fb-balao-in {
  0%   { opacity: 0; transform: translateY(8px) scale(.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ---- Boominho interativo (pós-momento): clique/Enter no mascote da Home
   reabre o balão com dicas rotativas (support.js, bloco 3). Esta regra vem
   DEPOIS das do momento para vencer o opacity:0 do fb-momento-fim em
   igualdade de especificidade. ---- */
html[data-fb-page="Home.dc"] main > section:first-of-type img[src*="mascote"] { cursor: pointer; }
html.fb-momento-fim .fb-balao.fb-balao-ativa,
.fb-balao.fb-balao-ativa { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .fb-balao.fb-balao-ativa { animation: fb-balao-in 260ms cubic-bezier(.2, 0, 0, 1) both; }
}

@media print {
  .fb-balao, .fb-halo { display: none; }
}