/* ============================================================
   Market Masters — Wireframe de EXPERIÊNCIA (escala de cinza)
   Sem cor de marca e sem 3D final. Tipografia: Creato Display.
   O que carrega a experiência: composição, ritmo e movimento.
   ============================================================

   AUDITORIA TIPOGRÁFICA (2026-07-02) — padrão final por tipo de elemento.
   Tokens em :root: --lh-tight, --lh-body, --fs-eyebrow/--ls-eyebrow,
   --fs-chip/--ls-chip. Sem palavras órfãs: `h1,h2,h3{text-wrap:balance}`
   e `p{text-wrap:pretty}` globais (linha ~44) cobrem o site inteiro
   automaticamente; textos mais longos (parágrafos, quotes, CTAs extensos)
   também têm   manual entre as duas últimas palavras no HTML, como
   fallback pra Safari/Firefox (ainda sem suporte a `text-wrap:pretty`).

   • H1 (.hero-title)                 800 · clamp(2.8-9.5rem) · lh .92  · ls -.04em
   • H2 padrão (.comm-title,
     .feedback-title, .contact-title) 800 · clamp(~1.8-4.5rem) · lh var(--lh-tight)=1.04 · ls -.03em
   • H2 exceção (.inco-title)         800 · clamp(1.8-3.6rem) · lh 1.15 (não usa o token:
     título pode reflow em 3 linhas dentro do flex H1+CTA+vídeo, sem overflow:hidden,
     por isso precisa de mais folga vertical — ver comentário na própria regra)
   • H3 de card (.prog-title)         800 · clamp(1.9-3.4rem) · lh 1.02 · ls -.02em
     (mini-heading dentro do card de Programa, um degrau abaixo do H2 de seção)
   • H3 pequeno (.pillar h3)          700 · clamp(1.1-1.3rem) · lh padrão do body (1.5)
     (rótulo de feature, hierarquia bem menor que os H3 de card)
   • Eyebrow plano (.kicker,
     .footer-col h4)                  var(--fs-eyebrow)=.78rem · ls var(--ls-eyebrow)=.1em · uppercase
   • Eyebrow em chip/badge (.prog-tag,
     .pillar-num, .feedback-badge)    var(--fs-chip)=.74rem · ls var(--ls-chip)=.12em · uppercase · pill c/ borda
     (mesmo papel do eyebrow plano, mas com o tratamento visual de badge —
     por isso token de tamanho/tracking próprio, não o mesmo do kicker)
   • Corpo de apoio / subheadline     line-height var(--lh-body)=1.6 em TODOS: .hero-lede,
     (opacidade reduzida)             .prog-desc, .comm-lead, .comm-intro p, .pillar p, .inco-body,
                                       .feedback-subtitle, .contact-sub, .quote p, .g-chip span, .note
     (era 1.5 herdado do body, ou valores soltos 1.55/1.6 conforme a seção — consolidado)
   • Botão (.btn + variantes)         600 · .9rem · text-wrap:balance (rede de segurança p/ CTA longo)
   • .helper-band p / .programs-head .idx  ficam FORA do grupo "corpo de apoio": são texto
     de peso 600 e opacidade plena (não muted), mais perto de um lead/prompt do que de uma
     descrição secundária — por isso mantêm o line-height padrão do body (1.5), não o --lh-body
   • .tick (meta do topo do Hero) e .scroll-cue ficam FORA do grupo eyebrow/chip: são
     rótulos de UI específicos daquele componente (faixa de meta do Hero, indicador de
     scroll), não "eyebrow antes de um título" — mantidos com valor próprio, documentado
     aqui em vez de forçar um token que não reflete o mesmo papel
   ============================================================ */

/* Creato Display — soltar os .woff2 em ./fonts/ para ativar */
@font-face {
  font-family: "Creato Display";
  src: url("fonts/CreatoDisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("fonts/CreatoDisplay-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Creato Display";
  src: url("fonts/CreatoDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
/* Faltava esta face — causa raiz do "site inteiro fino": todo título com
   font-weight:800 (H1 da Hero, H2 de seção, prog-title, etc.) não tinha face
   própria pra esse peso, então o browser usava a face Bold(700) mais
   próxima como substituta. Arquivo já estava em fonts/ desde a instalação
   anterior, só faltava esta declaração. */
@font-face {
  font-family: "Creato Display";
  src: url("fonts/CreatoDisplay-ExtraBold.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --bg:     #0b0b0c;
  --bg-2:   #131315;
  --paper:  #ededed;               /* painel invertido (contraste de massa) */
  --ink:    #f2f2f3;
  --ink-dk: #16161a;               /* texto sobre painel claro */
  --muted:  rgba(242,242,243,.56);
  --faint:  rgba(242,242,243,.30);
  --line:   rgba(242,242,243,.14);
  --line-dk: rgba(20,20,26,.16);

  --font: "Creato Display", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pad: clamp(24px, 8vw, 140px);   /* padrão horizontal único: ~100-140px no desktop, mesmo valor em toda seção */
  --section-stack-gap: 40px;        /* gap vertical único entre elementos empilhados (ex: H1 -> CTA no In-Company) */
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ---- Tipografia: tokens compartilhados (ver resumo completo no topo do arquivo) ---- */
  --lh-tight: 1.04;   /* H2 de seção (título grande, hierarquia .comm-title/.feedback-title/.contact-title) */
  --lh-body:  1.6;    /* corpo de apoio / subheadline / texto de opacidade reduzida, em toda seção */
  --fs-eyebrow: .78rem; /* label pequeno em texto corrido: kicker, h4 de rodapé */
  --ls-eyebrow: .1em;
  --fs-chip: .74rem;    /* badge/chip com borda: prog-tag, pillar-num, feedback-badge */
  --ls-chip: .12em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Sem palavras órfãs: balanceia headings automaticamente (H1-H3, cobre toda seção
   já que os títulos usam tags semânticas) e aprimora quebra de parágrafos onde o
   browser suporta (Chrome/Edge hoje; Safari/Firefox caem no wrap padrão, por isso
   os textos mais longos também recebem   manual entre as duas últimas
   palavras como fallback garantido — ver HTML). */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  overflow-x: clip;              /* clip (não hidden) para não quebrar position: sticky */
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* -------- faixa de fase + barra de progresso -------- */
.wf-ribbon {
  position: relative; z-index: 40;
  background: #000; color: #cfcfd2;
  font-size: .72rem; letter-spacing: .03em; text-align: center;
  padding: 7px 14px; border-bottom: 1px solid var(--line);
}
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: var(--ink); z-index: 60;
}

/* -------- luz monocromática (profundidade) -------- */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(100px); will-change: transform; }
.glow-1 { width: 58vw; height: 58vw; top: -18vw; right: -12vw;
  background: radial-gradient(circle at 40% 40%, rgba(255,255,255,.12), transparent 62%); }
.glow-2 { width: 46vw; height: 46vw; bottom: -14vw; left: -12vw;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.07), transparent 64%); }

/* -------- placeholders neutros -------- */
.ph-mark, .ph-logo, .ph-tag, .ph-avatar, .ph-photo {
  display: inline-grid; place-items: center;
  color: var(--faint); font-size: .7rem; letter-spacing: .04em;
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--line);
}
.ph-mark { width: 34px; height: 22px; border-radius: 3px; }
.ph-tag { padding: 4px 10px; border-radius: 4px; }

/* etiquetas de seção (some na fase visual) */
[data-sec] { position: relative; }
[data-sec]::before {
  content: attr(data-sec);
  position: absolute; top: 14px; left: var(--pad); z-index: 8;
  font-size: .66rem; letter-spacing: .08em; color: var(--faint);
  border: 1px solid var(--line); border-radius: 100px; padding: 3px 10px;
}
.invert[data-sec]::before { color: rgba(20,20,26,.5); border-color: var(--line-dk); }

/* ============ Botões ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font); font-weight: 600; font-size: .9rem;
  padding: 14px 28px; border-radius: 100px; cursor: pointer;
  position: relative; overflow: hidden; text-wrap: balance;
  /* isolation: prende o ::before de gradiente (z-index:-1, ver hovers da
     FASE 2) dentro do botão — sem isso o pseudo cairia atrás do botão
     inteiro e o gradiente sumiria. Não afeta layout. */
  isolation: isolate;
  /* line-height explícito: <button> reseta line-height pra "normal" na UA e
     ficava ~4px mais baixo que os <a>. Fixado em 1.5 pra que qualquer elemento
     usando .btn (a ou button) tenha a MESMA altura do botão aprovado da Hero. */
  line-height: 1.5;
}
.btn-solid { background: var(--ink); color: #0b0b0c; }
.btn-line { border: 1px solid var(--line); color: var(--ink); transition: border-color .3s; }
.btn-line:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink-dk); color: var(--paper); }
.btn-block { width: 100%; margin-top: 8px; }
/* Botão Terciário (Figma 310:316) — variante global reutilizável. Padrão: fundo
   claro sólido #F3F1FB, texto #212024. Hover: fundo "transparente" (revela o
   fundo do card #161619) + stroke 1px em gradiente diagonal claro→roxo→azul,
   texto #F3F1FB. O stroke em gradiente com radius pill usa o truque
   padding-box/border-box (border sólida não aceita gradiente): a 1ª camada
   (padding-box) é a cor real atrás do botão; a 2ª (border-box) é o gradiente,
   que só aparece na faixa da borda. Mantém tamanho/padding/tipografia de .btn. */
.btn-terciario {
  background: var(--mm-cc1); color: var(--mm-cinza-escuro);
  border: 1px solid transparent;
  transition: color .35s var(--ease), background-color .35s var(--ease);
}
.btn-terciario:hover {
  background:
    linear-gradient(var(--mm-preto), var(--mm-preto)) padding-box,
    linear-gradient(135deg, #F3F1FB 0%, #862EF2 51%, #3133B9 100%) border-box;
  color: var(--mm-cc1);
}
/* Botão Secundário (Figma 285:109) — variante global reutilizável. Padrão:
   outline sutil (borda cc1 a 30% de opacidade) sobre fundo transparente.
   Hover: o outline vira fill em gradiente diagonal (claro→roxo→azul), sem
   borda. Tipografia própria (Bold 16px/-0.32px, spec do componente Figma) —
   independente do peso/tamanho da .btn base, só esta variante usa isso.
   Padding/radius/altura continuam herdados de .btn, sem override aqui. */
.btn-secundario {
  font-weight: 700; font-size: 16px; letter-spacing: -.32px;
  color: var(--mm-cc1);
  border: 1px solid rgba(243, 241, 251, .3);
  background: transparent;
  transition: border-color var(--btn-trans);
}
/* PADRÃO 2: hover vira FILL com o gradiente APROVADO do Principal
   (--mm-grad-btn) — substituiu o gradiente próprio -40.94deg que tinha a
   cunha clara sob o texto branco (mesmo defeito do literal descartado).
   ::before + opacity = fade suave (background-image não transiciona). */
.btn-secundario::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--mm-grad-btn);
  opacity: 0; transition: opacity var(--btn-trans);
}
.btn-secundario:hover { border-color: transparent; }
.btn-secundario:hover::before { opacity: 1; }

/* ============ Header ============ */
.nav {
  position: fixed; top: 30px; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad); mix-blend-mode: difference;
}
.nav-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
/* display:contents = wrapper transparente ao layout: no desktop os filhos
   (.nav-links e .nav-cta) participam do flex do header exatamente como antes.
   No mobile (media ≤900) vira o painel do menu. */
.nav-menu { display: contents; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { font-size: .82rem; font-weight: 500; color: var(--muted); transition: color .3s; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { font-size: .82rem; font-weight: 500; border: 1px solid var(--line); border-radius: 100px; padding: 9px 18px; }
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; }
.nav-burger span { width: 24px; height: 2px; background: var(--ink); display: block; }

/* ============ HERO ============ */
.hero {
  position: relative; z-index: 1; min-height: 100svh;
  padding: 120px var(--pad) 0;
  display: grid; grid-template-rows: 1fr auto;
}
/* Coluna esquerda única: Badge → H1 → Subtexto → CTAs, todos com o MESMO
   gap entre si (sem margin individual quebrando a consistência). align-self:
   center faz esse bloco flutuar no meio da linha flexível do grid (1fr),
   igual o antigo hero-stage fazia só com o H1+objeto. */
.hero-left {
  align-self: center; position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 32px;
}
.tick { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.hero-title {
  font-weight: 800; font-size: clamp(2.8rem, 11vw, 9.5rem);
  line-height: .92; letter-spacing: -.04em; max-width: 15ch;
}
/* overflow:hidden/will-change removidos: existiam só pra mascarar a entrada
   animada via JS do H1 (removida — ver script.js, causa raiz de um bug
   intermitente). H1 é estático desde o primeiro paint; manter overflow:hidden
   sem propósito só arriscaria cortar um acento/descendente à toa. */
.hero-title .line { display: block; }
.hero-title .line > span { display: block; text-wrap: balance; }
/* outline removido do projeto: emphasis agora é filled, hierarquia por peso/escala */
.outline { color: var(--ink); }

/* .hero-object agora é filho direto de .hero (não mais aninhado dentro de um
   wrapper próprio), pra top:50%/translateY(-50%) centralizar relativo à
   seção inteira, não a um container menor. */
.hero-object {
  position: absolute; z-index: 1; top: 50%; right: 4vw; transform: translateY(-50%);
  width: clamp(200px, 32vw, 460px); aspect-ratio: 1; display: grid; place-items: center;
}
.obj-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 140deg, #2a2a2e, #cfcfd2, #ffffff, #3a3a3f, #2a2a2e);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
          mask: radial-gradient(circle, transparent 54%, #000 55%);
  animation: spin 28s linear infinite; opacity: .5;
}
.obj-core {
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #6f6f74 55%, #17171b);
  box-shadow: inset -14px -18px 40px rgba(0,0,0,.5);
}
.hero-object .ph-tag { position: absolute; bottom: -26px; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-lede { font-size: clamp(.98rem, 1.2vw, 1.12rem); line-height: var(--lh-body); color: var(--muted); max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }

.marquee {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden;
  padding-top: 40px; padding-bottom: 40px;
  line-height: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* display:flex (não inline-flex) + width:max-content: tira a track do fluxo
   de texto inline, então o padding-top/bottom acima é a única coisa que
   posiciona o conteúdo verticalmente — sem o "strut" invisível do line-height
   herdado nem baseline de elemento inline, que empurravam o conteúdo pra
   cima e deixavam o padding-bottom com efeito maior que o padding-top. */
.marquee-track { display: flex; width: max-content; align-items: center; white-space: nowrap; will-change: transform; animation: slide 40s linear infinite; }
.marquee-dup { display: contents; }
/* Alturas calibradas opticamente: logos com texto longo (Google, Microsoft,
   HubSpot, Dropbox, Adobe, Meta, Zippi, treble.ai) leem maiores que ícones
   compactos (Itaú, Nubank, 99) na mesma altura nominal — compensado aqui
   pra ter peso visual equivalente na faixa. */
.brand-logo { height: 28px; width: auto; flex: 0 0 auto; margin-right: 64px; display: block; }
.brand-logo--compact { height: 44px; }
/* Ajuste óptico fino por marca (passos de 4px sobre a altura-base da classe).
   Ícones compactos que pesavam demais: Nubank e 99 descem de 44 → 40.
   Wordmark que pesava demais: Meta desce de 28 → 24.
   Wordmarks que liam pequenos demais: Zippi, Google e treble.ai sobem de 28 → 32. */
.brand-logo--nubank { height: 40px; }
.brand-logo--n99    { height: 40px; }
.brand-logo--meta   { height: 24px; }
.brand-logo--zippi  { height: 32px; }
.brand-logo--google { height: 32px; }
.brand-logo--treble { height: 32px; }
@keyframes slide { to { transform: translateX(-50%); } }
/* ============ PROGRAMAS (scroll horizontal) ============ */
.programs {
  /* padding-top com mais folga que a nav fixa (era clamp 104/13vh/150 ≈ só
     20-30px de respiro abaixo da nav — apertado). Testado com o card real: a
     158px de folga sobrando abaixo do card em 1440x900, dá espaço de sobra
     pra esse aumento sem arriscar cortar o card durante o pin. */
  position: relative; z-index: 1; padding: clamp(140px,15vh,190px) 0 clamp(88px,10vh,120px);
  /* ritmo vertical da seção: mesmo valor usado nos dois "encontros" de bloco
     (header→cards e cards→rodapé), pra os dois gaps ficarem sempre iguais
     por construção, não por coincidência de dois números digitados à mão. */
  --prog-rhythm-gap: 52px;
}
/* SEM border-bottom aqui: era um divisor herdado do wireframe (var(--line), a
   cinza do wireframe) que desenhava uma linha horizontal no topo da faixa de
   cards. Removido na origem — cards se separam só por gap + contraste. */
.programs-head {
  display: flex; justify-content: space-between; align-items: baseline;
  /* padding-bottom = --prog-rhythm-gap: mesmo respiro do header até a fileira
     de cards que existe entre os cards e o rodapé (ver .helper-band). */
  padding: 0 var(--pad) var(--prog-rhythm-gap);
}
/* Desktop (>=901px, onde o scroll horizontal roda): título em LINHA ÚNICA.
   Testado em 1440px — cabe com ~735px de sobra antes do contador "01/03",
   sem compressão nem colisão. Sem max-width/wrap, que só existiam pra forçar
   a quebra em 2 linhas. */
.programs-head .idx { font-weight: 600; font-size: clamp(1rem,2vw,1.4rem); letter-spacing: -.01em; white-space: nowrap; }
.programs-head .idx-count { font-size: .82rem; color: var(--faint); font-variant-numeric: tabular-nums; }

.prog-viewport { overflow: hidden; }
/* gap entre cards + gutter (var(--pad)) nas duas pontas do track. O deslocamento
   do scroll horizontal é derivado de (track.scrollWidth - innerWidth) no JS, então
   estes valores recalculam o translateX automaticamente: card 1 começa inteiro
   (gutter esquerdo) e card 3 termina inteiro (gutter direito), sem corte lateral. */
.prog-track { display: flex; gap: 24px; padding-left: var(--pad); will-change: transform; }
/* gutter direito como pseudo-item flex (NÃO padding-right): o scrollWidth de um
   container flex ignora o padding-right, o que deixava o distance do scroll ~1
   gutter curto e cortava o card 3 no fim. Um ::after com flex-basis var(--pad) é
   uma caixa real, entra no scrollWidth, e o card 3 termina inteiro com folga. */
.prog-track::after { content: ""; flex: 0 0 var(--pad); align-self: stretch; }
.prog-panel {
  /* Largura RESPONSIVA com TETO. Nas telas estreitas (o 100% do usuário) o card
     vira calc(100vw - 2*--pad): respira com margem SIMÉTRICA = var(--pad) dos dois
     lados (alinhada ao título e ao contador do header) e não estoura as bordas. Nas
     telas largas o teto de 1040px segura o tamanho — sem isso a coluna da imagem
     (0.9fr do grid interno) inchava junto com a largura do card. O deslocamento do
     scroll horizontal deriva de (scrollWidth - innerWidth) no JS, medido ao vivo no
     refresh (invalidateOnRefresh + auto-cura do pin), então acompanha a largura. */
  position: relative; flex: 0 0 min(1040px, calc(100vw - 2 * var(--pad)));
  /* altura dirigida pelo CONTEÚDO (sem mais max-height acoplado à viewport, que
     era o que cortava/derramava a base do card quando o conteúdo passava do teto).
     min-height só dá presença; o card cresce com o conteúdo e o bg + radius
     envolvem tudo. O conteúdo cabe na viewport durante o pin porque o padding da
     seção foi enxugado e o título reduzido — não porque o card é espremido. */
  min-height: 480px;
  /* padding aumentado (era clamp 48/3.5vw/60 ≈ 50.4px em 1440 — justo demais,
     conteúdo colando na borda). Compensado por um título "um degrau" menor
     (ver .prog-title na FASE 2) pra não estourar a viewport no modo notebook
     (ver media query de altura curta logo abaixo). */
  padding: clamp(64px, 4.5vw, 76px);
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(48px,4vw,64px);
  align-items: stretch; border-radius: 16px;
}
/* placeholder de imagem/3D: preenche a altura da coluna de texto (align-items:
   stretch no card), sem sombra. */
.prog-visual {
  position: relative; z-index: 1; border-radius: 14px;
  border: 1px solid var(--mm-cinza);
  background: linear-gradient(160deg, #1a1a1e, #0c0c10);
  display: grid; place-items: center;
}
/* Corpo do card em COLUNA que preenche a altura do card (o card estica os dois
   lados por align-items:stretch, e o min-height 480 costuma deixar o texto mais
   curto que a imagem → sobrava um vão embaixo do CTA). space-between distribui o
   conteúdo ao longo da altura: título no topo, CTA no rodapé alinhado à base da
   imagem, e a folga extra repartida entre os blocos — o conteúdo passa a "seguir"
   a altura da imagem em vez de encostar no topo. */
.prog-body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.prog-title { font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.4rem); line-height: 1.02; letter-spacing: -.02em; margin-bottom: 20px; }
.prog-desc { color: var(--muted); line-height: var(--lh-body); max-width: 44ch; margin-bottom: 28px; }
.prog-facts { list-style: none; display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 30px; }
.prog-facts li { display: flex; flex-direction: column; }
.prog-facts strong { font-size: 1.4rem; font-weight: 800; }
.prog-facts span { font-size: .8rem; color: var(--faint); }

/* SEM border-top aqui: outro divisor herdado do wireframe (var(--line)) que
   desenhava a linha horizontal logo abaixo da faixa de cards. Removido na origem. */
.helper-band {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  /* margin-top = --prog-rhythm-gap: mesmo respiro que existe entre o header
     e a fileira de cards (.programs-head), aplicado aqui entre os cards e o
     rodapé — ritmo vertical consistente na seção. */
  margin: var(--prog-rhythm-gap) var(--pad) 0;
  padding: 26px 0;
}
.helper-band p { font-weight: 600; font-size: 1.05rem; }

/* ============ Utilitários compartilhados (kicker / note) ============ */
.kicker { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--muted); margin-bottom: 24px; }
.note { font-size: var(--fs-eyebrow); line-height: var(--lh-body); color: var(--faint); margin-top: 14px; }
.note.faint { opacity: .7; }

/* ============ COMUNIDADE ============ */
.community { position: relative; z-index: 1; padding: clamp(90px,13vh,170px) var(--pad) clamp(90px,13vh,180px); }

.comm-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(40px,6vw,90px); margin-bottom: clamp(48px,7vw,90px); }
.comm-head { flex: 0 1 auto; }
.comm-title { font-weight: 800; font-size: clamp(1.8rem,4.2vw,3.6rem); line-height: var(--lh-tight); letter-spacing: -.03em; margin-top: 18px; }
.comm-title .line { display: block; overflow: hidden; }
.comm-title .line > span { display: block; will-change: transform; text-wrap: balance; }
.comm-intro { flex: 0 1 46ch; display: grid; gap: 22px; max-width: 46ch; }
.comm-lead { font-size: clamp(1.1rem,1.5vw,1.35rem); font-weight: 500; line-height: var(--lh-body); letter-spacing: -.01em; }
.comm-intro p:last-child { color: var(--muted); line-height: var(--lh-body); }

/* galeria: 3 colunas lado a lado, espelhando o container do Figma (node
   329:162) — col1 é uma foto vertical única que ocupa a altura das outras
   duas colunas somadas (align-items:stretch faz isso: a track da linha vira
   a maior entre as 3, e col1 sem altura própria estica até lá); col2/col3
   são duas células empilhadas cada. Larguras proporcionais aos valores reais
   do Figma (820:652:652 via unidades fr — escala com o container, mantendo
   a MESMA proporção relativa). Gap 16px fixo e uniforme nas 3 direções: com
   32px a soma das células da col2/3 (417+375+gap) ficava mais alta que a col1
   (821), o stretch da linha re-derivava a largura da col1 pelo aspect-ratio e
   ela transbordava a track, comendo o gap horizontal (medido: 17px vs 32px).
   Com 16px as proporções do Figma fecham (col1 = stack col2/3) e os gaps
   ficam idênticos nas duas direções. */
.comm-gallery {
  display: grid; grid-template-columns: 820fr 652fr 652fr; gap: 16px;
  align-items: stretch; margin-bottom: clamp(64px,9vh,120px);
}
/* aspect-ratio explícito (valor literal do Figma, 820:821) em vez de confiar
   só no align-items:stretch da grid pra igualar a col2/3: sem uma altura
   própria e determinística, a contribuição "auto" da col1 pro cálculo da
   track da linha é guiada pelo aspect ratio INTRÍNSECO da foto (0.75), que é
   bem mais alto que o necessário — em alguns motores de layout isso infla a
   linha inteira além do que col2/3 precisam, esticando col1 e desalinhando
   o grid embaixo. Com aspect-ratio próprio, a altura de col1 é só função da
   sua própria largura — determinística, sem depender de stretch implícito. */
.bento-col1 { min-height: 0; aspect-ratio: 820 / 821; }
.bento-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* alturas proporcionais ao Figma (652:417 em cima, 652:375 embaixo) via
   aspect-ratio — escala com a largura responsiva da coluna, sem precisar de
   um breakpoint por tamanho de tela. */
.bento-top { aspect-ratio: 652 / 417; }
.bento-bottom { aspect-ratio: 652 / 375; }
.ph-photo { border-radius: 14px; }
.g-chip { border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); display: flex; flex-direction: column; justify-content: center; padding: clamp(18px,2vw,26px); }
.g-chip strong { font-size: clamp(1.8rem,2.6vw,2.6rem); font-weight: 800; line-height: 1; }
.g-chip span { font-size: .82rem; line-height: var(--lh-body); color: var(--faint); margin-top: 10px; max-width: 22ch; }

.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.6vw,24px); }
.pillar {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(24px,2.4vw,32px); display: flex; flex-direction: column;
}
.pillar-stars {
  align-self: flex-start; display: block;
  width: auto; height: 20px; /* proporção 51:15 preservada via viewBox */
  margin-bottom: 20px;
}
.pillar h3 { font-size: clamp(1.1rem,1.4vw,1.3rem); font-weight: 700; margin-bottom: 10px; letter-spacing: -.01em; }
.pillar p { color: var(--muted); font-size: .95rem; line-height: var(--lh-body); }

/* ============ IN-COMPANY (vídeo expandindo em full-bleed via pin) ============ */
.incompany.invert {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--paper); color: var(--ink-dk);
  min-height: 100vh;
}
.inco-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,6vw,80px);
  padding: clamp(110px,16vh,180px) var(--pad) clamp(80px,12vh,140px);
  min-height: 100vh; align-content: start;
}
.inco-left { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.invert .kicker { color: rgba(20,20,26,.55); margin: 0; }
/* corpo de apoio: o "top" não é chumbado. O JS mede a posição real do vídeo depois
   do layout (load / fontes / resize) e escreve em --inco-body-top, garantindo que o
   topo do texto bata com o topo real do vídeo, em 2 ou 3 linhas de H1. O fallback
   (--inco-body-top ainda não setada) evita salto antes do primeiro cálculo do JS. */
.inco-body { position: absolute; top: var(--inco-body-top, 52%); left: 0; color: rgba(20,20,26,.72); font-size: 1.1rem; line-height: var(--lh-body); max-width: 42ch; }

/* H1 + CTA + vídeo, todos no MESMO flex column, com gap único controlando o
   espaçamento entre os três. Nada de position:absolute nem cálculo manual:
   cada item nasce logo depois do anterior no fluxo normal, então o H1 quebrar
   em 2 ou 3 linhas empurra CTA e vídeo pra baixo automaticamente. */
.inco-right { display: flex; flex-direction: column; align-items: flex-start; gap: var(--section-stack-gap); }
/* line-height 1.15 é EXCEÇÃO deliberada ao token --lh-tight (1.04) dos outros H2 de seção:
   este título pode reflow pra mais de 3 linhas (H1+CTA+vídeo compartilham flex column,
   sem overflow:hidden), então precisa de mais folga vertical pra não comprimir o wrap. */
.inco-title { font-weight: 800; font-size: clamp(1.8rem,4.6vw,3.6rem); line-height: 1.15; letter-spacing: -.03em; }
.inco-title .line { display: block; }
.inco-title .line > span { display: block; text-wrap: balance; }

/* vídeo: SEMPRE position:absolute (nunca troca de position durante o scroll, o que
   eliminava a descontinuidade dos saltos/sumiço). Estado pequeno 100% em CSS (visível
   no load): abaixo do CTA, alinhado à coluna direita (mesma fórmula do left do H1).
   O JS refina o "top" pra ficar exatamente abaixo do CTA e anima top/left/width/height/
   border-radius até full-bleed num ÚNICO tween. Sem nenhuma transition CSS aqui. */
.inco-video {
  position: absolute; z-index: 3;
  top: 52%; left: calc(50% + clamp(15px,3vw,40px));
  width: min(44%, 620px); aspect-ratio: 16 / 9;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, #1a1a1e, #0c0c10);
  display: grid; place-items: center;
  will-change: transform;
}
.inco-video > .ph-tag { color: var(--faint); border-color: var(--line); background: rgba(255,255,255,.05); }
.inco-scrim {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.62), transparent 55%);
}
.inco-overlay {
  position: absolute; left: var(--pad); bottom: clamp(48px,9vh,96px); z-index: 2;
  margin: 0; opacity: 0; color: #fff; font-weight: 700;
  font-size: clamp(1.4rem,3vw,2.6rem); line-height: 1.12; letter-spacing: -.02em;
  max-width: 22ch; text-shadow: 0 2px 30px rgba(0,0,0,.35);
}

/* ============ DEPOIMENTOS (título sticky via CSS + linhas alternadas) ============ */
.feedback-section { position: relative; z-index: 1; }

/* título pinado apenas com position: sticky, sem nenhuma lógica de GSAP */
.feedback-header {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: transparent; z-index: 1; padding: 0 var(--pad);
}
/* eyebrow virou o componente Badge global (.hero-badge) — só o respiro fica aqui */
.feedback-header .hero-badge { margin-bottom: 22px; }
.feedback-title { font-weight: 800; font-size: clamp(2rem,5vw,4.4rem); line-height: var(--lh-tight); letter-spacing: -.03em; }
.feedback-subtitle { margin-top: 20px; color: var(--muted); font-size: .96rem; line-height: var(--lh-body); max-width: 38ch; }

/* linhas no fluxo normal, renderizando POR CIMA do título (z-index > header) */
.feedback-rows {
  position: relative; z-index: 11;
  padding: 0 var(--pad) clamp(90px,13vh,150px);
  display: flex; flex-direction: column; gap: clamp(80px,11vh,120px);
}
.feedback-row { display: flex; width: 100%; }
/* alternância esquerda / direita / centro, sem repetir a mesma posição em sequência */
.feedback-rows .feedback-row:nth-child(1) { justify-content: flex-start; }
.feedback-rows .feedback-row:nth-child(2) { justify-content: flex-end; }
.feedback-rows .feedback-row:nth-child(3) { justify-content: center; }
.feedback-rows .feedback-row:nth-child(4) { justify-content: flex-end; }
.feedback-rows .feedback-row:nth-child(5) { justify-content: flex-start; }
.feedback-rows .feedback-row:nth-child(6) { justify-content: center; }
.feedback-rows .feedback-row:nth-child(7) { justify-content: flex-start; }
.feedback-rows .feedback-row:nth-child(8) { justify-content: flex-end; }

.quote {
  width: 410px; max-width: 100%; padding: 36px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2);
  display: flex; flex-direction: column; gap: 20px;
}
.quote p { font-size: 1rem; line-height: var(--lh-body); margin: 0; }
.quote footer { display: flex; align-items: center; gap: 12px; }
.ph-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; }
.quote cite { display: flex; flex-direction: column; font-style: normal; font-size: .82rem; color: var(--faint); }
.quote cite strong { font-size: .92rem; color: var(--ink); }

/* ============ FORMULÁRIO ============ */
.contact { position: relative; z-index: 1; padding: clamp(100px,16vh,200px) var(--pad); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); align-items: center; }
.contact-title { font-weight: 800; font-size: clamp(2rem,5.5vw,4.5rem); line-height: var(--lh-tight); letter-spacing: -.03em; margin-bottom: 26px; }
.contact-title .line { display: block; overflow: hidden; }
.contact-title .line > span { display: block; will-change: transform; text-wrap: balance; }
.contact-sub { color: var(--muted); line-height: var(--lh-body); max-width: 40ch; }
.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.field input, .field select { font: inherit; font-size: .95rem; padding: 13px 15px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.field input:focus, .field select:focus { outline: 2px solid var(--muted); }
.lead-form .btn-block { grid-column: 1 / -1; }

/* ============ RODAPÉ ============
   Estrutura/skin 100% no bloco de identidade (Figma 341:18), no fim da
   camada de marca — aqui só fica o posicionamento base da seção. */
.site-footer { position: relative; z-index: 1; overflow: hidden; }

/* ============================================================
   FASE 2 — IDENTIDADE VISUAL APLICADA (escopo: Nav + Hero / seção 01)
   Extraído do Figma (página Componentes 285:102) via MCP.
   Só personaliza Nav e Hero; as demais seções continuam em cinza até a
   próxima rodada. Não altera HTML/grid/scroll (tudo via CSS sobre a
   estrutura existente). Bloco fica ANTES das media queries de propósito,
   pra o responsivo já validado continuar prevalecendo no mobile.
   ============================================================ */
:root {
  /* Color Styles oficiais do arquivo (getLocalPaintStylesAsync) */
  --mm-roxo:    #862EF2;
  --mm-preto:   #161619;
  --mm-cc1:     #F3F1FB;  /* Cinza Claro 1 */
  --mm-cc2:     #E8E6F0;  /* Cinza Claro 2 */
  --mm-cc3:     #9E9CA1;  /* Cinza Claro 3 */
  --mm-cinza:   #313033;
  --mm-cinza-escuro: #212024;
  --mm-blue:      #6B6EFF; /* stop frio dos gradientes (rgb 107,110,255) */
  --mm-deep-blue: #3133B9; /* stop intermediário (rgb 49,51,185) */

  /* Preenchimento dos botões. Interpretação legível do metálico do Figma:
     o gradiente real do Botão Principal tem uma faixa de Cinza Claro 1 (quase
     branco) que, com texto branco por cima, some. Aqui o gradiente usa os
     mesmos stops da marca (deep-blue → roxo → blue) mas mantém o texto branco
     legível em toda a extensão. A troca pro metálico literal do Figma é
     trivial se o cliente confirmar que o texto ali é escuro, não branco. */
  /* Botão Principal — calibrado por screenshot contra o render do Figma
     (285:105): corpo azul→roxo dominante (texto branco sempre legível) e o
     stop claro (--mm-cc1) empurrado pra ALÉM de 100%, aparecendo só como
     realce na quina direita. 140deg (não -40deg): em CSS o 0% do -40deg
     nasce na quina inferior DIREITA, o que jogava o realce claro pra
     esquerda — 140deg é a mesma diagonal no sentido oposto. */
  --mm-grad-btn:   linear-gradient(140deg, var(--mm-deep-blue) 0%, var(--mm-roxo) 55%, var(--mm-cc1) 130%);
  /* Tipografia "Gradiente" (Estilos=Gradiente, node 285:154): roxo → claro */
  --mm-grad-title: linear-gradient(89deg, var(--mm-roxo) 17%, var(--mm-cc1) 125%);
  /* Dot do componente Badge (gradiente 78°) */
  --mm-grad-dot:   linear-gradient(78deg, var(--mm-blue), var(--mm-roxo) 70%, var(--mm-cc1));

  /* Transição única dos hovers de botão (fill↔stroke). background-image não
     transiciona em CSS — o gradiente vive num ::before e quem anima é a
     OPACITY dele, com border-color acompanhando no mesmo ritmo. */
  --btn-trans: .3s cubic-bezier(.4, 0, .2, 1);
}

/* -------- NAV -------- */
/* troca o mix-blend-mode:difference (truque do wireframe cinza) por cores
   explícitas da marca, como pede o brief. Ressalva: sobre a seção In-Company
   (painel claro), ainda não personalizada, os links claros ficam de baixo
   contraste — será resolvido quando essa seção receber a identidade. */
.nav { mix-blend-mode: normal; }
/* Logo=Branco (285:115) aplicado por CSS sobre a estrutura atual, sem mexer
   no HTML: vira imagem de fundo e o texto/placeholder é ocultado. */
.nav-logo {
  width: clamp(120px, 13vw, 158px); height: 32px; gap: 0;
  background: url("assets/logo-market-masters.svg") no-repeat left center / contain;
  font-size: 0; color: transparent;
}
.nav-logo .ph-mark { display: none; }
.nav-links a { color: var(--mm-cc3); }          /* Cinza Claro 3 padrão */
.nav-links a:hover { color: var(--mm-cc1); }     /* Cinza Claro 1 no hover */
.nav-burger span { background: var(--mm-cc1); }
/* CTA da nav — PADRÃO 2 (stroke → fill no hover), mesma técnica do ::before.
   .nav-cta não herda de .btn, então recebe aqui os props que lá são da base:
   position/overflow/isolation (prendem e clipam o pseudo no radius pill). */
.nav-cta {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--mm-cc1);
  border: 1px solid rgba(243, 241, 251, .3);
  background: transparent;
  transition: border-color var(--btn-trans), color var(--btn-trans);
}
.nav-cta::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--mm-grad-btn);
  opacity: 0; transition: opacity var(--btn-trans);
}
.nav-cta:hover { border-color: transparent; }
.nav-cta:hover::before { opacity: 1; }

/* -------- HERO (seção 01) -------- */
.hero { background: var(--mm-preto); overflow: hidden; }   /* fundo Preto #161619 */
/* Light (glow) tipo "aurora": topo centralizado, dispersando pra baixo/lados.
   Spec pedia filter:blur(800px); mantido o mesmo equivalente já decidido antes
   (gradiente radial + blur moderado) — um blur literal de 800px é caro e, com
   .hero em overflow:hidden, cortaria em borda dura em vez do bloom difuso
   pedido; o gradiente já faz o degradê até transparent, o blur só suaviza a
   borda restante. top:0 + circle centralizado = metade de cima do círculo
   fica acima do frame (invisível/cortada) e só a metade de baixo se espalha
   pro Hero, exatamente o efeito "vindo de cima" pedido.
   USA ::after de propósito: o ::before do hero já é a etiqueta [data-sec] do
   wireframe (e uma media query a torna static no mobile, o que empurraria o
   glow pra dentro do fluxo). z-index:0 = abaixo do 3D (z-index:1), acima do fundo. */
.hero::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  /* Elipse larga e baixa (não círculo): com top:0, o centro do gradiente
     (o ponto mais brilhante) fica na metade da ALTURA da forma — um círculo
     de 1200px+ jogaria esse centro ~600px pra dentro da página, longe do
     topo visível. Achatando a altura, o centro fica perto de y=0 de verdade,
     lendo como "aurora emanando do topo" em vez de um blob no meio da tela. */
  width: min(140vw, 2000px); height: min(66vh, 620px);
  top: 0; left: 50%; transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(201, 171, 255, .55), rgba(201, 171, 255, .2) 42%, transparent 72%);
  filter: blur(110px);
}
/* Elemento 3D real (3Ds=Default, 285:147): centralizado verticalmente de
   verdade (top:50%/translateY(-50%), literal, relativo a .hero inteiro desde
   que .hero-object virou filho direto da seção). Tamanho aumentado o
   suficiente pra que, mesmo centralizado, o topo ainda extrapole o frame —
   e a borda esquerda da forma chegue perto do meio horizontal do viewport,
   sem vão vazio entre o texto e o 3D. .hero tem overflow:hidden, então o
   excesso corta sem gerar scroll horizontal. */
.hero-object {
  top: 50%; right: -16%; transform: translateY(-50%);
  width: clamp(520px, 64vw, 1000px); aspect-ratio: 1 / 1.09;
  background: url("assets/hero-3d.png") no-repeat center / contain;
  opacity: .96;
}
.hero-object .obj-ring,
.hero-object .obj-core,
.hero-object .ph-tag { display: none; }

/* Eyebrow = componente Badge do Figma (node 285:124): bg rgba(cc1,.05),
   padding 14, gap 10, radius 6, marcador 5px em gradiente, texto Medium 14 / CC2 */
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(243, 241, 251, .05); padding: 14px; border-radius: 6px;
  font-family: var(--font); font-weight: 500; font-size: 14px; line-height: 1;
  color: var(--mm-cc2);
}
.hero-badge-dot { width: 5px; height: 5px; flex: none; border-radius: 1px; background: var(--mm-grad-dot); }

/* H1 = Tipografias "Branco com Gradiente" (node 285:149), reduzido ~26% pra
   equilibrar com o 3D maior. Linhas 1-2 sólidas (#F3F1FB); linhas 3-4 no
   gradiente exato do componente, via background-clip:text. */
.hero-title {
  color: var(--mm-cc1);
  font-size: clamp(2.1rem, 7.6vw, 7rem);
  line-height: .97; letter-spacing: -.03em;
}
/* Ênfase "e quer ir mais além." presa às PALAVRAS, não à linha: um único .grad
   envolve o trecho contínuo (as duas linhas de ênfase) e recebe o gradiente com
   background-clip:text. Assim o degradê corre por todo o trecho — incluindo "ir"
   — em qualquer quebra (4 linhas fixas no desktop, texto fluido no mobile), sem
   reiniciar por linha (era o que deixava "ir" no fim claro de uma linha).
   width:fit-content mantém o gradiente colado ao texto (0-100% mapeia na largura
   do trecho, não na do H1 inteiro via max-width:15ch). */
.hero-title .grad {
  display: block; width: fit-content;
  background: linear-gradient(90deg, #862EF2 46%, #F3F1FB 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero-lede { color: var(--mm-cc2); }

/* Botão Principal (fill gradiente) — FONTE DE VERDADE global do site. Qualquer
   seção que precise do CTA primário reusa .btn.btn-solid: herda padding 14/28,
   radius pill e tipografia da base .btn, e ganha aqui o gradiente + hover. Regra
   fixa: nenhuma seção recria esse botão do zero nem sobrescreve seu padding/
   tamanho — se precisar de gradiente, usa .btn.btn-solid. (Antes essa regra
   vivia sob .hero e as outras seções recriavam o botão à mão, divergindo.) */
/* Botão Principal — PADRÃO 1 (Figma 285:105 → 285:107): normal FILL gradiente,
   hover vira STROKE (fundo transparente + borda 1px cc1). O gradiente
   (--mm-grad-btn, aprovado — não mexer nas cores) vive no ::before porque
   background-image não transiciona: o fade é na opacity do pseudo (1→0),
   com a borda entrando junto via border-color, mesma duração/easing.
   inset:-1px: o pseudo cobre também a faixa da borda (transparente no
   normal), senão sobraria um anel de 1px sem gradiente na silhueta. */
.btn-solid {
  background: transparent;
  color: var(--mm-cc1);
  border: 1px solid transparent;
  transition: border-color var(--btn-trans);
}
.btn-solid::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--mm-grad-btn);
  opacity: 1; transition: opacity var(--btn-trans);
}
.btn-solid:hover { border-color: var(--mm-cc1); }
.btn-solid:hover::before { opacity: 0; }
/* CTA secundário do Hero — PADRÃO 2 (inverso do Principal): normal STROKE,
   hover vira FILL com o gradiente aprovado. Mesma técnica do ::before. */
.hero .btn-line {                      /* Botão Secundário · Padrão (outline sutil) */
  color: var(--mm-cc1);
  border: 1px solid rgba(243, 241, 251, .3);
  background: transparent;
  transition: border-color var(--btn-trans);
}
.hero .btn-line::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: var(--mm-grad-btn);
  opacity: 0; transition: opacity var(--btn-trans);
}
.hero .btn-line:hover { border-color: transparent; }
.hero .btn-line:hover::before { opacity: 1; }

/* Marquee recolorizada pro tom da marca. Logos reais das empresas (SVG,
   brancos por padrão) filtrados pra ficarem monocromáticos claros sobre o
   hero escuro, com leve opacidade pra não competir com o H1. */
.hero .marquee { border-color: var(--mm-cinza); }
.hero .brand-logo { filter: brightness(0) invert(1); opacity: .55; }

/* ============ IN-COMPANY · identidade (ÚNICA seção de fundo claro) ============
   Inverte o tema do site: fundo Cinza Claro 1 (#F3F1FB), tipografia Preto/Cinza.
   A separação com as seções dark vizinhas (Comunidade antes, Depoimentos depois)
   é o próprio corte de cor — borda limpa, sem faixa divisória. */
.incompany.invert { background: var(--mm-cc1); color: var(--mm-preto); }
.incompany .inco-title { color: var(--mm-preto); }                 /* títulos #161619 */
.incompany .inco-body  { color: var(--mm-cinza); }                 /* secundário #313033, leitura confortável */

/* Badge (componente global .hero-badge) adaptado ao fundo claro: fundo = rgba
   escura sutil (aparece sobre o branco) e texto Preto. O marcador mantém o
   gradiente roxo do componente, que já contrasta bem com o #F3F1FB. */
.incompany .hero-badge { background: rgba(22, 22, 25, .06); color: var(--mm-preto); }

/* CTA "Solicitar uma proposta" — botão pra fundo branco (base Figma 334:139),
   ajustado por legibilidade após verificação visual (validado pelo cliente):
   o gradiente metálico literal do Figma tem uma faixa branca (#F3F1FB 0-42%) que
   engolia o texto branco no padrão, e a borda #F3F1FB do hover sumia sobre o
   #F3F1FB da seção (o botão "desaparecia"). Correção:
   • Padrão: fill no --mm-grad-btn (azul→roxo→azul, sem faixa clara) → texto branco legível.
   • Hover: fundo revela a seção (#F3F1FB via padding-box) + borda em gradiente
     (border-box, mesmo truque do .btn-terciario) → a pílula continua visível no
     branco; o texto vira gradiente legível. */
.btn-oncc1 {
  background: var(--mm-grad-btn);
  color: var(--mm-cc1);
  border: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.btn-oncc1:hover {
  background:
    linear-gradient(var(--mm-cc1), var(--mm-cc1)) padding-box,
    var(--mm-grad-btn) border-box;
  border: 1px solid transparent;
  color: transparent;
}
.btn-oncc1:hover > span {
  background: var(--mm-grad-btn);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Vídeo como background puro (autoplay/loop/mute, sem UI), com comportamento de
   object-fit:cover — que um iframe não tem nativamente. Truque: .inco-video vira
   container (container-type:size, ok aqui porque o GSAP sempre dá tamanho explícito
   a ele) e o iframe é dimensionado em cqw/cqh pra SEMPRE cobrir o container na
   proporção 16/9 do vídeo, centralizado; o excesso é cortado pelo overflow:hidden
   já existente. Sem barras pretas quando o full-bleed (viewport 16:10) diverge do
   16:9. pointer-events:none = zero interação (é cenário, não player).
   NÃO mexe na animação GSAP — o container continua sendo o elemento animado. */
.inco-video { container-type: size; }
.inco-iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: max(100cqh, calc(100cqw * 9 / 16));
  border: 0; display: block; pointer-events: none;
}


/* Logo do header troca pra variante gradiente (escura) enquanto a seção clara
   está sob o header. Crossfade: o logo branco (background do .nav-logo) fica
   embaixo; o gradiente entra por cima via ::after com transição de opacidade. */
.nav-logo { position: relative; }
.nav-logo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("assets/logo-dark.svg") no-repeat left center / contain;
  opacity: 0; transition: opacity .45s var(--ease);
}
.nav.nav--light .nav-logo::after { opacity: 1; }

/* Tema claro do header (In-Company): a mesma .nav--light que troca o logo
   agora escurece links, CTA e burger sobre o painel branco. As transições de
   cor já existentes em cada elemento fazem o crossfade nos dois sentidos. */
.nav.nav--light .nav-links a { color: var(--mm-cinza); }         /* #313033 */
.nav.nav--light .nav-links a:hover { color: var(--mm-preto); }   /* #161619 */
.nav.nav--light .nav-burger span { background: var(--mm-preto); }
.nav.nav--light .nav-cta {
  color: var(--mm-preto);
  border-color: rgba(22, 22, 25, .45);
}
/* Hover mantém o padrão stroke→fill: o gradiente preenche o pill, então o
   texto volta pro claro pra manter contraste sobre o fill escuro. */
.nav.nav--light .nav-cta:hover { border-color: transparent; color: var(--mm-cc1); }

/* ============ DEPOIMENTOS · identidade ============
   SÓ skin: o mecanismo de scroll (header sticky 100vh + rows em fluxo normal
   com posições alternadas) fica intocado — nenhuma prop de position/z-index/
   layout muda aqui, apenas cor/tipo/espaçamento. */
/* Fundo opaco no Preto oficial: além do tom certo, cobre os glows da camada
   .ambient (fixed, z-index 0) que vazavam pela seção transparente — fundo
   limpo sem mexer na ambient, que segue valendo pras outras seções. */
.feedback-section { background: var(--mm-preto); }
.feedback-title { font-weight: 700; color: var(--mm-cc1); }
/* "pelo ecossistema." no gradiente de marca (mesma ênfase das outras seções).
   inline-block + fit-content: sem isso o span herda a largura da linha mais
   comprida do H2 e o gradiente não fecha no claro dentro do texto. */
.fb-grad {
  display: inline-block; width: fit-content;
  background: linear-gradient(90deg, #862EF2 46%, #F3F1FB 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.feedback-subtitle { font-weight: 400; color: var(--mm-cc3); }

/* Card de depoimento (Figma 285:165): fundo Cinza Escuro em glassmorphism
   (50% de opacidade + backdrop blur 35px), borda Cinza a 100%, padding 40,
   radius 16, gap citação→autor 36. Sem foto/avatar. O blur desfoca o que
   passa POR TRÁS do card — visível quando o card cruza o título sticky. */
.quote {
  background: rgba(33, 32, 36, .5);
  -webkit-backdrop-filter: blur(35px);
  backdrop-filter: blur(35px);
  border: 1px solid var(--mm-cinza);
  padding: 40px; border-radius: 16px; gap: 36px;
}
.quote p {
  font-weight: 400; font-size: 16px; line-height: var(--lh-body);
  color: rgba(243, 241, 251, .8); letter-spacing: -.048px;
}
.quote cite {
  gap: 4px;
  font-weight: 400; font-size: 14px; color: rgba(243, 241, 251, .6); letter-spacing: -.042px;
}
.quote cite strong {
  font-weight: 500; font-size: 16px; color: var(--mm-cc1); letter-spacing: -.048px;
}
/* Destaque da frase impactante: Bold + gradiente roxo suave via clip text
   (técnica do H1 da Hero). O gradiente exportado do Figma (com #6B6EFF e stops
   fora de ordem) rendia azul berrante com salto brusco; ajustado por validação
   visual pra roxo→roxo-claro, referência do card 285:165.
   font-style normal: o <em> é semântico, não itálico. */
.quote-hl {
  font-style: normal; font-weight: 700;
  background: linear-gradient(90deg, #862EF2 0%, #A96BF5 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============ CONTATO · identidade ============
   Container "afundado" dentro da seção: a seção vira só a moldura preta de
   24px; o painel interno (radius 32, overflow hidden) carrega o vídeo de
   fundo e o conteúdo. O padding horizontal do painel desconta os 24px da
   moldura pra manter o conteúdo alinhado ao grid global (--pad). */
.contact { background: var(--mm-cc1); padding: 16px; } /* moldura branca da marca ao redor do painel escuro */
.contact-panel {
  position: relative; border-radius: 24px; overflow: hidden;
  background: var(--mm-preto); /* fundo escuro atrás do vídeo (base do blend) */
  padding: clamp(100px, 16vh, 200px) calc(var(--pad) - 16px);
}
/* Vídeo de fundo: mesmo padrão dos outros embeds (cover via container query
   units) + tratamento P&B em baixa opacidade pra não competir com o conteúdo.
   O container-type:size fica num WRAPPER absoluto (inset:0): o tamanho dele
   vem do painel, não do conteúdo — no painel direto, o size containment
   colapsava a altura (conteúdo deixa de contar pro auto-height). */
.contact-videowrap {
  position: absolute; inset: 0;
  container-type: size; pointer-events: none;
}
.contact-video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: max(100cqh, calc(100cqw * 9 / 16));
  border: 0; pointer-events: none;
  filter: grayscale(1); opacity: .2;
}
/* Overlay escuro sutil por cima do vídeo, garantindo contraste do conteúdo */
.contact-scrim { position: absolute; inset: 0; background: rgba(22, 22, 25, .5); pointer-events: none; }
.contact-inner { position: relative; z-index: 1; }

.contact .hero-badge { margin-bottom: 24px; }
.contact-title { font-weight: 700; color: var(--mm-cc1); }
/* Box de vidro do formulário: o próprio <form> (.lead-form) vira a box —
   ele já envolve exatamente labels+inputs+select+CTA+nota. Separa o form
   do vídeo de fundo; o blur desfoca o vídeo que passa atrás. */
.contact .lead-form {
  padding: 48px;
  background: rgba(255, 255, 255, .05);
  -webkit-backdrop-filter: blur(35px);
  backdrop-filter: blur(35px);
  border-radius: 12px;
}
.contact-sub { color: var(--mm-cc2); }
.field label { font-weight: 500; color: var(--mm-cc1); }
.field input, .field select {
  background: rgba(243, 241, 251, .05);
  border: 1px solid var(--mm-cinza); border-radius: 12px;
  color: var(--mm-cc1);
  /* altura ÚNICA explícita: o select renderiza o texto interno diferente dos
     inputs (medido: 50.57 vs 47.33) — height fixa + box-sizing border-box
     (reset global) iguala todos em 50px */
  height: 50px;
}
.field input::placeholder { color: var(--mm-cc3); }
/* select ainda no placeholder ("Selecione uma opção", option disabled) lê como
   placeholder; escolhida uma opção real, volta pra CC1 */
.field select:has(option[disabled]:checked) { color: var(--mm-cc3); }
.field input:focus, .field select:focus { outline: none; border-color: var(--mm-roxo); }

/* ============ RODAPÉ · identidade (Figma 341:18) ============
   Fundo Cinza Escuro #212024 com glow cromático em blend lighten atrás de
   todo o conteúdo. Padding vertical do Figma (150/96); o lateral usa o
   padrão do site (--pad) em vez dos 150px do frame, pra manter o alinhamento
   global das seções. */
.site-footer { background: var(--mm-cinza-escuro); padding: 150px var(--pad) 56px; }
/* Imagem de fundo do footer: COBRE todo o footer (mobile e desktop). Era um
   tamanho fixo 2414x775 centralizado — num footer mobile mais alto que 775px isso
   deixava faixas vazias em cima e embaixo. Agora inset:0 + object-fit:cover: a img
   preenche 100% da área do footer mantendo a proporção (o excesso extravasa e o
   overflow:hidden da seção corta), sem esticar. opacity 0.6 só na IMAGEM (o
   conteúdo do footer é z-index maior, segue opaco/legível por cima). */
.footer-glow {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
  opacity: .6; mix-blend-mode: lighten; pointer-events: none;
}
.footer-main {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: clamp(40px, 6vw, 120px);
  margin-bottom: 96px;
}
/* coluna da marca: logo gradiente, tagline, ícones sociais em box de vidro */
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.footer-logo { width: 168px; height: 51px; display: block; }
.footer-tagline {
  margin: 0; font-weight: 400; font-size: 16px; color: #F4F5F7;
  line-height: 1.6; letter-spacing: -.48px; max-width: 292px;
}
.footer-social { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.footer-social a {
  display: grid; place-items: center; width: 45px; height: 45px;
  background: rgba(158, 156, 161, .1);
  -webkit-backdrop-filter: blur(17.5px); backdrop-filter: blur(17.5px);
  border-radius: 6px;
  transition: background .3s var(--ease);
}
.footer-social a:hover { background: rgba(158, 156, 161, .22); }
/* grupos Navegação / Contato */
.footer-nav { display: flex; gap: clamp(60px, 10vw, 150px); }
.footer-group { display: flex; flex-direction: column; align-items: flex-start; }
.footer-group h4 {
  display: flex; align-items: center; gap: 8px; margin-bottom: 32px;
  font-weight: 700; font-size: 16px; color: #F4F5F7;
}
.footer-group h4::before {
  content: ""; width: 5px; height: 5px; flex: none;
  border-radius: 1px; background: var(--mm-roxo);
}
.footer-group ul { list-style: none; display: flex; flex-direction: column; gap: 32px; margin: 0; padding: 0; }
.footer-group ul a { font-weight: 400; font-size: 16px; letter-spacing: -.48px; color: #F4F5F7; transition: color .3s; }
.footer-group ul a:hover { color: var(--mm-roxo); }
/* CTA no padrão do Botão Principal — gradiente e hover herdam do .btn-solid
   global. Dimensões próprias do contexto do footer (2 rodadas de calibração
   visual, afastando do frame do Figma que dava 24px/16px ≈ 74px de altura):
   fonte Bold 14 (era 16, lia grande no rodapé) + padding 12/28 proporcional
   ao corpo menor — compacto sem o texto colar nas bordas. Radius 1000
   mantido. */
.footer-cta { margin-top: 35px; padding: 12px 28px; border-radius: 1000px; font-weight: 700; font-size: 14px; }
/* barra inferior: divisor + copyright / links legais */
.footer-bottom {
  position: relative; z-index: 1;
  border-top: 1px solid var(--mm-cinza); padding-top: 56px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.footer-bottom p { margin: 0; font-weight: 400; font-size: 16px; color: var(--mm-cc3); }
.footer-legal { list-style: none; display: flex; gap: 64px; margin: 0; padding: 0; }
.footer-legal a { font-size: 16px; color: var(--mm-cc3); transition: color .3s; }
.footer-legal a:hover { color: var(--mm-cc1); }

/* Respiro entre nav/logo e o H1, e mais folga geral no topo da seção */
.hero { padding-top: clamp(175px, 20vh, 230px); }
/* Mais espaço antes da faixa de logos (marquee): mais respiro entre os CTAs
   e a faixa (o mínimo antes era 30px, colava a faixa nos botões em telas de
   altura menor — agora garante pelo menos ~72px de folga). */
.hero .marquee { margin-top: clamp(72px, 9vh, 128px); }

/* Navbar: header um pouco mais alto (padding-block 22 vs 14). Transparente e
   flutuando (top:30px) no início; ao dar scroll ancora no topo (top:0, elimina
   a faixa que sobrava acima) e ganha fundo translúcido + blur mais forte. */
.nav { padding-block: 22px; transition: top .45s var(--ease), background-color .45s var(--ease), backdrop-filter .45s var(--ease), border-color .45s var(--ease); border-bottom: 1px solid transparent; }
.nav.scrolled {
  top: 0;
  background-color: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  /* Divisória discreta (~15-20% de alpha). Cor por tema: clara sobre as seções
     escuras, escura sobre o painel branco da In-Company — sólida ela pesava. */
  border-bottom-color: rgba(243, 241, 251, .15);
}
.nav.nav--light.scrolled { border-bottom-color: rgba(49, 48, 51, .18); }

/* De-wireframe (é o site final, não mais wireframe): remove a faixa de fase
   do topo e as etiquetas de debug de seção ([data-sec]) do site inteiro. */
.wf-ribbon { display: none; }
[data-sec]::before { display: none; }

/* ============================================================
   FASE 2 — IDENTIDADE VISUAL APLICADA (escopo: Programas / seção 02)
   Specs dos componentes do Figma: Badge (285:123) e Botão Principal
   (285:104). Só reskin por cima da estrutura/scroll pinado existentes
   (.prog-panel, .prog-track etc.) — HTML e mecanismo de scroll intactos.
   ============================================================ */

/* Fundo da SEÇÃO Preto (#161619) e cada card Cinza Escuro (#212024), mais claro
   que a seção → os cards avançam sobre o fundo (contraste card > seção). */
.programs { background: #161619; }

/* Card = cada .prog-panel do scroll horizontal. Sem borda/divisor entre cards:
   a separação vem do gap de 24px no track (.prog-track). Fundo #212024,
   radius 16 (definido na regra estrutural base). */
.prog-panel { background: #212024; }

/* Imagem real do card (substituiu o placeholder "[ imagem / 3D ]"): mesma
   técnica do bento da Comunidade — a célula vira moldura com overflow:hidden
   e a <img> cobre a área inteira (cover), radius 16 (spec do Figma).
   display:block sobrescreve o grid/place-items do placeholder base, que
   renderizaria a img no tamanho intrínseco em vez de cobrir. A borda 1px
   (moldura do placeholder) sai junto — a foto é a própria massa visual. */
.prog-visual { display: block; overflow: hidden; border-radius: 16px; border: none; }
.prog-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Badge removido do DOM (título é o 1º elemento do card; o respiro do topo
   vem do padding natural do card). */

/* Coluna de texto: espaçamento UNIFORME entre todos os blocos (título → descrição
   → bullets → CTA) via um único gap do flex. Zera qualquer margin dos filhos — o
   espaçamento vem só do gap, nunca de margins soltas. O gap INTERNO dos bullets
   (16px, dentro de .prog-facts) é independente deste. */
.prog-body { display: flex; flex-direction: column; gap: 32px; }
.prog-body > * { margin: 0; }
/* blocos de texto ficam em largura cheia (stretch, pro wrap correto), mas o CTA
   volta a "hug content" (senão o align-items:stretch do flex esticava o botão na
   largura toda). Mantém o CTA terciário aprovado. */
.prog-body > .btn { align-self: flex-start; }

/* Título em escala de CARD (não de headline): ~30% menor que antes (era
   clamp 1.9/4vw/3.4rem ≈ 54px → agora ~38px no desktop). Bold, #F3F1FB.
   Reduzido mais um degrau (38.4px → 34.4px no desktop) pra abrir espaço pro
   padding maior do card sem estourar a viewport no modo notebook — ainda com
   presença de título, só menos denso ao lado do padding extra. */
.prog-title { font-weight: 700; color: var(--mm-cc1); font-size: clamp(1.6rem, 2.9vw, 2.55rem); line-height: 1.05; }
.prog-desc { color: var(--mm-cc3); font-weight: 400; }

/* atributos como BULLETS COMPACTOS: lista vertical, um por linha, com marcador
   quadrado 5x5 roxo (#862EF2), texto Regular #E8E6F0 (--mm-cc2), gap 16 entre
   bullets. Substituiu o layout em 3 colunas com divisor vertical — some junto
   o "traçado" fino que aparecia entre as colunas. Marcador alinhado ao topo da
   primeira linha (margin-top ~.5em), pra ficar correto se o texto quebrar. */
.prog-facts { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 16px; }
.prog-facts li {
  display: flex; flex-direction: row; align-items: flex-start; gap: 12px;
  font-weight: 400; font-size: .95rem; line-height: 1.4; color: var(--mm-cc2);
}
.prog-facts li::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: .5em;
  border-radius: 1px; background: var(--mm-roxo);
}

/* Viewport de notebook (altura curta, <=800px): medido em 1440x732 — o
   respiro do header + a altura natural do card somavam mais que a viewport,
   cortando a base do card durante o pin. Reduz o respiro INTERNO do card
   (padding + gap entre título/descrição/bullets/CTA) o suficiente pra manter
   a folga mínima de 24px abaixo do card. Recalibrado quando o padding base
   e o gap subiram (rodada de "mais respiro"): com o título um degrau menor
   (.prog-title) o card volta a bater exatamente no piso do min-height
   (480px) — mesma folga de 26px que já existia, sem regredir o corte
   corrigido antes. Título/descrição/bullets/CTA continuam intactos, só o
   espaçamento ao redor deles muda. */
@media (min-width: 901px) and (max-height: 800px) {
  .prog-panel { padding: 44px; }
  .prog-body { gap: 18px; }
}

/* CTA de cada card = Botão Terciário (Figma 310:316): usa a classe global
   .btn.btn-terciario (fundo claro sólido → hover com stroke em gradiente
   diagonal), definida no bloco de botões. Sem override de tamanho aqui —
   mantém padding/tipografia de .btn. */

/* Rodapé da seção: 1ª frase Regular/CC3 (pergunta, tom neutro), 2ª frase
   (proposta de valor) em Bold/CC1 pra criar contraste e puxar o olho — CTA
   = Botão Secundário (.btn-secundario, variante global definida acima). */
.helper-band p { color: var(--mm-cc3); font-weight: 400; }
.helper-band p strong { color: var(--mm-cc1); font-weight: 700; }

/* ============================================================
   FASE 2 — IDENTIDADE VISUAL APLICADA (escopo: Comunidade / seção 03)
   Versão básica: cores, tipografia, badge e tratamento de containers do
   design system. As 4 células com foto (evento/aula/workshop/happy hour)
   seguem como placeholder — o objetivo aqui é só preparar o container
   (fundo, radius, overflow:hidden) pra troca direta por <img> depois.
   ============================================================ */

/* Fundo da seção = Preto (#161619, mesmo tom da Hero). Bento/pillars usam
   Cinza Escuro (#212024, mais claro) por cima — elevação padrão (superfície
   clara sobre base escura), mesma lógica de contraste da Hero. */
.community { background: var(--mm-preto); }

/* Eyebrow = componente Badge global (mesma classe .hero-badge da Hero: bg
   rgba(cc1,.05), padding 14, gap 10, radius 6, texto Medium 14/CC2). Só o
   marcador muda: aqui é um quadrado roxo SÓLIDO (#862EF2), não o gradiente
   da Hero — spec explícita desta seção. */
.comm-head .hero-badge-dot { background: var(--mm-roxo); }
/* Badge é mais alto que o antigo eyebrow em texto puro — respiro maior até
   o H2 (era 18px, colava no badge). */
.comm-title { margin-top: 28px; color: var(--mm-cc1); }
/* Última linha ("um ecossistema.") no gradiente de marca — mesmo tratamento
   e mesma ressalva do H1 da Hero: width:fit-content é obrigatório aqui, senão
   o span (display:block) herda a largura da linha mais comprida do H2 e o
   gradiente nunca chega no branco dentro de um texto mais curto. */
.comm-title .line:nth-child(4) > span {
  width: fit-content;
  background: linear-gradient(90deg, #862EF2 46%, #F3F1FB 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.comm-lead { color: var(--mm-cc2); }
.comm-intro p:last-child { color: var(--mm-cc3); }

/* Bento: 4 células-foto (agora com <img> real, .webp local — ver
   /assets/comunidade) + 1 chip de estatística, radius 16, sem borda.
   overflow:hidden + img cover garantem que a foto preenche a célula
   inteira respeitando o arredondamento, sem distorcer proporção. */
.community .ph-photo {
  /* display:block sobrescreve o inline-grid/place-items:center herdado do
     placeholder base (.ph-mark/.ph-tag/...) — com grid+center, o item não
     esticava e a <img> renderizava no tamanho intrínseco (aspect ratio da
     foto), ignorando height:100%. Em bloco, a img preenche a célula normal. */
  display: block; position: relative;
  background: var(--mm-cinza-escuro); border: none; border-radius: 16px;
  overflow: hidden;
}
.community .ph-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
/* Evento SP (única .bento-bottom com <img> — a outra é o chip "+4", sem
   foto) é retrato numa célula ~1.74:1: o grupo fica na metade inferior da
   foto (teto/luzes do bar ocupam o topo), então o corte precisa puxar bem
   pra baixo pra pegar os rostos. Col1 (estúdio, aspect-ratio próprio) e os
   dois "topo" (dashboard, palco) ficam bem no corte central padrão, sem
   precisar de ajuste. */
.community .bento-bottom img { object-position: center 80%; }
/* Gradiente exato do Figma (170.15deg, Preto→Deep Blue→Roxo→Cinza Claro 1) —
   ângulo e stops copiados ao pé da letra, não aproximados. Padding/tipografia
   aumentados: o bloco cresceu (célula ~347x199 em 1440px, era ~144 de altura
   antes) e o conteúdo ficou pequeno/colado — número e texto escalados pro
   novo tamanho, padding mais generoso nos 4 lados. */
.community .g-chip {
  background: linear-gradient(170.15deg, #161619 4.05%, #3133B9 32.29%, #862EF2 68.62%, #F3F1FB 106.06%);
  border: none; border-radius: 16px;
  padding: clamp(28px, 4vw, 40px);
}
.community .g-chip strong { color: var(--mm-cc1); font-size: clamp(2.2rem, 4.2vw, 3.2rem); }
/* Texto secundário: era --mm-cc3 (#9E9CA1), fraco demais sobre o gradiente
   roxo/azul — trocado por --mm-cc2 (#E8E6F0), bem mais legível, mantendo
   uma distinção sutil em relação ao "+4" (cc1). Fonte maior (era .82rem). */
.community .g-chip span { color: var(--mm-cc2); font-weight: 400; font-size: clamp(.95rem, 1.3vw, 1.05rem); }

/* Features numeradas: mesmo tratamento de container do bento (Cinza Escuro,
   radius 16, sem borda) — testado contra a versão sem fundo (só gap) e o
   preenchido leu mais consistente com o resto da seção (bento já é
   preenchido) e do site (Programas também usa cards preenchidos). Círculo
   numérico: borda fica em Cinza (#313033) e o número em CC1/Medium. */
.community .pillar { background: var(--mm-cinza-escuro); border: none; border-radius: 16px; }
.community .pillar h3 { color: var(--mm-cc1); }
.community .pillar p { color: var(--mm-cc3); }

/* Ritmo vertical: header→bento e bento→features usam a MESMA variável, pra
   os dois gaps ficarem sempre iguais por construção (mesmo princípio já
   aplicado em Programas com --prog-rhythm-gap). */
.community { --comm-rhythm-gap: clamp(56px, 7vw, 96px); }
.comm-top { margin-bottom: var(--comm-rhythm-gap); }
.comm-gallery { margin-bottom: var(--comm-rhythm-gap); }

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 900px) {
  .nav { top: 16px; }
  .nav-burger { display: flex; }
  /* ONDA 2 — item 6: menu mobile. Topo do header = logo + burger. Ao abrir
     (.nav--open, via JS), o .nav-menu vira um painel abaixo do header com os
     links empilhados no meio e o CTA "Falar com um consultor" no fim.
     Fechado = position:absolute + visibility:hidden (zero espaço no layout). */
  .nav-menu {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; gap: 20px;
    padding: 22px var(--pad) 28px;
    background: rgba(22, 22, 25, .96);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--mm-cinza);
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .nav.nav--open .nav-menu { opacity: 1; visibility: visible; transform: none; }
  .nav-menu .nav-links { display: flex; flex-direction: column; gap: 2px; }
  .nav-menu .nav-links a { padding: 11px 0; font-size: 1rem; }
  /* cor dos links do painel forçada clara mesmo sob .nav--light (In-Company):
     o painel tem fundo escuro sempre. Especificidade > .nav.nav--light .nav-links a */
  .nav.nav--open .nav-menu .nav-links a { color: var(--mm-cc3); }
  .nav.nav--open .nav-menu .nav-links a:hover { color: var(--mm-cc1); }
  .nav-menu .nav-cta { display: inline-flex; align-self: stretch; justify-content: center; margin-top: 6px; padding-block: 13px; font-size: .95rem; }
  /* CTA do painel: força texto/borda claros mesmo sob .nav--light (In-Company) */
  .nav.nav--open .nav-menu .nav-cta { color: var(--mm-cc1); border-color: rgba(243, 241, 251, .3); }
  /* burger vira X quando aberto (2 spans de 2px, gap 5px → junta ±3.5px + gira) */
  .nav-burger span { transition: transform .3s var(--ease); transform-origin: center; }
  .nav.nav--open .nav-burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .nav.nav--open .nav-burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .hero-object { position: relative; top: auto; right: auto; transform: none; margin: 24px 0 0 auto; }
  .hero-left { gap: 24px; }
  /* sem pin abaixo de 901px: card volta ao fluxo vertical, então o teto de
     altura (max-height ligado à viewport) é desligado pra não cortar conteúdo. */
  .prog-panel { grid-template-columns: 1fr; gap: 26px; min-height: auto; max-height: none; }
  /* Abaixo de 901px o card empilha (imagem em cima, corpo embaixo) com altura de
     conteúdo — não há o vão do min-height 480 pra preencher. Então o space-between
     do corpo volta a flex-start: conteúdo no fluxo natural, sem folga distribuída. */
  .prog-body { justify-content: flex-start; }

  /* ARRASTE HORIZONTAL (correção): o pin GSAP que dava o scroll horizontal só
     roda em (min-width:901px). Abaixo disso o track flex era MAIS LARGO que a
     viewport mas o .prog-viewport ficava overflow:hidden → cards 2 e 3
     inalcançáveis (nem swipe nem barra). Sem carrossel, o usuário via só um card
     cortado e lia como "conteúdo colado na borda". Fix: no range sem pin o
     viewport vira um scroller horizontal nativo com snap card-a-card (touch =
     arraste). O track continua flex (padding-left + ::after dão o gutter das duas
     pontas), então card 1 abre inteiro e card 3 fecha inteiro. Desktop (>900,
     pin GSAP com transform no track) fica com overflow:hidden da regra base. */
  .prog-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);  /* snap respeita o gutter das pontas */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;              /* Firefox: sem barra */
  }
  .prog-viewport::-webkit-scrollbar { display: none; }  /* WebKit: sem barra */
  .prog-panel { scroll-snap-align: start; }
  /* gap ENTRE cards no mobile: 24px do desktop era largo demais no scroll
     horizontal. Mais compacto (cards ainda separados). Só o gap do track — o
     gutter das pontas (padding-left + ::after) e o snap seguem intactos. */
  .prog-track { gap: 14px; }
  /* mobile mantém o título em 2 linhas (comportamento original) — a linha
     única só faz sentido no desktop, onde há espaço horizontal de sobra. */
  .programs-head .idx { white-space: normal; max-width: 24ch; text-wrap: balance; }
  /* minmax(0,1fr) em vez de 1fr: o "min" implícito de 1fr é auto (min-content),
     então o <select> do formulário (opção mais longa ≈ 550px) inflava a coluna
     além da viewport e cortava texto/inputs na borda direita do mobile. */
  .inco-inner, .contact-inner { grid-template-columns: minmax(0, 1fr); }
  .pillars { grid-template-columns: 1fr; }
  .comm-top { align-items: flex-start; gap: 28px; }
  .comm-intro { flex-basis: 100%; }
  /* sem colunas lado a lado no mobile: empilha na ordem do HTML (col1 →
     topo/base da col2 → topo/base da col3), cada célula mantém sua altura
     proporcional via aspect-ratio (herdado da regra base). */
  .comm-gallery { display: flex; flex-direction: column; gap: 20px; }
  .bento-col { gap: 20px; }
  /* salvaguarda mínima (responsivo fino do footer novo fica pra próxima rodada) */
  .footer-main, .footer-nav, .footer-bottom { flex-direction: column; }
  .footer-main { gap: 48px; }
  .footer-nav { gap: 48px; }
  .lead-form { grid-template-columns: minmax(0, 1fr); }
}

/* Depoimentos mobile: título sem pin, coluna única, cards 100%, sem alternância.
   min-height:0 (era 50vh) mata o buraco enorme entre o bloco de título e as
   citações; padding vertical passa a usar os tokens de ritmo (--m-section-y /
   --m-title-gap), iguais aos das outras seções. */
@media (max-width: 768px) {
  .feedback-header { position: static; height: auto; min-height: 0; align-items: flex-start; text-align: left; padding: var(--m-section-y) var(--pad) var(--m-title-gap); }
  .feedback-subtitle { margin-inline: 0; }
  .feedback-rows { gap: 22px; padding-bottom: var(--m-section-y); }
  .feedback-rows .feedback-row { justify-content: flex-start; }
  .quote { width: 100%; }

  /* In-Company mobile: sem pin (JS não roda abaixo de 769px), vídeo já nasce
     em fluxo 16:9 pela CSS base, só precisa voltar o corpo de apoio ao fluxo
     normal e deixar overlay/scrim sempre visíveis sobre o vídeo */
  /* TARJA PRETA (correção): o espaçamento inferior do vídeo era margin-bottom
     no .inco-video (filho direto da seção). Como a seção é overflow:visible e não
     tinha padding-bottom, essa margin colapsava PRA FORA da seção clara: o fundo
     #F3F1FB terminava rente à base arredondada do card e os 72px viravam gap
     transparente (body preto) + a .feedback-section escura logo abaixo → faixa
     preta colada no vídeo. Fix: mover o MESMO espaçamento (var(--m-section-y))
     pra padding-bottom da seção, dentro do fundo claro. Distância idêntica, sem
     desnível; o vídeo perde a margin-bottom pra não somar duas vezes. */
  .incompany.invert { min-height: 0; overflow: visible; padding-bottom: var(--m-section-y); }
  .inco-inner { grid-template-columns: 1fr; min-height: 0; padding: var(--m-section-y) var(--pad) var(--m-title-gap); gap: var(--m-block-gap); }
  .inco-left { gap: 16px; }
  .inco-body { position: static; max-width: none; margin-top: 4px; }
  .inco-right { gap: var(--m-block-gap); }
  .inco-video { position: static; top: auto; left: auto; width: auto; height: auto; aspect-ratio: 16/9; margin: 4px var(--pad) 0; }
  .inco-scrim { opacity: 1; }
  .inco-overlay { opacity: 1; left: 24px; bottom: 24px; font-size: clamp(1.1rem,4vw,1.6rem); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .obj-ring { animation: none; }
}

/* ============================================================
   FUNDAÇÃO MOBILE — Fase 1 da revisão mobile
   BREAKPOINTS PADRÃO DO PROJETO (usar estes em toda regra nova):
     • Tablet: @media (max-width: 768px)
     • Phone:  @media (max-width: 480px)
   Legado: o bloco "Responsivo" acima usa 900px porque está acoplado aos
   matchMedia do script.js (pin de Programas ≥901px, pin do In-Company
   ≥769px). Não criar regra nova em 900 — padrão é 768/480.
   Tudo aqui é rede de segurança global + escala; ajuste fino por seção
   vem nas próximas fases.
   ============================================================ */

/* Rede de segurança anti-overflow no raiz. clip (não hidden) nos dois
   níveis: hidden criaria um scroll container no body e quebraria o
   position:sticky dos Depoimentos; clip só corta, sem virar scroller. */
html { overflow-x: clip; }

/* Mídia nunca dita a largura do layout por padrão */
img, svg, video, iframe { max-width: 100%; }
/* Exceções deliberadas: backgrounds full-bleed que PRECISAM exceder o
   container pra cobrir (todos já clipados pelo overflow:hidden do pai) */
.inco-iframe, .contact-video, .footer-glow { max-width: none; }

/* Form controls nunca ditam a largura do layout: o tamanho intrínseco do
   <select> (opção mais longa) subia pela cadeia field→form→grid e estourava
   a seção Contato no mobile. min-width:0 corta essa propagação. */
.field, .lead-form { min-width: 0; }
.field input, .field select { width: 100%; max-width: 100%; }

/* ---------- Tablet (≤768px) ---------- */
@media (max-width: 768px) {
  /* Sistema mobile global num só lugar: padding lateral (--pad) + ritmo
     vertical (--m-*). Todas as seções herdam — --pad já era usado em toda
     seção; os tokens --m-* substituem os clamp em vh que estouravam no
     mobile alto e uniformizam os respiros título→conteúdo e entre seções. */
  :root {
    --pad: 24px;
    --m-section-y: 72px;   /* padding vertical ÚNICO de TODAS as seções no mobile
                              (topo E base), igual em 768 e 480 — respiro uniforme
                              entre seções, sem faixa desigual. Toda seção roteia
                              o padding vertical por este token. */
    --m-title-gap: 40px;   /* respiro entre bloco de título e conteúdo (interno, não é padding de seção) */
    --m-block-gap: 24px;   /* gap entre blocos internos empilhados */
    --section-stack-gap: var(--m-block-gap);
  }

  /* CAUSA-RAIZ do overflow do Hero no phone: .hero-object tem largura mínima
     fixa de 520px (clamp) e, no fluxo mobile, inflava a coluna do grid do
     Hero inteira pra 520px — texto do lede e CTAs eram cortados na borda em
     qualquer viewport < ~640px. O min() trava o objeto na largura útil real. */
  .hero-object { width: min(calc(100vw - 2 * var(--pad)), 520px); }

  /* ESCALA TIPOGRÁFICA — H1 do Hero é a referência do topo; TODOS os H2 de
     seção no MESMO tamanho, um degrau abaixo do H1 e com presença. width:100%
     +max-width:none tiram o shrink-wrap: antes Comunidade/Depoimentos ficavam
     numa caixa estreita (~170px) por causa da quebra forçada, parecendo menores
     que In-Company/Contato mesmo com o mesmo font-size. Em 768: H1 ~52px,
     H2 ~37px. (A auditoria mostrou o problema real: não era font-size divergente
     — era caixa estreita + quebra forçada deixando o H2 pequeno e desalinhado.) */
  .hero-title { font-size: clamp(2.6rem, 7vw, 3.25rem); max-width: none; }
  .comm-title, .feedback-title, .contact-title, .inco-title {
    font-size: clamp(2.1rem, 4.8vw, 2.6rem);
    width: 100%; max-width: none;
  }
  /* Solta o H2 da Comunidade pra largura toda (o .comm-head encolhia como item
     flex, prendendo o título em ~170px). */
  .comm-head { flex-basis: 100%; }

  /* RITMO VERTICAL — mesmo padding de seção e o mesmo respiro título→conteúdo
     em todas as seções (troca os clamp em vh que inflavam em telas altas). */
  .community { padding-block: var(--m-section-y); --comm-rhythm-gap: var(--m-title-gap); }
  .programs { padding-block: var(--m-section-y); }
  .contact-inner { padding-block: var(--m-section-y); }
  /* Footer não tinha override mobile (ficava com 150px de topo do desktop) —
     entra no mesmo padrão. Horizontal (--pad) preservado pela base. */
  .site-footer { padding-block: var(--m-section-y); }

  /* QUEBRA DE LINHA — TODAS as headlines montadas por .line fluem no mobile
     (Hero incluído): .line vira inline + espaço e o texto ocupa a largura toda,
     sem as quebras fixas nem o "buraco" à direita (o H1 encolhia pra ~199px como
     item flex do .hero-left). Os spans de gradiente seguem válidos inline —
     Hero usa :nth-child(3) e (4), Comunidade o :nth-child(4) e Contato o
     .fb-grad; todos aplicam background-clip:text normalmente quando inline, então
     as palavras de ênfase continuam no degradê. Títulos por <br> (Depoimentos):
     o <br> é só-desktop via .br-desktop, com espaço no HTML pra não colar. */
  .hero-title .grad { display: inline; }  /* trecho de ênfase flui junto no mobile */
  .hero-title .line, .comm-title .line, .contact-title .line, .inco-title .line { display: inline; }
  .hero-title .line > span, .comm-title .line > span, .contact-title .line > span, .inco-title .line > span { display: inline; }
  .hero-title .line:not(:last-child)::after,
  .comm-title .line:not(:last-child)::after,
  .contact-title .line:not(:last-child)::after,
  .inco-title .line:not(:last-child)::after { content: " "; }
  .br-desktop { display: none; }
}

/* ---------- Phone (≤480px) ---------- */
@media (max-width: 480px) {
  :root {
    --pad: 20px;
    --m-section-y: 72px;   /* mesmo valor do ≤768: padding vertical uniforme de seção */
    --m-title-gap: 30px;
    --m-block-gap: 20px;
  }

  /* Escala tipográfica phone — H1 mantido (referência) e H2 subiram de ~23px
     pra ~27px, com presença e ocupando a largura toda (fluem pelo bloco tablet
     acima). Em 375: H1 ~34px > H2 seção ~27px > H3 card ~21px. */
  .hero-title { font-size: clamp(2rem, 9vw, 2.5rem); }
  .comm-title, .feedback-title, .contact-title,
  .inco-title { font-size: clamp(1.6rem, 7.2vw, 1.9rem); }
  .prog-title { font-size: clamp(1.25rem, 5.6vw, 1.5rem); }
  .inco-overlay { font-size: clamp(1rem, 4.6vw, 1.25rem); }

  /* Box de vidro do form: 48px de padding lateral comia ~100px dos ~335px
     úteis do phone e espremia os inputs — respiro proporcional à tela */
  .contact .lead-form { padding: 28px 20px; }
}

/* ============================================================
   ONDA 2 — ajustes finos de seção (mobile). Blocos no fim de propósito:
   vencem por ordem de fonte em empates de especificidade com as regras acima.
   Desktop (>768) intocado.
   ============================================================ */
@media (max-width: 768px) {
  /* item 1 — HERO recomposto no mobile: conteúdo no TOPO e o 3D como grafismo
     de FUNDO na METADE INFERIOR, atrás de tudo, em OPACIDADE TOTAL.
     - Conteúdo no topo: .hero deixa de centralizar (align-self:start) e o
       padding-top encosta o bloco ~40px abaixo do header fixo (vai até ~91px).
     - 3D: absolute, z-index:0 (atrás do conteúdo z2 e da faixa z1). SEM opacity
       (opacidade total — herda o .96 do desktop, vívido; NÃO reduzir). Ancorado
       pelo TOP abaixo dos CTAs → NADA do 3D aparece na metade de cima (regra
       estrita). Ampliado além de 100vw pra extravasar as laterais; .hero tem
       overflow:hidden → recorta sem scroll horizontal. Estático (parallax off
       no mobile via matchMedia ≥769 no script.js). O `top` é por breakpoint
       (conteúdo é mais alto no phone): valor tablet aqui, phone no ≤480.
     - centraliza via propriedade `translate` (não `transform`) pra não colidir
       com o scale da timeline de entrada (que escreve em `transform`). */
  /* Hero um pouco mais alto que a viewport no mobile: dá janela pra mostrar BEM
     mais da forma 3D (crop bem mais suave) mantendo o sangramento lateral — a
     base ainda corta pela borda do Hero, só que bem menos. Rola um pouquinho
     pra ver a base + logos. */
  .hero { padding-top: 130px; min-height: 1180px; }
  .hero-left { align-self: start; }
  /* 3D GRANDE e CORTADO NA BASE (referência de design): absolute, ampliado,
     ancorado pra baixo — a forma extravasa a borda inferior do Hero e é
     recortada pelo overflow:hidden (efeito "sangrar"), aparecendo a porção
     superior/central, não a forma inteira. Volta a ser absolute (não in-flow)
     pra NÃO empurrar a altura do Hero — o Hero fica numa viewport só e a base
     da forma sangra pra fora. left/right negativos e SIMÉTRICOS centralizam e
     fazem extravasar as laterais SEM transform (assim a faixa não "nada" no
     scroll); width/height vêm de left/right + aspect-ratio. `top` abaixo dos
     CTAs → metade superior limpa. Opacidade total (sem opacity). */
  .hero-object {
    position: absolute; z-index: 0; pointer-events: none;
    translate: none; justify-self: auto; margin: 0; bottom: auto; right: auto;
    width: 108vw; left: calc(50% - 54vw);   /* sangra os lados, centralizado; base corta pra fora (bem suave) */
    top: 516px;                  /* tablet: um respiro a mais abaixo dos CTAs (~496) */
    aspect-ratio: 1 / 1.09;      /* proporção real do PNG → forma grande e alta */
    background-size: contain;
    background-position: center top;
  }

  /* FAIXA DE LOGOS: base do Hero, SOBRE o 3D, com painel de vidro ÚNICO cobrindo
     a faixa inteira. Glass no CONTAINER (.marquee), não em pedaços. border:0
     tira as linhas horizontais que cortavam a faixa; padding generoso dá corpo
     ao blur. z-index:1 (acima do 3D). -webkit- obrigatório pro iOS. */
  .hero .marquee {
    position: relative; z-index: 1;
    margin-top: 0;
    /* estoura o padding lateral do .hero (--pad) → glass de borda a borda */
    margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad));
    border: 0;
    /* remove o mask de fade horizontal: com ele o glass desbotava nas pontas
       (não cobria 100%). Sem mask + overflow:hidden, o glass é um retângulo
       homogêneo e os logos recortam limpo nas bordas do painel. */
    -webkit-mask-image: none; mask-image: none;
    padding-top: 32px; padding-bottom: 32px;
    background: rgba(22, 22, 25, 0.6);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
  }

  /* item 2 — PROGRAMAS: padding INTERNO do card. Aplicado no .prog-panel, que é
     o próprio card (fundo + border-radius) — o elemento certo pra afastar imagem/
     título/texto/lista/botão das bordas. Nada sobrescreve (estes blocos Onda 2 são
     os últimos por ordem de fonte). Reforçado pra descolar bem o conteúdo. */
  .prog-panel { padding: 36px 32px; }

  /* item 3 — COMUNIDADE: respiro sutil a mais nos cards de features (era 24px). */
  .community .pillar { padding: 30px 26px; }

  /* item 4a — IN-COMPANY: scrim um pouco mais forte pro texto do overlay ler
     melhor sobre o vídeo (era rgba(0,0,0,.62) no rodapé; sem escurecer demais). */
  .inco-scrim {
    opacity: 1;
    background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.18) 55%, transparent 78%);
  }
  /* item 4b — IN-COMPANY: TARJA PRETA embaixo. Duas causas, ambas por o vídeo
     perder no mobile o tamanho px explícito que o GSAP dava no desktop:
     (1) .inco-video vira position:static (regra mobile), então iframe/scrim/
         overlay (position:absolute) passam a se posicionar relativos à
         .incompany (relative), não ao box do vídeo → tudo desloca. Devolver
         position:relative ao box conserta o containing block dos três.
     (2) container-type:size + aspect-ratio sem tamanho px explícito deixa o
         cqh do iframe instável e o fundo escuro do .inco-video vaza embaixo.
         Desliga o container query e o iframe preenche 100% do box 16/9. */
  .inco-video { position: relative; container-type: normal; }
  .inco-iframe { top: 0; left: 0; transform: none; width: 100%; height: 100%; }

  /* item 5 — CONTATO: o respiro lateral de TODO o conteúdo interno (badge,
     título, texto e form) vem do padding do .contact-panel — o .contact-inner
     tem padding lateral 0. 16px ainda deixava tudo colado nas bordas do painel;
     24px dá respiro claro. O vertical fica com o .contact-inner (Onda 1);
     moldura (.contact) e box do form (.lead-form) seguem enxutos. */
  .contact { padding: 12px; }
  .contact-panel { padding: 0 24px; }
  .contact .lead-form { padding: 30px 22px; }
}

@media (max-width: 480px) {
  /* 3D grande/cortado no phone: top mais baixo (conteúdo termina ~609) e sangra
     um pouco mais nas laterais */
  .hero { min-height: 1010px; }   /* phone: menor que a do tablet (viewport mais curta) */
  .hero-object { top: 628px; width: 142vw; left: calc(50% - 71vw); }
  .prog-panel { padding: 32px 28px; }
  /* mesmo respiro lateral generoso do painel de Contato no phone (herda 24 do
     ≤768; explícito aqui pra clareza) */
  .contact-panel { padding: 0 22px; }
  .contact .lead-form { padding: 26px 20px; }
}

/* ============================================================
   ONDA 3 — faixa de logos do Hero no MOBILE (≤768, herdado por ≤480).
   Logos ~30% menores e animação BEM mais rápida (40s → 11s). Desktop
   intocado: a base fica em 40s e nas alturas originais. Loop segue seamless
   — só mudam DURAÇÃO e ALTURA; a estrutura track+dup e o translateX(-50%)
   (que garantem a repetição sem salto) não mudam. Escopo .hero p/ vencer a
   especificidade das regras-base (.brand-logo / .brand-logo--x) e não afetar
   nenhum logo fora do Hero.
   ============================================================ */
@media (max-width: 768px) {
  /* velocidade: 40s → 11s (~2.5× mais rápido percebido, já contando os logos menores) */
  .hero .marquee-track { animation-duration: 11s; }
  /* tamanhos ~70% dos atuais (≈30% menores) + gap reduzido pra manter o ritmo */
  .hero .brand-logo { height: 20px; margin-right: 40px; }
  .hero .brand-logo--compact { height: 31px; }
  .hero .brand-logo--nubank,
  .hero .brand-logo--n99 { height: 28px; }
  .hero .brand-logo--meta { height: 17px; }
  .hero .brand-logo--zippi,
  .hero .brand-logo--google,
  .hero .brand-logo--treble { height: 22px; }
}