/* ==========================================================================
   IMPACTO — camada de movimento
   Complementa impacto-tokens.css, que já descrevia o contrato de movimento
   (.reveal, .reveal-group, .odometer, .site-nav.is-stuck, o wipe do
   .highlight-green) mas não tinha runtime nenhum. Aqui está o estilo; o motor
   está em impacto-motion.js.

   ⚠️ POR QUE ATRIBUTOS E NÃO CLASSES
   O conteúdo é renderizado por React (support.js), que traduz `class` para
   `className` e, a cada re-render, reescreve o className inteiro do nó —
   apagando qualquer classe adicionada em tempo de execução. Estados de
   movimento aplicados por JS moram, portanto, em atributos data-*, que o React
   não gerencia e não apaga. As classes do contrato original continuam válidas
   para o que já vem marcado no HTML.

   Regra da marca preservada: MOVIMENTO REVELA, NUNCA ESCONDE. Sem JS, a classe
   .js não entra no <html>, nenhum seletor abaixo casa, e tudo fica visível.
   ========================================================================== */

/* ---------- 1. Revelação em rolagem ---------- */
.js [data-rv] {
  opacity: 0;
  transform: translateY(var(--rise-block));
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  will-change: opacity, transform;
}
.js [data-rv="card"]  { transform: translateY(var(--rise-card)); }
.js [data-rv="left"]  { transform: translate3d(-24px, 0, 0); }
.js [data-rv="right"] { transform: translate3d(24px, 0, 0); }
.js [data-rv="scale"] { transform: scale(.97); }
.js [data-rv-in]      { opacity: 1; transform: none; }

/* Escalonamento — o índice vem em data-rv-i, não em style, pelo mesmo motivo */
.js [data-rv-i="1"] { transition-delay: calc(1 * var(--stagger)); }
.js [data-rv-i="2"] { transition-delay: calc(2 * var(--stagger)); }
.js [data-rv-i="3"] { transition-delay: calc(3 * var(--stagger)); }
.js [data-rv-i="4"] { transition-delay: calc(4 * var(--stagger)); }
.js [data-rv-i="5"] { transition-delay: calc(5 * var(--stagger)); }
.js [data-rv-i="6"] { transition-delay: calc(6 * var(--stagger)); }
.js [data-rv-i="7"] { transition-delay: calc(7 * var(--stagger)); }

/* Grifo verde: wipe da esquerda para a direita ao entrar em cena */
.js .highlight-green { background-size: 0% 100%; background-repeat: no-repeat; }
.js .highlight-green[data-hg-in] {
  background-size: 100% 100%;
  transition: background-size var(--dur-slow) var(--ease-out);
}

/* Odômetro — a parada é disparada por atributo */
.odometer > span:not(.odometer__col) { white-space: pre; }
.js .odometer[data-odo-in] .odometer__col > span { transform: translateY(calc(var(--d) * -1em)); }

/* ---------- 2. Barra de progresso de leitura ---------- */
.dc-progress {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--color-green), var(--color-green-dark));
  z-index: 90; pointer-events: none; will-change: transform;
}

/* ---------- 3. Navegação ---------- */
.site-nav {
  will-change: transform;
  transition: transform var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              backdrop-filter var(--dur-base) var(--ease-out);
}
.site-nav[data-stuck] {
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border), 0 8px 28px rgba(20, 20, 42, .06);
}
.js .site-nav[data-nav-hidden] { transform: translateY(-102%); }

/* ---------- 4. Cards: elevação + acento verde ---------- */
.card, [data-card] {
  position: relative;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.card::after, [data-card]::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--color-green); border-radius: 2px;
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.card:hover, [data-card]:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(20, 20, 42, .10); }
.card:hover::after, [data-card]:hover::after { transform: scaleY(1); }
.on-dark .card:hover, .on-dark [data-card]:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); }

/* ---------- 5. Botões: varredura de brilho ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .40) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.btn:hover::before { transform: translateX(120%); }
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--secondary:hover { border-color: var(--color-green); }
.on-dark .btn--secondary:hover { border-color: var(--color-green); color: var(--color-white); }

.dc-arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
a:hover .dc-arrow, .btn:hover .dc-arrow { transform: translateX(4px); }

/* ---------- 6. Brilho que segue o ponteiro em seções escuras ---------- */
.on-dark[data-glow] { position: relative; isolation: isolate; }
.on-dark[data-glow]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 0%),
              rgba(26, 237, 159, .11), transparent 62%);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.on-dark[data-glow][data-lit]::before { opacity: 1; }
.on-dark[data-glow] > * { position: relative; z-index: 1; }

/* ---------- 7. Formas decorativas do hero ---------- */
@keyframes dc-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(5deg); }
}
@keyframes dc-morph {
  0%, 100% { border-radius: 62% 38% 54% 46% / 48% 56% 44% 52%; }
  50%      { border-radius: 44% 56% 38% 62% / 58% 42% 58% 42%; }
}
.js [data-float] { animation: dc-float 9s var(--ease-in-out) infinite, dc-morph 15s var(--ease-in-out) infinite; }
.js [data-float="slow"] { animation-duration: 13s, 19s; animation-delay: -4s, -6s; }

/* ---------- 8. Mural de logos (marquee 100% CSS) ---------- */
.logo-wall { position: relative; overflow: hidden; padding: var(--space-2) 0; }
.logo-wall::before, .logo-wall::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(48px, 9%, 140px); z-index: 2; pointer-events: none;
}
.logo-wall::before { left: 0;  background: linear-gradient(90deg,  var(--bg), transparent); }
.logo-wall::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.logo-wall--muted::before { background: linear-gradient(90deg,  var(--bg-muted), transparent); }
.logo-wall--muted::after  { background: linear-gradient(270deg, var(--bg-muted), transparent); }

.logo-track { display: flex; align-items: center; gap: clamp(28px, 4.5vw, 64px); width: max-content; }
.js .logo-track { animation: dc-marquee 68s linear infinite; }
.logo-wall:hover .logo-track, .logo-wall:focus-within .logo-track { animation-play-state: paused; }
@keyframes dc-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

.logo-item {
  flex: 0 0 auto; display: grid; place-items: center;
  height: 84px; width: clamp(124px, 12vw, 168px);
}
.logo-item img {
  max-height: 48px; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(100%); opacity: .72;
  transition: filter var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.logo-item:hover img, .logo-item:focus-visible img { filter: grayscale(0%); opacity: 1; transform: scale(1.06); }

/* ---------- 9. Molduras de imagem ---------- */
.dc-frame { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-panel); }
.dc-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dc-frame--contain { background: var(--bg-muted); }
.dc-frame--contain img { object-fit: contain; }

.dc-shot {
  border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 24px 60px rgba(20, 20, 42, .12);
  transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.dc-shot img { display: block; width: 100%; height: auto; }
.dc-shot:hover { transform: translateY(-6px); box-shadow: 0 32px 72px rgba(20, 20, 42, .18); }
.on-dark .dc-shot { border-color: rgba(255, 255, 255, .10); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }

/* ---------- 9b. Crédito de foto ---------- */
.dc-frame { position: relative; }
.dc-credit {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body); font-size: 12px; letter-spacing: var(--tracking-small);
  color: rgba(255, 255, 255, .88);
  background: linear-gradient(0deg, rgba(20, 20, 42, .72), transparent);
}

/* ---------- 9c. Painel gráfico da marca ----------
   Onde ainda não existe fotografia real, entra geometria da marca — nunca
   banco de imagens e nunca silhueta cinza. O motivo é o rastro: um caminho com
   nós, que é literalmente o que a plataforma faz com o recurso. */
.dc-brandpanel {
  position: relative; overflow: hidden; border-radius: var(--radius-md);
  background:
    radial-gradient(90% 120% at 82% 8%,  rgba(26, 237, 159, .22), transparent 58%),
    radial-gradient(70% 90%  at 12% 92%, rgba(143, 0, 255, .16),  transparent 60%),
    var(--color-gray-100, #14142A);
  min-height: 220px;
}
.dc-brandpanel::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 120% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 30%, transparent 78%);
}
.dc-brandpanel::after {
  content: ""; position: absolute;
  width: 56%; aspect-ratio: 1; right: -12%; top: -14%;
  border: 1.5px solid rgba(26, 237, 159, .38);
  border-radius: 62% 38% 54% 46% / 48% 56% 44% 52%;
}
.js .dc-brandpanel::after { animation: dc-morph 18s var(--ease-in-out) infinite; }
.dc-brandpanel[data-variant="2"] {
  background:
    radial-gradient(80% 110% at 18% 12%, rgba(26, 237, 159, .26), transparent 56%),
    radial-gradient(80% 90%  at 88% 86%, rgba(0, 185, 112, .18), transparent 60%),
    var(--color-gray-100, #14142A);
}
.dc-brandpanel[data-variant="2"]::after { right: auto; left: -14%; bottom: -16%; top: auto; width: 46%; }
.dc-brandpanel[data-variant="3"] {
  background:
    radial-gradient(100% 100% at 50% 0%, rgba(143, 0, 255, .20), transparent 55%),
    radial-gradient(80% 100% at 80% 100%, rgba(26, 237, 159, .24), transparent 58%),
    var(--color-gray-100, #14142A);
}
.dc-brandpanel[data-variant="3"]::after { width: 40%; right: 8%; top: 26%; }

/* ---------- 9d. Logo de parceiro em card ---------- */
.dc-logo { display: grid; place-items: center start; width: 100%; height: 100%; }
.dc-logo img { max-height: 56px; max-width: 220px; width: auto; object-fit: contain; }
.dc-wordmark {
  display: grid; place-items: center start; width: 100%; height: 100%;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 3vw, 34px); letter-spacing: var(--tracking-display);
  color: var(--fg);
}
.on-dark .dc-wordmark { color: var(--fg-on-dark); }

/* ---------- 10. Retrato pendente: marca, nunca imagem quebrada ---------- */
.dc-portrait {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden;
  background: radial-gradient(120% 120% at 20% 0%, rgba(26, 237, 159, .16), transparent 55%), var(--bg-panel);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.on-dark .dc-portrait {
  background: radial-gradient(120% 120% at 20% 0%, rgba(26, 237, 159, .18), transparent 55%), rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
}
.dc-portrait__initials {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(22px, 3vw, 34px); letter-spacing: var(--tracking-display);
  color: var(--fg-body);
}
.on-dark .dc-portrait__initials { color: rgba(255, 255, 255, .70); }
.dc-portrait::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--color-green);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-slow) var(--ease-out);
}
.dc-portrait:hover::after { transform: scaleX(1); }

/* ---------- 11. Transição entre páginas ---------- */
.js body { transition: opacity 200ms var(--ease-out); }
.js body[data-leaving] { opacity: 0; }

/* ---------- 12. Ancoragem suave ----------
   Escopado a no-preference: com scroll-behavior: smooth global, qualquer
   window.scrollTo() vira animação — inclusive os de scripts de terceiros. */
html { scroll-padding-top: 104px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- 13. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-rv] { opacity: 1 !important; transform: none !important; }
  .js .highlight-green { background-size: 100% 100% !important; }
  .js .logo-track, .js [data-float] { animation: none !important; }
  .dc-progress { display: none; }
  .btn::before { display: none; }
  .card:hover, [data-card]:hover, .dc-shot:hover, .btn:hover { transform: none; }
  .on-dark[data-glow]::before { display: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   14. REPAROS DE RESPONSIVIDADE
   O export do canvas de design gravou width/height em pixels dentro do style
   de vários títulos e parágrafos (ex.: o h1 da home vinha com width: 706px).
   Em telas estreitas isso estoura a página horizontalmente. Aqui a largura
   volta a ser fluida sem tocar nos max-width em ch, que são decisão
   tipográfica legítima e continuam valendo por virem inline.
   ========================================================================== */
main h1, main h2, main h3, main h4, main h5, main p, main figure, main blockquote {
  width: auto !important;
  height: auto !important;
}
main img, main svg, main figure { max-width: 100%; }

/* Tabelas largas rolam dentro do próprio bloco em vez de arrastar a página */
@media (max-width: 900px) {
  main table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Nada na página pode gerar rolagem horizontal */
html, body { overflow-x: clip; }

/* ---------- REVISÃO SET/2026 ----------
   1. O grifo verde era inline-block: em trechos de duas palavras ("seus números",
      "cinco portas", "prova pública") o bloco inteiro pulava de linha e deixava
      vírgula ou ponto órfão na linha seguinte. Inline + box-decoration-break
      mantém o grifo em cada fragmento e a pontuação colada. */
.highlight-green {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* 2. Campos com width: 100% + padding estouravam o card em ~16px. */
main input, main select, main textarea { box-sizing: border-box; max-width: 100%; }

/* Mural: o degradê das bordas vira máscara (funciona sobre qualquer fundo) e
   logos com fundo branco somem no fundo claro (parte BC). */
html .logo-wall { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(48px, 9%, 140px), #000 calc(100% - clamp(48px, 9%, 140px)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 clamp(48px, 9%, 140px), #000 calc(100% - clamp(48px, 9%, 140px)), transparent 100%); }
html .logo-wall::before, html .logo-wall::after { content: none; }
html .logo-wall { background: rgb(239, 240, 246); }
html .logo-track { background: inherit; }
html .logo-item img { mix-blend-mode: multiply; }
.on-dark .logo-item img { mix-blend-mode: normal; }

/* Mural: logos quadrados ou com respiro interno ganham altura própria (parte BD). */
html .logo-item { height: 92px; }
html .logo-item img[src$="pwc.svg"] { height: 66px; max-height: none; transform: scale(1.55); }
html .logo-item img[src$="microsoft.svg"] { height: 54px; max-height: none; }
html .logo-item img[src$="civico.webp"] { height: 58px; max-height: none; }
html .logo-item img[src$="caring-family.webp"] { height: 78px; max-height: none; }
html .logo-item img[src$="pucrio.svg"] { height: 66px; max-height: none; }
html .logo-item img[src$="latam-cargo.svg"] { height: 84px; max-height: none; }
html .logo-item img[src$="jcr.svg"] { height: 56px; max-height: none; }
html .logo-item img[src$="itau-bba.svg"] { height: 54px; max-height: none; }
html .logo-item img[src$="instituto-crianca.svg"] { height: 54px; max-height: none; }
html .logo-item img[src$="qualicorp.svg"] { height: 50px; max-height: none; }
html .logo-item img[src$="grupo-jca.webp"] { height: 50px; max-height: none; }
html .logo-item:hover img[src$="pwc.svg"], html .logo-item:focus-visible img[src$="pwc.svg"] { transform: scale(1.64); }

/* parte BM: assinatura horizontal da Olhar Social no mural */
html .logo-item img[src$="olhar-social-lockup.svg"] { height: 36px; max-height: none; max-width: none; }