/* ===================================================================
   Refúgio Tech — home.css
   Integração do reposicionamento 2026-10 (engenharia de software, cloud,
   DevSecOps, automação com IA) na home real. Fonte do conteúdo/estrutura:
   ativos/marca/propostas-site-2026-10/pagina-inicial-final-2026-10.html
   (repositório Consultoria, protótipo aprovado — só leitura/referência).

   Este arquivo NÃO redefine tokens — usa só os já existentes em
   styles.css (:root). Carregar DEPOIS de styles.css no <head> do
   index.html. Adaptações feitas na integração (não é cópia cega do
   protótipo):
   - Pesos de título ficam em 300/500 (escala tipográfica já em uso no
     site real — Jost carregado só em 200/300/400/500), não 600/700 como
     no protótipo (que carregava pesos extras só para si mesmo).
   - Mono (--font-mono) reservado à "casca" do produto (rótulos, prompts,
     barra do console), nunca ao texto corrido que o visitante lê — mesma
     regra híbrida já aprovada e aplicada no widget da Bússola
     (chat-widget.css, rodada 29). O protótipo original usava mono no
     corpo inteiro do console à direita; aqui isso foi corrigido para
     manter a mesma convenção de legibilidade do produto real.
   - Links do protótipo (#bussola, /bussola) adaptados para a estrutura
     real de páginas (bussola/ como página própria, não uma âncora).
   =================================================================== */

/* ---------- Eyebrow (seções claras) ---------- */
.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  /* Correção 3 adicional (2026-10-08, autorizada pelo fundador — reverte a
     exceção de "rótulo curto pode ficar pequeno" registrada na correção
     anterior): era 0.8125rem (13px). Fundador quer tudo legível, sem
     exceção para rótulo. Subido para 1rem (16px), nosso piso novo. */
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cinza-chumbo);
  /* Correção 4 (2026-10-08, acessibilidade como premissa permanente —
     decisoes/2026-10-08-acessibilidade-premissa-permanente.md, repositório
     Consultoria): opacidade medida em 0.72 dava contraste real de 3.66:1
     sobre --off-white — abaixo do mínimo AA (4.5:1) para texto normal,
     mesmo sendo um rótulo pequeno (13px não qualifica como "texto grande"
     pela regra WCAG de tamanho, então o piso continua 4.5:1, não 3:1).
     Subido para 0.85 — medido e confirmado em 4.96:1. Tamanho mudou desde
     (ver nota acima) mas 16px normal ainda não é "texto grande" pela WCAG
     (precisaria 18.66px bold ou 24px normal) — piso de contraste continua
     4.5:1, e 0.85 de opacidade nesta cor já entrega mais que isso. */
  opacity: 0.85;
}

/* ---------- Hero: eyebrow, lede, CTAs, slogan, pilares ---------- */
.hero__eyebrow {
  margin-bottom: var(--sp-3);
}

.hero__headline mark {
  background: linear-gradient(transparent 62%, var(--verde-pastel) 62%);
  color: inherit;
  padding: 0 2px;
}

.hero__lede {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  color: var(--cinza-chumbo);
  max-width: 50ch;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.hero__ctas {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  /* Correção 4 (2026-10-08): era 0.9375rem (15px) — texto do CTA
     principal, lido e clicado por todo visitante. Corpo de texto nunca
     abaixo de 16px (decisão de acessibilidade permanente). */
  font-size: 1rem;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  cursor: pointer;
}

.btn-primary {
  background: var(--amarelo-suave);
  color: var(--preto-antifragil);
  border: none;
  box-shadow: 0 1px 2px rgba(38, 46, 51, 0.1);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(38, 46, 51, 0.18);
  background: #e4d39a;
}

.btn-ghost {
  background: transparent;
  color: var(--preto-antifragil);
  border: 1.5px solid var(--cinza-chumbo);
}
.btn-ghost:hover {
  border-color: var(--preto-antifragil);
  background: rgba(69, 82, 89, 0.06);
}

/* .hero__slogan foi REMOVIDA nesta rodada (Mudança 1, 2026-10-08, skill
   copywriting — ver comentário em index.html, seção hero, para o
   racional completo: o slogan é um reveal de contraste clássico, item 1
   da lista de "cara de IA" que a skill pede pra evitar). Regra de CSS
   removida junto por não ter mais elemento no HTML que a use. Se precisar
   recuperar, ver histórico git deste arquivo. */

.hero__pillars-tag {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-family: var(--font-body);
  /* Correção 3 adicional (2026-10-08): era 0.75rem (12px) — subido para
     1rem (16px), piso novo sem exceção de rótulo curto. */
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cinza-chumbo);
  /* Correção 4 (2026-10-08): era 0.65 — contraste real medido de 3.14:1
     sobre --off-white, abaixo do mínimo AA (4.5:1). Subido para 0.85,
     medido e confirmado em 4.96:1. */
  opacity: 0.85;
}
.hero__pillars-tag span { position: relative; padding-left: 14px; }
.hero__pillars-tag span::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amarelo-suave);
  transform: translateY(-50%);
}

/* ---------- Componente reutilizável: console (preview de conversa) ----------
   Usado 2x: variante clara (.console--light) no card do hero, variante
   escura (default) na seção de produto. Mono só na barra/rótulos — ver
   nota no topo do arquivo sobre a regra híbrida. */
.console {
  position: relative;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(217, 197, 131, 0.22);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.console__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--sp-3);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(217, 197, 131, 0.14);
  font-family: var(--font-mono);
  /* Correção 3 adicional (2026-10-08): era 0.75rem (12px) — subido para
     1rem (16px). Nota: na prática só a variante .console--light é
     instanciada hoje (ver index.html), que sobrescreve cor/bg desta
     regra para cinza-chumbo sobre off-white (7.2:1, ok) — o texto
     rgba(242,242,242,0.55) abaixo é só o fallback da variante escura,
     hoje sem uso real na página. */
  font-size: 1rem;
  color: rgba(242, 242, 242, 0.55);
}
.console__dots { display: flex; gap: 6px; flex-shrink: 0; }
.console__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(242, 242, 242, 0.18); }
.console__body { padding: var(--sp-3); min-height: 150px; }
.console__line {
  display: flex;
  gap: 10px;
  margin-bottom: var(--sp-1);
  font-family: var(--font-body);
  /* Correção 3 adicional (2026-10-08): era 0.9375rem (15px) — subido para
     1rem (16px). */
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(242, 242, 242, 0.88);
}
.console__line .tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  /* Correção 3 adicional (2026-10-08): era 0.75rem (12px) — subido para
     1rem (16px). */
  font-size: 1rem;
  color: var(--verde-pastel);
  padding-top: 3px;
}
.console__line.reply .tag { color: var(--amarelo-suave); font-weight: 600; }
.console__line.hint {
  font-family: var(--font-mono);
  /* Correção 3 adicional (2026-10-08): era 0.75rem (12px) — subido para
     1rem (16px). */
  font-size: 1rem;
  opacity: 0.6;
  margin-top: var(--sp-1);
  color: rgba(242, 242, 242, 0.7);
}
.console__cursor {
  display: inline-block;
  width: 6px; height: 13px;
  background: var(--amarelo-suave);
  margin-left: 2px;
  vertical-align: -2px;
  animation: console-blink 1s steps(1) infinite;
}
@keyframes console-blink { 50% { opacity: 0; } }

/* variante clara — hero */
.console--light { background: #fff; border: 1px solid rgba(69, 82, 89, 0.14); }
.console--light .console__bar { background: var(--off-white); color: var(--cinza-chumbo); border-bottom: 1px solid rgba(69, 82, 89, 0.12); }
.console--light .console__dots span { background: rgba(69, 82, 89, 0.18); }
.console--light .console__line { color: var(--preto-antifragil); }
/* Correção 3 adicional (2026-10-08): contraste reteste depois do ajuste de
   fonte acima — cinza-chumbo a 0.6/0.65 de opacidade sobre fundo branco
   media 2.96:1 e 3.31:1, abaixo do mínimo AA (4.5:1); o tamanho maior de
   fonte não muda isso (16px normal ainda não é "texto grande" pela WCAG).
   Subido para 0.85 nos dois — mesmo valor já usado em outros rótulos deste
   projeto —, medido e confirmado em 5.39:1. */
.console--light .console__line .tag { color: var(--cinza-chumbo); opacity: 0.85; }
.console--light .console__line.reply .tag { color: var(--preto-antifragil); }
.console--light .console__line.hint { color: var(--cinza-chumbo); opacity: 0.85; }

/* ---------- Mock do preview de solução (hero) — reescrita 2026-10-08 ----------
   Revisão do fundador sobre o commit 4394234 (rodada anterior): o exemplo de
   problema e o formato do preview não ficaram bons. Duas mudanças nesta
   rodada:

   1) Exemplo trocado de cloud/custo de infraestrutura para automação de
      processo manual (planilha → sistema de pedidos na mão) — só o HTML
      muda (ver index.html), nenhuma classe nova aqui por causa disso.

   2) O preview deixou de ser um wireframe de 3 blocos ligados por seta
      (.console__preview-card/-frame/-frame-block, texto demais, pouco
      visual — REMOVIDO nesta rodada, histórico no git log deste arquivo)
      e virou um PAINEL LATERAL (.console__preview-panel) com um mockup de
      produto: uma mini "janela" de app (barra de título com dots, status
      "automatizado", KPI de horas recuperadas, mini gráfico). Mantém a
      mesma linguagem visual do card real da feature (.chat-widget__preview-
      card, chat-widget.css, feature ainda não publicada em produção — ver
      docs/agente-conversacional-descoberta.md, repositório Consultoria,
      seção 37): borda --verde-pastel, raio --radius-md, rótulo mono
      maiúsculo — mas o conteúdo interno agora parece screenshot de produto,
      não diagrama técnico.

   Mudança de LAYOUT que acompanha a troca de conteúdo: .console__grid
   organiza conversa + painel em 2 colunas a partir de 860px de viewport
   (breakpoint próprio deste componente — abaixo de 1024px o .hero__grid
   externo ainda é 1 coluna, então o card já tem a largura cheia do
   container disponível; a partir de 1024px ele divide espaço com o texto
   do hero, mas ainda cabe um 1.3fr/1fr confortável). Abaixo de 860px
   (inclui o mobile de referência, 390px) empilha: conversa em cima, painel
   embaixo — ordem natural do DOM, sem reflow via grid-template-areas.
   Escopo: só dentro de .console--light (hero); não reaproveitado em
   #solucoes porque ali o widget é o real, com dados reais. */
.console__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 860px) {
  .console__grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
    gap: var(--sp-3);
  }
}
.console__conversation { min-width: 0; }

/* ---------- Painel lateral: mockup de produto (não diagrama) ---------- */
.console__preview-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.console__preview-panel-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cinza-chumbo);
  opacity: 0.85;
}
/* "Janela" de app: moldura com borda --verde-pastel (mesmo tratamento do
   card real da feature) + sombra leve para destacar o painel como um
   elemento visual separado da conversa, não mais uma linha de texto. */
.console__preview-panel-window {
  border: 1px solid var(--verde-pastel);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 32px -18px rgba(38, 46, 51, 0.28);
}
.console__preview-panel-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--off-white);
  border-bottom: 1px solid rgba(69, 82, 89, 0.14);
}
.console__preview-panel-bar-dots { display: flex; gap: 4px; flex-shrink: 0; }
.console__preview-panel-bar-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(69, 82, 89, 0.25);
}
.console__preview-panel-bar-title {
  font-family: var(--font-mono);
  /* Piso de 16px em todos os seletores pequenos, mesma regra já aplicada
     ao resto deste componente (ver correções 2026-10-08 acima). */
  font-size: 1rem;
  color: var(--cinza-chumbo);
  opacity: 0.85;
}
.console__preview-panel-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--sp-2);
}
/* Status "automatizado": pill verde com ponto, mesma lógica de affordance
   já usada no dot de status do launcher do widget real (verde-pastel =
   "processo ativo/saudável" na linguagem visual do produto). */
.console__preview-panel-status {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  background: rgba(146, 193, 150, 0.18);
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--preto-antifragil);
}
.console__preview-panel-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--verde-pastel);
  flex-shrink: 0;
}
.console__preview-panel-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.console__preview-panel-stat-value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--preto-antifragil);
}
.console__preview-panel-stat-label {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.3;
  color: var(--cinza-chumbo);
  opacity: 0.85;
}
/* Mini gráfico decorativo (sparkline de barras) — ilustra "horas manuais
   caindo", sem ser um diagrama de blocos/setas: é lido como um elemento de
   dashboard comum (ver --bar-h inline em cada barra, no HTML). */
.console__preview-panel-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 48px;
  padding-top: 4px;
}
.console__preview-panel-chart span {
  flex: 1;
  height: var(--bar-h, 20%);
  border-radius: 3px 3px 0 0;
  background: var(--amarelo-suave);
  opacity: 0.85;
}
.console__preview-panel-caption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--cinza-chumbo);
  opacity: 0.75;
}

/* ---------- Card de pré-visualização da Bússola no hero ----------
   Visual/estático por decisão de engenharia desta integração: representa
   a Bússola sem duplicar a infraestrutura do widget real (Turnstile,
   sessão, chamadas de rede) na home. O card inteiro é um link para a
   seção real do produto (#solucoes), onde o widget funcional já existe. */
.hero__preview-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
}
.hero__preview-link .chatcard {
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.hero__preview-link:hover .chatcard,
.hero__preview-link:focus-visible .chatcard {
  transform: translateY(-3px);
  box-shadow: 0 30px 64px -16px rgba(38, 46, 51, 0.32);
}

/* ---------- Revisão 2026-10-13 — nova ilustração do hero (chatcard) ----------
   Troca por inteiro o mock anterior (.console--light, um "console"/
   terminal: barra de título com bolinhas, fonte mono, painel de dashboard
   de uma automação específica). Motivo, de feedback real de teste de
   usuário (André Rodrigues, 2026-10-10): 2 problemas apontados juntos —
   (1) a ilustração não comunicava o que a Bússola faz (parecia um case de
   automação isolado, não "diagnóstico que aponta uma direção entre 5
   frentes"); (2) o público-alvo não é técnico e não tem repertório visual
   de "console"/terminal — bolinhas de janela, barra mono, "painel —
   pedidos" são pistas de interface técnica que não comunicam nada pra
   quem nunca usou uma. Nova metáfora: uma conversa de chat comum (como
   WhatsApp — repertório visual universal, não-técnico) em que a Bússola
   "manda" uma ilustração simples de bússola de verdade (agulha + 5
   paradas com ícone e nome em português comum, nunca rótulo técnico em
   caixa alta/mono) apontando pra prioridade identificada. Variações
   testadas com o cliente antes de aplicar — ver cache-propostas/
   hero-refinamento/ (opções A–D) para o histórico de exploração.

   Responsividade: o card antigo (.console--light) era ESCONDIDO abaixo de
   1200px (ver histórico git deste arquivo) por um bug de overflow dentro
   do painel de dashboard em telas de 1024–1199px — a maioria dos
   visitantes (mobile, tablet, a maior parte dos laptops) nunca via essa
   ilustração. A nova estrutura (bolhas de chat, largura máxima com
   wrap de texto normal, sem grid interno de 2 colunas forçado) não tem
   esse problema — testado visualmente em 390/768/1024/1280/1440px sem
   overflow/corte. Por isso o card agora aparece em QUALQUER largura de
   tela, resolvendo de quebra um bug que também fazia parte do problema
   original (ilustração relevante só visível pra uma fração do tráfego). */
.chatcard {
  background: #fff;
  border: 1px solid rgba(69, 82, 89, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  max-width: 420px;
  margin: 0 auto;
}
.chatcard__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid rgba(69, 82, 89, 0.1);
}
.chatcard__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--verde-pastel);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chatcard__avatar img { width: 20px; height: 20px; }
.chatcard__header-text { line-height: 1.25; }
.chatcard__header-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--preto-antifragil);
}
.chatcard__header-status {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--cinza-chumbo);
  display: flex;
  align-items: center;
  gap: 6px;
}
.chatcard__header-status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4CAF50;
  display: inline-block;
  flex-shrink: 0;
}

.chatcard__body {
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
}
.bubble--pme {
  align-self: flex-end;
  background: var(--off-white);
  color: var(--preto-antifragil);
  border-bottom-right-radius: 4px;
}
.bubble--bussola {
  align-self: flex-start;
  background: rgba(178, 194, 185, 0.28);
  color: var(--preto-antifragil);
  border-bottom-left-radius: 4px;
}

/* "Figurinha" que a Bússola manda dentro da conversa: ilustração redonda
   de bússola (não radar/painel técnico) com 5 paradas ao redor, cada uma
   um ícone de linha simples (mesmo estilo dos ícones do widget real —
   stroke, sem preenchimento sólido) + nome comum em português, sem
   caixa alta nem fonte mono. */
.bubble--card {
  align-self: flex-start;
  background: rgba(178, 194, 185, 0.28);
  border-bottom-left-radius: 4px;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  max-width: 92%;
}
.compass-illustration { position: relative; width: 180px; height: 180px; flex-shrink: 0; }
.compass-illustration__dial {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--off-white);
  box-shadow: 0 10px 24px -10px rgba(38, 46, 51, 0.3), inset 0 0 0 1px rgba(69, 82, 89, 0.08);
}
.compass-illustration__needle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 58px;
  margin-left: -2.5px;
  margin-top: -58px;
  transform-origin: 50% 58px;
  animation: needleSettle 9s ease-in-out infinite;
}
.compass-illustration__needle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 17px solid var(--amarelo-suave);
}
.compass-illustration__needle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 12px solid rgba(69, 82, 89, 0.3);
}
@keyframes needleSettle {
  0%   { transform: rotate(140deg); }
  30%  { transform: rotate(-35deg); }
  42%  { transform: rotate(8deg); }
  50%  { transform: rotate(0deg); }
  88%  { transform: rotate(0deg); }
  100% { transform: rotate(140deg); }
}
.compass-illustration__hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--preto-antifragil);
}
.compass-illustration__stop {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cinza-chumbo);
  box-shadow: 0 4px 10px -4px rgba(38, 46, 51, 0.25);
}
.compass-illustration__stop svg { width: 18px; height: 18px; }
.compass-illustration__stop--destaque {
  border-color: var(--amarelo-suave);
  color: #8a6d1f;
  animation: stopGlow 9s ease-in-out infinite;
}
@keyframes stopGlow {
  0%, 38%  { box-shadow: 0 4px 10px -4px rgba(38, 46, 51, 0.25); }
  46%, 88% { box-shadow: 0 0 0 4px rgba(217, 197, 131, 0.35); }
  100%     { box-shadow: 0 4px 10px -4px rgba(38, 46, 51, 0.25); }
}

.bubble--card__caption {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--preto-antifragil);
}
.bubble--card__caption strong { font-weight: 500; }

.bubble--result {
  align-self: flex-start;
  background: rgba(217, 197, 131, 0.22);
  border-bottom-left-radius: 4px;
  opacity: 0;
  animation: resultFade 9s ease-in-out infinite;
}
@keyframes resultFade {
  0%, 44%  { opacity: 0; }
  50%, 90% { opacity: 1; }
  100%     { opacity: 0; }
}

/* Mesma regra global de prefers-reduced-motion (styles.css) já zera a
   DURAÇÃO de toda transição/animação — isto aqui cobre o que duração zero
   não resolve sozinho: estado final sempre visível/assentado, nunca o
   quadro inicial do loop (opacity 0, agulha fora de posição). */
@media (prefers-reduced-motion: reduce) {
  .compass-illustration__needle,
  .compass-illustration__stop--destaque,
  .bubble--result {
    animation: none !important;
    opacity: 1 !important;
  }
  .compass-illustration__needle { transform: rotate(0deg) !important; }
}

/* Card cabe numa única coluna em qualquer largura (ver nota grande acima
   sobre a remoção do corte em 1200px) — só reduz um pouco o diâmetro da
   bússola em telas bem estreitas, pra sobrar mais respiro lateral dentro
   do card em smartphones pequenos. */
@media (max-width: 420px) {
  .compass-illustration { width: 150px; height: 150px; }
  .compass-illustration__stop { width: 32px; height: 32px; }
  .compass-illustration__stop svg { width: 15px; height: 15px; }
}

/* ---------- Revisão 2026-10-13 (2) — esconder o hero__cta no celular ----------
   Decisão deliberada de produto (não um bug de layout, ver nota grande
   acima sobre a remoção do corte em 1200px — aquele era um bug real de
   overflow, este é estratégia): no celular, a ilustração de prévia some e
   o visitante vai direto pro CTA/pro widget real (#solucoes), sem parar
   numa prévia estática no meio do caminho. Em telas ≥768px (tablet,
   laptop, desktop) a ilustração continua aparecendo normalmente — a nova
   estrutura (ver bloco "chatcard" acima) não tem nenhum problema de
   overflow nessas larguras, a omissão abaixo de 768px é só de produto. */
@media (max-width: 767.98px) {
  .hero__cta {
    display: none;
  }
}

/* ---------- Transições entre seções claro/escuro ---------- */
.seam-to-dark {
  position: relative;
  height: clamp(36px, 6vw, 72px);
  background: var(--off-white);
}
.seam-to-dark svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.seam-to-light {
  position: relative;
  height: clamp(36px, 6vw, 72px);
  background: var(--preto-antifragil);
}
.seam-to-light svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Seção escura: soluções / Bússola ---------- */
.solutions {
  position: relative;
  background: var(--preto-antifragil);
  color: var(--off-white);
  padding: var(--sp-10) 0 var(--sp-12);
  overflow: hidden;
}
/* Correção 3 adicional (2026-10-08, autorizada pelo fundador): regra de
   .solutions__eyebrow REMOVIDA por inteiro junto com o <span> no HTML —
   mesma lógica já aplicada ao .bunker-note__eyebrow (ver nota mais abaixo
   neste arquivo). A seção não precisa de rótulo técnico acima do H2.
   Se precisar recuperar o estilo antigo, ver histórico git deste arquivo. */
.solutions__head { max-width: 680px; margin-bottom: var(--sp-6); }
.solutions__head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--off-white);
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  line-height: 1.2;
  margin-bottom: var(--sp-3);
}
.solutions__head p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(242, 242, 242, 0.72);
  max-width: 620px;
}

/* .solutions .console (regra do antigo mockup estático) foi REMOVIDA nesta
   rodada (Mudança 2/3, 2026-10-08) — a seção não usa mais o componente
   .console: o widget real (chat-widget.css/js) ocupa o lugar dele. Ver
   .solutions__live-badge e .chat-widget--embedded abaixo, e o comentário
   grande em index.html (seção #solucoes) para o racional completo. Se
   precisar recuperar a regra antiga, ver histórico git deste arquivo. */

/* .solutions__live-badge / .solutions__live-badge-dot / @keyframes
   solutions-live-pulse (selo "produto ao vivo" com ponto pulsante) foram
   REMOVIDOS na Correção 2 (2026-10-08, autorizada pelo fundador — racional:
   "se precisamos dizer que o produto está ao vivo, falhamos no design").
   O widget agora comunica isso por affordance real (cursor piscando no
   campo, já focado ao abrir; placeholder convidativo; indicador de
   digitando), não por rótulo explícito. Ver index.html (seção #solucoes)
   e histórico git deste arquivo para o registro anterior. */

/* ---------- Widget real embutido (Mudança 3, 2026-10-08) ----------
   .chat-widget já é 100% estilizado em chat-widget.css (chrome branco,
   independente do fundo em volta) — aqui só o necessário para ele viver
   dentro da seção escura: largura/respiro consistentes com o resto do
   bento, e um contorno sutil em Verde Pastel (mesma lógica de "aceno à
   marca por fora, produto com cara própria por dentro" já usada no
   .hero__preview-link). O branco do painel contra o fundo escuro É
   proposital: funciona como "janela" que se destaca da composição de
   marketing ao redor — reforça que aquilo é uma aplicação de verdade, não
   parte do mesmo pano gráfico/ilustrativo da página. */
.chat-widget--embedded {
  margin-bottom: var(--sp-6);
}
.chat-widget--embedded .chat-widget__panel,
.chat-widget--embedded .chat-widget__launcher {
  box-shadow: 0 0 0 1px rgba(178, 194, 185, 0.35), var(--shadow-lift);
}
.chat-widget--embedded .chat-widget__noscript {
  margin: 0;
  padding: var(--sp-3);
  border: 1px dashed rgba(242, 242, 242, 0.3);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  /* Correção 3 adicional (2026-10-08): era 0.9375rem (15px) — subido para
     1rem (16px), último dos 17 seletores abaixo do piso. Contraste
     (rgba(242,242,242,0.85) sobre fundo .solutions #262E33) medido em
     9.35:1 — não muda com o tamanho, já estava bem acima de AA. */
  font-size: 1rem;
  color: rgba(242, 242, 242, 0.85);
}
.chat-widget--embedded .chat-widget__noscript a { color: var(--amarelo-suave); text-decoration: underline; }

.solutions__bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: var(--sp-3);
}
.solutions__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 242, 242, 0.1);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  transition: border-color 0.2s var(--ease);
}
.solutions__card:hover { border-color: rgba(217, 197, 131, 0.4); }
.solutions__card-idx {
  display: block;
  font-family: var(--font-mono);
  /* Correção 3 adicional (2026-10-08): era 0.6875rem (11px) — subido para
     1rem (16px). Rótulo é uma string longa (ver index.html); a 16px ocupa
     mais de uma linha no card — aceitável, já é display:block e o card
     tem altura flexível (confirmado na checagem visual desktop/mobile). */
  font-size: 1rem;
  letter-spacing: 0.08em;
  color: var(--amarelo-suave);
  opacity: 0.9;
  margin-bottom: var(--sp-2);
}
.solutions__card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--off-white);
  font-size: 1.0625rem;
  margin-bottom: var(--sp-1);
  letter-spacing: -0.01em;
}
.solutions__card p {
  font-family: var(--font-body);
  font-weight: 300;
  /* Correção 4 (2026-10-08): era 0.9375rem (15px) — corpo de texto nunca
     abaixo de 16px (decisão de acessibilidade permanente). */
  font-size: 1rem;
  color: rgba(242, 242, 242, 0.64);
  line-height: 1.55;
}
/* ---------- MUDANÇA 2 (2026-10-08, skill cro) ----------
   Lista de pills das 5 frentes que a Bússola mapeia — ver comentário em
   index.html (seção #solucoes, card--1) para o racional completo:
   substitui a enumeração que antes vivia dentro da frase corrida do
   parágrafo, pra ganhar escaneabilidade sem precisar de prova social
   fabricada. Mesmo padrão visual de .hero__pillars-tag (ponto + texto
   maiúsculo com tracking), adaptado pra fundo escuro: ponto em Verde
   Pastel em vez de Amarelo Suave (o amarelo já é o acento do CTA/idx
   dentro deste mesmo card — usar outra cor evita os dois competirem pela
   atenção no mesmo bloco). */
.solutions__frentes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--off-white);
}
.solutions__frentes li { position: relative; padding-left: 14px; }
.solutions__frentes li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--verde-pastel);
  transform: translateY(-50%);
}
/* Correção 2 (2026-10-08): o bento tinha 2 peças (card da Bússola +
   card--4 "Essa conversa aí em cima é real", reforço textual do selo
   "produto ao vivo" removido em index.html) — sem o selo, o card--4
   perdeu a função e foi removido. Resta só o card--1, que agora ocupa a
   largura toda (sem grid assimétrico 2/3 + 1/3 fazendo falta). Ver
   histórico git deste arquivo para o registro de .solutions__card--4. */
.solutions__card--1 { grid-column: 1 / -1; }

/* ---------- Correção de direção de copy (2026-10-07) ----------
   CTA "suave" do card do Bunker (solutions__card--2): produto em piloto
   privado, não validado — não leva botão de compra/signup self-serve
   (regra do fundador), só um link de texto discreto que leva ao formulário
   de contato real da home. Verde-pastel (cor do "refúgio" na paleta, ver
   ativos/marca/branding.md) em vez do amarelo-suave usado nos CTAs fortes
   (btn-primary), pra diferenciar visualmente maturidade dos dois produtos
   sem inventar um novo componente de botão. */
.solutions__soft-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-weight: 500;
  /* Correção 3 adicional (2026-10-08): era 0.875rem (14px) — subido para
     1rem (16px). Nota: classe sem uso no HTML atual (verificado, nenhum
     elemento a referencia hoje); ajustada mesmo assim por já estar listada
     entre os seletores abaixo de 16px a corrigir. */
  font-size: 1rem;
  color: var(--verde-pastel);
  text-decoration: none;
  border-bottom: 1px solid rgba(178, 194, 185, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.solutions__soft-link:hover,
.solutions__soft-link:focus-visible {
  border-bottom-color: var(--verde-pastel);
}

/* .seam-products (linha fina para transição escura→escura entre Bússola e
   Bunker) foi REMOVIDA na correção de contraste de 2026-10-08: a transição
   deixou de ser escura→escura porque o Bunker passou a ter fundo claro —
   agora usa a curva .seam-to-light (ver bloco de transições no topo deste
   arquivo e o HTML em index.html). Regra removida para não deixar CSS
   órfão; se precisar recuperar o padrão de linha fina, ver histórico git
   deste arquivo. */

/* ---------- Faixa secundária: menção ao Bunker (.bunker-note) ----------
   Correção de hierarquia (2026-10-08, "Correção 2" — autorizada pelo
   fundador): direcionamento explícito recebido: a Bússola é o produto
   mais importante do site nesse primeiro momento, o site deve chamar
   toda a atenção pra ela; o Bunker deve ser apenas uma citação
   secundária de produto em teste/desenvolvimento.

   Isso substitui TODO o bloco ".bunker" da rodada anterior (seção
   própria, layout assimétrico em 2 colunas, painel "log de sistema" com
   status/readout/pulse, facet decorativo) — removido por inteiro (ver
   histórico git deste arquivo se precisar recuperar o registro
   anterior). No lugar, uma faixa única, estreita, sem grid assimétrico
   e sem painel: eyebrow pequeno + 1 frase + 1 link, em um único bloco
   inline que quebra para coluna só no mobile. Mantido o fundo Off-White
   (mesmo token --off-white) com um traço discreto de Amarelo Suave
   (acento, não fundo dominante) — o suficiente para diferenciar do preto
   da seção da Bússola logo acima, sem repetir a pompa visual de seção
   completa que essa faixa está substituindo. Altura total da faixa é uma
   fração pequena da altura da seção da Bússola (ver teste visual no
   relatório de entrega). */
/* ---------- Faixa secundária: menção ao Bunker (.bunker-note) ----------
   Correção 2 de hierarquia (2026-10-08): faixa estreita (1 frase + 1
   link), substituindo a antiga seção própria do Bunker — ver histórico
   git deste arquivo para esse registro anterior.

   Correção 1 (2026-10-08, autorizada pelo fundador, nova rodada de
   revisão visual ao vivo): o fundador achou essa faixa ILEGÍVEL e de
   copy fraca. Mudanças:
   - .bunker-note__eyebrow ("Também em construção") foi REMOVIDO por
     inteiro — não sobra nenhum rótulo acima da frase, só frase + link
     (ver index.html). Regra de CSS removida junto (era só o estilo
     desse rótulo que não existe mais).
   - .bunker-note__text e .bunker-note__link subiram de 0.9375rem/
     0.875rem (15px/14px) para 1rem (16px) — corpo de texto nunca abaixo
     de 16px (decisão de acessibilidade permanente,
     decisoes/2026-10-08-acessibilidade-premissa-permanente.md,
     repositório Consultoria). Contraste de ambos sobre --off-white já
     media acima de AA mesmo antes (cinza-chumbo 7.2:1, preto-antifragil
     12.33:1) — não precisou de ajuste de cor, só de tamanho.
   - Espaçamento vertical da faixa subiu um pouco (sp-3 → sp-4) para dar
     mais respiro à frase única que ficou mais proeminente sem o rótulo
     acima — ainda uma fração pequena da altura da seção da Bússola. */
.bunker-note {
  position: relative;
  background: var(--off-white);
  border-top: 1px solid rgba(217, 197, 131, 0.4);
  border-bottom: 1px solid rgba(69, 82, 89, 0.08);
  padding: var(--sp-4) 0;
}
.bunker-note__inner {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--sp-3);
  row-gap: var(--sp-2);
}
.bunker-note__text {
  flex: 1 1 360px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--cinza-chumbo);
  margin: 0;
}
.bunker-note__text strong { font-weight: 500; color: var(--preto-antifragil); }
.bunker-note__link {
  flex: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--preto-antifragil);
  text-decoration: none;
  border-bottom: 1px solid var(--amarelo-suave);
  padding-bottom: 1px;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease);
}
.bunker-note__link:hover,
.bunker-note__link:focus-visible {
  opacity: 0.65;
}

/* ticker kinético — único ponto de texto em movimento da página, igual
   decisão do protótipo (1 só lugar com motion-type, resto estático) */
.solutions__ticker {
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--off-white);
  height: 26px;
  overflow: hidden;
  position: relative;
  margin-top: var(--sp-2);
}
.solutions__ticker-item {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  opacity: 0; transform: translateY(12px);
  animation: solutions-ticker 9s linear infinite;
}
.solutions__ticker-item::before { content: "→ "; color: var(--amarelo-suave); margin-right: 6px; }
.solutions__ticker-item:nth-child(1) { animation-delay: 0s; }
.solutions__ticker-item:nth-child(2) { animation-delay: 3s; }
.solutions__ticker-item:nth-child(3) { animation-delay: 6s; }
@keyframes solutions-ticker {
  0% { opacity: 0; transform: translateY(12px); }
  4% { opacity: 1; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(0); }
  36% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 0; }
}

/* ---------- Pilares (claro) ---------- */
.pillars { padding: var(--sp-12) 0; background: var(--off-white); }
.pillars__head { max-width: 640px; margin: 0 auto var(--sp-6); text-align: center; }
.pillars__head .eyebrow { margin-bottom: var(--sp-2); }
.pillars__head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--preto-antifragil);
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  margin-bottom: var(--sp-3);
}
.pillars__head p { font-family: var(--font-body); font-size: 1rem; color: var(--cinza-chumbo); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-6); }
.pillar-card {
  background: #fff;
  border: 1px solid rgba(69, 82, 89, 0.12);
  border-top: 3px solid var(--verde-pastel);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-4);
}
.pillar-card:nth-child(2) { border-top-color: var(--amarelo-suave); }
.pillar-card:nth-child(3) { border-top-color: var(--cinza-chumbo); }
/* Correção 3 (2026-10-08, autorizada pelo fundador — ativos/marca/
   branding.md, repositório Consultoria, revisão de 2026-10-08):
   .pillar-card__tag (rótulo pequeno com o nome antigo do pilar —
   Antifragilidade/Maestria Boutique/Vanguarda Estratégica) foi REMOVIDO
   do HTML e, aqui, do CSS — o word grande (.pillar-card__word) já era o
   "corpo" de cada card e agora é o único rótulo, sem precisar de tag
   duplicada acima. Ver histórico git deste arquivo para o registro
   anterior do seletor. */
.pillar-card__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  color: var(--preto-antifragil);
  line-height: 1.05;
}
.pillar-card__word::after {
  content: "";
  display: block;
  width: 40px; height: 3px;
  margin-top: var(--sp-3);
  background: var(--verde-pastel);
  opacity: 0.7;
}
.pillar-card:nth-child(2) .pillar-card__word::after { background: var(--amarelo-suave); }
.pillar-card:nth-child(3) .pillar-card__word::after { background: var(--cinza-chumbo); }
/* Correção 4 (2026-10-08): era 0.9375rem (15px) — corpo de texto nunca
   abaixo de 16px (decisão de acessibilidade permanente). */
.pillar-card p { font-family: var(--font-body); font-size: 1rem; color: var(--cinza-chumbo); margin-top: var(--sp-3); }

/* ---------- FAQ (claro) ---------- */
.faq { padding: 0 0 var(--sp-12); background: var(--off-white); }
.faq__head { max-width: 640px; margin: 0 auto var(--sp-6); text-align: center; }
.faq__head .eyebrow { margin-bottom: var(--sp-2); }
.faq__head h2 { font-family: var(--font-display); font-weight: 300; color: var(--preto-antifragil); font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.faq__list { max-width: 740px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { background: #fff; border: 1px solid rgba(69, 82, 89, 0.12); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-4); }
.faq-item h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; color: var(--preto-antifragil); margin-bottom: var(--sp-1); }
/* Correção 4 (2026-10-08): era 0.9375rem (15px) — corpo de texto nunca
   abaixo de 16px (decisão de acessibilidade permanente). */
.faq-item p { font-family: var(--font-body); font-size: 1rem; color: var(--cinza-chumbo); line-height: 1.6; }

/* ---------- Responsivo ---------- */
@media (max-width: 1023px) {
  .solutions__bento { grid-template-columns: 1fr; grid-template-rows: auto; }
  .pillars__grid { grid-template-columns: 1fr; }
}

/* Bug reportado pelo fundador (revisão mobile, 2026-10-08): .solutions__
   ticker tinha height:26px fixo pensado pra 1 linha; em telas estreitas
   as 3 frases do ticker quebram em 2 ou 3 linhas (o "→ " do ::before
   vira um item flex à parte, reduzindo a largura disponível pro texto —
   por isso quebra mais cedo do que pareceria num parágrafo normal) e a
   altura fixa + overflow:hidden cortava o texto. Medido de verdade via
   CDP (altura natural do texto, não estimativa): tickerWidth <= 216px
   (viewport <= ~330px, ex. iPhone SE 320px) quebra em 3 linhas (~84px);
   tickerWidth 221–391px (viewport ~335–505px, cobre 375 e 430 — as
   larguras de teste pedidas pelo fundador) quebra em 2 linhas (~56px);
   tickerWidth >= 396px (viewport >= ~510px) cabe em 1 linha (as 2
   colunas do bento em desktop/tablet ≥700px dão bastante largura, nunca
   quebram). Opção escolhida: (a) aumentar a altura do container pra
   caber todas as linhas — (b) reduzir font-size o bastante pra caber 1
   linha em 320px exigiria cair bem abaixo de 16px (ilegível num
   mono-font) e (c) truncar com ellipsis cortaria a frase (ela é o
   conteúdo, não decoração). O keyframe de slide (translateY) não muda —
   desliza o item inteiro, independe de quantas linhas o texto ocupa. */
@media (max-width: 520px) {
  .solutions__ticker { height: 56px; }
  .solutions__ticker-item { align-items: flex-start; }
}
@media (max-width: 330px) {
  .solutions__ticker { height: 84px; }
}

/* Faixa do Bunker (.bunker-note): só precisa de 1 ajuste em mobile —
   eyebrow, texto e link empilham em coluna em vez da linha única de
   desktop (o layout flex com flex-wrap já cuida da quebra de linha;
   align-items: baseline fica estranho quando empilhado, então vira
   flex-start). Removidos nesta rodada (correção de hierarquia
   2026-10-08) os ajustes responsivos antigos de .bunker__inner/
   .bunker__head/.bunker__panel/.bunker__facet — classes que não existem
   mais (ver bloco ".bunker-note" acima e histórico git). */
@media (max-width: 600px) {
  .bunker-note__inner { align-items: flex-start; }
}

@media (min-width: 600px) {
  .pillars__grid { grid-template-columns: repeat(3, 1fr); }
}