/* =========================================================================
   InsurIA — Design System
   Paleta clara (Home) + Paleta verde-escuro com 2 tons (seções internas)
   Tipografia: Fraunces (display), Inter Tight (sans), JetBrains Mono (mono)
   ========================================================================= */

:root {
  /* ---- Paleta clara (Home — manual da marca) ---- */
  --paper: #FBF7EE;           /* fundo creme */
             /* destaque suave */
  --ink:   #04342C;           /* tinta verde-escuro */

  --green: #0F6E56;
  --green-bright: #1B9B72;
  --green-glow: #5DCAA5;      /* verde-menta de destaque */
  --brown: #633806;
  --amber: #BA7517;
  --gold: #EBC875;                /* âmbar/dourado canônico (Formação Básica, Premium, etc.) */

  
  --rust:  #B0522F;
  --line:  rgba(4, 52, 44, 0.12);


  /* ---- Paleta escura (seções internas — 2 tons) ---- */
  --dark-1: #04342C;          /* verde-escuro profundo */
  --dark-2: #0A4A3A;          /* verde-escuro médio (transição) */
  --dark-card: #052920;       /* card mais escuro que o fundo */
  --dark-card-2: #0F4A38;     /* card alternativo */
  --nav-bg:  #214D3F;         /* verde médio — fundo do nav (rodada 3) */
  --dark-line: rgba(93, 202, 165, 0.18);
  --dark-line-strong: rgba(93, 202, 165, 0.35);
  --dark-text: #FBF7EE;
  --dark-text-soft: rgba(251, 247, 238, 0.72);
  --dark-text-muted: rgba(251, 247, 238, 0.55);

  /* ---- Sombras / efeitos ---- */

  --shadow-md: 0 8px 24px rgba(4, 52, 44, 0.08);
  --shadow-lg: 0 24px 48px rgba(4, 52, 44, 0.14);
  --shadow-glow: 0 0 32px rgba(93, 202, 165, 0.18);

  /* ---- Tipografia (PADRÃO GLOBAL — rodada 8 ajustada) ----
     • Títulos dos blocos: Fraunces (serif elegante)
     • Resto do site (parágrafos, botões, navegação): Inter Tight
     • "InsurIA" sempre em Unbounded peso 700 via classe .brand */
  --display:    "Fraunces", "Times New Roman", Georgia, serif;
  --display-ub: "Unbounded", "Inter Tight", -apple-system, sans-serif;
  --display-pf: "Playfair Display", "Fraunces", Georgia, serif;           /* Playfair Display — títulos (migração r323–r368) */
  --sans:       "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans-hero:  "DM Sans", "Inter Tight", -apple-system, sans-serif;  /* corpo dos heros + botões dos heros */
  --mono:       "JetBrains Mono", ui-monospace, monospace;

  /* ---- Layout ---- */
  --container: 1280px;

  --radius-md: 16px;
  --radius-lg: 28px;

}

/* ====================== RESET ====================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);     /* Inter Tight — padrão global */
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* =========================================================================
   PADRÃO GLOBAL — "InsurIA" sempre em Unbounded bold (rodada 8)
   ========================================================================= */
.brand {
  font-family: var(--display-ub) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  text-transform: none !important;   /* r179 — a marca NUNCA é achatada p/ caixa-alta, mesmo dentro de rótulos mono */
  letter-spacing: -0.025em;
}
/* Compensação ótica — Unbounded 700 é naturalmente mais alta/larga que Fraunces.
   Em títulos grandes (heros e seções), reduzir levemente para harmonizar visualmente.
   Rodada 39k. */
.hero h1 .brand,
.hero2__title .brand,
.section__title .brand,
.detail-hero__title .brand,
.course-hero__title .brand {
  font-size: 0.88em;
}

/* Utility: palavra colorida em verde-menta (rodada 16).
   Funciona em <span> (cor apenas) ou em <strong class="text-green">
   (cor + bold do próprio strong) — útil em parágrafos sobre fundo escuro. */
.text-green {
  color: var(--green-glow) !important;
  font-style: italic !important;        /* rodada 39d — sempre italic, igual ao padrão Home (.w-glow) */
  font-weight: 400 !important;          /* rodada 39d — alinhar com peso Home (era herdando 300 em alguns títulos) */
}
/* Reforça que a cor verde se mantém mesmo dentro de body.theme-dark strong (paper) */
strong.text-green,
body.theme-dark strong.text-green {
  color: var(--green-glow) !important;
  font-weight: 700 !important;        /* rodada 39i — restaura bold em strong (text-green tem 400 !important) */
}

/* Utility — itálico, combina com .text-green */
.text-italic { font-style: italic !important; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, video { max-width: 100%; display: block; }
ul, ol { list-style: none; }
::selection { background: var(--ink); color: var(--paper); }

/* ====================== NAV ====================== */
/* Rodada 39 — nav paper translúcido + blur (opção C aprovada após comparação)
   Padroniza com o footer paper 100% criando moldura clara no topo e na base do site.
   Mesma paleta para nav e footer; nav usa transparência+blur porque flutua sobre conteúdo. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(251, 247, 238, 0.72);                /* paper 72% */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(4, 52, 44, 0.08);       /* hairline ink para separar do hero */
  transition: border-color .3s ease, padding .3s ease, background .3s ease;
}
.nav.scrolled {
  border-bottom-color: rgba(4, 52, 44, 0.14);
  padding: 12px 40px;
  background: rgba(251, 247, 238, 0.92);                /* mais sólido após scroll */
}
/* Mesmo tratamento em páginas dark — nav é universal agora */
body.theme-dark .nav {
  background: rgba(251, 247, 238, 0.72);
  color: var(--ink);
}
body.theme-dark .nav.scrolled {
  background: rgba(251, 247, 238, 0.92);
  border-bottom-color: rgba(4, 52, 44, 0.14);
}

.nav__logo {
  display: flex; align-items: center;
  text-decoration: none;
}
.nav__logo-img {
  height: 40px; width: auto;        /* rodada 39l — 52→40px (equilibrada). Footer mantém 52px. */
  object-fit: contain; object-position: left center;
}

.nav__links { display: flex; gap: 26px; align-items: center; }   /* rodada 50b — gap 36→26px para acomodar 8 itens sem ficar apertado */
.nav__links a {
  /* TESTE — fonte do cabeçalho (rodada 9):
     Atual: Fraunces 600 (serif elegante coerente com títulos)
     Alternativas para trocar: var(--sans) Inter Tight 500, ou "Times New Roman" 600 */
  font-family: var(--display);   /* Fraunces */
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.005em;
  opacity: 0.82;
  transition: opacity .2s ease, color .2s ease;
  position: relative;
  padding: 4px 0;
}
/* Item "InsurIA" — peso máximo no Fraunces (rodada 7) */
/* PADRÃO ESPECIAL DO NAV (rodada 15-b + 39):
   "InsurIA" no menu é a ÚNICA exceção do site onde a marca NÃO usa Unbounded.
   Mantém Fraunces 700, agora em ink (sobre nav paper 100%). */
.nav__links a[data-route=""],
.nav__links a[data-route=""].active,
body.theme-dark .nav__links a[data-route=""].active {
  font-family: var(--display) !important;   /* Fraunces */
  font-weight: 700 !important;
  color: var(--ink) !important;             /* rodada 39 — era paper, agora ink (nav claro) */
  opacity: 1;
  letter-spacing: -0.005em;
}
.nav__links a { color: var(--ink); }                         /* rodada 39 — links em ink */
body.theme-dark .nav__links a { color: var(--ink); }
.nav__links a:hover { opacity: 1; color: var(--green); }     /* rodada 39 — hover verde escuro */

/* Caso o highlightBrandInDOM venha a processar o nav no futuro,
   .brand dentro do nav também usa Fraunces + ink */
.nav .brand,
.nav__links .brand {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  opacity: 1;
  letter-spacing: -0.005em;
}
.nav__links a.active { opacity: 1; color: var(--green); }
body.theme-dark .nav__links a.active { color: var(--green); }
.nav__links a::after {
  content: ""; position: absolute;
  bottom: -6px; left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav__links a.active::after { transform: scaleX(1); }

.nav__ctas { display: flex; gap: 12px; align-items: center; }
.nav__cta {
  /* Padrão dos botões do nav (rodada 15-b):
     ambos os botões em Fraunces 700, mesma família tipográfica do menu */
  font-family: var(--display) !important;   /* Fraunces — força sobre regra global do .btn */
  padding: 11px 22px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 700;     /* paridade com Matricule-se */
  letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .25s ease;
}
/* Rodada 39 — CTAs ajustados para nav paper claro */
.nav__cta--ghost {
  background: transparent; color: var(--ink);
  border: 1px solid rgba(4, 52, 44, 0.30);
}
.nav__cta--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.nav__cta--primary {
  background: var(--green); color: var(--paper);              /* rodada 39 — verde sólido sobre paper */
  font-weight: 700;   /* rodada 7 — Matricule-se em negrito */
}
.nav__cta--primary:hover { background: var(--ink); transform: translateY(-1px); }
.nav__cta--primary::after { content: "→"; transition: transform .25s ease; }
.nav__cta--primary:hover::after { transform: translateX(3px); }

/* Páginas dark — nav agora é claro também, mesmas regras */
body.theme-dark .nav__cta--ghost { color: var(--ink); border-color: rgba(4, 52, 44, 0.30); }
body.theme-dark .nav__cta--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body.theme-dark .nav__cta--primary { background: var(--green); color: var(--paper); }
body.theme-dark .nav__cta--primary:hover { background: var(--ink); }

@media (max-width: 1080px) {
  .nav__cta--ghost { display: none; }  /* prioriza Matricule-se em telas médias */
}

/* Hamburger (visível só em mobile) */
.nav__burger {
  display: none;
  width: 44px; height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
.nav__burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
body.theme-dark .nav__burger span { background: var(--ink); }   /* rodada 39 — nav claro mesmo em theme-dark */
body.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
body.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav__burger { display: inline-flex; }

  /* Quando menu está aberto, mostra os links como overlay */
  body.menu-open .nav__links {
    display: flex !important;
    position: fixed;
    top: 68px; left: 0; right: 0; bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 24px 20px;
    background: var(--nav-bg);
    z-index: 99;
    overflow-y: auto;
  }
  body.menu-open .nav__links a {
    width: 100%;
    padding: 16px 0;
    border-bottom: 1px solid var(--dark-line);
    font-size: 19px;
    color: var(--paper);
    opacity: 1;
  }
  body.menu-open .nav__links a::after { display: none; }

  /* Bloquear scroll de fundo quando menu aberto */
  body.menu-open { overflow: hidden; }
}

@media (max-width: 880px) {
  .nav { padding: 14px 20px; }
  .nav__links { display: none; }
}

/* ====================== HERO (HOME + páginas internas após r41) ====================== */
.hero {
  padding: 110px 40px 56px;   /* rodada 4 — comprimido */
  background: var(--paper);
  position: relative;
  overflow: hidden;
  min-height: 760px;          /* rodada 41d — altura mínima padronizada para todos os heros iniciais
                                 do site. ⚠️ DESATUALIZADO para a Home: esta conta incluía os 2 CTAs,
                                 removidos na r322 — sem eles a Home NÃO preenche mais 760px e sobrava
                                 altura morta antes do bloco .hero2. Override logo abaixo.
                                 Páginas com menos conteúdo (Trilhas, Projetos, Quem Somos etc.)
                                 ficam com espaço vazio embaixo, a ser preenchido depois. */
}
/* r329 — HOME: min-height menor que o padrão. Com os CTAs fora (r322) o
   conteúdo do hero passou a medir ~640px, e os 760px do padrão viravam
   ~120px de vazio entre o vídeo e o título "Transformando o Mercado".
   Reduzido em 60px. ⚠️ Escopo só .hero--home: as demais páginas continuam
   em 760px, onde o vazio é intencional e será preenchido depois. */
.hero--home { min-height: 700px; }

/* Variante dark da Home (mesma paleta da página Formações) */
.hero--dark {
  background: var(--dark-1);
  color: var(--dark-text);
}
.hero--dark h1     { color: var(--paper); }
.hero--dark h1 em  { color: var(--green-glow); }
.hero--dark .hero__sub { color: var(--paper); opacity: 1; }
/* r334 — TESTE só na Home: subtítulo do hero em DM Sans 300 (light). A base é
   DM Sans 400; o Aldy achou o texto "grosso" e pediu o peso leve. Escopo
   .hero--home para NÃO afetar os subtítulos das outras páginas (Trilhas etc.).
   ⚠️ Os trechos <strong> ("InsurIA", "profissionais e empresas") seguem em 600
   — o salto 300->600 é grande; se ficar contrastante demais, baixar o strong
   para 500. */
.hero .hero__sub { font-weight: 300; }   /* r340 — DM Sans 300 (light) no subtítulo de TODOS os heros iniciais (antes só .hero--home). ⚠️ os <strong> seguem em 600 */

.hero__container {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 460px;
  gap: 64px; align-items: center;
}
/* Wide: vídeo widescreen com mais protagonismo (rodada 3 — vídeo maior)
   Rodada 4: removido min-height para colar com bandas seguintes
   Rodada 41c: align-items center → start (top) para fixar a posição vertical do eyebrow.
   Antes, conteúdos de texto mais curtos (Trilhas, Projetos, Quem Somos) ficavam centralizados
   verticalmente dentro da coluna alta do vídeo, fazendo o eyebrow descer do topo e parecer
   "fora do lugar" comparado à Home (cujo conteúdo enche a coluna inteira). */
.hero__container--wide {
  grid-template-columns: 0.85fr 1.55fr;
  align-items: start;
  gap: 56px;
}
/* Vídeo/mídia com posição vertical FIXA (rodada 41f).
   ANTES (r41c): align-self center — fazia o vídeo cair em Y diferente em cada página
   porque cada página tem altura de texto/cell diferente, deslocando o ponto de centragem.
   AGORA: align-self start + margin-top fixo. Vídeo sempre começa na MESMA altura Y do
   topo da seção (110px padding + 70px margin = 180px), igual à posição natural na Home. */
.hero__container--wide > .hero__video,
.hero__container--wide > .hero__media {
  align-self: start;
  margin-top: 70px;
}
/* Text-only: hero sem vídeo/imagem na lateral (rodada 41 — usado em Quem Somos,
   Conteúdos Gratuitos, Cursos Livres).
   Rodada 41g: container agora usa 1280px (herda do .hero__container) para que o
   eyebrow alinhe com o X position da Home/Trilhas/Projetos (X=40 do container).
   Conteúdo de texto (h1, sub) com max-width interno para preservar legibilidade. */
.hero__container--text {
  grid-template-columns: 1fr;
  gap: 0;
}
.hero__container--text h1,
.hero__container--text .hero__sub {
  max-width: 720px;
}
/* Wrapper de mídia genérico para hero (carrossel de vídeo nas páginas não-Home).
   Diferente de .hero__video porque não força aspect-ratio fixo — videoCarousel já
   tem suas dimensões internas. Mantém border-radius e shadow visualmente coerentes. */
.hero__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.hero__media .video-carousel { margin: 0; }
@media (max-width: 1080px) {
  .hero__container, .hero__container--wide { grid-template-columns: 1fr; gap: 48px; }
}

/* Vídeo do hero — agora maior, aspect-ratio 16:9 */
.hero__video {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--dark-card);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 0 0 1px var(--dark-line);
}
.hero__video video { width: 100%; height: 100%; object-fit: cover; display: block; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 13px;                          /* rodada 39c — +1pt para legibilidade (era 12px) */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brown);
  margin-bottom: 32px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-bright);
  animation: pulse 2s ease-in-out infinite;
}
body.theme-dark .eyebrow { color: var(--green-glow); }

/* Variante "prominent" — eyebrow com mais peso e gap reduzido com o título.
   Usada em heros centralizados onde o eyebrow tende a parecer "tímido"
   por causa da escala do título Fraunces grande logo abaixo (rodada 39i+39k). */
.section__head--centered .eyebrow {
  display: inline-flex;
  justify-content: center;
}
/* Zera margin default do h2/p em heads centralizados — evita o gap gigante
   que vinha do margin-block-start default do browser (~0.83em do font-size,
   chega a 53px num título Fraunces 64px). Espaçamento agora controlado
   exclusivamente por eyebrow margin-bottom + section__sub margin-top. */
.section__head--centered .section__title { margin: 0; }
.section__head--centered .section__sub { margin-top: 18px; }

/* Variante "tight" — gaps reduzidos + eyebrow alinhado à esquerda.
   Usado no Hero 2 (Conceito) da Formações (rodada 41h+i).
   Especificidade dupla `.section__head.section__head--tight` necessária para vencer
   o `.section__head { gap: 64px }` (linha ~637) que vem depois no source order. */

@keyframes pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.hero h1 {
  font-family: var(--display);   /* Fraunces */
  font-size: clamp(33px, 4.5vw, 62px);   /* rodada 41e — -2pt no max (era 34/4.6/64). Home parecia
                                            ligeiramente maior por percepção visual (4 palavras italic
                                            verdes criam peso); ajuste sutil aplicado globalmente. */
  font-weight: 400;              /* PADRONIZADO (rodada 14b) */
  line-height: 1.05;             /* PADRONIZADO */
  letter-spacing: -0.035em;      /* PADRONIZADO */
  /* Cor REMOVIDA na rodada 41b — herda do parent (.hero hero--dark = paper, .hero light = ink).
     Bug: especificidade igual com .hero--dark h1 (linha 316) — esta regra vinha DEPOIS e
     forçava color: var(--ink) sobre fundo dark, deixando o título invisível em
     Trilhas/Projetos/Quem Somos/Conteúdos/Formações Hero 1 (texto solto sem span de cor).
     Home não foi afetada porque cada palavra está em <span class="w-paper/w-glow"> com cor própria. */
}


.hero h1 em {
  font-weight: 400;                 /* rodada 39e — alinhado ao padrão Home (.w-glow weight 400) */
  font-style: italic;               /* rodada 39e — sempre italic */
  color: var(--green-glow);         /* rodada 39e — green-glow padrão de heros */
}
/* Cores das palavras do título do hero (rodada 2 + ajuste serif rodada 7) */
.hero h1 .w-paper  { color: var(--paper); }
.hero h1 .w-glow   { color: var(--green-glow); font-style: italic; font-weight: 400; }
.hero h1 .w-bright { color: var(--green-bright); font-style: italic; font-weight: 400; }


.hero__sub strong {
  color: var(--paper);
  font-weight: 600;
}

/* Realce global de "InsurIA" — sempre destacado em negrito (rodada 3) */
strong { font-weight: 700; }
body.theme-dark strong { color: var(--paper); }
.section__title strong { font-weight: 700; }

/* =========================================================================
   TIPOGRAFIA SERIF (rodada 7 — Fraunces)
   Pesos suaves (400-500) para que o serif respire bem.
   Itálico ativo nos <em> dos títulos para tirar proveito do italic do Fraunces.
   ========================================================================= */
.hero h1, .hero2__title, .section__title, .detail-hero__title, .course-hero__title,
.formacao-card__title, .trilha-card__title, .significa-card__title, .encontra-card__title,
.plano-card__name, .empresa-plan__name, .value-card__title, .modulo__title,
.lideranca__nome, .case-card__empresa,  .proposta-card h3,
.feature h3,  .pillar .v, .certificado-mock__nome,
.certificados-text__listtitle, .modulo-item__title, 
.formacao-card__num {
  font-weight: 500;
  letter-spacing: -0.015em;
}
/* Pesos mais leves nos títulos hero e section (efeito serif elegante) */
.hero h1, .section__title, .hero2__title,
.detail-hero__title, .course-hero__title {
  font-weight: 400;
}

/* Itálico nos <em> de títulos (Fraunces tem itálico lindíssimo) — rodada 39h: cor green-glow padronizada */
.hero h1 em, .section__title em, .hero2__title em, .detail-hero__title em,
.course-hero__title em,  
.feature em, .significa-card__title em, .encontra-card__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--green-glow);          /* rodada 39h — cor padrão de todo em em hero/título sobre fundo dark */
}

/* ============================================================
   r326 — HOME: título do hero em DM SANS 600, SEM ITÁLICO, verde único.
   Linha do teste: r323 Montserrat 400 -> r324 peso 500 -> r325 verde
   único e peso 600 -> r326 troca a família para DM Sans.
   ⚠️ DM Sans é a MESMA família do `--sans-hero`, usada no texto de
   apoio logo abaixo. Foi criada a variável própria `--display-dm`
   em vez de reaproveitar `--sans-hero`: se um dia o corpo dos heros
   mudar de fonte, o título NÃO deve mudar junto por tabela.
   ⚠️ DM Sans 600 é 6% mais estreita que Montserrat 600 no mesmo
   corpo (1079px contra 1148px na frase do título). O clamp foi
   mantido para a troca ser comparável; se faltar presença, 56px
   no máximo devolve a mesma mancha ótica.

   ⚠️⚠️ A POSIÇÃO DESTE BLOCO NÃO É DECORATIVA — NÃO MOVER PARA CIMA.
   Ele precisa vir DEPOIS de TRÊS regras que disputam com ele em
   especificidade IGUAL (e no empate vence a ÚLTIMA do arquivo):
     1. `.hero h1 { font-weight: 400 }`        (bloco "pesos mais leves")
     2. `.hero h1 .w-glow / .w-bright`          (definem italic + weight 400)
     3. `.hero h1 em { font-style: italic }`
   Na r323 o bloco estava ANTES delas: a família pegava (nada mais
   define font-family), mas o peso 500 e a remoção do itálico seriam
   silenciosamente ignorados. Mesma armadilha das rodadas 306 e 322.

   O título da Home não usa <em>: usa <span class="w-glow/w-bright">.
   Por isso o itálico é desligado NOS SPANS, e o peso 500 precisa ser
   repetido neles — as regras originais fixam font-weight:400 e, sem
   isso, as palavras verdes ficariam mais leves que as creme.

   Corpo entre a Fraunces (33/4.5vw/62) e a Unbounded (26/3.4vw/46).
   Escopo restrito a .hero--home: as outras páginas seguem em Fraunces.
   ============================================================ */
/* ============================================================
   r340 — DECISÃO: título dos heros INICIAIS de TODAS as páginas em
   Playfair Display. Padrão de peso: BRANCO 500 / VERDE 600. Entrelinha
   padronizada em 1.05. SEM caixa alta (o teste r339 foi descartado).

   Consolidação: este bloco era o teste .hero--home; virou GLOBAL (.hero h1).
   ⚠️ POSIÇÃO CRÍTICA — precisa vir DEPOIS dos blocos "TIPOGRAFIA SERIF"
   (que fixam .hero h1 em weight 400 e o <em> em itálico). Especificidade
   IGUAL (.hero h1 = 0,1,1); no empate vence a ÚLTIMA do arquivo. Mesma
   armadilha das rodadas 306/322/324. Não mover para cima.

   ⚠️ Playfair é SERIFA DE ALTO CONTRASTE — traços finos delicados sobre o
   verde escuro; conferir legibilidade em telas pequenas.

   Cobre os dois jeitos de marcar o verde no título:
     • outras páginas usam <em>  → .hero h1 em
     • a Home usa <span class="w-glow/w-bright/w-paper">
   ============================================================ */
.hero h1 {
  font-family: var(--display-pf);
  font-weight: 500;                      /* texto BRANCO */
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.05;                     /* entrelinha PADRONIZADA */
  letter-spacing: 0;                     /* serifa não pede respiro */
  text-transform: none;                  /* desfaz o teste de caixa alta (r339) */
}

/* r353 — algarismos ALINHADOS (lining) em TODOS os títulos Playfair. A Playfair
   Display usa oldstyle por padrão: 3,4,7,9 descem abaixo da linha de base e o
   "7" de "7 dias de garantia" parecia cair numa linha abaixo. */
.hero h1, .hero2__title,
.detail-hero__title, .course-hero__title, .formacao-detail-hero__title,
.section__title, .cg-cta__title, .mapa-cta__title, .mapa-cta-block__title,
.plp-title, .srf-title, .pvt-title, .formacoes-trees__title, .garantia-card__title,
.encontra-card__title, .modulo-item__title {   /* r371 — algarismos alinhados nestes títulos também */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
/* r341 — VERDE dos títulos de hero: 600, RETO (sem itálico), em TODAS as
   páginas (iniciais + detalhe). `font-style: normal` com !important para vencer
   o utilitário `.text-italic { font-style: italic !important }`. Cobre <em> e
   <span class="w-glow/w-bright/text-green">. */
.hero h1 em, .hero h1 .w-glow, .hero h1 .w-bright, .hero h1 .text-green,
.detail-hero__title em, .detail-hero__title .text-green,
.course-hero__title em, .course-hero__title .text-green,
.formacao-detail-hero__title em, .formacao-detail-hero__title .text-green,
.section__title em, .section__title .text-green,
.cg-cta__title em, .cg-cta__title .text-green,
.mapa-cta__title em, .mapa-cta__title .text-green,
.mapa-cta-block__title em, .mapa-cta-block__title .text-green,
.plp-title em, .plp-title .text-green,
.srf-title em, .srf-title .text-green,
.pvt-title em, .pvt-title .text-green,
.garantia-card__title em, .garantia-card__title .text-green {
  font-style: normal !important;
  font-weight: 600;
  color: var(--green-glow);
}
.hero h1 .w-paper { font-weight: 500; }  /* branco explícito nos spans da Home */
/* Variação em fundo claro: band-light usa --green em vez de --green-glow */
 .feature em { color: var(--green); }
.hero__sub {
  margin-top: 32px;
  font-family: var(--sans-hero);   /* DM Sans (rodada 10) */
  font-size: 18px;
  line-height: 1.6;
  max-width: 560px;
  color: var(--ink);
  opacity: 0.82;
}
.hero__ctas { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; }

/* ====================== BUTTONS ====================== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  border-radius: 100px;
  font-size: 15px; font-weight: 500;
  transition: all .25s ease;
  cursor: pointer;
}
/* PADRÃO GLOBAL — botões de heros (rodada 10):
   Todos os botões dentro de hero/detail-hero/course-hero/hero2 usam
   DM Sans em tamanho e peso consistentes. */
.hero .btn, .hero2 .btn, .detail-hero .btn, .course-hero .btn,
.hero2__ctas-main .btn-big, .hero2__ctas-main .btn,
.hero__ctas .btn {
  font-family: var(--sans-hero);   /* DM Sans */
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 16px 28px;
}
/* Botões grandes dos heros (Hero2) — DM Sans + tamanho ligeiramente maior */
.hero2__ctas-main .btn-big {
  font-family: var(--sans-hero);
  font-size: 16.5px;
  font-weight: 500;
  padding: 18px 32px;
}
.btn--accent {
  background: var(--green-glow); color: var(--dark-1);
}
.btn--accent:hover { background: var(--paper); }
.btn--dark-ghost {
  background: transparent; color: var(--paper);
  border: 1px solid var(--dark-line-strong);
}
.btn--dark-ghost:hover { border-color: var(--green-glow); color: var(--green-glow); }
.btn::after { content: "→"; transition: transform .25s ease; }
.btn:hover::after { transform: translateX(4px); }

/* ====================== SECTION HEADER ====================== */
.section {
  padding: 80px 40px;     /* rodada 4 — comprimido (era 120px) */
  position: relative;
}
/* PADRÃO GLOBAL — primeiro elemento da página tem espaço extra
   abaixo do nav fixo (rodada 8 — não fica grudado no header) */
/* Padding-top extra para primeiros elementos que NÃO têm clearance de nav embutido.
   .detail-hero saiu daqui na r41c (agora tem 110px próprios igual ao .hero, sem override). */
main > .section:first-child,
main > .course-hero:first-child,
main > .hero2:first-child {
  padding-top: 160px;
}
.section--dark {
  background: var(--dark-1);
  color: var(--dark-text);
}
.section--dark-2 {
  background: var(--dark-2);
  color: var(--dark-text);
}
/* Separação visual mais clara entre blocos (rodada 7) */

/* Subtítulo do bloco Para Empresas — alinhado ao padrão site (rodada 39f)
   ANTES (r26): font-size 22px (legado de quando era seção da Home) */
#para-empresas .section__sub { max-width: 720px; }
.section__container { max-width: var(--container); margin: 0 auto; }
.section__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: end;
  margin-bottom: 40px;     /* rodada 4 — era 64px */
}
/* Variante com vídeo à direita do texto (rodada 35 — usada em /formacoes)
   Coluna direita = 65% (rodada 36) */
@media (max-width: 880px) {
  .section { padding: 56px 20px; }
  .section__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
}
.section__title {
  font-family: var(--display-pf);   /* r342 — Playfair */
  font-size: clamp(32px, 4.6vw, 64px);   /* r342 */
  font-weight: 500;   /* r342 */                 /* rodada 39h — alinhado ao padrão Home (era 600 = semibold) */
  line-height: 1.05;                /* rodada 39h — alinhado ao padrão Home (era 1.04) */
  letter-spacing: 0;   /* r342 */
}
/* r372 — REMOVIDA a regra obsoleta da rodada 39d (`.section__title em` peso 400 + itálico):
   ela vinha DEPOIS da regra canônica da migração (bloco r341, ~L593: verde 600 reto,
   green-glow) com especificidade igual e roubava o peso (600 -> 400 -> render ~500),
   apagando o contraste branco-500 / verde-600. A regra r341 agora é a única fonte da
   verdade para o verde dos títulos de seção. */
.section__sub {
  font-family: var(--sans-hero);          /* rodada 39e — DM Sans, alinha com .hero__sub e .hero2__sub */
  font-size: 18px; line-height: 1.6;      /* rodada 39f — alinhado ao padrão Home (.hero__sub: 18px / 1.6) */
  color: var(--paper);                    /* rodada 39g — paper explícito (era herdado do .section--dark) */
  opacity: 1;                             /* rodada 39g — paper 100% (era 0.85, ficava acinzentado vs Home) */
  max-width: 540px;
}
.section__sub strong {                    /* rodada 39g — paridade com .hero__sub strong: bold em paper */
  color: var(--paper);
  font-weight: 600;
}

/* ====================== VIDEO CARROSSEL (abaixo dos títulos) ====================== */
.video-carousel {
  margin: 32px 0 64px;
  position: relative;
}
.video-carousel__viewport {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dark-card);
  box-shadow: var(--shadow-lg);
  position: relative;
  aspect-ratio: 16/9;
}
.video-carousel__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .6s ease;
  display: flex; align-items: center; justify-content: center;
}
.video-carousel__slide.active { opacity: 1; }
.video-carousel__slide video {
  width: 100%; height: 100%; object-fit: cover;
}
.video-carousel__caption {
  position: absolute; left: 24px; bottom: 24px;
  background: rgba(4, 52, 44, 0.7);
  backdrop-filter: blur(16px);
  color: var(--paper);
  /* r322 — legenda aumentada de 13px para 15px a pedido do Aldy: no carrossel
     dos Conteúdos Gratuitos ficava pequena demais sobre a imagem. O padding
     acompanha para a pílula não ficar apertada. */
  padding: 11px 18px;
  border-radius: 100px;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1px solid var(--dark-line);
}
.video-carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: rgba(4, 52, 44, 0.7);
  backdrop-filter: blur(16px);
  color: var(--paper);
  border-radius: 50%;
  font-size: 22px;
  border: 1px solid var(--dark-line);
  transition: all .25s ease;
  z-index: 5;
}
.video-carousel__nav:hover { background: var(--green-glow); color: var(--dark-1); }
.video-carousel__nav--prev { left: 16px; }
.video-carousel__nav--next { right: 16px; }
.video-carousel__dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 16px;
}
.video-carousel__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--dark-line-strong);
  transition: all .25s ease;
}
.video-carousel__dot.active { background: var(--green-glow); width: 24px; border-radius: 100px; }

/* ====================== CARDS — FORMAÇÕES ====================== */
.formacoes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 880px) { .formacoes-grid { grid-template-columns: 1fr; } }

/* CARDS DE FORMAÇÃO — paleta paper 75% (rodada 45)
   Decisão: cards usam #BDC6BE (paper 75%) para criar destaque editorial sobre dark-1.
   Texto em ink puro com peso 500-700 garante contraste forte. Card 02 (Data Analytics e IA)
   recebe modifier --popular com borda e glow verde-glow para sinalizar destaque. */
.formacao-card {
  background: #BDC6BE;                    /* paper 75% — verde-cinza claro */
  border: 1px solid rgba(4, 52, 44, 0.18);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: flex; flex-direction: column;
  transition: all .3s ease;
  cursor: pointer;
  min-height: 480px;
  color: var(--ink);
}
.formacao-card:hover {
  border-color: var(--green-glow);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}
.formacao-card--popular {
  border: 2px solid var(--green-glow);
  box-shadow: 0 0 32px rgba(93, 202, 165, 0.15);
}
.formacao-card__num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--green);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.formacao-card__title {
  font-family: var(--display-pf);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.formacao-card__subtitle {
  margin-top: 12px;
  color: var(--green);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--sans);
  line-height: 1.5;
  min-height: 3em;        /* r159 — reserva 2 linhas p/ alinhar a descrição entre os cards (subtítulos de 1 vs 2 linhas) */
}
.formacao-card__desc {
  margin-top: 24px;
  margin-bottom: 32px;          /* rodada 48b — gap mínimo entre descrição e linha divisória do meta */
  color: var(--ink);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
}
.formacao-card .formacao-card__desc strong {       /* rodada 45b — especificidade 0,2,1 vence body.theme-dark strong (0,1,2) que estava forçando color: paper */
  color: var(--ink);
  font-weight: 700;
}
.formacao-card__meta {
  margin-top: auto;                /* rodada 48 — META agora puxa pro fim do card; antes só o CTA fazia isso e o META variava de altura conforme a descrição */
  padding-top: 32px;               /* mantém respiro visual da descrição acima */
  border-top: 1px solid rgba(4, 52, 44, 0.28);
  display: flex; gap: 24px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.formacao-card__meta span::before {
  content: "● "; color: var(--green);
}
.formacao-card__cta {
  margin-top: 24px;                /* rodada 48 — gap fixo da meta (era margin-top: auto, mas com auto agora no meta seria redundante) */
  padding-top: 0;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--green);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.01em;
}
.formacao-card__cta::after { content: "→"; transition: transform .25s ease; }
.formacao-card:hover .formacao-card__cta::after { transform: translateX(4px); }

/* ====================== CARDS — TRILHAS ====================== */
.trilhas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--dark-line);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (max-width: 1080px) { .trilhas-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .trilhas-grid { grid-template-columns: 1fr; } }

.trilha-card {
  background: var(--dark-card);
  padding: 40px 28px 24px;
  display: flex; flex-direction: column;
  min-height: 360px;
  cursor: pointer;
  transition: background .25s ease;
  position: relative;
}
.trilha-card:hover { background: var(--dark-card-2); }

/* Trilha CTA Card — preenche espaço vazio da grid p/ promover Plano PRO (rodada 53) */
.trilha-card--cta {
  background: rgba(93, 202, 165, 0.06);
  cursor: default;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 40px 28px;
}
.trilha-card--cta:hover { background: rgba(93, 202, 165, 0.10); }
.trilha-card__cta-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  color: var(--green-glow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.trilha-card__cta-eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-glow);
  box-shadow: 0 0 12px var(--green-glow);
}
.trilha-card__cta-title {
  font-family: var(--display-pf);
  font-size: 26px; font-weight: 500;
  color: var(--paper);
  line-height: 1.2;
  max-width: 520px;
}
.trilha-card__cta-title em {
  color: var(--green-glow);
  font-style: italic;
}
.trilha-card__cta-desc {
  font-size: 15px; line-height: 1.55;
  color: var(--dark-text-soft);
  max-width: 540px;
  margin: 0;
}
.trilha-card__cta-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 14px 24px;
  background: var(--green-glow);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .25s ease;
}
.trilha-card__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(93, 202, 165, 0.3);
}
.trilha-card__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 24px;
}
.trilha-card__num {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--green-glow);
  text-transform: uppercase;
}
.trilha-card__num span { color: var(--dark-text-muted); margin: 0 6px; }
.trilha-card__arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--dark-line);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--paper);
  transition: all .25s ease;
}
.trilha-card:hover .trilha-card__arrow {
  background: var(--green-glow); border-color: var(--green-glow); color: var(--dark-1);
}
.trilha-card__title {
  font-family: var(--display-pf);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.trilha-card__subtitle {
  margin-top: 8px;
  color: var(--green-glow);
  font-size: 14px;
  font-weight: 300;
}
.trilha-card__desc {
  margin-top: 20px;
  color: var(--dark-text-soft);
  font-size: 16px;
  line-height: 1.6;                 /* rodada 39g — unificado em 1.6 */
}
.trilha-card__meta {
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--dark-line);
  display: flex; gap: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
}
.trilha-card__meta span::before { content: "● "; color: var(--green-glow); }

/* ====================== CARDS — CURSOS (estilo Asimov) ====================== */
.cursos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 1080px) { .cursos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 880px)  { .cursos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .cursos-grid { grid-template-columns: 1fr; } }

.curso-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  cursor: pointer;
  transition: all .3s ease;
  position: relative;
}
.curso-card:hover {
  transform: translateY(-4px);
  border-color: var(--green-glow);
  box-shadow: var(--shadow-glow);
}
.curso-card__thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #0F4A38 0%, #052920 100%);
  position: relative;
  overflow: hidden;
}
/* r238 — seta decorativa (telhadinho) do card removida */
.curso-card__thumb-num {
  position: absolute; bottom: 16px; right: 18px;
  font-family: var(--display); font-weight: 300;
  font-size: 28px; color: rgba(251, 247, 238, 0.10);
  font-weight: 600;
}
.curso-card__body {
  padding: 18px 20px 22px;
  display: flex; flex-direction: column;
  flex: 1;
}
.curso-card__code {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--green-glow);
  margin-bottom: 6px;
}
.curso-card__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--paper);
  letter-spacing: -0.005em;
  min-height: 2.6em;   /* r239 — reserva 2 linhas p/ alinhar as horas em todos os cards */
}
.curso-card__meta {
  margin-top: 14px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--dark-text-muted);
}
.curso-card__meta span { display: inline-flex; align-items: center; gap: 6px; }
.curso-card__meta span::before {
  content: "○"; color: var(--green-glow); font-size: 9px;
}
.curso-card__badge {
  position: absolute; top: 12px; right: 12px;
  padding: 4px 10px;
  background: var(--amber); color: var(--dark-1);
  border-radius: 100px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  z-index: 3;
}
.curso-card__code-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 6px;
}
.curso-card__code-row .curso-card__code { margin-bottom: 0; }
.curso-card__premium {
  flex: none;
  background: linear-gradient(135deg, #F2D98A, #D4AF37 55%, #B8860B);
  color: #2A1C00; font-weight: 700;
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 11px; border-radius: 100px;
  box-shadow: 0 2px 8px rgba(212,175,55,0.30); white-space: nowrap;
}
.pill--premium {
  background: linear-gradient(135deg, #F2D98A, #D4AF37 55%, #B8860B);
  color: #2A1C00; border-color: transparent; font-weight: 700;
}

/* r235 — cursos avulsos (venda individual) */
.curso-card__avulso {
  flex: none;
  border: 1px solid #D07E12; color: #000; background: #D07E12;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  padding: 3px 11px; border-radius: 100px; white-space: nowrap;
}
.pill--avulso { border-color: var(--green-glow); color: var(--green-glow); background: transparent; }
.curso-card__meta .curso-card__avulso { padding: 3px 11px; font-size: 10px; margin-left: auto; }
.curso-card__meta .curso-card__avulso::before, .curso-card__meta .curso-card__preco::before { content: none; }
.curso-card__preco { font-family: var(--sans); font-size: 15px; letter-spacing: 0.2px; color: #E8912A; font-weight: 700; }
.curso-avulso-cta {
  margin-top: 24px; border: 1px solid var(--green-glow); border-radius: 12px;
  padding: 20px 22px; background: rgba(93, 202, 165, 0.06);
}
.curso-avulso-cta__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.curso-avulso-cta__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-glow); }
.curso-avulso-cta__preco { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--paper); margin-top: 3px; }
.curso-avulso-cta__nota { font-size: 13.5px; line-height: 1.6; color: var(--paper); opacity: 0.82; margin: 16px 0 0; }
.curso-avulso-cta__nota strong { color: var(--paper); opacity: 1; font-weight: 600; }
.trilha-avulso-hint {
  max-width: 760px; margin: 22px 0 0; font-size: 14px; line-height: 1.6;
  color: var(--paper); opacity: 0.82; border-left: 3px solid var(--green-glow); padding-left: 14px;
}
.trilha-avulso-hint strong { color: var(--green-glow); font-weight: 700; }

/* ====================== MÓDULO (agrupador de cursos) ====================== */
.modulo {
  margin-bottom: 84px;   /* r213 — +1 linha de respiro entre categorias (era 56) */
}
.modulo__head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--dark-line);
}
.modulo__title {
  font-family: var(--display-pf);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.modulo__count {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green-glow);
  letter-spacing: 0.06em;
}

/* ====================== PROJETOS ====================== */

/* ====================== QUEM SOMOS ====================== */
.quem-somos__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 96px;
}
@media (max-width: 880px) { .quem-somos__pillars { grid-template-columns: 1fr; } }
.pillar {
  padding: 32px;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  background: var(--dark-card);
}
.pillar .v {
  font-family: var(--display-pf);
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--green-glow);
  font-weight: 600;
}
.pillar .l {
  margin-top: 8px;
  color: var(--dark-text-soft);
  font-size: 15px;
}
.proposta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 880px) { .proposta-grid { grid-template-columns: 1fr; } }
.proposta-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  border-top: 3px solid var(--green-glow);
}
.proposta-card .n {
  width: 36px; height: 36px;
  background: var(--green-glow);
  color: var(--dark-1);
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--mono);
  margin-bottom: 20px;
}
.proposta-card h3 {
  font-family: var(--display-pf); font-weight: 600;
  font-size: 26px; letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: 16px;
}
.proposta-card ul li {
  padding: 6px 0;
  color: var(--dark-text-soft);
  font-size: 16px;                  /* rodada 39g — alinhado ao padrão de cards (era 14.5px) */
  line-height: 1.6;                 /* rodada 39g */
  position: relative;
  padding-left: 18px;
}
.proposta-card ul li::before {
  content: "→"; color: var(--green-glow);
  position: absolute; left: 0; top: 6px;
  font-size: 12px;
}
.lideranca {
  margin-top: 96px;
  padding: 48px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  display: grid; grid-template-columns: 200px 1fr;
  gap: 48px; align-items: center;
}
@media (max-width: 768px) { .lideranca { grid-template-columns: 1fr; padding: 32px; } }
.lideranca__avatar {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-glow) 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 72px;
  color: var(--paper);
  box-shadow: var(--shadow-glow);
}
.lideranca__nome {
  font-family: var(--display);
  font-size: 36px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 16px;
}
.lideranca ul li {
  padding: 4px 0;
  color: var(--dark-text-soft);
  font-size: 16px;
}
.lideranca ul li::before { content: "● "; color: var(--green-glow); margin-right: 6px; }

/* Variante: card lideranca + sócios embutidos no lado direito (rodada 106).
   Grid 3 col: 200px (avatar) | 1fr (info Aldy) | 240px (sócios minimalistas).
   Divisor vertical sutil entre info e sócios. */
.lideranca--with-socios {
  grid-template-columns: 200px 1fr 240px;
  align-items: stretch;
  gap: 36px;
}
.lideranca__socios {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 28px;
  border-left: 1px solid var(--dark-line);
  justify-content: center;
}
.socios__eyebrow {
  margin-bottom: 4px;
}
.socio-mini {
  padding: 4px 0;
}
.socio-mini__nome {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: 2px;
}
.socio-mini__cargo {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--dark-text-soft);
}
@media (max-width: 1080px) {
  .lideranca--with-socios {
    grid-template-columns: 200px 1fr;
  }
  .lideranca__socios {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--dark-line);
    padding-top: 24px;
    margin-top: 8px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 24px;
  }
  .socio-mini { flex: 1 1 200px; }
}
@media (max-width: 768px) {
  .lideranca--with-socios { grid-template-columns: 1fr; }
}

.diferenciais-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px; margin-top: 48px;
  max-width: 820px;     /* rodada 107 — restringe largura para forçar quebra do texto em 2 linhas */
  margin-left: auto; margin-right: auto;
}
@media (max-width: 768px) { .diferenciais-grid { grid-template-columns: 1fr; } }
.diferencial {
  padding: 24px 28px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  display: flex; align-items: flex-start; gap: 16px;
}
.diferencial::before {
  content: "✓"; color: var(--green-glow);
  font-size: 18px; font-weight: 700;
  flex-shrink: 0;
  width: 28px; height: 28px;
  background: rgba(93, 202, 165, 0.12);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.cases-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 24px; margin-top: 32px;
}
@media (max-width: 768px) { .cases-grid { grid-template-columns: 1fr; } }
.case-card {
  padding: 32px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-left: 3px solid var(--green-glow);
  border-radius: var(--radius-md);
}
.case-card__area {
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-glow); margin-bottom: 6px;
}
.case-card__empresa {
  font-family: var(--display); font-size: 22px;
  font-weight: 600; letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: 16px;
}
.case-card ul li {
  padding: 6px 0; padding-left: 18px;
  font-size: 16px; color: var(--dark-text-soft);
  position: relative;
}
.case-card ul li::before {
  content: "▸"; color: var(--green-glow);
  position: absolute; left: 0; top: 6px;
}

/* ====================== BREADCRUMB ====================== */
.breadcrumb {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
  margin-bottom: 24px;
  display: flex; gap: 8px; align-items: center;
}
.breadcrumb a { color: var(--green-glow); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb__sep { color: var(--dark-text-muted); }

/* ====================== DETAIL PAGES ====================== */
.detail-hero {
  padding: 110px 40px 80px;       /* rodada 41c — alinhado ao padding-top de .hero (era 160px) */
  background: var(--dark-1);
  color: var(--dark-text);
}
.detail-hero__container { max-width: var(--container); margin: 0 auto; }
.detail-hero__tagline { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(19px, 2vw, 26px); line-height: 1.25; color: var(--dark-text-soft); max-width: 540px; margin: -10px 0 18px; }
.detail-hero__tagline em { font-style: italic; color: var(--green-glow); }
.detail-hero__title {
  font-family: var(--display-pf);   /* r341 — Playfair */
  font-size: clamp(34px, 4.6vw, 64px);   /* PADRONIZADO com outros heros (rodada 14b) */
  font-weight: 500;   /* r341 — branco 500 */
  line-height: 1.05;
  letter-spacing: 0;   /* r341 */
  color: var(--paper);
  margin-bottom: 24px;
}
.detail-hero__sub {
  font-weight: 300;   /* r341 — DM Sans 300 */
  font-family: var(--sans-hero);   /* DM Sans (rodada 10) */
  font-size: 18px;
  line-height: 1.6;
  color: var(--paper);             /* creme paper #FBF7EE (rodada 11) */
  opacity: 1;
  max-width: 720px;
}


/* ===== Trilha Precificação — hero com arte revelada à direita (r150d) ===== */


/* ===== Trilha Precificação — chips de estatística + cards de bloco (r150c) ===== */
.trilha-stats { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 14px; }
.trilha-stat {
  background: rgba(7, 50, 40, 0.55);
  border: 1px solid var(--dark-line);
  border-radius: 14px;
  padding: 13px 20px;
  backdrop-filter: blur(6px);
}
.trilha-stat b {
  font-family: var(--display); font-weight: 600; font-size: 26px;
  color: var(--green-glow); display: block; line-height: 1;
}
.trilha-stat span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--paper); opacity: 0.62;
  margin-top: 6px; display: block;
}
.blocos-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bloco-card {
  display: flex; flex-direction: column;
  background: linear-gradient(155deg, rgba(18, 88, 68, 0.55), rgba(7, 50, 40, 0.68));
  border: 1px solid var(--dark-line);
  border-radius: 18px;
  padding: 26px 24px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.bloco-card:hover { transform: translateY(-4px); border-color: var(--green-glow); }
.bloco-card__n {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--green-glow);
}
.bloco-card__title { font-family: var(--display-pf); font-size: 22px; margin: 9px 0 11px; color: var(--paper); }
.bloco-card__desc { font-size: 14.5px; line-height: 1.6; color: var(--paper); opacity: 0.78; }
.bloco-card__go {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--green-glow); margin-top: 16px;
}
@media (max-width: 880px) { .blocos-cards { grid-template-columns: 1fr; } }


/* ====================== CURSO DETAIL ====================== */

/* ====================== FOOTER ====================== */
.footer {
  background: var(--paper);     /* rodada 38b — creme paper 100% (#FBF7EE) */
  color: var(--ink);
  padding: 56px 40px 28px;     /* rodada 100 — top -1 linha (80→56), bottom ligeiramente menor (40→28) */
}
.footer__container {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(4, 52, 44, 0.32);    /* rodada 39h — linha mais visível (era 0.18, sumida) */
}
@media (max-width: 880px) { .footer__container { grid-template-columns: 1fr 1fr; gap: 32px; } }
/* r307 — REGRESSÃO da r305 corrigida: esta regra vivia em 520px e foi para 480px na
   consolidação, deixando o rodapé em 2 colunas apertadas entre 481 e 520. Movida para a
   faixa 640 (direção "para cima", segura) em vez de recriar um 7º breakpoint em 520. */
@media (max-width: 640px) { .footer__container { grid-template-columns: 1fr; } }
.footer__brand img {
  height: 52px;
  margin-bottom: 20px;
  display: block;
  /* PNG reprocessado sem padding interno (rodada 36) — alinha naturalmente com o texto */
}
.footer__brand p {
  color: var(--ink);                                          /* rodada 38c — ink puro para legibilidade */
  font-size: 15px;
  font-family: var(--sans);
  font-weight: 500;                                           /* rodada 38c — meio peso para contraste */
  line-height: 1.55;
  max-width: 360px;
}
/* Títulos das colunas (Formações, Plataforma, Contato) — Fraunces +2pt rodada 30 */
.footer__col h4 {
  font-family: var(--display);                                /* Fraunces */
  font-size: 16px;
  font-weight: 700;                                           /* rodada 38c — bold para garantir presença */
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--ink);                                          /* rodada 38c — ink puro (era verde, ficava sumido) */
  margin-bottom: 18px;
}
.footer__col a {
  display: block;
  padding: 5px 0;
  color: var(--ink);                                          /* rodada 38c — ink puro */
  font-size: 15px;
  font-weight: 500;                                           /* rodada 38c — meio peso para contraste */
  font-family: var(--sans);
  transition: color .25s ease;
}
.footer__col a:hover { color: var(--green); }                 /* rodada 38c — hover em verde escuro */
.footer__bottom {
  max-width: var(--container); margin: 0 auto;
  padding-top: 20px;     /* rodada 100 — ligeiramente menor (era 32px) */
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 12.5px;                                          /* rodada 39h — +1pt para legibilidade (era 11.5px) */
  font-weight: 500;                                           /* rodada 39h — meio peso (mono em regular tem stroke fino) */
  color: var(--ink);                                          /* rodada 39b — ink puro */
  letter-spacing: 0.04em;
}
/* rodada 50c — links institucionais inline no rodapé */
.footer__bottom-left {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.footer__bottom-left a {
  color: var(--ink);
  text-decoration: none;
  transition: color .25s ease;
}
.footer__bottom-left a:hover { color: var(--green); }
.footer__bottom-sep {
  color: rgba(4, 52, 44, 0.4);                                /* ink soft, ainda mais discreto que o texto */
  user-select: none;
}
.footer__bottom-tagline { white-space: nowrap; }

/* r307 — o .footer__bottom nunca teve tratamento de mobile: é uma linha flex com
   `space-between` e a tagline em `nowrap` exigindo ~380px, o que espremia o grupo de
   links e jogava cada item (e cada separador) numa linha própria. Em tela estreita os
   dois grupos passam a empilhar e a tagline volta a poder quebrar. */
@media (max-width: 640px) {
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.6;
  }
  .footer__bottom-left { gap: 10px; }
  .footer__bottom-tagline { white-space: normal; }
}

/* r308 — o FAB do WhatsApp é `position: fixed` (right 22px, bottom 22px, 58px de lado;
   16/52 em ≤480), então ao rolar até o fim ele ficava POR CIMA do fim da tagline.
   Reserva a altura que o botão ocupa (22 + 58 = 80px) com folga, para a última linha
   do rodapé terminar acima dele. Não afeta desktop nem as páginas de curso, onde o
   FAB é escondido por `body.route-curso .wa-fab { display: none }`. */
@media (max-width: 640px) {
  .footer { padding-bottom: 88px; }
}

/* ============================================================
   MAPA DE CARREIRAS (rodada 51) — Página completa
   ============================================================ */
/* Grid das áreas — overview (auto-fit p/ acomodar 7+ áreas) */

/* Detalhe por área */

/* Tabela de cargos (cargo · foco · formação) */
.cargos-table {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cargos-table__header {
  display: grid;
  grid-template-columns: 1fr 2fr 1.4fr;
  gap: 24px;
  padding: 16px 24px;
  background: rgba(0,0,0,0.18);
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: .08em;
  color: var(--dark-text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--dark-line);
}
.cargos-table__row {
  display: grid;
  grid-template-columns: 1fr 2fr 1.4fr;
  gap: 24px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--dark-line);
}
.cargos-table__row:last-child { border-bottom: none; }
.cargos-table__cargo {
  font-family: var(--display);
  font-size: 17px; font-weight: 500;
  color: var(--paper);
  line-height: 1.3;
}
.cargos-table__foco {
  font-size: 15px; line-height: 1.55;
  color: var(--dark-text-soft);
}
.cargos-table__form {
  font-size: 14.5px; line-height: 1.5;
  color: var(--dark-text-muted);
  font-style: italic;
}

/* Trilhas conectadas à área */
.area-detalhe__trilhas {
  margin-top: 36px;
  padding: 28px;
  background: rgba(93, 202, 165, 0.06);
  border: 1px solid rgba(93, 202, 165, 0.18);
  border-radius: var(--radius-md);
}
.area-detalhe__trilhas-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px; font-weight: 500; letter-spacing: .08em;
  color: var(--green-glow);
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* Preserva a capitalização correta de "InsurIA" dentro do label uppercase
   (rodada 71 — padrão de marca igual ao .trilha-rail__label-eyebrow .brand). */
.area-detalhe__trilhas-label .brand {
  text-transform: none;
  font-size: 11.5px;
  color: var(--paper);
}
.area-detalhe__trilhas-list {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.area-card__trilha {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  color: var(--paper);
  text-decoration: none;
  transition: border-color .25s ease, background .25s ease;
}
.area-card__trilha:hover {
  border-color: var(--green-glow);
  background: rgba(93, 202, 165, 0.1);
}
.area-card__trilha .n {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  color: var(--dark-text-muted);
  letter-spacing: .08em;
}
/* Variante Formação dentro do mesmo list — pill com border verde-glow para
   diferenciar visualmente da Trilha (rodada 74). Formação é tier 1 (mais
   estruturante que uma Trilha individual). */
.area-card__trilha--formacao {
  border-color: rgba(93, 202, 165, 0.45);
  background: rgba(93, 202, 165, 0.08);
}
.area-card__trilha--formacao .n {
  color: var(--green-glow);
}
.area-card__trilha--formacao:hover {
  border-color: var(--green-glow);
  background: rgba(93, 202, 165, 0.15);
}

/* ============================================================
   CONTEÚDOS GRATUITOS — formulário de cadastro + catálogo (rodada 76)
   ============================================================ */
/* Modifier para os blocos da página Conteúdos gratuitos: padding-top
   reduzido em 1 linha vs o default 80px do .section (rodada 76c). */
.cg-section {
  padding-top: 52px !important;
}
/* Reduzir o gap interno do section__head--centered nesses blocos —
   o gap default do grid é 64px, deixa muito espaço entre eyebrow,
   título e subtítulo. -1 linha (rodada 76e). */
.cg-section .section__head--centered {
  gap: 28px;
  margin-bottom: 32px;
}

.cadastro-section {
  position: relative;
}
/* Eyebrow centralizado no topo do bloco (mesmo padrão do MapaCTA — rodada 76b). */
.cadastro-top {
  text-align: center;
  margin-bottom: 46px;
}
.cadastro-top .eyebrow { margin: 0; }

.cadastro-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 1080px) {
  .cadastro-wrap { grid-template-columns: 1fr; gap: 32px; }
}
.cadastro-text .section__title { margin: 0 0 18px; }
.cadastro-text .section__sub { max-width: 480px; }

.cadastro-form {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cadastro-form__submit {
  margin-top: 12px;
  padding: 18px 32px;
  background: var(--green-glow);
  color: var(--dark-1);
  font-family: var(--sans-hero);
  font-size: 16px; font-weight: 600;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 24px rgba(93, 202, 165, 0.18);
}
.cadastro-form__submit:hover {
  background: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(93, 202, 165, 0.28);
}
.cadastro-form__legal {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dark-text-muted);
  margin-top: 4px;
}
.cadastro-form__legal a {
  color: var(--green-glow);
  text-decoration: none;
}
.cadastro-form__legal a:hover { text-decoration: underline; }

/* Catálogo de conteúdos gratuitos — cards compactos clicáveis (rodada 77).
   Cada card linka para /conteudos-gratuitos/:id que tem a lista completa. */
.cg-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 16px;
}
@media (max-width: 1080px) {
  .cg-cards { grid-template-columns: 1fr; }
}
.cg-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease, background .25s ease;
}
.cg-card:hover {
  border-color: var(--green-glow);
  transform: translateY(-3px);
  background: rgba(93, 202, 165, 0.04);
}
.cg-card:hover .cg-card__cta-arrow { transform: translateX(4px); }

.cg-card__tag {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--green-glow);
}
.cg-card__title {
  font-family: var(--display-pf);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--paper);
  margin: 0;
}
.cg-card__tagline {
  font-family: var(--sans-hero);
  font-size: 16px;
  color: var(--green-glow);
  margin: 0;
}
.cg-card__desc {
  font-size: 15px; line-height: 1.6;
  color: var(--dark-text-soft);
  margin: 0;
}
.cg-card__meta-row {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 4px;
}
.cg-card__meta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(93, 202, 165, 0.08);
  border: 1px solid rgba(93, 202, 165, 0.30);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--green-glow);
  letter-spacing: .04em;
}
.cg-card__meta-icon { font-size: 13px; }
.cg-card__cta {
  margin-top: auto;
  padding-top: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans-hero);
  font-size: 15px; font-weight: 600;
  color: var(--green-glow);
}
.cg-card__cta-arrow {
  transition: transform .25s ease;
}

/* ============================================================
   CONTEÚDO GRATUITO — PÁGINA DE DETALHE (rodada 77)
   Hero estilo Asimov + lista vertical de aulas clicáveis.
   ============================================================ */
.cg-detail-hero {
  min-height: 0;                                         /* override do .hero min-height: 760px */
  padding-bottom: 40px;
}
.cg-detail-breadcrumb {
  margin-bottom: 24px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
}
.cg-detail-breadcrumb a {
  color: var(--green-glow);
  text-decoration: none;
}
.cg-detail-breadcrumb a:hover { text-decoration: underline; }
.cg-detail-meta {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 12px;
}
.cg-detail-meta__item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(93, 202, 165, 0.08);
  border: 1px solid rgba(93, 202, 165, 0.30);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--green-glow);
  letter-spacing: .04em;
}
.cg-detail-meta__item--free {
  background: rgba(93, 202, 165, 0.18);
  border-color: var(--green-glow);
}
.cg-detail-meta__icon { font-size: 14px; }

/* Lista de aulas/cursos da página de detalhe */
.cg-detail-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 12px;
  max-width: 920px;
  margin-left: auto; margin-right: auto;
}
.cg-detail-list__item { display: contents; }
.cg-detail-aula {
  width: 100%;
  text-align: left;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: all .25s ease;
}
.cg-detail-aula:hover {
  border-color: var(--green-glow);
  background: rgba(93, 202, 165, 0.04);
  transform: translateX(2px);
}
.cg-detail-aula__num {
  font-family: var(--display);
  font-size: 32px; font-weight: 300;
  font-style: italic;
  color: var(--green-glow);
  line-height: 1;
  text-align: center;
}
.cg-detail-aula__body { min-width: 0; }
.cg-detail-aula__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.cg-detail-aula__codigo {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
}
.cg-detail-aula__duracao {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  color: var(--dark-text-muted);
}
.cg-detail-aula__badge {
  display: inline-block;
  padding: 2px 8px;
  background: var(--green-glow);
  color: var(--dark-1);
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 4px;
}
.cg-detail-aula__titulo {
  font-family: var(--display);
  font-size: 19px; font-weight: 600;
  color: var(--paper);
  margin: 0 0 6px;
  line-height: 1.3;
}
.cg-detail-aula__desc {
  font-size: 14.5px; line-height: 1.55;
  color: var(--dark-text-soft);
  margin: 0;
}
.cg-detail-aula__cta {
  display: inline-flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 12px 16px;
  background: rgba(93, 202, 165, 0.10);
  border: 1px solid rgba(93, 202, 165, 0.40);
  border-radius: 12px;
  color: var(--green-glow);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all .25s ease;
}
.cg-detail-aula:hover .cg-detail-aula__cta {
  background: var(--green-glow);
  color: var(--dark-1);
}
.cg-detail-aula__cta-icon { font-size: 14px; }

@media (max-width: 768px) {
  .cg-detail-aula { grid-template-columns: 40px 1fr; padding: 18px 20px; gap: 14px; }
  .cg-detail-aula__num { font-size: 24px; }
  .cg-detail-aula__cta { display: none; }
}

/* Footer da página de detalhe */
.cg-detail-foot {
  display: flex; gap: 16px; flex-wrap: wrap;
  justify-content: center;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--dark-line);
}

/* CTA final do catálogo */
.cg-cta {
  margin-top: 64px;
  padding: 48px 32px;
  background: linear-gradient(135deg, rgba(93, 202, 165, 0.08), rgba(93, 202, 165, 0.02));
  border: 1px solid rgba(93, 202, 165, 0.30);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cg-cta__title {
  font-family: var(--display-pf);   /* r342 — Playfair */
  font-size: clamp(32px, 4.6vw, 64px);   /* r342 */   /* rodada 76f — alinhado a .section__title */
  font-weight: 500;   /* r342 */                      /* peso 400 (padrão hero), igual ao restante da página */
  line-height: 1.05;
  letter-spacing: 0;   /* r342 */
  color: var(--paper);
  margin: 0 0 18px;
}
.cg-cta__sub {
  font-family: var(--sans-hero);
  font-size: 18px; line-height: 1.6;     /* rodada 76f — alinhado a .section__sub */
  color: var(--paper);
  max-width: 720px;
  margin: 0 auto 32px;
}
.cg-cta__btns {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}

.area-detalhe__nota {
  margin-top: 28px;
  padding: 20px 24px;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--green-glow);
  font-size: 14.5px; line-height: 1.6;
  color: var(--dark-text-soft);
  font-style: italic;
}

/* Evolução de carreira — 4 estágios horizontais */

/* CTA final do Mapa de Carreiras */
.mapa-cta {
  text-align: center;
  max-width: 1100px; margin: 0 auto;                    /* rodada 65i — 720→1100 (título 1 linha) */
  padding: 16px 24px;                                   /* rodada 65i — 48→16 (top mais compacto) */
}
.mapa-cta__title {
  font-family: var(--display-pf);   /* r342 — Playfair */
  font-size: clamp(32px, 4.6vw, 64px);   /* r342 */                  /* rodada 65h — alinhado com .section__title */
  font-weight: 500;   /* r342 */
  color: var(--paper);
  line-height: 1.05;
  letter-spacing: 0;   /* r342 */
  margin: 0 0 16px;
}
.mapa-cta__sub {
  font-family: var(--sans-hero);                        /* rodada 65h — DM Sans, igual .section__sub */
  font-size: 18px; line-height: 1.6;
  color: var(--paper);
  opacity: 1;
  max-width: 980px;                                     /* rodada 65i — 540→980 (subtítulo em 2 linhas) */
  margin: 18px auto 32px;
}
.mapa-cta__btns {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}

/* ============================================================
   BLOCO MAPA-CTA-BLOCK — Hero CTA na Home (rodada 67 + 67c)
   2 colunas: texto à esquerda + mini-roda decorativa à direita.
   Aparece entre "Significa" e "Encontra" e leva ao Mapa de Carreiras.
   Padronizado com altura/alinhamento dos heros da Home (rodada 67c).
   ============================================================ */
.mapa-cta-block {
  position: relative;
  overflow: hidden;
  /* rodada 73b — +1 linha de respiro acima do eyebrow (56px → 84px).
     Antes era 56px (compacto). Aldy aprovou o aumento. */
  padding-top: 84px !important;
  padding-bottom: 64px !important;
}
/* IMPORTANTE: NÃO adicionar padding ao .section__container aqui — o .section
   já tem padding 0 40px lateral, e duplicar empurra o eyebrow 40px para
   dentro, desalinhando do eyebrow do hero (rodada 67e). */
.mapa-cta-block__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;          /* 50/50 — roda ocupa mesma largura do texto */
  gap: 64px;
  align-items: start;                      /* rodada 67e — eyebrow fixo no TOPO,
                                              igual ao .hero__container--wide */
}
.mapa-cta-block__text {
  max-width: 560px;
  /* Texto começa no topo da grid, alinhado com o início da seção. */
}
/* Eyebrow extraído da coluna de texto e centralizado no topo do bloco
   (rodada 68c — Aldy aprovou layout com "MAPA DE CARREIRAS" centralizado). */
.mapa-cta-block__top {
  text-align: center;
  margin-bottom: 46px;                     /* mantém o respiro de 1 linha entre eyebrow e título */
}
.mapa-cta-block__top .eyebrow {
  margin: 0;                               /* zera margin default — espaçamento controlado pelo wrapper */
}
.mapa-cta-block__title {
  font-family: var(--display-pf);   /* r342 — Playfair */
  font-size: clamp(32px, 4.6vw, 64px);   /* r342 */     /* rodada 67c — alinhado ao .hero h1 (era .section__title) */
  font-weight: 500;   /* r342 */
  line-height: 1.05;
  letter-spacing: 0;   /* r342 */
  color: var(--paper);
  margin: 0 0 20px;
}
.mapa-cta-block__title em {
  font-weight: 400;
  font-style: italic;
  color: var(--green-glow);                /* padrão "palavra em verde" dos heros */
}
.mapa-cta-block__sub {
  font-family: var(--sans-hero);           /* DM Sans, igual .section__sub e .hero__sub */
  font-size: 18px;
  line-height: 1.6;
  color: var(--paper);
  opacity: 1;
  max-width: 540px;
  margin: 0 0 32px;
}
.mapa-cta-block__sub strong {
  color: var(--paper);
  font-weight: 600;
}
.mapa-cta-block__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  background: var(--green-glow);
  color: var(--dark-1);
  font-family: var(--sans-hero);
  font-size: 16.5px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 24px rgba(93, 202, 165, 0.18);
}
.mapa-cta-block__btn:hover {
  background: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(93, 202, 165, 0.28);
}
.mapa-cta-block__btn-arrow {
  display: inline-block;
  transition: transform .25s ease;
}
.mapa-cta-block__btn:hover .mapa-cta-block__btn-arrow {
  transform: translateX(4px);
}
.mapa-cta-block__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mapa-cta-block__preview::before {
  /* Halo verde por trás da roda — destaque visual sutil */
  content: "";
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(93, 202, 165, 0.10) 0%, rgba(93, 202, 165, 0) 70%);
  pointer-events: none;
  z-index: 0;
}
/* Override do tamanho da .wheel (que por default usa 550px) quando aparece
   dentro do bloco CTA da Home — mantém proporção mas em escala reduzida.
   Os labels (.wheel__label-num/name) escalam proporcionalmente porque o
   SVG usa viewBox e width responsivo (rodada 67d). */
.mapa-cta-block__preview .wheel {
  max-width: 480px;
}

/* Responsivo do Mapa CTA Block */
@media (max-width: 880px) {
  .mapa-cta-block__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .mapa-cta-block__text { max-width: none; }
  /* r346 — REMOVIDO o `order: -1` da roda: o texto (título+subtítulo) deve vir
     PRIMEIRO no mobile, depois a roda. A ordem natural do DOM já é essa. */
  /* r346 — o alvo era .wheel, mas o SVG da roda tem classe .nwheel; a regra
     nunca aplicava e a roda ficava nos 500px globais, com os rótulos vazando
     pelas bordas. Corrigido o seletor e reduzido o tamanho. */
  /* r347 — largura RELATIVA à tela em vez de fixa. Os rótulos das áreas ficam
     ~80u FORA do viewBox (440u) de cada lado, então o conteúdo visível é ~1,36x
     a largura da roda. Com 60vw (teto 340px) sempre sobra margem para eles não
     "comerem" nas bordas, em qualquer largura de celular. */
  .mapa-cta-block__preview .nwheel { max-width: min(340px, 60vw); }
  .mapa-cta-block__preview::before { width: min(300px, 52vw); height: min(300px, 52vw); }
}

/* Responsivo Mapa de Carreiras */

@media (max-width: 768px) {
  .cargos-table__header { display: none; }
  .cargos-table__row { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
  .cargos-table__cargo { font-size: 16px; }
  .cargos-table__foco { font-size: 14px; }
  .cargos-table__form { font-size: 12.5px; }
}

/* ============================================================
   MAPA DE CARREIRAS — VERSÃO B (rodada 51b)
   Roda donut + Trilha rail + Subway map + Accordion
   ============================================================ */

/* HERO do Mapa de Carreiras — 2 col + tagline central abaixo (rodada 60) */
.mapa-hero__video {
  display: flex; align-items: center; justify-content: center;
  min-height: 280px;
}
.mapa-hero__tagline {
  max-width: 1360px;
  margin: 24px auto 0;
  padding: 0 16px;
  text-align: center;
}
.mapa-hero__tagline p {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 36px);                /* r136 — +2pt (Aldy); max-width p/ 1 linha */
  font-weight: 400;
  color: var(--paper);
  line-height: 1.2;
  margin: 0;
  max-width: 1320px;
  margin-left: auto; margin-right: auto;
}
.mapa-hero__tagline em {
  color: var(--green-glow);
  font-style: italic;
  font-weight: 500;
}

/* CTAs na base do hero da Para Empresas (rodada 80).
   Mesma posição estrutural do .mapa-hero__tagline — abaixo das 2 colunas
   do hero, ocupando a largura do container, centralizado. */

/* RODA 3D — peça central (rodada 51d5)
   Layout: wheel CENTRALIZADO; card e pills aparecem na esquerda OU direita
   baseado em qual área foi destacada (.is-right ou .is-left). */
.wheel-stage {
  position: relative;
  display: flex;
  align-items: center; justify-content: center;
  padding: 40px 0 60px;
  min-height: 640px;
}
.wheel {
  position: relative;
  width: 100%; max-width: 550px; height: auto;       /* +10% (rodada 51d6) */
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 36px 60px rgba(0,0,0,0.45));
  z-index: 2;
}


.wheel__label-num {
  font-family: var(--display);
  font-size: 28px; font-weight: 300;
  fill: rgba(255,255,255,0.96);
  font-style: italic;
}

.wheel__center-title {
  font-family: var(--display);
  font-size: 26px; font-weight: 500;
  fill: var(--paper);
  font-style: italic;
}

/* Linha de conexão (overlay) */
.wheel-connector {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 6;                                     /* rodada 51d8 — acima do wrapper */
  overflow: visible;
}
.wheel-connector.is-visible { opacity: 1; }
.wheel-connector__path {
  stroke-width: 2;                                /* rodada 51d8 — +0.4 p/ visibilidade */
  stroke-dasharray: 5 6;
  filter: drop-shadow(0 0 8px currentColor);
  fill: none;
}
.wheel-connector__dot {
  filter: drop-shadow(0 0 10px currentColor);
}

/* WRAPPER do card+pills — posição varia por área (rodada 51d10)
   Width 240 → 300 para acomodar nomes longos de trilhas
   ("Trilha Subscrição de Riscos", "Trilha Provisões de Sinistros") */
.wheel-side-wrap {
  position: absolute;
  width: 320px;
  display: flex; flex-direction: column;
  gap: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
  transform: translateY(var(--wrap-translate-y, -50%));
  transition: opacity .3s ease;
}
.wheel-side-wrap.is-right { right: 30px; left: auto; }
.wheel-side-wrap.is-left  { left: 30px;  right: auto; }
.wheel-side-wrap.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Card lateral — agora dentro do wrapper, sem positioning próprio */
.wheel-side {
  position: relative;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  padding: 20px 22px 16px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.wheel-side-wrap.is-right .wheel-side {
  border-left: 3px solid var(--side-cor, var(--green-glow));
}
.wheel-side-wrap.is-left .wheel-side {
  border-right: 3px solid var(--side-cor, var(--green-glow));
}
.wheel-side:hover {
  background: rgba(255,255,255,0.025);
  border-color: var(--side-cor);
}

/* Pills — abaixo do card, alinhadas no centro do wrapper, com padding p/ trunk */
.wheel-trilhas {
  position: relative;
  display: flex; flex-direction: column;
  gap: 8px;
  margin-left: 24px;                         /* indent p/ ficar alinhado com trunk */
}
.wheel-side-wrap.is-left .wheel-trilhas {
  margin-left: 0;
  margin-right: 24px;                        /* mirror p/ esquerda */
}
.wheel-trilhas.is-left .trilha-pill-out:hover {
  transform: translateX(3px);
}
.trilha-pill-out {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-left: 3px solid var(--side-cor);
  border-radius: 8px;
  text-decoration: none;
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  transition: background .2s ease, transform .2s ease;
}
.trilha-pill-out:hover {
  background: rgba(255,255,255,0.04);
  transform: translateX(-3px);
}
.trilha-pill-out__num {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  color: var(--dark-text-muted);
  letter-spacing: 0.06em;
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  padding: 3px 8px;
}
.trilha-pill-out__title {
  flex: 1;
  white-space: normal;                              /* rodada 51d10 — permite wrap */
  line-height: 1.3;
  word-break: normal;
  hyphens: auto;
}
.wheel-trilhas__empty {
  background: var(--dark-card);
  border: 1px dashed var(--dark-line);
  border-radius: 8px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.wheel-trilhas__empty-label {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  color: var(--dark-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.wheel-trilhas__empty-text {
  font-size: 13px; font-style: italic;
  color: var(--dark-text-soft);
  line-height: 1.45;
}
.wheel-trilhas__empty-text a {
  color: var(--green-glow);
  text-decoration: none;
}

/* SVG dos conectores card → pill — agora trunk + branches */
.wheel-trilha-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 6;                                     /* rodada 51d8 — acima do wrapper */
  overflow: visible;
}
.wheel-trilha-svg.is-visible { opacity: 1; }
.trilha-conn-line {
  fill: none;
  stroke-width: 2;                                /* rodada 51d8 */
  stroke-dasharray: 5 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px currentColor);
}
.trilha-conn-dot {
  filter: drop-shadow(0 0 8px currentColor);
}
.wheel-side__num {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  color: var(--dark-text-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.wheel-side__nome {
  font-family: var(--display);
  font-size: 24px; font-weight: 500;
  color: var(--paper);
  line-height: 1.18;
  margin: 0 0 6px;
}
.wheel-side__tagline {
  font-size: 14.5px; font-style: italic;
  color: var(--dark-text-soft);
  line-height: 1.45;
  margin: 0 0 22px;
}
.wheel-side__cta {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  color: var(--green-glow);                              /* rodada 51d6 — sempre verde-glow p/ legibilidade */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--dark-line);
}

/* (Estilos da árvore antiga removidos na rodada 51d3 — substituídos por
   pills externas e conectores SVG card→pill) */

/* Trilha Rail — pills das trilhas conectadas às cores das áreas */
.trilha-rail {
  margin-top: 56px;
  padding: 32px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
}
.trilha-rail__label {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 24px;
  gap: 8px;                                              /* rodada 62 — +4px */
}
.trilha-rail__label-eyebrow {
  font-family: var(--mono);
  font-size: 16px; font-weight: 500;                     /* rodada 62 — 11.5→16px (mais destacado) */
  color: var(--green-glow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.trilha-rail__label-eyebrow .brand {
  text-transform: none;                                  /* preserva InsurIA com capitalização correta */
  font-size: 20px;                                       /* r361 — InsurIA maior que o "TRILHAS" (16px) ao lado */
  vertical-align: -1px;                                  /* r361 — reassenta na linha do "TRILHAS" */
}
.trilha-rail__label-text {
  font-family: var(--display-pf);   /* r362 — Playfair (era Fraunces), itálico mantido */
  font-size: 18px; font-style: italic; font-weight: 500;   /* r362 — 500: itálico real da Playfair carregada (o 400 não tem itálico no site) */
  letter-spacing: 0.04em;   /* r365 — 0.03 -> 0.04em */
  color: var(--paper);
}

/* Reduz espaçamentos dos heros do Mapa de Carreiras (rodada 63b/64c/65j)
   .mapa-roda-section = wheel section (com paddings específicos da roda)
   .mapa-tight-section = demais seções da página (accordion, cadeia, subway, CTA) */
.mapa-roda-section { padding: 40px 0 64px !important; }    /* rodada 65k — bottom 32→64 (uniforme) */
.mapa-tight-section { padding: 40px 0 64px !important; }   /* rodada 65j — bottom 32→64 (linha de respiro) */

/* r306 — respiro lateral no mobile. ⚠️ Este bloco PRECISA vir depois da linha acima:
   aquela regra é uma SHORTHAND `padding` com !important e mesma especificidade, então
   com o bloco antes ela sobrescrevia estes longhands e os cards encostavam na borda.
   Com especificidade igual e ambos !important, quem vence é o que aparece por último. */
@media (max-width: 880px) {
  .mapa-tight-section { padding-left: 20px !important; padding-right: 20px !important; }
}
.mapa-roda-head {
  margin-bottom: 8px !important;
  gap: 12px !important;                  /* era 64px! grid gap herdado de .section__head */
}
.mapa-roda-head .eyebrow {
  margin: 0 0 18px !important;           /* rodada 64e — linha de respiro entre eyebrow e título */
}
.mapa-roda-head .section__title { margin: 0; }
.mapa-roda-head .section__sub {
  margin: 18px 0 0 !important;           /* rodada 64d — linha de respiro entre título e subtítulo */
  max-width: 720px;
}
.mapa-roda-section .wheel-stage { padding: 56px 0 16px !important; min-height: 580px !important; }
.mapa-roda-section .trilha-rail { margin-top: 90px !important; }  /* r159 — folga p/ o wrap (card+trilhas) das áreas do meio não encostar no rail */
.trilha-rail__pills {
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: center;
}
.trilha-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--dark-1);
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--paper);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
  font-size: 14.5px; font-weight: 500;
}
.trilha-pill:hover {
  border-color: var(--pill-cor);
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
}
.trilha-pill__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--pill-cor);
  box-shadow: 0 0 10px var(--pill-cor);
}
.trilha-pill__num {
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  color: var(--dark-text-muted);
  letter-spacing: 0.08em;
}

/* Subway Map — Evolução de carreira como linha de metrô */
.subway {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
  padding-top: 80px;
}
.subway__line {
  position: absolute;
  top: 36px; left: 0; right: 0;
  width: 100%; height: 60px;
  pointer-events: none;
}
.subway__station {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  height: 100%;                                         /* rodada 64 — fill grid cell */
}
.subway__node {
  position: absolute;
  top: -68px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--dark-1);
  border: 2px solid var(--green-glow);
  box-shadow: 0 0 24px rgba(93, 202, 165, 0.3);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.subway__node-num {
  font-family: var(--mono);
  font-size: 14px; font-weight: 500;
  color: var(--green-glow);
  letter-spacing: 0.04em;
}
.subway__card {
  width: 100%;
  flex: 1;                                              /* rodada 64 — preenche station vertical */
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  display: flex; flex-direction: column;
}
.subway__anos {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  color: var(--dark-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.subway__titulo {
  font-family: var(--display);
  font-size: 22px; font-weight: 500;
  color: var(--paper);
  margin: 0 0 4px;
  line-height: 1.2;
}
.subway__sub {
  font-size: 14px; font-style: italic; font-weight: 500;
  color: var(--green-glow);
  margin: 0 0 14px;
}
.subway__desc {
  font-size: 14.5px; line-height: 1.55;
  color: var(--dark-text-soft);
  margin: 0 0 20px;
  flex-grow: 1;
}
.subway__trilhas {
  border-top: 1px solid var(--dark-line);
  padding-top: 14px;
  margin-top: auto;
  min-height: 140px;                                    /* rodada 69b — reserva espaço pra caixa 01
                                                           que agora tem ~5 linhas (Cursos Livres + Formação
                                                           completa em Seguros com parentéticos longos).
                                                           Antes era 96px (3 linhas). Manter min-height
                                                           garante que o divisor `border-top` fique no
                                                           mesmo Y nas 4 caixas (alinhamento horizontal). */
}
.subway__trilhas-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--dark-text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.subway__trilhas-val {
  display: block;
  font-size: 13px; line-height: 1.5;
  color: var(--paper);
  font-weight: 500;
}
/* Separador "·" entre trilhas recomendadas — maior e em verde para
   ganhar presença visual sem inflar o texto (rodada 69c). */
.subway__trilhas-sep {
  display: inline-block;
  font-size: 20px;                                      /* 13 → 20 (mais visível) */
  font-weight: 700;
  color: var(--green-glow);                             /* verde-glow para destaque */
  margin: 0 2px;
  line-height: 0;                                       /* não afeta line-height da linha */
  vertical-align: middle;
  transform: translateY(-1px);                          /* fine-tune óptico */
}

/* Accordion — detalhes por área */
.area-accordion {
  display: flex; flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.area-accordion__item {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-left: 4px solid var(--area-cor, var(--green-glow));
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .25s ease;
}
.area-accordion__item[open] {
  border-color: var(--area-cor);
}
.area-accordion__head {
  display: grid;
  /* rodada 70 — invertido: título agora tem mais espaço (2fr) que tagline (1.4fr).
     Antes era 1fr 2fr — título estourava em "Governança, Finanças e Contabilidade"
     (36 chars Fraunces 22px). Agora cabe em uma linha; tagline fica mais centrada. */
  grid-template-columns: 60px 2fr 1.4fr auto auto;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.area-accordion__head::-webkit-details-marker { display: none; }
.area-accordion__num {
  font-family: var(--display);
  font-size: 36px; font-weight: 300;
  color: var(--area-cor, var(--green-glow));
  font-style: italic;
  line-height: 1;
}
.area-accordion__nome {
  font-family: var(--display);
  font-size: 22px; font-weight: 500;
  color: var(--paper);
}
.area-accordion__tagline {
  font-size: 14.5px; font-style: italic;
  color: var(--dark-text-soft);
}
.area-accordion__count {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  color: var(--dark-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.area-accordion__chev {
  font-family: var(--mono);
  font-size: 24px; font-weight: 400;
  color: var(--area-cor, var(--green-glow));
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  transition: transform .3s ease;
}
.area-accordion__item[open] .area-accordion__chev {
  transform: rotate(45deg);
}
.area-accordion__body {
  padding: 8px 28px 32px;
  border-top: 1px solid var(--dark-line);
}
.area-accordion__desc {
  font-size: 16px; line-height: 1.65;
  color: var(--paper);
  margin: 24px 0 28px;
  max-width: 880px;
}

/* ============================================================
   MAPA DE CARREIRAS — VERSÃO C (rodada 51c)
   Diagrama de conexões — Trilhas ↔ Áreas com curvas SVG
   ============================================================ */
/* Âncoras (pontos onde linhas entram/saem) */
/* Wrapper do SVG no meio */

/* Cargos âncora — grid com 1 cargo por área */

/* Responsivo Mapa C */

/* Responsivo Mapa B */
@media (max-width: 1080px) {
  .subway { grid-template-columns: repeat(2, 1fr); padding-top: 32px; }
  .subway__line { display: none; }
  /* r306 — `left: auto` é ESSENCIAL: a regra base tem `left: 50%` para o posicionamento
     absoluto no desktop. Ao virar `position: relative` sem resetar o `left`, o círculo
     era deslocado 50% da largura da station para a direita e saía da tela em 1 coluna. */
  .subway__node { position: relative; top: 0; left: auto; transform: none; margin: 0 auto 16px; }
  .area-accordion__head {
    grid-template-columns: 50px 1fr auto auto;
    gap: 16px;
  }
  .area-accordion__tagline { display: none; }
}
@media (max-width: 880px) {
  .wheel-stage { grid-template-columns: 1fr; gap: 24px; }
  .wheel-connector { display: none; }
  .wheel-side { min-height: auto; }
}
@media (max-width: 768px) {
  .wheel { max-width: 100%; }
  .wheel__label-num { font-size: 22px; }

  .subway { grid-template-columns: 1fr; }
  .area-accordion__head {
    grid-template-columns: 50px 1fr auto;
    gap: 12px;
  }
  .area-accordion__count { display: none; }
  .area-accordion__nome { font-size: 18px; }
}

/* ====================== UTILS ====================== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* HOME — bandas creme/escuro alternadas */

/* HOME features (paleta clara) */
.feature {
  padding: 36px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: all .3s ease;
}
.feature:hover {
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
/* Variante dark — para uso na Home agora que ela é tema dark */
.feature h3 {
  font-family: var(--display-pf);
  font-weight: 600; font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 12px;
}
.feature p { color: var(--ink); opacity: 0.78; font-size: 16px; }

/* CTA banner */

/* ROTAS — esconde tudo, mostra só a view ativa */

/* =========================================================================
   PÁGINA DE CURSO — Layout estilo Asimov (2 colunas + accordion)
   ========================================================================= */

/* Hero do curso (top) */
.course-hero {
  background: var(--dark-1);
  color: var(--dark-text);
  padding: 140px 40px 60px;
  border-bottom: 1px solid var(--dark-line);
}
.course-hero__container {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.4fr 1fr;
  gap: 48px; align-items: center;
}
@media (max-width: 880px) { .course-hero__container { grid-template-columns: 1fr; gap: 32px; } }

.course-hero__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green-glow);
  margin-bottom: 16px;
}
.course-hero__badge::before { content: "◉"; font-size: 9px; }

.course-hero__title {
  font-family: var(--display-pf);   /* r341 — Playfair */
  font-size: clamp(34px, 4.6vw, 64px);   /* PADRONIZADO com outros heros (rodada 14b) */
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--paper);
  margin-bottom: 20px;
}
.course-hero__desc {
  font-weight: 300;   /* r341 — DM Sans 300 */
  font-family: var(--sans-hero);   /* DM Sans (rodada 10) */
  font-size: 18px; line-height: 1.6;
  color: var(--paper);             /* creme paper #FBF7EE (rodada 11) */
  max-width: 620px;
}

.course-hero__pills {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
/* r368 — pílulas de duração/pré-requisitos em verde-menta (--green-glow, o mesmo
   do botão "Ver formações") para dar destaque. NÃO afeta Premium/Avulso. */
.course-hero__pills .pill:not(.pill--premium):not(.pill--avulso) {
  color: var(--dark-1);                        /* r368c — texto escuro p/ contraste */
  border-color: var(--green-glow);
  background: var(--green-glow);               /* pílula PREENCHIDA (igual ao botão) */
  font-weight: 500;
}
.course-hero__pills .pill:not(.pill--premium):not(.pill--avulso)::before {
  background: var(--dark-1);                    /* pontinho escuro (verde sumiria no fundo) */
}
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: rgba(93, 202, 165, 0.10);
  border: 1px solid var(--dark-line);
  border-radius: 100px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--dark-text-soft);
  letter-spacing: 0.02em;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-glow); }

.course-hero__thumb {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--dark-card);
  box-shadow: var(--shadow-glow);
}
/* r201 — a página de curso mostra APENAS a imagem do thumbnail.
   Removidos: o botão de play decorativo (::after "▶") e o CSS do <video>,
   ambos herdados de quando o hero podia virar player (ver r200). */
.course-hero__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Corpo (2 colunas: principal + sidebar) */
.course-body {
  background: var(--dark-2);
  color: var(--dark-text);
  padding: 80px 40px 120px;
  min-height: 60vh;
}
.course-body__container {
  max-width: var(--container); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
@media (max-width: 1080px) { .course-body__container { grid-template-columns: 1fr; } }

.course-main { min-width: 0; }
.course-section-title {
  font-family: var(--display-pf);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin-bottom: 20px;
}
.course-prose {
  color: var(--dark-text-soft);
  font-size: 16.5px;
  line-height: 1.7;
}
.course-prose p + p { margin-top: 16px; }

/* Acordeão de módulos (Conteúdo do Curso) */
.modulos-accordion { margin-top: 16px; }
.modulo-item {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .25s ease;
}
.modulo-item.open { border-color: var(--green-glow); }
.modulo-item__header {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
  user-select: none;
}
.modulo-item__num {
  width: 32px; height: 32px;
  background: rgba(93, 202, 165, 0.12);
  color: var(--green-glow);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 600;
}
.modulo-item__title {
  flex: 1;
  font-family: var(--display-pf);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--paper);
}
/* r300 — carga horária HH:MM:SS à direita do cabeçalho do módulo */
.modulo-item__dur {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--green-glow);
  white-space: nowrap;
}
.modulo-item__chev {
  color: var(--green-glow);
  font-size: 18px;
  transition: transform .25s ease;
}
.modulo-item.open .modulo-item__chev { transform: rotate(180deg); }
.modulo-item__body {
  display: none;
  padding: 0 24px 20px;
  border-top: 1px solid var(--dark-line);
}
.modulo-item.open .modulo-item__body { display: block; }
.modulo-item__sub {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--dark-text-muted);
  padding: 14px 0 6px;
}
.aula-list { padding: 6px 0; }
.aula-list li {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--dark-line);
  color: var(--dark-text-soft);
  font-size: 14.5px;
}
.aula-list li:last-child { border-bottom: none; }
.aula-list li .play {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--dark-line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; color: var(--green-glow);
  flex-shrink: 0;
}
.aula-list li .num {
  font-family: var(--mono); font-size: 12px;
  color: var(--dark-text-muted);
  min-width: 32px;
}
.aula-list li .ttl { flex: 1; }
.aula-list li .xp {
  font-family: var(--mono); font-size: 11px;
  color: var(--green-glow);
}

/* Sidebar */
.course-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
@media (max-width: 1080px) { .course-sidebar { position: relative; top: 0; } }

.side-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  padding: 24px;
}
.side-card h3 {
  font-family: var(--display-pf);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dark-line);
}
.side-card ul li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0;
  color: var(--dark-text-soft);
  font-size: 14px;
  line-height: 1.5;
}
.side-card ul li::before {
  content: "✓"; color: var(--green-glow);
  flex-shrink: 0; margin-top: 1px;
  font-weight: 600;
}
.side-card ul.cross li::before { content: "✕"; color: var(--rust); }

.instr-mini {
  display: flex; align-items: flex-start; gap: 14px;
}
.instr-mini__info { min-width: 0; }
.instr-mini__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-glow) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--paper); font-family: var(--display);
  font-weight: 600; font-size: 22px;
  overflow: hidden;
  flex-shrink: 0;
}
.instr-mini__avatar img { width: 100%; height: 100%; object-fit: cover; }
.instr-mini__name {
  font-weight: 600;
  color: var(--paper);
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.instr-mini__li {
  display: inline-flex;
  align-items: center;
  color: var(--green-glow);
  opacity: .85;
  transition: opacity .15s ease;
  flex: 0 0 auto;
}
.instr-mini__li:hover { opacity: 1; }
.instr-mini__role {
  font-size: 12.5px;
  color: var(--dark-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}
/* Multi-instrutor (curso dividido): só foto + nome + LinkedIn */
.instr-list { display: flex; flex-direction: column; gap: 16px; }
.instr-mini--compact { align-items: center; }
.instr-mini--compact .instr-mini__avatar { width: 48px; height: 48px; }

.location-trail {
  display: flex; flex-direction: column; gap: 10px;
}
.location-trail .step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(93, 202, 165, 0.06);
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--dark-text-soft);
}
.location-trail .step.current {
  background: rgba(93, 202, 165, 0.18);
  color: var(--paper);
  border-left: 3px solid var(--green-glow);
}
.location-trail .step .lbl {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-glow);
  margin-right: auto;
}

/* Atualização: cards de cursos com banner real */
.curso-card__thumb { background: var(--dark-card); }
.curso-card__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center; /* mostra o topo da arte (arvore + linha verde) sem cortar */
  opacity: 0.85;
  transition: transform .4s ease, opacity .4s ease;
}
.curso-card:hover .curso-card__thumb img { transform: scale(1.04); opacity: 1; }
.curso-card__thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(4, 52, 44, 0.55) 100%);
  pointer-events: none;
}

/* Trilha card com banner */
.trilha-card { overflow: hidden; }
.trilha-card__banner {
  position: absolute; inset: 0;
  z-index: 0;
  opacity: 0.18;
  background-size: cover; background-position: center;
  transition: opacity .3s ease;
}
.trilha-card:hover .trilha-card__banner { opacity: 0.35; }
.trilha-card > * { position: relative; z-index: 1; }

/* Atualização: avatar com foto real (Quem Somos) */
.lideranca__avatar {
  overflow: hidden;
  background: var(--dark-card);
}
.lideranca__avatar img {
  width: 100%; height: 100%; object-fit: cover;
}

/* =========================================================================
   HOME — BLOCOS NOVOS (rodada 5)
   ========================================================================= */

/* Section head centralizado (variante usada nos blocos novos) */
.section__head--centered {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
  margin-bottom: 56px;
}
.section__head--centered .section__sub { max-width: 640px; margin: 0 auto; }
/* r343 — subtítulo do bloco "O que você encontra na InsurIA" em 2 linhas
   (1a maior que a 2a). O <br/> força a quebra; o max-width sobe de 640 para
   820px só aqui para a 1a linha (777px) não quebrar de novo. */
.section__head--centered .section__sub--encontra { max-width: 820px; }

/* Modifier: -1 linha entre título e subtítulo (rodada 82).
   Usado em blocos onde o gap default 64px do grid fica grande demais. */
.section__head.section__head--tighter { gap: 28px; margin-bottom: 32px; }

/* ============== BLOCO 1 — Hero secundário "Transformando o Mercado" ============== */
.hero2 {
  /* r322 — padding-TOP reduzido de 100px para 56px. Com os 2 CTAs do hero da
     Home removidos, o vão até este título somava 192px (36 de margem + 56 do
     hero + 100 daqui) e ficava folgado. O padding de baixo continua 100px:
     ele separa deste bloco para o seguinte, e não estava em questão.
     .hero2 é usado UMA única vez no site, só na Home — sem efeito colateral. */
  padding: 56px 40px 100px;
  background-color: var(--dark-1);
  text-align: center;
  position: relative;
}
/* Variante sólida (rodada 6) — verde mais claro que o hero principal,
   sem imagem de fundo, separando os blocos por tonalidade */
.hero2--solid { background: var(--dark-2); }
.hero2__container {
  max-width: 1000px; margin: 0 auto;   /* r335 — 960 -> 1000 p/ caber o título a 64px (906px). Antes r332 880 -> 960: abre espaço para o
    título "Transformando..." em Space Grotesk (mais larga que a Fraunces) voltar
    a 60px sem quebrar a 1ª linha. A 60px "Transformando o Mercado de" mede 850px,
    que só cabe com o container em 960 (útil ~896). */
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.hero2__title {
  /* r331 — mesma família do hero da Home: Space Grotesk 600, sem itálico.
     ⚠️ .hero2 é usado UMA vez no site (só na Home), então editar aqui não
     afeta outras páginas. O corpo caiu de 64 para 56px no máximo: a Space
     Grotesk é ~15% mais larga que a Fraunces e "Transformando o Mercado de"
     mediria 906px numa coluna útil de ~816px a 64px; a 56px cabe (793px). */
  font-family: var(--display-pf);   /* r338 — Playfair Display, igual ao hero */
  font-size: clamp(32px, 4.4vw, 64px);
  font-weight: 500;   /* r338 — texto BRANCO em 500 (o verde vem no <em> a 600) */
  line-height: 1.03;
  letter-spacing: 0;   /* r338 — serifa não pede respiro */
  color: var(--paper);
}
/* r331 — "Seguros"/"Educação" perdem o itálico e mantêm o verde. Este seletor
   tem a MESMA especificidade do .hero2__title em lá de cima (bloco serif) e
   vence por vir depois no arquivo. */
.hero2__title em { font-style: normal; font-weight: 600; color: var(--green-glow); }   /* r338 — verde 600 */
.hero2__sub {
  font-family: var(--sans-hero);   /* DM Sans (rodada 10) */
  font-size: 18px;
  line-height: 1.6;
  color: var(--paper);             /* creme paper #FBF7EE (rodada 11) */
  max-width: 720px;
}
.hero2__ctas-main {
  /* Grid de 3 colunas iguais — todos os 3 botões com EXATA mesma largura (rodada 12) */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
  max-width: 980px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 880px) {
  .hero2__ctas-main { grid-template-columns: 1fr; max-width: 360px; }
}
/* Garante que cada botão preencha 100% da sua célula do grid e centralize o conteúdo */
.hero2__ctas-main .btn-big {
  width: 100%;
  justify-content: center;
}

/* Botões grandes (Para Profissionais / Para Empresas) */
.btn-big {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 36px;
  border-radius: 100px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: all .25s ease;
  cursor: pointer;
}
.btn-big__icon { display: inline-flex; width: 22px; height: 22px; }
.btn-big__icon svg { width: 100%; height: 100%; }
.btn-big--primary { background: var(--green-glow); color: var(--dark-1); }
.btn-big--primary:hover { background: var(--paper); transform: translateY(-1px); }
.btn-big--ghost {
  background: rgba(4, 32, 24, 0.5);
  color: var(--paper);
  border: 1px solid var(--dark-line-strong);
}
.btn-big--ghost:hover { border-color: var(--green-glow); color: var(--green-glow); }
.btn-big--outline {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--dark-line-strong);
}
.btn-big--outline:hover { border-color: var(--green-glow); color: var(--green-glow); }

/* Botões secundários (Baixar Ebook / Conheça plataforma) */

/* ============== BLOCO 2 — "O que a InsurIA significa" (PALETA CLARA) ============== */

.significa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.significa-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px 32px;
  transition: all .3s ease;
}
.significa-card:hover {
  border-color: var(--ink);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
/* Variante dark (rodada 6) — para usar dentro de section--dark */
.significa-card--dark {
  background: var(--dark-card);
  border-color: var(--dark-line);
}
.significa-card--dark:hover {
  border-color: var(--green-glow);
  box-shadow: var(--shadow-glow);
}
.significa-card--dark .significa-card__num {
  background: rgba(93, 202, 165, 0.12);
  color: var(--green-glow);
}
.significa-card--dark .significa-card__title { color: var(--paper); }
.significa-card--dark .significa-card__desc  { color: var(--dark-text-soft); opacity: 1; }
.significa-card__num {
  width: 48px; height: 48px;
  background: var(--ink); color: var(--green-glow);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-weight: 700; font-size: 14px;
  margin-bottom: 32px;
}
.significa-card__title {
  font-family: var(--display-pf);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.1;
}
.significa-card__desc {
  font-size: 16px; line-height: 1.6;   /* +1pt rodada 18 */
  color: var(--ink); opacity: 0.78;
}

/* ============== BLOCO 3 — "O que você encontra na InsurIA?" ============== */
.encontra-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ============================================================
   CADEIA DE VALOR DOS SEGUROS — Mapa de Carreiras (rodada 61)
   Camadas verticais com expand/click. 5 principais + 3 transversais.
   ============================================================ */
.cadeia {
  display: flex; flex-direction: column;
  gap: 0;
  max-width: 1080px;
  margin: 32px auto 0;                                  /* rodada 65f — respiro acima da 1ª caixa */
}
.cadeia-camada {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-left: 4px solid var(--cor, var(--green-glow));
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .25s ease;
}
.cadeia-camada[open] {
  border-color: var(--cor);
}
.cadeia-camada--destaque {
  background: linear-gradient(135deg,
    rgba(93, 202, 165, 0.10) 0%,
    rgba(93, 202, 165, 0.02) 100%);
  border: 1px solid var(--green-glow);
  border-left: 4px solid var(--green-glow);
}
.cadeia-camada__head {
  display: grid;
  grid-template-columns: 56px 1fr auto auto auto;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.cadeia-camada__head::-webkit-details-marker { display: none; }
.cadeia-camada__num {
  font-family: var(--display);
  font-size: 36px; font-weight: 300;
  color: var(--cor, var(--green-glow));
  font-style: italic;
  line-height: 1;
}
.cadeia-camada__txt {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cadeia-camada__label {
  font-family: var(--display);
  font-size: 22px; font-weight: 500;
  color: var(--paper);
  line-height: 1.15;
}
.cadeia-camada__tagline {
  font-size: 14px; font-style: italic;
  color: var(--cor);                              /* rodada 65c — usa cor da camada */
  opacity: 0.85;
}
.cadeia-camada__star {
  font-size: 20px;
  color: var(--green-glow);
  filter: drop-shadow(0 0 8px var(--green-glow));
}
.cadeia-camada__count {
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  color: var(--cor);                              /* rodada 65c — usa cor da camada */
  opacity: 0.75;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.cadeia-camada__chev {
  font-family: var(--mono);
  font-size: 22px;
  color: var(--cor, var(--green-glow));
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  transition: transform .3s ease;
}
.cadeia-camada[open] .cadeia-camada__chev {
  transform: rotate(45deg);
}

.cadeia-camada__body {
  padding: 8px 28px 28px;
  border-top: 1px solid var(--dark-line);
}
.cadeia-camada__desc {
  font-size: 16px; line-height: 1.6;
  color: var(--paper);
  margin: 24px 0 20px;
  max-width: 880px;
}
.cadeia-camada__nota-roda {
  display: flex; align-items: center; gap: 10px;
  background: rgba(93, 202, 165, 0.08);
  border-left: 3px solid var(--green-glow);
  padding: 14px 18px;
  border-radius: 6px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--paper);
  font-style: italic;
}
.cadeia-camada__nota-roda-icon {
  font-size: 18px;
  color: var(--green-glow);
}
.cadeia-camada__section-label {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  color: var(--dark-text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  margin-top: 18px;
}
.cadeia-camada__section-label .brand {
  text-transform: none;                                 /* preserva InsurIA conforme padrão da marca */
  font-size: 11.5px;                                    /* +1px que o parent (10.5) */
  color: var(--paper);                                  /* branco/creme */
}
.cadeia-camada__atores {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cadeia-pill {
  display: inline-block;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--paper);
}
.cadeia-camada__cursos {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.cadeia-curso-pill {
  display: inline-block;
  padding: 8px 14px;
  background: rgba(93, 202, 165, 0.10);
  border: 1px solid var(--green-glow);
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  color: var(--green-glow);
}

/* Seta entre camadas */
.cadeia-arrow {
  text-align: center;
  font-size: 30px;                                       /* rodada 65e — ajuste fino do user */
  color: var(--green-glow);
  padding: 8px 0;
  opacity: 1;
  font-family: var(--mono);
  filter: drop-shadow(0 0 10px rgba(93, 202, 165, 0.5));
  font-weight: 700;
  line-height: 1.2;
}

/* Camadas transversais — abaixo, com layout grid 3-col */
.cadeia-trans {
  margin-top: 64px;
  max-width: 1080px;
  margin-left: auto; margin-right: auto;
}
.cadeia-trans__head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px;
}
.cadeia-trans__head-line {
  flex: 1;
  height: 2px;                                          /* rodada 65 — 1→2px (era discreto) */
  background: var(--paper);
  opacity: 0.45;
}
.cadeia-trans__head-label {
  font-family: var(--mono);
  font-size: 13px; font-weight: 600;                    /* 11.5→13, 500→600 (mais presente) */
  color: var(--paper);                                  /* era dark-text-muted (cinza apagado) */
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cadeia-trans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cadeia-trans__item {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-top: 3px dashed var(--green-glow);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color .25s ease;
}
.cadeia-trans__item[open] {
  border-color: var(--green-glow);
}
.cadeia-trans__head-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}
.cadeia-trans__head-row::-webkit-details-marker { display: none; }
.cadeia-trans__icon {
  font-size: 18px;
  color: var(--green-glow);
}
.cadeia-trans__txt {
  display: flex; flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.cadeia-trans__label {
  font-family: var(--display);
  font-size: 16px; font-weight: 500;
  color: var(--paper);
  line-height: 1.2;
}
.cadeia-trans__tagline {
  font-size: 12.5px; font-style: italic;
  color: var(--dark-text-soft);
  line-height: 1.4;
}
.cadeia-trans__chev {
  font-family: var(--mono);
  font-size: 18px;
  color: var(--green-glow);
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  transition: transform .3s ease;
}
.cadeia-trans__item[open] .cadeia-trans__chev {
  transform: rotate(45deg);
}
.cadeia-trans__body {
  padding: 8px 20px 22px;
  border-top: 1px solid var(--dark-line);
}
.cadeia-trans__body p {
  font-size: 14px; line-height: 1.55;
  color: var(--paper);
  margin: 18px 0 16px;
}

/* Responsivo */
@media (max-width: 880px) {
  .cadeia-trans__grid { grid-template-columns: 1fr; }
  .cadeia-camada__head {
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
  }
  .cadeia-camada__count,
  .cadeia-camada__star { display: none; }
  .cadeia-camada__num { font-size: 28px; }
  .cadeia-camada__label { font-size: 18px; }
}

/* ============================================================
   COMPARAÇÃO DE CARDS — Página temporária (rodada 56f)
   ============================================================ */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-top: 8px;
}
.compare-block {
  display: flex; flex-direction: column;
  gap: 16px;
}
.compare-block__head {
  display: flex; flex-direction: column;
  gap: 6px;
}
.compare-block__label {
  font-family: var(--display);
  font-size: 22px; font-weight: 500;
  color: var(--paper);
}
.compare-block__desc {
  font-family: var(--mono);
  font-size: 12px; font-weight: 500;
  color: var(--green-glow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compare-card {
  /* usa as classes do .formacao-tree__root mas sem o cursor de link */
  cursor: default !important;
  width: 100%;
  max-width: 320px;
  border-radius: var(--radius-md);
  padding: 24px 26px;
  display: flex; flex-direction: column;
  gap: 6px;
  transition: transform .25s ease;
}
.compare-card:hover { transform: translateX(0) !important; }

.compare-note {
  margin-top: 64px;
  padding: 24px 28px;
  background: var(--dark-card);
  border: 1px dashed var(--dark-line);
  border-radius: var(--radius-md);
  text-align: center;
}
.compare-note__eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px; font-weight: 500;
  color: var(--green-glow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.compare-note p {
  margin: 0;
  font-size: 15px;
  color: var(--paper);
  line-height: 1.5;
}
.compare-note strong { color: var(--green-glow); }

@media (max-width: 768px) {
  .compare-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ÁRVORES DAS FORMAÇÕES — Bloco Encontra (rodada 55c)
   Layout horizontal: card à esquerda, folhas (trilhas) à direita,
   conectores SVG bezier elegantes (desenhados via JS).
   2 árvores lado a lado em grid 2 colunas.
   ============================================================ */
.formacoes-trees {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.formacoes-trees__head {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 56px;                                /* rodada 56h — espaço entre título e árvores */
  display: flex; flex-direction: column;
  gap: 8px;
  align-items: center;
}
.formacoes-trees__title {
  font-family: var(--display-pf);   /* r344 — Playfair (era Fraunces); tamanho mantido */
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;   /* r344 — branco 500 */
  color: var(--paper);
  line-height: 1.25;
  margin: 0;
  max-width: 720px;
}
.formacoes-trees__title em {
  color: var(--green-glow);
  font-weight: 600;         /* r344 — verde 600 */
  font-style: normal !important;   /* r344 — sem itálico */
}

/* Árvore individual */
.formacao-tree {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 70px;                            /* espaço p/ as curvas SVG passarem */
  align-items: start;                   /* rodada 56c — roots alinhados no TOPO */
  position: relative;
}

/* SVG overlay com os conectores (curvas Bezier) */
.formacao-tree__svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.formacao-tree__line {
  fill: none;
  stroke: var(--green-glow);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(93, 202, 165, 0.45));
}
.formacao-tree__dot {
  fill: var(--green-glow);
  filter: drop-shadow(0 0 8px rgba(93, 202, 165, 0.6));
}

/* ROOT card (clicável → leva para a página da Formação) */
.formacao-tree__root {
  background: #BDC6BE;                                 /* rodada 115 — paper 75% (igual aos cards da página Formações) */
  border: 1px solid rgba(4, 52, 44, 0.18);             /* ink soft */
  border-radius: var(--radius-md);
  padding: 24px 26px;
  text-decoration: none;
  color: var(--ink);
  display: flex; flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.formacao-tree__root:hover {
  border-color: var(--green-glow);
  transform: translateX(-3px);
  box-shadow: 0 0 24px rgba(93, 202, 165, 0.18);
}
.formacao-tree__root-eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  color: var(--green);                                 /* rodada 115 — verde escuro (era green-glow) para contraste em fundo claro */
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.formacao-tree__root-title {
  font-family: var(--display);
  font-size: 26px; font-weight: 700;                   /* rodada 115 — peso 700 (era 500) seguindo padrão .formacao-card__title */
  color: var(--ink);                                   /* rodada 115 — ink em vez de paper para contraste em fundo claro */
  line-height: 1.15;
  margin: 0;
}
.formacao-tree__root-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(4, 52, 44, 0.7);                         /* rodada 115 — ink 70% para contraste suave em fundo paper */
  letter-spacing: 0.05em;
  margin-top: 6px;
}

/* Folhas (trilhas) — stack vertical com hover slide */
.formacao-tree__leaves {
  display: flex; flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 2;
}
.formacao-tree__leaf {
  background: var(--dark-card);                           /* revertido p/ cor original (rodada 56c) */
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  display: flex; align-items: center; gap: 12px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.formacao-tree__leaf:hover {
  border-color: var(--green-glow);
  background: rgba(93, 202, 165, 0.04);
  transform: translateX(3px);
}
.formacao-tree__leaf-num {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11px; font-weight: 500;
  color: var(--green-glow);
  letter-spacing: 0.06em;
  border: 1px solid var(--green-glow);
  border-radius: 999px;
  padding: 4px 10px;
}
.formacao-tree__leaf-title {
  font-family: var(--display);
  font-size: 16px; font-weight: 500;
  color: var(--paper);
  line-height: 1.25;
  white-space: nowrap;                 /* não quebrar nomes longos */
  flex: 1;
}

/* Responsivo */
@media (max-width: 1280px) {
  .formacao-tree { grid-template-columns: 200px 1fr; gap: 50px; }
  .formacao-tree__root-title { font-size: 22px; }
  .formacao-tree__leaf-title { font-size: 15px; }
}
@media (max-width: 1080px) {
  .formacoes-trees { grid-template-columns: 1fr; gap: 56px; }
  .formacao-tree { grid-template-columns: 240px 1fr; gap: 70px; }
}
@media (max-width: 640px) {
  .formacao-tree { grid-template-columns: 1fr; gap: 24px; }
  .formacao-tree__svg { display: none; }
  .formacao-tree__leaf-title { white-space: normal; }
}
.encontra-card {
  position: relative;   /* r356 — ancora o badge "Em breve" */
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 20px;
  padding: 24px 26px;   /* r355 — menor (era 36/32): sobe o texto e encolhe o card */
  transition: all .3s ease;
}
/* r356 — etiqueta "Em breve" (mesmo visual dos demais cards). */
.encontra-card__badge {
  position: absolute; top: 14px; right: 14px;
  padding: 4px 10px;
  background: var(--amber); color: var(--dark-1);
  border-radius: 100px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  z-index: 3;
}
.encontra-card:hover {
  border-color: var(--green-glow);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}
.encontra-card__head {   /* r355 — ícone + título lado a lado */
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 12px;
}
.encontra-card__icon {
  width: 48px; height: 48px;   /* r355 — 56 -> 48 p/ casar com o título ao lado */
  flex: 0 0 auto;
  background: rgba(93, 202, 165, 0.12);
  color: var(--green-glow);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.encontra-card__icon svg { width: 28px; height: 28px; }
.encontra-card__title {
  font-family: var(--display-pf);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0;   /* r355 — sem margin: fica na linha do ícone */
}
.encontra-card__desc {
  font-size: 16px; line-height: 1.6;   /* +1pt rodada 19 */
  color: var(--dark-text-soft);
}

/* ============== BLOCO 4 — "Escolha seu plano" ============== */
.planos-toggle {
  display: inline-flex;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 100px;
  padding: 4px;
  margin: 0 auto 20px;                           /* rodada 57 — 56→20px (reduz gap toggle/grid) */
  gap: 4px;
}

/* Toggle de Formação dentro do PRO (rodada 58) */
.empresa-plan__formacao-toggle {
  margin: 6px 0 18px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.empresa-plan__formacao-toggle .plano-card__formacao-label { color: var(--ink); }
.empresa-plan .formacao-pills { background: var(--dark-1); width: 100%; max-width: 400px; padding: 4px; }
.empresa-plan .formacao-pill { padding: 10px 16px; font-size: 12px; }
.empresa-plan__formacao-toggle--ghost { visibility: hidden; }
.plano-card__formacao-toggle {
  margin: 16px 0 4px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 8px;
}
.plano-card__formacao-label {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  color: var(--green-glow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.formacao-pills {
  display: flex;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--dark-line);
  border-radius: 100px;
  padding: 3px;
  gap: 3px;
  width: 100%;
}
.formacao-pill {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 500;                    /* rodada 66 — 12.5→11.5 (3 pills caber) */
  color: var(--dark-text-soft);
  cursor: pointer;
  border-radius: 100px;
  transition: background .25s ease, color .25s ease;
  white-space: nowrap;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.formacao-pill.active {
  background: var(--green-glow);
  color: var(--dark-1);
  font-weight: 600;
}
.formacao-pill:hover:not(.active) {
  color: var(--paper);
}
/* Pill "Acesso Total" — destaque dourado (rodada 66) */
.formacao-pill--combo .formacao-pill__badge {
  font-family: var(--mono);
  font-size: 9.5px; font-weight: 700;
  background: var(--gold);                                    /* dourado - opcao 1 (r250) */
  color: var(--dark-1);
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.formacao-pill--combo:not(.active) {
  color: var(--gold);                                         /* dourado - opcao 1 (r250) */
  background: rgba(235,200,117,.12);
  box-shadow: inset 0 0 0 1px rgba(235,200,117,.55);
  font-weight: 600;
}
.formacao-pill--combo.active {
  background: linear-gradient(90deg, var(--green-glow) 0%, var(--gold) 100%);
  color: var(--dark-1);
}
.formacao-pill--combo.active .formacao-pill__badge {
  background: var(--dark-1);
  color: var(--gold);
  box-shadow: none;
}
.section__container > .planos-toggle { display: inline-flex; }
.planos-toggle__btn {
  padding: 10px 28px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--dark-text-soft);
  background: transparent;
  cursor: pointer;
  transition: all .25s ease;
}
.planos-toggle__btn.active {
  background: var(--green-glow);
  color: var(--dark-1);
}

/* Badge "Economia" — aparece sobre o botão Bianual (rodada 23) */
.planos-toggle__btn { position: relative; }
.planos-toggle__economia {
  display: none;
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--green-glow);
  color: var(--dark-1);
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.planos-toggle__btn[data-period="bianual"] .planos-toggle__economia { display: inline-block; }
/* Centralização do toggle */

.planos-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.plano-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 24px;
  padding: 40px 32px 32px;
  display: flex; flex-direction: column;
  position: relative;
  transition: all .3s ease;
}
.plano-card:hover { border-color: var(--green-glow); transform: translateY(-4px); }
.plano-card--popular {
  border-color: var(--green-glow);
  box-shadow: var(--shadow-glow);
}
.plano-card__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--green-glow); color: var(--dark-1);
  padding: 6px 18px;
  border-radius: 100px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.02em;
}
.plano-card__name {
  font-family: var(--display);
  font-size: 28px;                    /* +2pt rodada 22 (era 26px) */
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
  text-align: center;
  margin-bottom: 8px;
}
/* Linha do período + badge de economia (rodada 23) */
.plano-card__periodline {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  margin-bottom: 28px;
}
.plano-card__economia {
  display: inline-block;
  background: rgba(93, 202, 165, 0.22);
  border: 1px solid var(--green-glow);
  color: var(--green-glow);
  padding: 4px 12px;
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.plano-card__period {
  font-family: var(--mono);
  font-size: 13px;                    /* +2pt rodada 22 */
  color: var(--dark-text-muted);
  text-align: center;
  letter-spacing: 0.06em;
  /* margin-bottom removido — agora é controlado pelo .plano-card__periodline */
}
.plano-card__price {
  text-align: center;
  margin-bottom: 0;                /* rodada 42b — era 28px, criava espaço extra acima do saibamais e quebrava a simetria */
  padding-bottom: 28px;
  border-bottom: 1px solid var(--dark-line);
}
.plano-card__price-label {
  font-size: 16px;                    /* +2pt rodada 22 */
  color: var(--dark-text-soft);
  margin-bottom: 6px;
}
.plano-card__price-value {
  font-family: var(--display);
  /* r322 — 44px -> 40px para caber "R$ 193,29 por R$ 153,20" numa linha só, com
     folga. Aplicado a TODOS os cards de plano, para os três ficarem uniformes
     (pedido do Aldy). Largura útil do card: 411 - 64 de padding = 347px. */
  font-size: 40px;
  white-space: nowrap;               /* trava a quebra: o conjunto é uma linha só */
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--paper);
  line-height: 1;
  margin-bottom: 8px;
}
.plano-card__price-total {
  font-size: 14.5px;                  /* +2pt rodada 22 */
  color: var(--dark-text-muted);
  margin-bottom: 6px;
}
.plano-card__price-cash {
  font-size: 15px;                    /* +2pt rodada 22 */
  color: var(--dark-text-soft);
}

/* r322 — efeito "De R$ 1.880 por R$ 1.490" no Acesso Total: o valor cheio
   (soma das duas formações compradas separadamente) aparece riscado, para
   deixar a economia do combo visível sem depender de o cliente fazer a conta.
   Só aparece quando o dado traz o campo aVistaDe — as outras opções seguem
   com a linha simples. */
.plano-card__price-de {
  /* r322 — mesmo risco DIAGONAL da parcela (aprovado pelo Aldy). O traço
     horizontal caía na cintura dos algarismos, onde ficam as barras do 8 e do 9;
     inclinado, cruza cada dígito num ponto diferente e a leitura se preserva.
     Cor RUST (#B0522F): o âmbar é vizinho do dourado do card e sumia; o
     avermelhado lê na hora como "preço antigo". Sem opacity, que lavava
     texto e traço juntos. */
  text-decoration: none;
  position: relative;
  display: inline-block;
  margin-right: 2px;
}
.plano-card__price-de::after {
  content: "";
  position: absolute;
  left: -3%; right: -3%; top: 50%;
  height: 1px;                    /* 15px de corpo: traço mais leve que o da parcela */
  background: var(--rust);
  transform: translateY(-50%) rotate(-12deg);
  pointer-events: none;
}

/* r322 — o mesmo "de/por" na PARCELA, ao lado do valor grande. Fica em 26px
   contra os 44px do preço real: grande o bastante para ser lido, pequeno o
   bastante para não competir. O risco usa o âmbar da marca, que sobre o card
   claro puxa o olho sem gritar. Só aparece quando o dado traz parcelaDe. */
/* r322 — a palavra "por" entre o valor cheio riscado e o preço real. Em corpo
   pequeno e peso normal, ela separa os dois números e evita a leitura de que
   são um valor só. */
.plano-card__price-por {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;    /* r322 — idem: não herdar o aperto do preço grande */
  margin: 0 6px;        /* r322 — sem opacity, como os dois valores riscados */        /* folga dos DOIS lados, para não encostar em nenhum
                           dos dois valores */
  vertical-align: 4px;
}

.plano-card__price-value-de {
  /* r322 — mora na LINHA DO RÓTULO ("Até 12x de ..."), não ao lado do preço grande:
     inline, o conjunto passava de 350px e quebrava o preço em duas linhas.
     18px contra os 16px do rótulo: destaca sem desalinhar a linha. */
  font-size: 19px;
  font-weight: 600;
  /* r322 — letter-spacing PRÓPRIO. Sem isto herdava o -0.03em do preço grande:
     um aperto pensado para números de 40px, que a 19px deixava os dígitos
     amontoados. Zerado, os números respiram. */
  letter-spacing: 0;
  /* r322 — SEM opacity. Opacidade lava o texto E o traço juntos: o número
     parecia apagado, como se o risco o estivesse cortando fora. Agora a cor é
     a mesma do card (cheia, legível) e a hierarquia vem do TAMANHO — 19px
     contra 40px do preço real — mais o traço em rust. */
  /* r322 — RISCO DIAGONAL em vez do line-through horizontal.
     O traço horizontal cai exatamente na cintura dos algarismos, onde ficam as
     barras do 8 e do 9 — por isso ficava difícil distinguir um do outro.
     Inclinado a 12 graus, ele cruza cada dígito num ponto diferente e a leitura
     se preserva. Feito por pseudo-elemento porque o CSS não deixa inclinar nem
     reposicionar o line-through nativo. */
  text-decoration: none;
  position: relative;
  display: inline-block;
  margin-right: 5px;
  vertical-align: 4px;
}
.plano-card__price-value-de::after {
  content: "";
  position: absolute;
  left: -3%; right: -3%; top: 50%;
  height: 1.5px;
  background: var(--rust);
  transform: translateY(-50%) rotate(-12deg);
  pointer-events: none;
}
.plano-card__features {
  flex: 1;
  margin-bottom: 24px;
}
.plano-card__features li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  font-size: 16px;                    /* +2pt rodada 22 */
  color: var(--dark-text-soft);
  line-height: 1.5;
}
.plano-card__features .check {
  color: var(--green-glow);
  font-weight: 700;
  flex-shrink: 0;
}
.plano-card__ctas {
  margin-top: auto;     /* empurra o footer (CTAs + warranty) para o fundo (rodada 24) */
  display: flex; flex-direction: column; gap: 10px;
}
.plano-cta {
  display: block;
  padding: 14px 20px;
  border-radius: 12px;
  text-align: center;
  font-size: 14.5px;
  font-weight: 700;                  /* rodada 32 — bold para creme paper */
  background: var(--paper);          /* rodada 32 — creme paper 100% */
  color: var(--dark-1);
  border: 1px solid var(--paper);
  transition: all .25s ease;
}
.plano-cta:hover { background: var(--green-glow); border-color: var(--green-glow); }
.plano-cta--primary {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--dark-1);
}
.plano-card__warranty {
  text-align: center;
  font-size: 13.5px;     /* +1pt rodada 24 */
  color: var(--dark-text-muted);
  margin-top: 8px;
}

/* Link "Saiba mais sobre Cursos Livres" — entre o preço e features (rodada 27 + 42 + 42b) */
.plano-card__saibamais {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-bottom: 20px;
  padding: 24px 0;                  /* rodada 42b — top/bottom simétricos. Agora a distância entre cada linha horizontal e o texto é igual (24px) — texto centralizado verticalmente. */
  font-size: 15px;                  /* rodada 42 — +1pt para destaque */
  color: var(--green-glow);
  font-weight: 700;                 /* rodada 42 — bold (era 500) */
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--dark-line);
  transition: color .2s ease;
}
.plano-card__saibamais:hover { color: var(--paper); }

/* =========================================================================
   PÁGINA PARA EMPRESAS (rodada 31)
   ========================================================================= */

/* Transformação Antes/Depois */
.empresa-transformacao {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 880px) {
  .empresa-transformacao { grid-template-columns: 1fr; }
  .empresa-transformacao__seta { transform: rotate(90deg); }
}
.empresa-transformacao__col {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 20px;
  padding: 36px 32px;
}
.empresa-transformacao__col--depois { border-color: var(--green-glow); box-shadow: var(--shadow-glow); }
.empresa-transformacao__label {
  font-family: var(--display-pf);   /* r357 — Playfair (era Fraunces) */
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--paper);
}
.empresa-transformacao__col--antes .empresa-transformacao__label { color: var(--dark-text-muted); }
.empresa-transformacao__col--depois .empresa-transformacao__label { color: var(--green-glow); }
.empresa-transformacao__col ul li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0;
  color: var(--paper);
  font-size: 16px;
  line-height: 1.55;
}
.empresa-transformacao__col--antes ul li::before { content: "✕"; color: var(--rust); flex-shrink: 0; }
.empresa-transformacao__col--depois ul li::before { content: "✓"; color: var(--green-glow); flex-shrink: 0; font-weight: 700; }
.empresa-transformacao__seta {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;                  /* rodada 43c — +4px */
  margin: 0 auto;
  align-self: center;                          /* rodada 43c — centralizado verticalmente entre as 2 caixas */
  background: var(--green-glow);
  color: var(--dark-1);
  border-radius: 50%;
  position: relative;
  z-index: 2;
  /* Pulsação do círculo (rodada 43b) — combina com a animação do anel pulsante via ::after */
  animation: setaPulse 2.4s ease-in-out infinite;
  box-shadow:
    0 0 0 6px rgba(93, 202, 165, 0.18),
    0 12px 28px rgba(0, 0, 0, 0.4);
}
.empresa-transformacao__seta svg {
  width: 28px;
  height: 28px;
  stroke-width: 3.2;                            /* traço mais grosso para a seta ser visível dentro do círculo */
}
/* Anel pulsante expandindo do círculo (efeito "ripple" — convida o olho) */
.empresa-transformacao__seta::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--green-glow);
  opacity: 0;
  animation: setaRipple 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes setaPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 0 6px rgba(93, 202, 165, 0.18),
      0 12px 28px rgba(0, 0, 0, 0.4);
  }
  50% {
    transform: scale(1.06);
    box-shadow:
      0 0 0 14px rgba(93, 202, 165, 0.08),
      0 14px 32px rgba(0, 0, 0, 0.5);
  }
}
@keyframes setaRipple {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* 4 Programas corporativos */
.programas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .programas-grid { grid-template-columns: 1fr; } }
.programa-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
  transition: border-color .25s ease;
}
.programa-card:hover { border-color: var(--green-glow); }
.programa-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px;
}
.programa-card__icon {
  width: 52px; height: 52px;
  background: rgba(93, 202, 165, 0.12);
  color: var(--green-glow);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.programa-card__icon svg { width: 26px; height: 26px; }
.programa-card__num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--green-glow);
  letter-spacing: 0.06em;
}
.programa-card__title {
  font-family: var(--display-pf);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: 14px;
}
.programa-card__desc {
  font-size: 16px;
  line-height: 1.6;                 /* rodada 39g — unificado em 1.6 */
  color: var(--dark-text-soft);     /* rodada 39g — paper 72% (era 100%, fora do padrão) */
  margin-bottom: 20px;
}
.programa-card__features {
  flex: 1;
}
.programa-card__features li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0; padding-left: 18px;
  font-size: 16px;
  color: var(--paper);
  line-height: 1.5;
  position: relative;
}
.programa-card__features li::before {
  content: "▸"; color: var(--green-glow);
  position: absolute; left: 0; top: 8px;
  font-size: 12px;
}
.programa-card__tag {
  margin-top: 18px; padding: 6px 14px;
  /* r401 — legibilidade: texto de --amber #BA7517 (apagado sobre o card verde,
     ~3:1) para --gold #EBC875 (~8:1); borda/fundo no mesmo tom claro. Vale
     desktop E mobile (correção global, pedida pelo Aldy). */
  background: rgba(235, 200, 117, 0.12);
  border: 1px solid rgba(235, 200, 117, 0.48);
  color: var(--gold);
  border-radius: 100px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.04em;
  align-self: flex-start;
}

/* Roteiro 3 passos */
.roteiro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 880px) { .roteiro-grid { grid-template-columns: 1fr; } }
.roteiro-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 20px;
  padding: 36px 32px;
  border-top: 3px solid var(--green-glow);
  text-align: center;
}
.roteiro-card__num {
  font-family: var(--display);
  font-size: 56px;
  font-weight: 600;
  color: var(--green-glow);
  line-height: 1;
  margin-bottom: 16px;
}
.roteiro-card__title {
  font-family: var(--display-pf);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: 12px;
}
.roteiro-card__desc {
  font-size: 16px;
  line-height: 1.6;                 /* rodada 39g — unificado em 1.6 */
  color: var(--dark-text-soft);     /* rodada 39g — paper 72% (era 100%, fora do padrão) */
}

/* Lista de resultados */
.resultados-list {
  max-width: 720px;
  margin: 0 auto;
  list-style: none;
}
.resultados-list li {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 24px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 14px;
  margin-bottom: 12px;
  font-size: 17px;
  color: var(--paper);
  line-height: 1.45;
}
.resultados-list li .check {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--green-glow);
  color: var(--dark-1);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
  flex-shrink: 0;
}

/* Contato final */
.contato-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 24px;
  padding: 48px;
  display: flex; flex-direction: column; gap: 32px;
  align-items: center;
  margin-top: 40px;
}
.contato-card__info { text-align: center; }
.contato-card__email,

.contato-card__whatsapp {
  font-family: var(--mono);
  font-size: 16px;     /* rodada 101 — era 14px, +2pt */
  color: var(--paper);
  padding: 4px 0;
}

/* =========================================================================
   PÁGINA FORMAÇÕES — Hero conceito (rodada 37)
   ========================================================================= */
.conceito-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 8px;
  max-width: 1040px;          /* rodada 134 — encolher horizontal para visual mais elegante */
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 880px) { .conceito-grid { grid-template-columns: 1fr; } }
/* Modifier — 3 colunas em linha única (rodada 76d, usado em Conteúdos Gratuitos). */
.conceito-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1080px) { .conceito-grid--cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .conceito-grid--cols-3 { grid-template-columns: 1fr; } }
/* Reserva espaço de 2 linhas no título para alinhar a descrição entre cards
   com títulos de 1 vs 2 linhas (rodada 77b — usado em Conteúdos Gratuitos). */
.conceito-grid--cols-3 .conceito-card__title { min-height: 56px; }
.conceito-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 20px;
  padding: 36px 32px;
  position: relative;
  transition: all .3s ease;
}
.conceito-card:hover {
  border-color: var(--green-glow);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}
.conceito-card__num {
  position: absolute;
  top: 24px; right: 28px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dark-text-muted);
}
.conceito-card__icon {
  width: 52px; height: 52px;
  background: rgba(93, 202, 165, 0.12);
  color: var(--green-glow);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px;
}
.conceito-card__icon svg { width: 26px; height: 26px; }
.conceito-card__title {
  font-family: var(--display-pf);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 14px;
  line-height: 1.15;
}
.conceito-card__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--dark-text-soft);     /* rodada 39g — paper 72% (era 100%, fora do padrão) */
}

/* Lista de exemplos da página Cursos Livres (rodada 27) */


/* ============== BLOCO 5 — "Para Empresas" ============== */

.empresas-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;     /* rodada 93 — era 56px, reduzido 1 linha para padronizar com outros blocos da Para Empresas */
  margin-bottom: 0;        /* rodada 95c — era 24px, -1 linha. Padding 80px do section dá o respiro. */
}
.empresa-plan {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 24px;
  padding: 36px 32px;
  display: flex; flex-direction: column;
  position: relative;
}
.empresa-plan--popular { border-color: var(--green-glow); box-shadow: var(--shadow-glow); }
.empresa-plan__badge {
  position: absolute; top: -14px; right: 32px;
  background: var(--green-glow); color: var(--dark-1);
  padding: 6px 18px;
  border-radius: 100px;
  font-size: 12px; font-weight: 600;
}
.empresa-plan__header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.empresa-plan__icon {
  width: 44px; height: 44px;
  background: rgba(93, 202, 165, 0.12);
  color: var(--green-glow);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.empresa-plan__icon svg { width: 22px; height: 22px; }
.empresa-plan__name {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.empresa-plan__meta {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
  color: var(--dark-text-soft);
  font-size: 16px;
}
.empresa-plan__subline { display: flex; }
.empresa-plan__sub-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(15,110,86,.13); color: var(--green);
  border: 1px solid rgba(15,110,86,.38); border-radius: 100px;
  padding: 4px 13px; font-size: 13px; font-weight: 700; line-height: 1.15;
}
.empresa-plan__sub-chip .ic { color: var(--green); display: inline-flex; align-items: center; }
.empresa-plan__meta .ic {
  display: inline-flex; width: 16px; height: 16px;
  vertical-align: -3px; margin-right: 6px;
  color: var(--green-glow);
}
.empresa-plan__meta .ic svg { width: 100%; height: 100%; }
.empresa-plan__price {
  margin-bottom: 20px;
  font-size: 16px;
  color: var(--dark-text-soft);
}
.empresa-plan__price strong {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  color: var(--paper);
}
.empresa-plan__highlight {
  background: rgba(93, 202, 165, 0.10);
  border: 1px solid var(--dark-line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 16px;
  color: var(--green-glow);
  display: flex; align-items: center; gap: 10px;
}
.empresa-plan__highlight .ic { display: inline-flex; width: 18px; height: 18px; }
.empresa-plan__highlight .ic svg { width: 100%; height: 100%; }
.empresa-plan__features li {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 0;
  font-size: 16px;
  color: var(--dark-text-soft);
  line-height: 1.5;
}
.empresa-plan__features li::before {
  content: ""; width: 14px; height: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235DCAA5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: contain; background-repeat: no-repeat;
  flex-shrink: 0; margin-top: 3px;
}
.empresa-plan__features { flex: 1; }   /* cresce para que contracted comece no mesmo y nos 2 cards (rodada 28) */
.empresa-plan__contracted {
  padding-top: 18px;
  border-top: 1px dashed var(--dark-line);
  min-height: 200px;     /* rodada 28 — alinha "CONTRATAÇÃO À PARTE" entre as 2 caixas (comporta até 3 itens) */
  display: flex; flex-direction: column;
}
/* CTA do empresa-plan vai pro fundo natural — espaço extra fica entre o último item e o botão na caixa Business */
.empresa-plan__contracted ul { flex: 0 0 auto; }
.empresa-plan__contracted-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;            /* r145: destaque pedido pelo Aldy */
  letter-spacing: 0.06em;
  color: var(--paper);         /* branco da marca (#FBF7EE) */
  margin-bottom: 10px;
}
.empresa-plan__contracted ul li {
  padding: 6px 0;
  font-size: 16px;
  color: var(--dark-text-soft);
  display: flex; align-items: flex-start; gap: 8px;
}
.empresa-plan__contracted ul li::before {
  content: "○"; color: var(--green-glow);
  font-size: 8px; margin-top: 6px;
  flex-shrink: 0;
}
.empresa-plan__cta {
  margin-top: 24px;
  display: block;
  padding: 11px 18px;                /* rodada 32 — +10% sobre 10x16 */
  border-radius: 100px;
  text-align: center;
  background: var(--paper);
  color: var(--dark-1);
  border: 1px solid var(--paper);
  font-weight: 600;
  font-size: 15px;                 /* rodada 32 — +10% sobre 16px */
  transition: all .25s ease;
  align-self: center;
  min-width: 240px;                  /* +10% sobre 260px */
}
.empresa-plan__cta:hover { background: var(--green-glow); border-color: var(--green-glow); color: var(--dark-1); }

/* Criação de Valor InsurIA (4 colunas) */
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.value-card {
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: 16px;
  padding: 28px 24px;
}
.value-card__icon {
  width: 40px; height: 40px;
  background: rgba(93, 202, 165, 0.12);
  color: var(--green-glow);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.value-card__icon svg { width: 20px; height: 20px; }
.value-card__title {
  font-family: var(--display-pf);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin-bottom: 16px;
  line-height: 1.2;
}
.value-card ul li {
  padding: 6px 0; padding-left: 14px;
  font-size: 16px;
  color: var(--dark-text-soft);
  line-height: 1.5;
  position: relative;
}
.value-card ul li::before {
  content: "•";
  position: absolute; left: 0; top: 5px;
  color: var(--green-glow);
}

/* ============== BLOCO Certificados InsurIA (rodada 6) ============== */
.certificados-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 1080px) { .certificados-layout { grid-template-columns: 1fr; gap: 36px; } }

/* Mock visual do certificado */
.certificado-mock {
  position: relative;
  background: var(--paper);
  border-radius: 16px;
  padding: 48px 56px 36px;
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
  font-family: var(--sans);
  overflow: hidden;
  text-align: center;
}
/* Cantos verde-escuro com clip-path triangular */
.certificado-mock__corner {
  position: absolute;
  width: 140px; height: 140px;
  background: linear-gradient(135deg, var(--dark-1) 0%, var(--green) 100%);
  z-index: 1;
}
.certificado-mock__corner--tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.certificado-mock__corner--tr { top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); transform: scaleX(-1); }
.certificado-mock__corner--bl { bottom: 0; left: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.certificado-mock__corner--br { bottom: 0; right: 0; clip-path: polygon(100% 0, 0 100%, 100% 100%); }
.certificado-mock > *:not(.certificado-mock__corner) { position: relative; z-index: 2; }

.certificado-mock__logo {
  display: inline-block;
  background: var(--dark-1);
  padding: 12px 20px;
  border-radius: 10px;
  margin: 0 auto 28px;
}
.certificado-mock__logo img { height: 28px; display: block; }
.certificado-mock__type {
  font-size: 14px; font-weight: 600;
  color: var(--ink);
  margin-bottom: 28px;
}
.certificado-mock__pre {
  font-size: 13px; color: var(--ink); opacity: 0.7;
  margin-bottom: 14px;
}
.certificado-mock__nome {
  font-family: var(--display);
  font-size: 22px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.certificado-mock__texto {
  font-size: 13px; color: var(--ink); opacity: 0.78;
  margin-bottom: 8px;
}
.certificado-mock__horas {
  font-size: 13px; color: var(--ink); opacity: 0.78;
  margin-bottom: 36px;
}
.certificado-mock__footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: end;
  text-align: left;
  padding-top: 12px;
}
.certificado-mock__qr { display: flex; gap: 10px; align-items: center; }
.certificado-mock__qr-label {
  font-size: 9.5px; color: var(--ink); opacity: 0.7; line-height: 1.3;
}
.certificado-mock__qr-label strong { font-weight: 600; }
.certificado-mock__assinatura {
  text-align: center;
  border-top: 1px solid var(--ink);
  padding-top: 4px;
}
.certificado-mock__assinatura-line {
  font-family: "Brush Script MT", "Lucida Handwriting", cursive;
  font-size: 16px; color: var(--ink);
  margin-bottom: 2px;
  margin-top: -4px;
  position: relative; top: -8px;
}
.certificado-mock__assinatura-label {
  font-size: 10px; color: var(--ink); opacity: 0.7;
  letter-spacing: 0.06em;
}
.certificado-mock__cnpj {
  text-align: right;
  font-size: 10px; color: var(--ink); opacity: 0.7;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}

/* Texto do bloco Certificados */
.certificados-text { color: var(--dark-text); }
.certificados-text__intro {
  font-size: 17px; line-height: 1.65;       /* +1pt rodada 20 */
  color: var(--paper);                      /* paper 100% rodada 21 */
  margin-bottom: 28px;
}
.certificados-text__listtitle {
  font-family: var(--display);
  font-size: 19px; font-weight: 700;        /* +1pt rodada 20 */
  color: var(--paper);
  margin-bottom: 14px;
}
.certificados-text__list { margin-bottom: 24px; }
.certificados-text__list li {
  /* r359 — NÃO usar flex aqui: com display:flex, o texto, o <span class="brand">
     e o ponto final viravam ITENS de flex separados, com gap:10px entre eles —
     era daí o vão antes de "InsurIA" e do ponto, e a quebra errada no mobile.
     Agora o texto flui inline normal e o marcador vai por absolute. */
  position: relative;
  padding: 7px 0 7px 22px;
  font-size: 15.5px;                        /* +1pt rodada 20 */
  color: var(--paper);                      /* paper 100% rodada 21 */
  line-height: 1.55;
}
.certificados-text__list li::before {
  content: "•";
  color: var(--green-glow);
  font-size: 18px; line-height: 1.55;
  position: absolute; left: 2px; top: 7px;
}
.certificados-text__outro {
  font-size: 16px; line-height: 1.6;        /* +1pt rodada 20 */
  color: var(--paper);                      /* paper 100% rodada 21 */
}

/* ============== BLOCO Dúvidas Frequentes (rodada 6) ============== */


/* Responsividade dos blocos novos */
@media (max-width: 1080px) {
  .value-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .hero2 { padding: 40px 18px 72px; }   /* r322 — topo reduzido, mesmo motivo do desktop */
  .hero2__title { font-size: clamp(28px, 6.5vw, 42px); }
  .significa-grid, .encontra-grid, .planos-grid, .empresas-plans, .value-grid {
    grid-template-columns: 1fr;
  }
  .btn-big { padding: 14px 26px; font-size: 16.5px; }
  .certificado-mock { padding: 32px 28px 24px; }
  .certificado-mock__footer { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .certificado-mock__cnpj { align-items: center; text-align: center; }
  .certificados-text__intro { font-size: 16.5px; }
}

/* =========================================================================
   RESPONSIVIDADE GLOBAL (rodada 4)
   Breakpoints: 1280 wide · 1080 desktop normal · 880 tablet · 640 mobile L · 420 mobile P
   ========================================================================= */

/* Desktop normal (sotaque para layouts wider) */
@media (max-width: 1280px) {
  .nav { padding: 14px 24px; }
  .nav__links { gap: 20px; }                    /* rodada 50b — proporção menor com gap base de 26px */
  .nav__links a { font-size: 14.5px; }          /* rodada 50b — pequeno encolhimento da fonte para caber 8 itens em telas 13" */
  .hero { padding: 100px 28px 48px; }
  .section { padding: 72px 28px; }
}

/* Tablet horizontal e displays médios */
@media (max-width: 1080px) {
  .nav__links a { font-size: 16.5px; }
  .nav__cta { font-size: 14.5px; padding: 10px 18px; }
  .hero h1 { font-size: clamp(32px, 5vw, 56px); }
  .hero__sub, .section__sub { font-size: 17px; }   /* rodada 39f — section__sub alinhado em mobile */
  .formacoes-grid { grid-template-columns: 1fr; }
  .trilhas-grid    { grid-template-columns: repeat(2, 1fr); }
  .cursos-grid     { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   QUEM SOMOS — bloco discovery-out (rodada 112 — refeito no padrão Para Empresas)
   Reusa .contato-card; só adiciona estilo para os 2 botões dentro do card.
============================================================================= */
.qs-discovery-out__buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
@media (min-width: 640px) {
  .qs-discovery-out__buttons {
    flex-direction: row;
    justify-content: center;
    gap: 16px;
  }
  .qs-discovery-out__buttons .btn {
    flex: 0 1 auto;
  }
}

/* ============================================================================
   FORMAÇÃO — DETALHE (rodada 119)
   Hero das páginas /formacoes/:id:
   • Topo (2 col): título + subtítulo das trilhas (BEM grande, italic verde) | vídeo
   • Bottom (full-width centralizado): descrição + meta pill inline
============================================================================= */
.formacao-detail-hero .hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.formacao-detail-hero__title {
  font-family: var(--display-pf);   /* r341 — Playfair */
  font-size: clamp(33px, 4.5vw, 56px);
  font-weight: 500;   /* r341 — branco 500 */
  letter-spacing: 0;   /* r341 */
  line-height: 1.05;
  color: var(--paper);
  margin: 0;
}
.formacao-detail-hero__subtitle {
  font-family: var(--sans-hero);   /* r341 — DM Sans (era Fraunces) */
  font-size: clamp(26px, 3.2vw, 38px);
  font-weight: 300;   /* r341 — DM Sans 300 */
  font-style: normal;   /* r341 — sem itálico */
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--green-glow);
  margin: -4px 0 0;
  max-width: 580px;
}
.formacao-detail-hero__bottom {
  max-width: var(--container);
  margin: 56px auto 0;
  padding: 32px 40px 0;
  border-top: 1px solid var(--dark-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
}
@media (max-width: 880px) {
  .formacao-detail-hero__bottom {
    padding: 28px 20px 0;
    margin-top: 40px;
    align-items: flex-start;
    flex-direction: column;
  }
}
.formacao-detail-hero__desc {
  font-family: var(--sans-hero);
  font-size: 18px;
  line-height: 1.6;
  color: var(--paper);
  margin: 0;
  max-width: 720px;
  flex: 1 1 480px;
}
.formacao-detail-hero__meta-inline {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 12px 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--dark-line);
  border-radius: 999px;
  flex-shrink: 0;
}
.formacao-detail-hero__meta-pill {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--paper);
  white-space: nowrap;
}
.formacao-detail-hero__meta-sep {
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--green-glow);
  line-height: 1;
}

/* ============================================================================
   BIBLIOTECA DE PROJETOS (rodada 122)
   Página /projetos: hero + intro (3 modos de acesso) + grid de cards
============================================================================= */

/* Bloco "3 formas de acessar" — cards explicativos */
.biblioteca-acesso {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 880px) { .biblioteca-acesso { grid-template-columns: 1fr; } }
.biblioteca-acesso__card {
  padding: 32px 28px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
}
.biblioteca-acesso__card--popular {
  border-color: var(--green-glow);
  box-shadow: 0 0 24px rgba(93, 202, 165, 0.12);
}
.biblioteca-acesso__num {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--green-glow);
  margin-bottom: 14px;
}
.biblioteca-acesso__card h3 {
  font-family: var(--display-pf);
  font-size: 22px;
  font-weight: 500;
  color: var(--paper);
  margin: 0 0 12px;
  letter-spacing: -0.015em;
}
.biblioteca-acesso__card p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--dark-text-soft);
  margin: 0;
}

/* Grid de projetos da Biblioteca */
.biblioteca-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 1080px) { .biblioteca-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .biblioteca-grid { grid-template-columns: 1fr; } }

.projeto-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 26px 24px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.projeto-card-v2:hover {
  border-color: var(--green-glow);
  transform: translateY(-3px);
  box-shadow: 0 0 24px rgba(93, 202, 165, 0.12);
}
.projeto-card-v2__badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 10px;
  background: var(--green-glow);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
}
.projeto-card-v2__complexidade {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-glow);
  margin-bottom: 14px;
}
.projeto-card-v2__titulo {
  font-family: var(--display-pf);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 8px;
}
.projeto-card-v2__tagline {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--green-glow);
  font-style: italic;
  margin: 0 0 14px;
  line-height: 1.4;
}
.projeto-card-v2__desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--dark-text-soft);
  margin: 0 0 18px;
  flex: 1;
}
.projeto-card-v2__trilhas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.projeto-card-v2__chip {
  padding: 4px 10px;
  background: rgba(93, 202, 165, 0.08);
  border: 1px solid rgba(93, 202, 165, 0.25);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--green-glow);
}
.projeto-card-v2__footer {
  padding-top: 18px;
  border-top: 1px solid var(--dark-line);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 16px;
}
.projeto-card-v2__preco {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.projeto-card-v2__preco .l {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark-text-muted);
}
.projeto-card-v2__preco .v {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: var(--paper);
}
.projeto-card-v2__inc {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--green-glow);
  text-align: right;
}
.projeto-card-v2__cta {
  grid-column: 1 / -1;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green-glow);
  margin-top: 4px;
}

/* Página detalhe — grid de trilhas conectadas */
.projeto-trilhas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 880px) { .projeto-trilhas-grid { grid-template-columns: 1fr; } }
.projeto-trilha-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 26px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease;
}
.projeto-trilha-card:hover {
  border-color: var(--green-glow);
  transform: translateY(-2px);
}
.projeto-trilha-card__cat {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-glow);
}
.projeto-trilha-card__title {
  font-family: var(--display-pf);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--paper);
  margin: 4px 0 0;
}
.projeto-trilha-card__sub {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--dark-text-soft);
  margin: 0;
  flex: 1;
}
.projeto-trilha-card__cta {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--green-glow);
  margin-top: 8px;
}

/* ============================================================================
   PROJETOS B2B (Para Empresas, rodada 122)
   Grid de 4 cards de projetos sob demanda + CTA
============================================================================= */
.b2b-projetos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 880px) { .b2b-projetos-grid { grid-template-columns: 1fr; } }
.b2b-projeto-card {
  padding: 32px 28px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.b2b-projeto-card__titulo {
  font-family: var(--display-pf);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0;
}
.b2b-projeto-card__desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--dark-text-soft);
  margin: 0;
  flex: 1;
}
.b2b-projeto-card__meta {
  display: flex;
  gap: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--dark-line);
  margin-top: 4px;
}
.b2b-projeto-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.b2b-projeto-card__meta-item .l {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-glow);
}
.b2b-projeto-card__meta-item .v {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--paper);
}
.b2b-projetos-cta {
  text-align: center;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.b2b-projetos-cta p {
  font-family: var(--sans-hero);
  font-size: 17px;
  color: var(--paper);
  margin: 0;
}

/* ============================================================================
   TRILHAS — CTA de assinatura de Formação completa (rodada 124)
   3 cards lado a lado: Seguros · PRO Acesso Total (destaque) · Data IA
============================================================================= */
/* r369 — subtítulo do CTA "Formação completa" em 2 linhas (1a maior que a 2a).
   3 classes p/ vencer o .section__head--centered .section__sub (max-width:640px). */
.section__head--centered .section__sub.trilhas-cta__sub { max-width: 860px; }
.trilhas-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 20px;
  margin-top: 32px;
  align-items: stretch;
}
@media (max-width: 1080px) { .trilhas-cta-grid { grid-template-columns: 1fr; } }
.trilhas-cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-lg);
  transition: border-color .25s ease, transform .25s ease;
}
.trilhas-cta-card:hover {
  border-color: var(--green-glow);
  transform: translateY(-3px);
}
.trilhas-cta-card--popular {
  border: 2px solid var(--green-glow);
  box-shadow: 0 0 32px rgba(93, 202, 165, 0.15);
  background: linear-gradient(160deg, var(--dark-card) 0%, rgba(93, 202, 165, 0.04) 100%);
}
.trilhas-cta-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--green-glow), #D4AF37);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.trilhas-cta-card__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-glow);
  margin-bottom: 14px;
}
.trilhas-cta-card__title {
  font-family: var(--display-pf);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 16px;
}
.trilhas-cta-card__desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--dark-text-soft);
  margin: 0 0 24px;
}
.trilhas-cta-card__list {
  list-style: none;
  padding: 0 0 28px;
  margin: 0 0 28px 0;
  border-bottom: 1px solid var(--dark-line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.trilhas-cta-card__list li {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--paper);
  padding-left: 20px;
  position: relative;
}
.trilhas-cta-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green-glow);
  font-weight: 700;
  font-size: 14px;
}

/* ============================================================================
   CONCEITO — card destacado "highlight" (rodada 126)
   Usado para definir o "Capstone integrador" no Hero 2 da página Formações.
   Ocupa as 2 colunas inteiras e ganha border verde-glow + halo sutil.
============================================================================= */
.conceito-card--highlight {
  grid-column: 1 / -1;
  border: 2px solid var(--green-glow);
  background: linear-gradient(160deg, var(--dark-card) 0%, rgba(93, 202, 165, 0.05) 100%);
  box-shadow: 0 0 32px rgba(93, 202, 165, 0.12);
}
.conceito-card--highlight .conceito-card__num {
  color: var(--green-glow);
}

/* ============================================================================
   PROJETOS — Seção 1 "Projetos das Trilhas" (rodada 127)
   Lista de 7 trilhas, cada uma com X mini-projetos + 1 capstone.
   Layout: 2 colunas, cards horizontais (num · body · arrow).
============================================================================= */
.projetos-trilhas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 880px) { .projetos-trilhas-grid { grid-template-columns: 1fr; } }
.projetos-trilha-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 22px 26px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color .25s ease, transform .25s ease;
}
.projetos-trilha-item:hover {
  border-color: var(--green-glow);
  transform: translateX(2px);
}
.projetos-trilha-item__num {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green-glow);
  padding: 8px 12px;
  background: rgba(93, 202, 165, 0.08);
  border: 1px solid rgba(93, 202, 165, 0.25);
  border-radius: 8px;
  min-width: 44px;
  text-align: center;
}
.projetos-trilha-item__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.projetos-trilha-item__cat {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-glow);
}
.projetos-trilha-item__title {
  font-family: var(--display-pf);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 2px 0 6px;
}
.projetos-trilha-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.projetos-trilha-item__meta-pill {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--dark-text-soft);
}
.projetos-trilha-item__meta-sep {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--green-glow);
  line-height: 1;
}
.projetos-trilha-item__arrow {
  font-size: 20px;
  color: var(--green-glow);
  transition: transform .25s ease;
}
.projetos-trilha-item:hover .projetos-trilha-item__arrow {
  transform: translateX(3px);
}

/* Cards-link da seção "3 categorias da Biblioteca" — agora são <a> clicáveis */
.biblioteca-acesso a.biblioteca-acesso__card {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color .25s ease, transform .25s ease;
}
.biblioteca-acesso a.biblioteca-acesso__card:hover {
  border-color: var(--green-glow);
  transform: translateY(-2px);
}

/* ============================================================================
   HOME — Bloco "Mentoria & Curadoria do Aldy" (rodada 129)
   Posicionado entre Certificados e Planos. 3 cards horizontais com pilares
   da mentoria/curadoria. Comunica que está INCLUÍDA nos planos pagos.
============================================================================= */
.mentoria-curadoria__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
@media (max-width: 880px) { .mentoria-curadoria__grid { grid-template-columns: 1fr; } }
.mentoria-curadoria__card {
  position: relative;   /* r350 — ancora o badge "Em breve" */
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  background: var(--dark-card);
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
}
/* r350 — etiqueta "Em breve" no card (mesmo visual do .curso-card__badge). */
.mentoria-curadoria__badge {
  position: absolute; top: 16px; right: 16px;
  padding: 4px 10px;
  background: var(--amber); color: var(--dark-1);
  border-radius: 100px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  z-index: 3;
}
.mentoria-curadoria__num {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--green-glow);
  margin-bottom: 16px;
}
.mentoria-curadoria__title {
  font-family: var(--display-pf);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--paper);
  margin: 0 0 14px;
}
.mentoria-curadoria__desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--dark-text-soft);
  margin: 0 0 22px;
  flex: 1;
}
.mentoria-curadoria__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(93, 202, 165, 0.08);
  border: 1px solid rgba(93, 202, 165, 0.25);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--green-glow);
  align-self: flex-start;
}
.mentoria-curadoria__star {
  color: var(--green-glow);
  font-size: 12px;
  line-height: 1;
}
.mentoria-curadoria__cta {
  margin-top: 40px;
  text-align: center;
}

/* ============================================================================
   PLANOS — features de mentoria destacadas (rodada 130)
   Features prefixadas com ✦ ganham destaque visual: ícone ✦ em verde-glow,
   texto com peso maior. Comunica "está incluído + é diferencial premium".
============================================================================= */
.plano-card__features-mentoria {
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px dashed rgba(93, 202, 165, 0.25);
}
.plano-card__features-mentoria + .plano-card__features-mentoria {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}
.plano-card__features-mentoria .check {
  color: var(--green-glow) !important;
  font-size: 14px !important;
}
.plano-card__features-mentoria span:last-child {
  color: var(--paper);
}
.plano-card__features-mentoria strong {
  color: var(--green-glow);
}

/* ===========================================================
   r135 — Acessibilidade: prefers-reduced-motion (auditoria 14/06/2026, Fix M1)
   Respeita quem pede menos movimento: neutraliza animações infinitas
   (dot pulsante do eyebrow, pulse + ripple da seta de Transformação),
   reduz transições e desliga scroll suave. Mantém 0.01ms para não
   quebrar listeners de transitionend/animationend.
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================
   r135 — Acessibilidade: anel de foco branded (auditoria 14/06/2026, Fix A3)
   :focus-visible mostra o anel só na navegação por TECLADO (não no clique
   de mouse). Padrão: green-glow (≥5:1 sobre dark-1/dark-2). Override em
   superfícies claras (nav, footer, cards Formação #BDC6BE) para --green,
   que mantém ≥3:1 ali (WCAG 1.4.11). Usa só outline (nunca é cortado por
   overflow). O input do cadastro mantém o anel próprio dele.
   =========================================================== */
:focus-visible {
  outline: 3px solid var(--green-glow);
  outline-offset: 2px;
}
.nav :focus-visible,
.footer :focus-visible,
.formacao-card:focus-visible {
  outline-color: var(--green);
}

/* ===========================================================
   r135 — Acessibilidade: contraste do verde nos cards Formação (Fix A1)
   --green (#0F6E56) sobre o fundo paper-75% #BDC6BE dá só 3,54:1 (falha AA).
   Override escopado para #0B5743 = 4,87:1 (passa AA 4,5:1) APENAS nos
   acentos verdes do card (subtítulo, CTA, bullet do meta). O token global
   --green NÃO é alterado — vale só aqui, sobre este fundo claro específico.
   =========================================================== */
.formacao-card .formacao-card__subtitle,
.formacao-card .formacao-card__cta,
.formacao-card .formacao-card__meta span::before {
  color: #0B5743;
}

/* ===========================================================
   r135 — Acessibilidade: skip-link (Fix A6)
   Link "pular para o conteúdo" oculto até receber foco por teclado.
   Verde sobre paper = 5,8:1. #app:focus sem outline (o salto já é o sinal).
   =========================================================== */
.skip-link {
  position: absolute;
  left: 12px; top: -64px;
  z-index: 2000;
  background: var(--green);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 8px;
  font-family: var(--sans-hero);
  font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: top .2s ease;
}
.skip-link:focus { top: 12px; }
#app:focus { outline: none; }

/* ===========================================================
   r135 — Responsivo (Fix R1 + R2)
   R1: o min-height: 760px do .hero (r41d) valia em qualquer tela e criava
   espaço vazio no celular. Passa a valer só no desktop; em ≤880px a altura
   flui pelo conteúdo.
   R2: alvo de toque dos dots do carrossel era 8×8px. content-box + padding
   8px = área clicável de 24px (WCAG 2.5.8), mantendo o ponto visual em 8px
   via background-clip. (Setas já eram 48px; nav mobile já tinha ~51px.)
   =========================================================== */
@media (max-width: 880px) {
  .hero { min-height: 0; }
}
.video-carousel__dot {
  box-sizing: content-box;
  padding: 8px;
  background-clip: content-box;
}

/* ===========================================================
   r136 — Hero da Home: vídeo um pouco maior e mais alto, SEM corte.
   Escopado só à Home (.hero--home) para não alterar o alinhamento r41f
   dos heros das demais páginas. Coluna do vídeo levemente mais larga
   (0.83/1.62 vs 0.85/1.55 padrão), gap menor e topo do vídeo subido
   (28px vs 70px). 16:9 preservado — nada de crop.
   =========================================================== */
@media (min-width: 969px) {
  .hero--home .hero__container--wide { grid-template-columns: 0.83fr 1.62fr; gap: 44px; }
}
.hero--home .hero__container--wide > .hero__video { margin-top: 28px; }

/* r136 — Home: CTAs do hero em linha centralizada ABAIXO do texto+vídeo (teste). */
.hero--home .hero__ctas--center {
  display: flex;
  justify-content: center;
  gap: 16px;
  max-width: var(--container);
  margin: 36px auto 0;
}

/* r322 — os 2 CTAs do hero da Home (Quem Somos / Mapa de Carreiras) foram
   REMOVIDOS: levavam direto para outras páginas e confundiam quem chegava.
   Sobrou este div vazio só para manter o margin-top de 36px da regra acima.
   A altura do botão (58,8px) foi ELIMINADA a pedido do Aldy: com os botões
   fora, o vão até o título seguinte ficava grande demais. Vale uma linha
   a menos. Se um dia os botões voltarem, basta repor o conteúdo do div. */
.hero--home .hero__ctas--vazio { height: 0; margin-top: 0; }

/* ===========================================================
   r136 — Quem Somos: vídeo VERTICAL do Aldy no hero em formato "reel"
   PURO — card retrato 9:16 recortado, SEM fundo desfocado. Coluna do
   vídeo estreitada (escopo .hero--qs) para o card não ficar perdido.
   Click-to-play com som. Escopo exclusivo desta página.
   =========================================================== */
@media (min-width: 969px) {
  .hero--qs .hero__container--wide { grid-template-columns: 1.1fr 1fr; }
}


/* r136 — Mapa de Carreiras: ilustração SVG no hero (substitui placeholder de vídeo). Emoldurada como card 16:9. */
.mapa-hero__art {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: none;
  box-shadow: none;
  /* r136 - Opcao A: feather de borda - franja externa dissolve no verde do hero, simetrico nos 4 lados (lateral ~7%, topo/base ~11%) */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-composite: intersect;
  line-height: 0;
}
.mapa-hero__art svg { width: 100%; height: 100%; display: block; }

/* r136 — Mapa de Carreiras: imagem final (árvore do conhecimento nutre o mapa) + legenda. */
.mapa-hero__artwrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 970px; }
.mapa-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mapa-hero__art-caption { font-family: var(--sans-hero); font-size: 15px; line-height: 1.5; color: var(--dark-text-muted); text-align: center; max-width: 760px; margin: 0; }
.mapa-hero__art-caption strong { color: var(--green-glow); font-weight: 600; }

/* r136 — Mapa de Carreiras: coluna do vídeo um pouco mais larga (só nesta página) + InsurIA branco na legenda. */
@media (min-width: 969px) {
  .hero--mapa .hero__container--wide { grid-template-columns: 0.58fr 1.92fr; gap: 28px; }
}
.mapa-hero__art-caption .brand { color: var(--paper); }

/* r136 — anéis estelares do card do Mapa precisam transbordar o container */
.mapa-hero__video { overflow: visible; }

/* r136 - Opcao A: apara ar vazio do hero do Mapa (sem mexer na imagem); aproxima do min-height 760 dos demais heros */
.hero--mapa { padding-bottom: 24px; }

/* r137 - hero do Mapa: vídeo de ambiente (Gemini/Veo) preenche o card como a imagem; feather herdado da .mapa-hero__art */
.mapa-hero__art video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* r138 - Conteudos gratuitos: carrossel proprio (video + 2 imagens); imagem preenche o slide como o video */
.video-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* r138 - Conteudos gratuitos: hero sem o min-height fixo (hugs conteudo) + base mais justa */
.hero--cg { min-height: auto; padding-bottom: 40px; }
.hero--cg__ctas { display: flex; justify-content: center; gap: 16px; max-width: var(--container); margin: 8px auto 0; flex-wrap: wrap; }

/* r138 - Conteudos gratuitos: carrossel maior (texto desce mais linhas) + feather estilo Mapa */
@media (min-width: 969px) {
  .hero--cg .hero__container--wide { grid-template-columns: 0.66fr 1.74fr; gap: 44px; }
}
/* sem moldura/sombra: a midia "flutua" e dissolve no verde do hero (como no Mapa) */
.hero--cg .video-carousel__viewport { background: transparent; box-shadow: none; }
.hero--cg .video-carousel__slide video,
.hero--cg .video-carousel__slide img {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-composite: intersect;
}

/* r138 - Conteudos gratuitos: cadastro leva ao self sign-up do Membox (autoinscricao) */
.cadastro-cta__list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.cadastro-cta__list li { position: relative; padding-left: 28px; font-family: var(--sans); font-size: 15.5px; line-height: 1.45; color: var(--paper); }
.cadastro-cta__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--green-glow); font-weight: 700; }
a.cadastro-form__submit { display: block; text-align: center; text-decoration: none; }

/* r139 - Formacoes: hero com imagem unica + feather (padrao Mapa); o video entra depois com o mesmo .form-hero__art */
.form-hero__art {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg); overflow: hidden; line-height: 0;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-composite: intersect;
}
.form-hero__art img, .form-hero__art video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* r139 - Formacoes: video um pouco maior + 2 CTAs centralizados na base do hero */
@media (min-width: 969px) {
  .hero--form .hero__container--wide { grid-template-columns: 0.76fr 1.72fr; gap: 44px; }
}
.hero--form .hero__ctas--center { display: flex; justify-content: center; gap: 32px; max-width: var(--container); margin: 40px auto 0; flex-wrap: wrap; }
.hero--trilhas__ctas { display: flex; justify-content: center; gap: 16px; max-width: var(--container); margin: 8px auto 0; flex-wrap: wrap; }
/* r139 - botao verde forte (solido), mesmo verde do Matricule-se */


/* r139 - Formacoes: palavras das areas saltando sobre os ramos (no fim do video, sem moldura) */
.form-hero__labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.form-hero__label {
  position: absolute; transform: translate(-50%, -50%) scale(0.6); opacity: 0;
  color: var(--paper);
  font-family: var(--sans-hero); font-size: clamp(18px, 1.7vw, 26px); font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,0.85), 0 0 22px rgba(0,0,0,0.6), 0 0 16px rgba(4,52,44,0.7);
}
.form-hero__labels.is-revealed .form-hero__label { animation: formLabelPop 0.6s cubic-bezier(.34,1.56,.64,1) forwards; }
.form-hero__labels.is-revealed .form-hero__label:nth-child(1) { animation-delay: 0.0s; }
.form-hero__labels.is-revealed .form-hero__label:nth-child(2) { animation-delay: 0.3s; }
.form-hero__labels.is-revealed .form-hero__label:nth-child(3) { animation-delay: 0.6s; }
.form-hero__labels.is-revealed .form-hero__label:nth-child(4) { animation-delay: 0.9s; }
.form-hero__labels.is-revealed .form-hero__label:nth-child(5) { animation-delay: 1.2s; }
.form-hero__labels.is-revealed .form-hero__label:nth-child(6) { animation-delay: 1.5s; }
.form-hero__labels.is-revealed .form-hero__label:nth-child(7) { animation-delay: 1.8s; }
@keyframes formLabelPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .form-hero__label { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: none; }
}

/* r140 - Trilhas: vaga-lumes (overlay) flutuando sobre o video do hero */
.form-hero__fireflies { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; z-index: 1; }
.firefly { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,244,200,0.95) 0%, rgba(255,205,90,0.5) 45%, rgba(255,205,90,0) 72%); opacity: 0; animation: fireflyFloat var(--d, 7s) ease-in-out var(--delay, 0s) infinite; will-change: transform, opacity; }
@keyframes fireflyFloat {
  0% { opacity: 0; transform: translate(0,0) scale(0.7); }
  15% { opacity: 1; }
  60% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(var(--x, 12px), var(--y, -72px)) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .form-hero__fireflies { display: none; } }
.firefly--bright { background: radial-gradient(circle, rgba(255,250,225,1) 0%, rgba(255,212,120,0.78) 42%, rgba(255,205,90,0) 78%); box-shadow: 0 0 7px 1px rgba(255,214,120,0.4); }

/* r140 - Trilhas: base mais justa (sem min-height fixo) + colunas um pouco mais proximas */
.hero--trilhas { min-height: auto; padding-bottom: 40px; }
@media (min-width: 969px) { .hero--trilhas .hero__container--wide { gap: 44px; } }

/* r141 - Para Empresas: painel de formação (mockup) no hero */
.emp-dash { background: var(--dark-card); border: 1px solid var(--dark-line); border-radius: var(--radius-lg); padding: 17px 22px; box-shadow: 0 24px 64px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 12px; }
.emp-dash__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.emp-dash__eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-glow); }
.emp-dash__title { font-family: var(--display-pf); font-weight: 500; font-size: 19px; color: var(--paper); margin-top: 4px; }   /* r367c — Playfair */
.emp-dash__chip { font-family: var(--sans); font-size: 11.5px; color: var(--dark-text-muted); border: 1px solid var(--dark-line); border-radius: 100px; padding: 5px 11px; white-space: nowrap; align-self: center; }
.emp-dash__dot { color: var(--green-glow); animation: empPulse 2s ease-in-out infinite; }
.emp-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.emp-dash__kpi { background: rgba(0,0,0,0.22); border: 1px solid var(--dark-line); border-radius: 12px; padding: 10px 13px; display: flex; flex-direction: column; gap: 4px; }
.emp-dash__kpi-v { font-family: var(--display); font-size: clamp(20px, 2.2vw, 27px); font-weight: 600; color: var(--green-glow); line-height: 1; }
.emp-dash__kpi-l { font-family: var(--sans); font-size: 11.5px; line-height: 1.3; color: var(--dark-text-muted); }
.emp-dash__bars { display: flex; flex-direction: column; gap: 8px; }
.emp-dash__row { display: grid; grid-template-columns: minmax(86px, 130px) 1fr 40px; align-items: center; gap: 12px; }
.emp-dash__row-l { font-family: var(--sans); font-size: 12.5px; color: var(--paper); }
.emp-dash__track { height: 8px; background: rgba(0,0,0,0.32); border-radius: 100px; overflow: hidden; }
.emp-dash__track i { display: block; height: 100%; border-radius: 100px; background: var(--green-glow); width: 0; animation: empBarFill 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
.emp-dash__row-v { font-family: var(--mono); font-size: 12px; color: var(--green-glow); text-align: right; }
@keyframes empBarFill { to { width: var(--p); } }
@keyframes empPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .emp-dash__track i { animation: none; width: var(--p); } .emp-dash__dot { animation: none; } }
@media (min-width: 969px) { .hero--empresa .hero__container--wide { grid-template-columns: 0.78fr 1.62fr; gap: 44px; } }

/* r141 - painel: IEC tag + métricas secundárias + distribuição de engajamento */
.emp-dash__iec-tag { font-style: normal; font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--dark-1); background: var(--green-glow); border-radius: 100px; padding: 2px 8px; vertical-align: middle; }
.emp-dash__mini { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 12.5px; color: var(--dark-text-muted); flex-wrap: wrap; }
.emp-dash__mini b { color: var(--green-glow); font-weight: 600; }
.emp-dash__sep { width: 1px; height: 12px; background: var(--dark-line); display: inline-block; }
.emp-dash__eng-head { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--dark-text-muted); margin-bottom: 7px; }
.emp-dash__eng-bar { display: flex; height: 10px; border-radius: 100px; overflow: hidden; background: rgba(0,0,0,0.3); gap: 2px; }
.emp-dash__eng-seg { display: block; height: 100%; width: 0; animation: empBarFill 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
.emp-dash__eng-seg--alto { background: var(--green-glow); }
.emp-dash__eng-seg--medio { background: #2E8C6E; }
.emp-dash__eng-seg--baixo { background: rgba(251,247,238,0.28); }
.emp-dash__eng-legend { display: flex; gap: 14px; margin-top: 8px; font-family: var(--sans); font-size: 11px; color: var(--dark-text-muted); flex-wrap: wrap; }
.emp-dash__eng-legend span { display: inline-flex; align-items: center; gap: 5px; }
.emp-dash__dotleg { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.emp-dash__dotleg--alto { background: var(--green-glow); }
.emp-dash__dotleg--medio { background: #2E8C6E; }
.emp-dash__dotleg--baixo { background: rgba(251,247,238,0.4); }
@media (prefers-reduced-motion: reduce) { .emp-dash__eng-seg { animation: none; width: var(--p); } }
/* r141 - Para Empresas: hero mais baixo (sem min-height fixo) + CTAs mais próximos */
.hero--empresa { min-height: auto; padding-bottom: 36px; }
/* r141 - Para Empresas: CTAs abaixo do painel (preenche o vazio, equilibra colunas) */
.emp-cta-row { display: flex; gap: 14px; margin-top: 56px; flex-wrap: wrap; justify-content: center; }
.emp-cta-row .btn { flex: 0 0 auto; justify-content: center; }
/* r141 - Para Empresas: CTA do bloco de contato em negrito */
#contato-empresas .btn { font-weight: 500; }


/* ============================================================
   FUNDO DINÂMICO DO SITE (r146 — preset "Dados")
   Espaço contínuo escuro + glow ambiente + rede de partículas.
   Camada fixa atrás de tudo; seções escuras ficam transparentes.
   ============================================================ */
:root{ --abyss:#00120E;  }
body.theme-dark{ background: var(--abyss); }
#site-bg{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:var(--abyss); }
#site-bg .site-bg__grad{ position:absolute; inset:-10%; background:linear-gradient(180deg,#00120E 0%,#04261F 30%,#021C16 55%,#052E25 78%,#00120E 100%); }
#site-bg .site-bg__blob{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.38; mix-blend-mode:screen; }
#site-bg .site-bg__blob--1{ width:44vw; height:44vw; left:-8vw; top:4vh; background:radial-gradient(circle, rgba(93,202,165,.34), transparent 60%); animation:siteBgDrift1 36s ease-in-out infinite; }
#site-bg .site-bg__blob--2{ width:36vw; height:36vw; right:-6vw; top:42vh; background:radial-gradient(circle, rgba(15,110,86,.5), transparent 58%); animation:siteBgDrift2 44s ease-in-out infinite; }
#site-bg .site-bg__blob--3{ width:28vw; height:28vw; left:32vw; bottom:-8vh; background:radial-gradient(circle, rgba(93,202,165,.22), transparent 62%); animation:siteBgDrift3 52s ease-in-out infinite; }
#site-bg-fx{ position:absolute; inset:0; width:100%; height:100%; }
@keyframes siteBgDrift1{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(8vw,6vh);} }
@keyframes siteBgDrift2{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(-7vw,-5vh);} }
@keyframes siteBgDrift3{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(5vw,-7vh);} }
.hero--dark, .section--dark, .section--dark-2, .detail-hero, .course-hero, .course-body, .hero2, .hero2--solid{ background: transparent; }
@media (prefers-reduced-motion: reduce){ #site-bg .site-bg__blob{ animation:none; } }

/* ============================================================
   CARDS — contraste + elevação sobre o fundo dinâmico (r146, teste)
   Fundo mais claro (--dark-card-2) p/ destacar do fundo escuro +
   borda sutil + sombra ao redor. Lista curada (exclui frames de
   mídia, avatar, pills, rótulos e o viewport com feather).
   ============================================================ */
.trilha-card, .curso-card, .pillar, .proposta-card, .lideranca, .diferencial,
.case-card, .cg-card, .side-card, .modulo-item, .significa-card--dark,
.encontra-card, .plano-card, .empresa-transformacao__col, .programa-card, .roteiro-card,
.contato-card, .conceito-card, .empresa-plan, .value-card, .biblioteca-acesso__card,
.projeto-card-v2, .projeto-trilha-card, .b2b-projeto-card, .trilhas-cta-card,
.mentoria-curadoria__card, .area-accordion__item, .subway__card, 
.cadastro-form, .cargos-table, .wheel-side, .compare-note, .cg-detail-aula, .cadeia-camada {
  background: linear-gradient(155deg, rgba(18, 88, 68, 0.62), rgba(7, 50, 40, 0.70));
  border: 1px solid rgba(93, 202, 165, 0.30);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.50), inset 0 1px 0 rgba(180, 245, 215, 0.08);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease;
}

/* preserva o acento colorido da cadeia (r146) */
.cadeia-camada { border-left: 4px solid var(--cor, var(--green-glow)); }


/* Hover "sobressalta" uniforme nos cards (r146, teste) */
.trilha-card:hover, .curso-card:hover, .pillar:hover, .proposta-card:hover, .lideranca:hover, .diferencial:hover, .case-card:hover, .cg-card:hover, .side-card:hover, .modulo-item:hover, .significa-card--dark:hover, .encontra-card:hover, .plano-card:hover, .empresa-transformacao__col:hover, .programa-card:hover, .roteiro-card:hover, .contato-card:hover, .conceito-card:hover, .empresa-plan:hover, .value-card:hover, .biblioteca-acesso__card:hover, .projeto-card-v2:hover, .projeto-trilha-card:hover, .b2b-projeto-card:hover, .trilhas-cta-card:hover, .mentoria-curadoria__card:hover, .subway__card:hover, .compare-note:hover, .wheel-side:hover, .cadeia-camada:hover {
  transform: translateY(-5px);
  border-color: rgba(93, 202, 165, 0.55);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55), 0 0 22px rgba(93, 202, 165, 0.10), inset 0 1px 0 rgba(180, 245, 215, 0.12);
}

/* ============================================================
   TESTE (r146) — hover de MUDANÇA DE COR nos 3 cards "significa"
   (como o botão verde-menta → creme). Cancela o "salto" nesses
   para avaliar só a troca de cor. Texto claro segue legível.
   ============================================================ */
.significa-card--dark { transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease, background .28s ease; }
.significa-card__title, .significa-card__desc, .significa-card__num { transition: color .25s ease, background .25s ease; }
.significa-card--dark:hover {
  transform: none;
  background: var(--paper);
  border-color: rgba(4, 52, 44, 0.16);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.significa-card--dark:hover .significa-card__title { color: var(--ink); }
.significa-card--dark:hover .significa-card__title em { color: var(--green); }
.significa-card--dark:hover .significa-card__desc { color: var(--ink); opacity: 0.78; }
.significa-card--dark:hover .significa-card__num { background: rgba(15, 110, 86, 0.14); color: var(--green); }

/* ============================================================
   HOVER CREME (como o botão) — cards da Home (r146, teste)
   Fundo creme + textos escurecem; acentos viram verde escuro.
   Cancela o "salto" nestes (feedback = troca de cor).
   ============================================================ */
/* botões: ghost preenche creme no hover (accent já faz) */
.btn--dark-ghost:hover { background: var(--paper); color: var(--dark-1); border-color: var(--paper); }

/* ENCONTRA */
.encontra-card:hover { transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16); box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none; }
.encontra-card:hover .encontra-card__title { color: var(--ink); }
.encontra-card:hover .encontra-card__title em { color: var(--green); }
.encontra-card:hover .encontra-card__desc { color: var(--ink); opacity: 0.8; }
.encontra-card:hover .encontra-card__icon { color: var(--green); }
.encontra-card:hover strong { color: var(--ink); }

/* TRANSFORMAÇÃO (Antes/Depois) */
.empresa-transformacao__col:hover { transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16); box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none; }
.empresa-transformacao__col:hover .empresa-transformacao__label { color: var(--ink); }
.empresa-transformacao__col:hover ul li { color: var(--ink); }
.empresa-transformacao__col:hover strong { color: var(--ink); }
.empresa-transformacao__col--depois:hover ul li::before { color: var(--green); }
.empresa-transformacao__col--antes:hover ul li::before { color: var(--rust); }

/* MENTORIA & CURADORIA */
.mentoria-curadoria__card:hover { transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16); box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mentoria-curadoria__card:hover .mentoria-curadoria__title { color: var(--ink); }
.mentoria-curadoria__card:hover .mentoria-curadoria__desc { color: var(--ink); opacity: 0.82; }
.mentoria-curadoria__card:hover .mentoria-curadoria__desc strong { color: var(--ink); }
.mentoria-curadoria__card:hover .mentoria-curadoria__num { color: var(--green); }
.mentoria-curadoria__card:hover .mentoria-curadoria__star { color: var(--green); }
.mentoria-curadoria__card:hover .mentoria-curadoria__tag { color: var(--green); background: rgba(15,110,86,0.08); border-color: rgba(15,110,86,0.35); }

/* ============================================================
   PLANOS (Home) — TESTE r146: cor clara dos cards de formação
   (#BDC6BE). Texto escurece p/ ink; acentos verdes; CTA vira
   verde sólido (o creme sumiria no card claro).
   ============================================================ */
.plano-card {
  background: #BDC6BE;
  color: var(--ink);
  border: 1px solid var(--green-glow);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.plano-card .plano-card__name,
.plano-card .plano-card__price-value,
.plano-card .plano-card__price-label,
  .plano-card .plano-card__price-cash,
  .plano-card .plano-card__price-value-de,   /* r322 — sem isto ficavam creme, ilegíveis no card claro */
  .plano-card .plano-card__price-de,
  .plano-card .plano-card__price-por,
.plano-card .plano-card__price-total,
.plano-card .plano-card__period,
.plano-card .plano-card__features li,
.plano-card .plano-card__warranty,
.plano-card strong { color: var(--ink); }
.plano-card .plano-card__features .check,
.plano-card .plano-card__formacao-label,
.plano-card .plano-card__saibamais { color: var(--green); }
.plano-card .plano-card__economia { background: rgba(15,110,86,0.14); color: var(--green); }
.plano-card .plano-cta { background: var(--green); color: var(--paper); border-color: var(--green); }
.plano-card .plano-cta:hover { background: var(--dark-1); border-color: var(--dark-1); color: var(--paper); }

/* ============================================================
   PLANOS claros (r146) — correções de contraste
   ============================================================ */
/* a) palavras ainda claras -> escuras (marca, strong, itens de mentoria) */
.plano-card .brand,
.plano-card .plano-card__features strong,
.plano-card .plano-card__features-mentoria,
.plano-card .plano-card__features-mentoria span,
.plano-card .plano-card__features-mentoria strong { color: var(--ink); }
.plano-card .plano-card__features-mentoria .check { color: var(--green) !important; }
/* b) seletor de formação (3 fases) -> preto */
.plano-card .formacao-pills { background: var(--dark-1); }
/* c) "ESCOLHA SUA FORMAÇÃO" legível no claro */
.plano-card .plano-card__formacao-label { color: var(--ink); }
/* d, e) linhas divisórias visíveis no card claro */
.plano-card .plano-card__price { border-bottom-color: rgba(4, 52, 44, 0.20); }
.plano-card .plano-card__saibamais { border-bottom-color: rgba(4, 52, 44, 0.20); }
.plano-card .plano-card__features-mentoria { border-top-color: rgba(4, 52, 44, 0.28); }

/* Hero2 — botões ghost/outline preenchem creme no hover (r146) */
.btn-big--ghost:hover, .btn-big--outline:hover {
  background: var(--paper);
  color: var(--dark-1);
  border-color: var(--paper);
  transform: translateY(-1px);
}
.btn-big--ghost:hover .brand, .btn-big--outline:hover .brand { color: var(--dark-1); }

/* ============================================================
   QUEM SOMOS — hover creme (como a Home) em todos os cards (r146)
   ============================================================ */
/* base do hover creme (compartilhada) */
.pillar:hover, .proposta-card:hover, .lideranca:hover, .diferencial:hover, .case-card:hover {
  transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* PILLAR */
.pillar:hover .v { color: var(--green); }
.pillar:hover .l { color: var(--ink); }
/* PROPOSTA */
.proposta-card:hover h3 { color: var(--ink); }
.proposta-card:hover ul li { color: var(--ink); }
.proposta-card:hover ul li::before { color: var(--green); }
/* LIDERANÇA */
.lideranca:hover .lideranca__nome,
.lideranca:hover ul li,
.lideranca:hover .socio-mini__nome,
.lideranca:hover .socio-mini__cargo,
.lideranca:hover .brand,
.lideranca:hover strong { color: var(--ink); }
.lideranca:hover .eyebrow,
.lideranca:hover .socios__eyebrow { color: var(--ink); }
.lideranca:hover .lideranca__socios { border-color: rgba(4,52,44,0.18); }
/* DIFERENCIAIS */
.diferencial:hover { color: var(--ink); }
.diferencial:hover::before { color: var(--green); }
/* CASES */
.case-card:hover .case-card__area { color: var(--ink); }
.case-card:hover .case-card__empresa { color: var(--ink); }
.case-card:hover ul li { color: var(--ink); }
.case-card:hover ul li::before { color: var(--green); }
.case-card:hover strong { color: var(--ink); }

/* ============================================================
   MAPA DE CARREIRAS — hover creme nos cards de estágio (r146)
   ============================================================ */
.subway__card:hover {
  transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.subway__card:hover .subway__anos,
.subway__card:hover .subway__titulo,
.subway__card:hover .subway__desc,
.subway__card:hover .subway__trilhas-label,
.subway__card:hover .subway__trilhas-val,
.subway__card:hover strong { color: var(--ink); }
.subway__card:hover .subway__sub,
.subway__card:hover .subway__trilhas-sep { color: var(--green); }
.subway__card:hover .subway__trilhas { border-top-color: rgba(4,52,44,0.20); }

/* Box "TRILHAS InsurIA" (.trilha-rail) — ganha o vidro (r146) */
.trilha-rail {
  background: linear-gradient(155deg, rgba(18, 88, 68, 0.62), rgba(7, 50, 40, 0.70));
  border: 1px solid rgba(93, 202, 165, 0.30);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.50);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

/* Pílulas de trilha — hover muda de cor (creme), como os botões (r146).
   Mantém o pontinho colorido da formação (--pill-cor) e a interação da roda. */
.trilha-pill:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--dark-1);
  transform: translateY(-1px);
}
.trilha-pill:hover .trilha-pill__num { color: var(--dark-1); opacity: 0.6; }
.trilha-pill:hover .trilha-pill__title { color: var(--dark-1); }

/* ============================================================
   MAPA — box lateral estável + hover nos clicáveis internos (r146)
   ============================================================ */
/* box do detalhe: sem "salto" (é um popup, não card clicável de grade) */
.wheel-side:hover {
  transform: none;
  border-color: rgba(93, 202, 165, 0.30);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.50);
}
/* link "Clique para ver detalhes" clareia quando o box é apontado */
.wheel-side:hover .wheel-side__cta { color: var(--paper); }
/* pílula interna -> hover creme (como os botões), mantendo o acento lateral */
.trilha-pill-out:hover {
  background: var(--paper);
  border-color: var(--paper);
  border-left-color: var(--side-cor);
  color: var(--dark-1);
  transform: none;
}
.trilha-pill-out:hover .trilha-pill-out__num,
.trilha-pill-out:hover .trilha-pill-out__title { color: var(--dark-1); }

/* ============================================================
   MAPA — TESTE r146: tabela de cargos com a cor clara (#BDC6BE)
   Só a tabela; o cabeçalho da área continua escuro.
   ============================================================ */
.cargos-table { background: #BDC6BE; border-color: rgba(4,52,44,0.18); }
.cargos-table__header { background: rgba(4,52,44,0.05); color: var(--ink); border-bottom-color: rgba(4,52,44,0.20); }
.cargos-table__row { border-bottom-color: rgba(4,52,44,0.16); }
.cargos-table__cargo { color: var(--ink); }
.cargos-table__foco { color: var(--ink); }
.cargos-table__form { color: var(--ink); opacity: 0.9; }
.cargos-table strong { color: var(--ink); }

/* ajustes finos r146 (tabela de cargos + pills da área) */
.cargos-table__header { font-size: 13px; font-weight: 600; }
.area-card__trilha:hover {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--dark-1);
  transform: translateY(-1px);
}
.area-card__trilha:hover .n { color: var(--dark-1); opacity: 0.6; }

/* ============================================================
   CONTEÚDOS GRATUITOS — hover creme nos cards (r146)
   .conceito-card (explicação) + .cg-card (catálogo)
   ============================================================ */
.conceito-card:hover {
  transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.conceito-card:hover .conceito-card__title,
.conceito-card:hover .conceito-card__desc,
.conceito-card:hover strong { color: var(--ink); }
.conceito-card:hover .conceito-card__num { color: var(--ink); opacity: 0.6; }
.conceito-card:hover .conceito-card__icon { color: var(--green); }

.cg-card:hover {
  transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.cg-card:hover .cg-card__tag,
.cg-card:hover .cg-card__title,
.cg-card:hover .cg-card__desc,
.cg-card:hover strong { color: var(--ink); }
.cg-card:hover .cg-card__tagline,
.cg-card:hover .cg-card__cta { color: var(--green); }
.cg-card:hover .cg-card__meta { background: rgba(15,110,86,0.10); border-color: rgba(15,110,86,0.30); color: var(--green); }

/* btn--green (2º CTA dos heros de árvore) — hover creme, como o accent (r146) */


/* ============================================================
   TRILHAS — hover creme nos cards (r146)
   .trilha-card (7 trilhas) + .trilhas-cta-card (3 assinaturas)
   ============================================================ */
.trilha-card:hover {
  transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.trilha-card:hover .trilha-card__head,
.trilha-card:hover .trilha-card__num,
.trilha-card:hover .trilha-card__title,
.trilha-card:hover .trilha-card__desc,
.trilha-card:hover .trilha-card__cta-title,
.trilha-card:hover .trilha-card__cta-desc,
.trilha-card:hover strong { color: var(--ink); }
.trilha-card:hover .trilha-card__subtitle,
.trilha-card:hover .trilha-card__cta-eyebrow { color: var(--green); }
.trilha-card:hover .trilha-card__meta { color: var(--ink); opacity: 0.7; }

.trilhas-cta-card:hover {
  transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.trilhas-cta-card:hover .trilhas-cta-card__eyebrow,
.trilhas-cta-card:hover .trilhas-cta-card__title,
.trilhas-cta-card:hover .trilhas-cta-card__desc,
.trilhas-cta-card:hover .trilhas-cta-card__list li,
.trilhas-cta-card:hover strong { color: var(--ink); }
.trilhas-cta-card:hover .trilhas-cta-card__list li::before { color: var(--green); }

/* ============================================================
   PARA EMPRESAS (r146)
   1) hover creme: .programa-card / .roteiro-card / .b2b-projeto-card
   2) painel de planos .empresa-plan = tratamento LIGHT da Home (#BDC6BE)
   ============================================================ */

/* --- 1a. Programas corporativos --- */
.programa-card:hover {
  transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.programa-card:hover .programa-card__title,
.programa-card:hover .programa-card__desc,
.programa-card:hover .programa-card__features li,
.programa-card:hover strong { color: var(--ink); }
.programa-card:hover .programa-card__num,
.programa-card:hover .programa-card__features li::before { color: var(--green); }
.programa-card:hover .programa-card__icon { background: rgba(15,110,86,0.12); color: var(--green); }

/* --- 1b. Roteiro "3 passos" --- */
.roteiro-card:hover {
  transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-top-color: var(--green);
}
.roteiro-card:hover .roteiro-card__title,
.roteiro-card:hover .roteiro-card__desc,
.roteiro-card:hover strong { color: var(--ink); }
.roteiro-card:hover .roteiro-card__num { color: var(--green); }

/* --- 1c. Projetos sob demanda (B2B) --- */
.b2b-projeto-card:hover {
  transform: none; background: var(--paper); border-color: rgba(4,52,44,0.16);
  box-shadow: 0 18px 42px rgba(0,0,0,0.45); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.b2b-projeto-card:hover .b2b-projeto-card__titulo,
.b2b-projeto-card:hover .b2b-projeto-card__desc,
.b2b-projeto-card:hover .b2b-projeto-card__meta-item .v,
.b2b-projeto-card:hover strong { color: var(--ink); }
.b2b-projeto-card:hover .b2b-projeto-card__meta-item .l { color: var(--green); }
.b2b-projeto-card:hover .b2b-projeto-card__meta { border-top-color: rgba(4,52,44,0.18); }

/* --- 2. Painel de planos InsurIA Business / Partner = LIGHT da Home --- */
.empresa-plan {
  background: #BDC6BE;
  border-color: rgba(4,52,44,0.14);
  box-shadow: 0 14px 34px rgba(0,0,0,0.30);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.empresa-plan--popular {
  border-color: var(--green);
  box-shadow: 0 18px 42px rgba(0,0,0,0.34);
}
.empresa-plan .empresa-plan__name,
.empresa-plan .empresa-plan__meta,
.empresa-plan .empresa-plan__price,
.empresa-plan .empresa-plan__price strong,
.empresa-plan .empresa-plan__features li,
.empresa-plan .empresa-plan__contracted-title,
.empresa-plan .empresa-plan__contracted ul li,
.empresa-plan strong { color: var(--ink); }
.empresa-plan .empresa-plan__meta .ic,
.empresa-plan .empresa-plan__highlight .ic,
.empresa-plan .empresa-plan__contracted ul li::before { color: var(--green); }
.empresa-plan .empresa-plan__icon { background: rgba(15,110,86,0.12); color: var(--green); }
.empresa-plan .empresa-plan__highlight {
  background: rgba(15,110,86,0.10);
  border-color: rgba(4,52,44,0.14);
  color: var(--ink);
}
.empresa-plan .empresa-plan__contracted { border-top-color: rgba(4,52,44,0.20); }
.empresa-plan .empresa-plan__features li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F6E56' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.empresa-plan .empresa-plan__cta {
  background: var(--green); color: var(--paper); border-color: var(--green);
}
.empresa-plan .empresa-plan__cta:hover {
  background: var(--dark-1); border-color: var(--dark-1); color: var(--paper);
}

/* Para Empresas — padronizar peso do botão "Solicitar proposta" (b2b-projetos-cta)
   com o CTA "Agendar reunião comercial" (#contato-empresas, bold 700 da r141) */
.b2b-projetos-cta .btn { font-weight: 500; }

/* Para Empresas — CTA do plano padronizado com os CTAs da Home (r146):
   bloco verde de largura total, cantos 12px (não pílula), 14px/20px, peso 700 */
.empresa-plan .empresa-plan__cta {
  align-self: stretch;
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: 14.5px;
  font-weight: 700;
}

/* ============================================================
   PARA EMPRESAS — ajustes finos do painel (r146)
   ============================================================ */
/* 1) marca "InsurIA" não pode ficar branca sobre o card claro */
.empresa-plan .brand { color: var(--ink); }
/* 2) linha que separa "CONTRATAÇÃO À PARTE" — mais grossa e visível */
.empresa-plan .empresa-plan__contracted { border-top: 2px dashed rgba(4,52,44,0.32); }
/* 3) faixa de destaque (trilha selecionada) — verde um pouco mais presente */
.empresa-plan .empresa-plan__highlight {
  background: rgba(15,110,86,0.18);
  border-color: rgba(4,52,44,0.20);
}

/* Para Empresas — CTA do plano ficou grande demais em largura total (r146):
   centralizar, largura contida e altura/fonte menores (mantém o verde retangular) */
.empresa-plan .empresa-plan__cta {
  align-self: center;
  width: auto;
  min-width: 240px;
  max-width: 100%;
  padding: 12px 24px;
  font-size: 14px;
  border-radius: 10px;
}

/* Para Empresas — refino r146:
   a) linha de "CONTRATAÇÃO À PARTE" sólida fina (tracejado grosso ficou feio)
   b) CTA do plano num tamanho intermediário (estava grande, depois pequeno demais) */
.empresa-plan .empresa-plan__contracted { border-top: 1px solid rgba(4,52,44,0.18); }
.empresa-plan .empresa-plan__cta {
  min-width: 300px;
  padding: 14px 40px;
  font-size: 15px;
}

/* Para Empresas — painel "mais brilhante" (r146):
   fontes do corpo mais nítidas (peso 500) + linha horizontal luminosa (verde da marca) */
.empresa-plan .empresa-plan__meta,
.empresa-plan .empresa-plan__price,
.empresa-plan .empresa-plan__highlight,
.empresa-plan .empresa-plan__features li,
.empresa-plan .empresa-plan__contracted ul li { font-weight: 500; }
.empresa-plan .empresa-plan__contracted { border-top: 1px solid rgba(15,110,86,0.45); }

/* Para Empresas — texto da faixa de destaque (trilha selecionada) em bold (r146) */
.empresa-plan .empresa-plan__highlight { font-weight: 700; }

/* Para Empresas — painel de formação: superfície escura refinada (r146)
   gradiente verde sutil (luz do topo) + borda/brilho definidos p/ "flutuar" sobre o fundo dinâmico */
.emp-dash {
  background: linear-gradient(157deg, #0C4636 0%, #06251D 72%);
  border: 1px solid rgba(93,202,165,0.24);
  box-shadow: 0 34px 76px rgba(0,0,0,0.55), inset 0 1px 0 rgba(180,245,215,0.10);
}

/* ============================================================
   PARA EMPRESAS — hero (r146):
   1) CTAs alinham com a última linha do texto à esquerda
   2) painel de formação mais alto  3) fontes internas +1px
   4) chip "Incluso nos planos corporativos" mais visível
   ============================================================ */
@media (min-width: 969px) {
  /* coluna direita estica até a base da linha; CTAs descem (margin-top:auto) */
  .hero--empresa .hero__media {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .hero--empresa .emp-cta-row { margin-top: auto; }
}

/* 2) painel mais alto — mais respiro interno */
.emp-dash { padding: 24px 24px; gap: 18px; }
.emp-dash__kpi { padding: 13px 15px; }
.emp-dash__bars { gap: 11px; }

/* 3) fontes internas +1px */
.emp-dash__eyebrow { font-size: 12px; }
.emp-dash__title { font-size: 20px; }
.emp-dash__kpi-v { font-size: clamp(21px, 2.3vw, 28px); }
.emp-dash__kpi-l { font-size: 12.5px; }
.emp-dash__row-l { font-size: 13.5px; }
.emp-dash__row-v { font-size: 13px; }
.emp-dash__mini { font-size: 13.5px; }
.emp-dash__iec-tag { font-size: 12px; }
.emp-dash__eng-head { font-size: 11.5px; }
.emp-dash__eng-legend { font-size: 12px; }

/* 4) chip "Incluso nos planos corporativos" — estava discreto demais */
.emp-dash__chip {
  font-size: 12.5px;
  color: var(--paper);
  border-color: rgba(93,202,165,0.40);
  background: rgba(93,202,165,0.08);
}

/* Para Empresas — painel um pouco mais baixo p/ abrir respiro até os CTAs (r146) */
.emp-dash { padding: 20px 24px; gap: 15px; }
.emp-dash__kpi { padding: 12px 15px; }
.emp-dash__bars { gap: 10px; }

/* Nav — links mais escuros e firmes (r146): peso 500 + ink em 100% (era 400 / opacity .82) */
.nav__links a { font-weight: 500; opacity: 1; }

/* ============================================================
   PLANOS (Home) — divisores sólidos/visíveis + alinhamento (r146)
   Itens de mentoria agora num <ul> próprio, ancorado na base com altura
   reservada → o divisor fica na MESMA altura nos 3 cards (o card com menos
   itens ganha um respiro entre o texto e a linha).
   ============================================================ */
.plano-card__features.plano-card__features--mentoria {
  flex: 0 0 auto;
  min-height: 104px;
  margin: 0 0 24px;
  padding: 12px 0 0;
  border-top: 2px solid rgba(15,110,86,0.50);   /* sólida, mais grossa e visível (era 1px tracejada) */
  list-style: none;
}
.plano-card__features-mentoria { border-top: 0; margin-top: 0; }
/* divisor do "Saiba mais" também mais visível (sólido 2px verde) */
.plano-card .plano-card__saibamais { border-bottom: 2px solid rgba(15,110,86,0.42); }

/* Planos (Home) — linhas iguais à Para Empresas: fina, sólida e discreta (r146)
   (substitui a verde 2px anterior, que não harmonizou) */
.plano-card__features.plano-card__features--mentoria { border-top: 1px solid rgba(4,52,44,0.18); }
.plano-card .plano-card__saibamais { border-bottom: 1px solid rgba(4,52,44,0.18); }

/* Divisores horizontais (Home + Para Empresas) — mais peso, mesmo estilo discreto (r146): 1px -> 2px */
.plano-card__features.plano-card__features--mentoria { border-top: 2px solid rgba(4,52,44,0.24); }
.plano-card .plano-card__saibamais { border-bottom: 2px solid rgba(4,52,44,0.24); }
.empresa-plan .empresa-plan__contracted { border-top: 2px solid rgba(4,52,44,0.24); }

/* Divisores dos planos — 1,5px discreto em TODAS as linhas (r146)
   inclui a borda inferior do PREÇO (linha acima do "Saiba mais"), que faltava */
.plano-card .plano-card__price { border-bottom: 1.5px solid rgba(4,52,44,0.22); }
.plano-card .plano-card__saibamais { border-bottom: 1.5px solid rgba(4,52,44,0.22); }
.plano-card__features.plano-card__features--mentoria { border-top: 1.5px solid rgba(4,52,44,0.22); }
.empresa-plan .empresa-plan__contracted { border-top: 1.5px solid rgba(4,52,44,0.22); }

/* ============================================================
   r149 — Hero do Mapa de Carreiras: IMAGEM final animada por CSS
   (substitui o vídeo do Veo, que embaralhava os textos).
   Movimento sutil; o feather de borda continua no .mapa-hero__art.
   ============================================================ */
.mapa-hero__art { position: relative; }
.mapa-hero__art img { animation: mapaArtKb 24s ease-in-out infinite alternate; transform-origin: 52% 46%; }
@keyframes mapaArtKb { from { transform: scale(1.015); } to { transform: scale(1.05); } }
/* brilho verde pulsante no centro */
.mapa-hero__art::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(circle at 46% 48%, rgba(93,202,165,0.10), transparent 55%);
  mix-blend-mode: screen; animation: mapaArtGlow 7s ease-in-out infinite;
}
@keyframes mapaArtGlow { 0%,100% { opacity: .3; } 50% { opacity: .72; } }
/* facho de luz cruzando devagar */
.mapa-hero__art::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 32%; left: -40%;
  pointer-events: none; z-index: 3; transform: skewX(-14deg);
  background: linear-gradient(90deg, transparent, rgba(210,250,230,0.10), rgba(210,250,230,0.16), transparent);
  mix-blend-mode: screen; animation: none;
}
@keyframes mapaArtSweep { 0% { left: -40%; } 100% { left: 120%; } }
@media (prefers-reduced-motion: reduce) {
  .mapa-hero__art img, .mapa-hero__art::before, .mapa-hero__art::after { animation: none; }
}

/* r149 — camada de partículas do hero do Mapa (pontos saindo da árvore) */
.mapa-hero__art .mapa-hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* r149 — nomes das áreas em HTML sobre o hero do Mapa (imagem sem texto) */


/* r149 — hero do Mapa = VÍDEO do Veo (composição travada). Crop leve come a marca do Veo;
   feather (no .mapa-hero__art) e nomes em HTML continuam. */
.mapa-hero__art video { transform: none; }
/* nomes acompanham o mesmo crop do vídeo (mantém alinhamento nos círculos) */


/* r149 — cobre a marca do Veo (estrela) no canto inferior direito do vídeo, sem cropar */
.mapa-hero__veomask {
  position: absolute; right: -2%; bottom: -3%; width: 24%; height: 30%;
  z-index: 3; pointer-events: none;
  background: radial-gradient(circle at 62% 58%, #00120E 0%, #00120E 44%, rgba(0,18,14,0) 76%);
}
/* facho de luz disparado por JS no início de cada loop do vídeo (sincronizado com o disparo dos pontos) */
.mapa-hero__art.sweeping::after { animation: mapaArtSweep 6s linear; }

/* r150 — Quem Somos: hero com vídeo HORIZONTAL (substitui o reel 9:16) */
.hero__media--qsland { display: block; overflow: visible; align-self: center; }
.hero__qs-video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 0 1px var(--dark-line);
}

/* r150 — Quem Somos: centralizar os CTAs do hero */
.hero--qs .hero__ctas { justify-content: center; }

/* r150 — Quem Somos: CTAs em linha centralizada abaixo do hero (texto+vídeo) */
.hero--qs .hero__ctas--center { display: flex; justify-content: center; gap: 24px; max-width: var(--container); margin: 38px auto 0; flex-wrap: wrap; }

/* ===== Roda neural do preview do Mapa na Home (r152) — substitui o donut do miniWheelSVG ===== */
.mapa-cta-block__preview .nwheel { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto; overflow: visible; }

/* r348 — ⚠️ CASCATA: a regra acima (max-width:500px) vem DEPOIS do bloco
   @media(max-width:880px) da linha ~2184 e o VENCIA (mesma especificidade;
   media query não dá bônus de especificidade → vence a última do arquivo).
   Por isso a roda ficava em 500px no mobile e os rótulos das áreas — que ficam
   FORA do viewBox — encostavam/estouravam as bordas. Este @media vem DEPOIS
   da base e agora prevalece. 56vw (teto 300px) deixa margem para os rótulos. */
@media (max-width: 880px) {
  .mapa-cta-block__preview .nwheel { max-width: min(340px, 66vw); }   /* r349 — 56->66vw: estava pequeno demais */
}
.nwheel .t-num  { font-family: var(--display); font-weight: 500; }
.nwheel .t-core { font-family: var(--display); font-style: italic; font-weight: 500; fill: var(--paper); }
.nwheel .t-lbl  { font-family: var(--sans); font-weight: 500; fill: var(--paper); }
.nwheel .n-core { transform-box: fill-box; transform-origin: center; animation: nwCorePulse 3.4s ease-in-out infinite; }
@keyframes nwCorePulse { 0%,100% { opacity: .92; } 50% { opacity: 1; } }
.nwheel .n-coreglow { transform-box: fill-box; transform-origin: center; animation: nwCoreScale 3.4s ease-in-out infinite; }
@keyframes nwCoreScale { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.nwheel .n-link { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 3 9; animation: nwFlow 2.4s linear infinite; }
@keyframes nwFlow { to { stroke-dashoffset: -24; } }
.nwheel .n-dot { animation: nwTravel 3.2s linear infinite; }
@keyframes nwTravel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nwheel .n-link, .nwheel .n-dot, .nwheel .n-core, .nwheel .n-coreglow { animation: none !important; }
}

/* ===== Roda neural INTERATIVA na página Mapa de Carreiras (r152) ===== */
.wheel-stage .nwheel { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; z-index: 2; }
.nwheel--int .n-node { cursor: pointer; transition: opacity .3s ease; }
.nwheel--int .n-node .node-bg { transition: stroke-width .25s ease; }
.nwheel--int.has-active .n-node.is-dim { opacity: .38; }
.nwheel--int.has-active .n-link { opacity: .16 !important; }
.nwheel--int.has-active .n-link.is-active { opacity: .95 !important; stroke-dasharray: none; animation: none; }
.nwheel--int .n-node.is-active .node-bg { stroke-width: 3.4; }
.nwheel--int .node-name { transition: opacity .25s ease; }
.nwheel--int.has-active .node-name { opacity: 0; }
.conn-flow { fill: currentColor; opacity: 0; filter: drop-shadow(0 0 5px currentColor); }
.wheel-connector.is-visible .conn-flow { animation: nwTravel 1.7s linear infinite; }
.wheel-connector.is-visible #conn-flow2 { animation-delay: .85s; }
.wheel-trilhas.is-left .trilha-pill-out { flex-direction: row-reverse; border-left: 1px solid var(--dark-line); border-right: 3px solid var(--side-cor); }
@media (prefers-reduced-motion: reduce) {
  .nwheel--int .n-link, .nwheel--int .n-dot, .nwheel--int .n-core, .nwheel--int .n-coreglow, .conn-flow { animation: none !important; }
}

/* ===== Orbes 3D flutuantes na roda neural (r153) — Home + Mapa (sem halo) ===== */
.nwheel .float-node { transform-box: fill-box; transform-origin: center; animation: nwBob 4.6s ease-in-out infinite; }
@keyframes nwBob { 0%,100% { transform: translateY(2px); } 50% { transform: translateY(-7px); } }
.nwheel .float-shadow { transform-box: fill-box; transform-origin: center; animation: nwShadow 4.6s ease-in-out infinite; }
@keyframes nwShadow { 0%,100% { opacity: .5; transform: scale(1.02); } 50% { opacity: .24; transform: scale(.8); } }
/* no Mapa, ao passar o mouse, pausa a flutuação p/ o conector ficar alinhado ao nó */
.nwheel--int.has-active .float-node { animation-play-state: paused; }
.nwheel--int.has-active .float-shadow { animation-play-state: paused; opacity: .16 !important; }
@media (prefers-reduced-motion: reduce) { .nwheel .float-node, .nwheel .float-shadow { animation: none !important; } }

/* r153b — halo de volta (pulsa de leve) + brilhos especulares removidos */
.nwheel .halo { transform-box: fill-box; transform-origin: center; animation: nwHalo 4.6s ease-in-out infinite; }
@keyframes nwHalo { 0%,100% { opacity: .5; } 50% { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .nwheel .halo { animation: none !important; } }

/* ===== r152 — Hero do Mapa: ícones + nomes das áreas DENTRO dos círculos =====
   Vídeo Veo regenerado com 6 anéis VAZIOS coloridos; ícone (cor da área) + nome
   sobrepostos em HTML, centrados em cada círculo. Substitui o antigo .mapa-hero__labels. */
.mapa-hero__nodes { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mapa-hero__nodes .mhn {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 9.4%; gap: clamp(1px, 0.3vw, 4px); text-align: center;
}
.mapa-hero__nodes .mhn__ico {
  width: 32%; height: auto; aspect-ratio: 1 / 1; display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.mapa-hero__nodes .mhn__name {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(5px, 0.6vw, 9px); line-height: 1.08;
  color: rgba(251,247,238,0.97); letter-spacing: .005em;
  text-shadow: 0 1px 5px rgba(0,0,0,0.6);
}

/* r152 — reposiciona a máscara da estrela do Veo para o NOVO vídeo (centro ~90.5% / 83.2%) */
.mapa-hero__veomask {
  right: auto; bottom: auto; left: 90.5%; top: 83.2%;
  transform: translate(-50%, -50%); width: 10%; height: 16%;
  background: radial-gradient(ellipse at center, #00120E 0%, #00120E 42%, rgba(0,18,14,0) 74%);
}

/* ===== r152 — Banner "Cadeia de Valor" (página Mapa de Carreiras) =====
   Fundo gerado (fluxo de luz risco→proteção) + 6 nós dos atores (ícones do Aldy,
   recolorizados e sem fundo) sobre o fio de luz. */


@keyframes cdvPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(127,224,190,0.30), inset 0 0 16px rgba(127,224,190,0.06); }
  50%      { box-shadow: 0 0 26px rgba(127,224,190,0.52), inset 0 0 20px rgba(127,224,190,0.13); }
}
@media (prefers-reduced-motion: reduce) {  }


/* ===== r155 — Cadeia de Valor em CHEVRONS (SVG responsivo) =====
   Substitui o banner de círculos (.cdv-hero). Estilo "value chain" estilo Porter:
   faixa de reguladores no topo + 6 chevrons (Risco · Consumidor · Distribuição ·
   Seguros/Produtos · Seguradoras e Resseguradoras · Prestadores) com bracket "Fabricantes". */
.cdv-chain { max-width: 1134px; margin: 56px auto 40px; }
.cdv-chain__band {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: fit-content; max-width: 94%; margin: 0 auto 42px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(127,224,190,0.30);
  color: #E0F7EB; font-family: var(--sans); font-weight: 700;
  font-size: clamp(12px, 1.2vw, 19px); text-align: center; line-height: 1.2;
}
.cdv-chain__band-ico { width: 1.55em; height: 1.55em; object-fit: contain; flex: none; }
.cdv-chain__svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .cdv-chain__band { font-size: 11px; gap: 6px; } }

/* r155 — subtítulo da seção "Seis áreas, uma operação": 1 frase por linha (alarga p/ a 1ª frase caber) */
.mapa-roda-head .section__sub--wide { max-width: 790px; }
.area-accordion { margin-top: 34px; }

/* r155 — subtítulo da Cadeia de Valor: 1ª frase em 2 linhas, 2ª frase em 1 linha (alarga p/ caber "InsurIA") */
.mapa-roda-head .section__sub--cadeia { max-width: 860px; }

/* r155 — frase-chamariz entre a cadeia (chevrons) e os cards de camadas */
.cdv-hint {
  font-family: var(--sans-hero); font-size: clamp(14px, 1.05vw, 17px);
  color: var(--paper); text-align: center; max-width: 1060px;
  margin: 4px auto 28px; line-height: 1.5;
}
.cdv-hint strong { font-weight: 700; color: var(--paper); }

/* r155 — setas (↓) da cadeia com pulso em cascata (sensação de fluxo descendo) */
@keyframes cadeiaArrowFlow {
  0%, 100% { opacity: 0.28; transform: translateY(-2px); filter: drop-shadow(0 0 4px rgba(93,202,165,0.25)); }
  50%      { opacity: 1;    transform: translateY(3px);  filter: drop-shadow(0 0 12px rgba(93,202,165,0.7)); }
}
.cadeia-arrow { animation: cadeiaArrowFlow 1.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cadeia-arrow { animation: none; opacity: 1; } }

/* r156 — hover nos meta-pills da Formação (página de detalhe) */
.formacao-detail-hero__meta-inline { transition: background .25s ease, border-color .25s ease; cursor: default; }
.formacao-detail-hero__meta-pill { transition: color .2s ease; }
.formacao-detail-hero__meta-inline:hover { background: rgba(127,224,190,0.10); border-color: var(--green-glow); }
.formacao-detail-hero__meta-inline:hover .formacao-detail-hero__meta-pill { color: var(--green-glow); }

/* r156 — reduz ~1 linha o espaço entre o hero da Formação e a seção "Trilhas dessa formação" */
.formacao-detail-hero + .section { padding-top: 52px; }

/* r156 — espaçador fantasma do toggle de formação: invisível, mas reserva o espaço
   para alinhar os preços nos 3 cards (Básico/Especialista não têm seleção de formação) */
.plano-card__formacao-toggle--ghost { visibility: hidden; }

/* r451 - linha de acesso do bloco de compra avulsa (pagina do curso).
   Fica sob o preco, discreta: e ressalva contratual, nao argumento. */
.curso-avulso-cta__parcela {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--gold);
  font-weight: 500;
}
.curso-avulso-cta__acesso {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--green-glow);
  letter-spacing: 0.01em;
}


/* r156 (teste) — camada de partículas+teias POR CIMA do conteúdo (overlay fraco) */
#site-bg-fx-top{ position:fixed; inset:0; width:100%; height:100%; z-index:50; pointer-events:none; }


/* r157 — Trilha Produtos: módulos após "compreendem:" viram tópicos com bullet */
.trilha-card__desc .trilha-card__lead { margin: 0 0 10px; }
.trilha-card__topics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.trilha-card__topics li { position: relative; padding-left: 16px; }
.trilha-card__topics li::before { content: "•"; position: absolute; left: 2px; color: var(--green-glow); }
.trilha-card:hover .trilha-card__topics li::before { color: var(--green); }

/* r157 — separador "·" elegante nos subtítulos dos cards de trilha */
.trilha-card__sep {
  margin: 0 6px;
  color: rgba(251, 247, 238, 0.42);   /* paper suave — discreto */
  font-size: 1.08em;                   /* visível, sem dominar */
  font-weight: 400;
  vertical-align: -0.02em;
}
.trilha-card:hover .trilha-card__sep { color: rgba(4, 52, 44, 0.45); }


/* r157 — +1 linha de respiro entre o texto da trilha e a divisória (acima do meta) */
.trilha-card__desc { margin-bottom: 28px; }

/* r157 — card CTA "Quer acesso a todas as trilhas": topo alinhado, título 1 linha,
   descrição em largura cheia (2 linhas), botão centralizado, eyebrow piscando */
.trilha-card--cta { justify-content: flex-start; gap: 0; }
.trilha-card--cta .trilha-card__cta-eyebrow {
  margin-bottom: 46px;                 /* alinha o título ao título da trilha (head 36px + 24) */
  animation: ctaEyebrowBlink 1.8s ease-in-out infinite;
}
.trilha-card--cta .trilha-card__cta-title { max-width: none; margin: 0 0 14px; }
.trilha-card--cta .trilha-card__cta-desc  { max-width: none; width: 100%; margin: 0; }
.trilha-card--cta .trilha-card__cta-btn   { align-self: center; margin: 28px 0 0; padding: 18px 42px; font-size: 14px; }
@keyframes ctaEyebrowBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  .trilha-card--cta .trilha-card__cta-eyebrow { animation: none; }
}

/* r157 — botão CTA do card "Quer acesso": seta maior + pulso intermitente */
.trilha-card__cta-btn .cta-arrow { font-size: 1.6em; line-height: 1; vertical-align: -0.1em; margin-left: 3px; }
@keyframes ctaBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(93, 202, 165, 0); }
  50%      { box-shadow: 0 0 24px 2px rgba(93, 202, 165, 0.65); }
}
.trilha-card--cta .trilha-card__cta-btn { animation: ctaBtnPulse 1.7s ease-in-out infinite; }
.trilha-card--cta .trilha-card__cta-btn:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .trilha-card--cta .trilha-card__cta-btn { animation: none; }
}

/* r157 — divisória do meta visível no hover (fundo claro): mint 18% sumia → hairline escuro */
.trilha-card:hover .trilha-card__meta { border-top-color: rgba(4, 52, 44, 0.18); }

/* r157 — alinhar subtítulos/descrições entre cards de trilha: título reserva 2 linhas */
.trilha-card__title { min-height: 2.1em; }

/* r158 — botões de assinatura dos cards PRO ("Pronto para assinar…"): texto centralizado */
.trilhas-cta-card .btn { justify-content: center; }

/* r158 — pulso nos botões de assinatura dos cards PRO (reusa ctaBtnPulse) */
.trilhas-cta-card .btn { animation: ctaBtnPulse 1.7s ease-in-out infinite; }
.trilhas-cta-card .btn:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .trilhas-cta-card .btn { animation: none; } }

/* r158 — divisória dos cards PRO ("Pronto para assinar") visível no hover claro */
.trilhas-cta-card:hover .trilhas-cta-card__list { border-bottom-color: rgba(4, 52, 44, 0.18); }

/* r159 — hero reveal estendido a TODAS as trilhas: meta (cursos/duração/nível) na coluna esquerda */


/* r159 — hero CODADO das trilhas: arte SVG (glow+anéis+ícone) revelada à direita */
.detail-hero.detail-hero--coded { position: relative; overflow: hidden; }
.detail-hero--coded .detail-hero__container { position: relative; z-index: 2; }
.detail-hero--coded .detail-hero__title,
.detail-hero--coded .detail-hero__sub { max-width: 640px; }

.detail-hero--coded .trilha-stats { max-width: 660px; }
.detail-hero__coded {
  position: absolute; top: 50%; right: 2%;
  transform: translateY(-50%);
  width: min(46vw, 520px); aspect-ratio: 1 / 1;
  z-index: 1; pointer-events: none;
}
.detail-hero__coded svg { width: 100%; height: 100%; display: block; }
@keyframes dhSpin { to { transform: rotate(360deg); } }
.detail-hero__coded .dh-ring { transform-box: fill-box; transform-origin: center; animation: dhSpin 60s linear infinite; }
@media (max-width: 880px) {
  .detail-hero__coded { right: -14%; width: 80vw; opacity: 0.16; }
  .detail-hero--coded .detail-hero__title,
  .detail-hero--coded .detail-hero__sub,

  .detail-hero--coded .trilha-stats { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .detail-hero__coded .dh-ring { animation: none; } }

/* r159 — hero da trilha Produtos com a roda do Mapa (área pinada) */
.detail-hero--mapa { position: relative; }
.detail-hero--mapa .detail-hero__container { position: relative; z-index: 3; }


/* r159 — hero da Trilha Produtos: roda do Mapa com efeito "chase" (a luz percorre as 6 áreas).
   Texto à esquerda mantém o layout das outras trilhas; roda grande à direita; sem linha tracejada. */
.detail-hero--mapa { position: relative; }
.detail-hero--mapa .detail-hero__container { position: relative; z-index: 3; }
.detail-hero--mapa .detail-hero__title,
.detail-hero--mapa .detail-hero__sub { max-width: 640px; }

.detail-hero--mapa .trilha-stats { max-width: 660px; }
.detail-hero__mapa-art { position: absolute; top: 120px; right: calc(max(40px, (100vw - var(--container)) / 2) + 4.5rem); transform: none; width: min(44vw, 480px); z-index: 1; pointer-events: none; overflow: visible; }
/* r178 — texto do hero da trilha limitado p/ não invadir a roda */
.detail-hero--mapa .detail-hero__title, .detail-hero--mapa .detail-hero__sub, .detail-hero--mapa .trilha-stats { max-width: 540px; }
/* r178 — abaixo de 1240px: empilha (roda abaixo do texto, centralizada) em vez de esconder */
@media (max-width: 1280px) {
  .detail-hero--mapa { display: flex; flex-direction: column; }
  .detail-hero--mapa .detail-hero__container { order: 1; }
  .detail-hero--mapa .detail-hero__title, .detail-hero--mapa .detail-hero__sub, .detail-hero--mapa .trilha-stats { max-width: none; }
  .detail-hero__mapa-art { position: static; order: 2; right: auto; top: auto; width: min(86vw, 420px); margin: 30px auto 0; }
}
.detail-hero__mapa-art .nwheel { width: 100%; height: auto; overflow: visible; }
.trilha-mapa-caption { text-align: center; font-family: var(--sans-hero); font-size: 16px; color: #ffffff; opacity: 1; margin: 10px auto 0; line-height: 1.5; max-width: 460px; }

@keyframes seqC6_0 {
  0.0% { opacity: 0; }
  1.49% { opacity: 1; }
  71.74% { opacity: 1; }
  75.7% { opacity: .08; }
  79.67% { opacity: 1; }
  83.64% { opacity: .08; }
  87.6% { opacity: 1; }
  94.21% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC6_1 {
  0.0% { opacity: 0; }
  12.4% { opacity: 0; }
  13.88% { opacity: 1; }
  71.74% { opacity: 1; }
  75.7% { opacity: .08; }
  79.67% { opacity: 1; }
  83.64% { opacity: .08; }
  87.6% { opacity: 1; }
  94.21% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC6_2 {
  0.0% { opacity: 0; }
  24.79% { opacity: 0; }
  26.28% { opacity: 1; }
  71.74% { opacity: 1; }
  75.7% { opacity: .08; }
  79.67% { opacity: 1; }
  83.64% { opacity: .08; }
  87.6% { opacity: 1; }
  94.21% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC6_3 {
  0.0% { opacity: 0; }
  37.19% { opacity: 0; }
  38.68% { opacity: 1; }
  71.74% { opacity: 1; }
  75.7% { opacity: .08; }
  79.67% { opacity: 1; }
  83.64% { opacity: .08; }
  87.6% { opacity: 1; }
  94.21% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC6_4 {
  0.0% { opacity: 0; }
  49.59% { opacity: 0; }
  51.07% { opacity: 1; }
  71.74% { opacity: 1; }
  75.7% { opacity: .08; }
  79.67% { opacity: 1; }
  83.64% { opacity: .08; }
  87.6% { opacity: 1; }
  94.21% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC6_5 {
  0.0% { opacity: 0; }
  61.98% { opacity: 0; }
  63.47% { opacity: 1; }
  71.74% { opacity: 1; }
  75.7% { opacity: .08; }
  79.67% { opacity: 1; }
  83.64% { opacity: .08; }
  87.6% { opacity: 1; }
  94.21% { opacity: 1; }
  100.0% { opacity: 0; }
}
/* r173 — ponto de luz da roda (holofote) desacelerado: viagem 1,1s → 2,0s (cascata; NÃO afeta o Mapa, que usa nwTravel) */
@keyframes dotC2_0 {
  0.0% { offset-distance: 0%; opacity: 0; }
  2.95% { offset-distance: 0%; opacity: 1; }
  35.74% { offset-distance: 100%; opacity: 1; }
  39.02% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC2_1 {
  0.0% { offset-distance: 0%; opacity: 0; }
  24.59% { offset-distance: 0%; opacity: 0; }
  27.54% { offset-distance: 0%; opacity: 1; }
  60.33% { offset-distance: 100%; opacity: 1; }
  63.61% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC3_0 {
  0.0% { offset-distance: 0%; opacity: 0; }
  2.37% { offset-distance: 0%; opacity: 1; }
  28.68% { offset-distance: 100%; opacity: 1; }
  31.32% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC3_1 {
  0.0% { offset-distance: 0%; opacity: 0; }
  19.74% { offset-distance: 0%; opacity: 0; }
  22.11% { offset-distance: 0%; opacity: 1; }
  48.42% { offset-distance: 100%; opacity: 1; }
  51.05% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC3_2 {
  0.0% { offset-distance: 0%; opacity: 0; }
  39.47% { offset-distance: 0%; opacity: 0; }
  41.84% { offset-distance: 0%; opacity: 1; }
  68.16% { offset-distance: 100%; opacity: 1; }
  70.79% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC4_0 {
  0.0% { offset-distance: 0%; opacity: 0; }
  1.98% { offset-distance: 0%; opacity: 1; }
  23.96% { offset-distance: 100%; opacity: 1; }
  26.15% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC4_1 {
  0.0% { offset-distance: 0%; opacity: 0; }
  16.48% { offset-distance: 0%; opacity: 0; }
  18.46% { offset-distance: 0%; opacity: 1; }
  40.44% { offset-distance: 100%; opacity: 1; }
  42.64% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC4_2 {
  0.0% { offset-distance: 0%; opacity: 0; }
  32.97% { offset-distance: 0%; opacity: 0; }
  34.95% { offset-distance: 0%; opacity: 1; }
  56.92% { offset-distance: 100%; opacity: 1; }
  59.12% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC4_3 {
  0.0% { offset-distance: 0%; opacity: 0; }
  49.45% { offset-distance: 0%; opacity: 0; }
  51.43% { offset-distance: 0%; opacity: 1; }
  73.41% { offset-distance: 100%; opacity: 1; }
  75.6% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC5_0 {
  0.0% { offset-distance: 0%; opacity: 0; }
  1.7% { offset-distance: 0%; opacity: 1; }
  20.57% { offset-distance: 100%; opacity: 1; }
  22.45% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC5_1 {
  0.0% { offset-distance: 0%; opacity: 0; }
  14.15% { offset-distance: 0%; opacity: 0; }
  15.85% { offset-distance: 0%; opacity: 1; }
  34.72% { offset-distance: 100%; opacity: 1; }
  36.6% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC5_2 {
  0.0% { offset-distance: 0%; opacity: 0; }
  28.3% { offset-distance: 0%; opacity: 0; }
  30.0% { offset-distance: 0%; opacity: 1; }
  48.87% { offset-distance: 100%; opacity: 1; }
  50.75% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC5_3 {
  0.0% { offset-distance: 0%; opacity: 0; }
  42.45% { offset-distance: 0%; opacity: 0; }
  44.15% { offset-distance: 0%; opacity: 1; }
  63.02% { offset-distance: 100%; opacity: 1; }
  64.91% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC5_4 {
  0.0% { offset-distance: 0%; opacity: 0; }
  56.6% { offset-distance: 0%; opacity: 0; }
  58.3% { offset-distance: 0%; opacity: 1; }
  77.17% { offset-distance: 100%; opacity: 1; }
  79.06% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC6_0 {
  0.0% { offset-distance: 0%; opacity: 0; }
  1.49% { offset-distance: 0%; opacity: 1; }
  18.02% { offset-distance: 100%; opacity: 1; }
  19.67% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC6_1 {
  0.0% { offset-distance: 0%; opacity: 0; }
  12.4% { offset-distance: 0%; opacity: 0; }
  13.88% { offset-distance: 0%; opacity: 1; }
  30.41% { offset-distance: 100%; opacity: 1; }
  32.07% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC6_2 {
  0.0% { offset-distance: 0%; opacity: 0; }
  24.79% { offset-distance: 0%; opacity: 0; }
  26.28% { offset-distance: 0%; opacity: 1; }
  42.81% { offset-distance: 100%; opacity: 1; }
  44.46% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC6_3 {
  0.0% { offset-distance: 0%; opacity: 0; }
  37.19% { offset-distance: 0%; opacity: 0; }
  38.68% { offset-distance: 0%; opacity: 1; }
  55.21% { offset-distance: 100%; opacity: 1; }
  56.86% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC6_4 {
  0.0% { offset-distance: 0%; opacity: 0; }
  49.59% { offset-distance: 0%; opacity: 0; }
  51.07% { offset-distance: 0%; opacity: 1; }
  67.6% { offset-distance: 100%; opacity: 1; }
  69.26% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes dotC6_5 {
  0.0% { offset-distance: 0%; opacity: 0; }
  61.98% { offset-distance: 0%; opacity: 0; }
  63.47% { offset-distance: 0%; opacity: 1; }
  80.0% { offset-distance: 100%; opacity: 1; }
  81.65% { offset-distance: 100%; opacity: 0; }
  100.0% { offset-distance: 100%; opacity: 0; }
}
@keyframes seqC2_0 {
  0.0% { opacity: 0; }
  2.95% { opacity: 1; }
  43.93% { opacity: 1; }
  51.8% { opacity: .08; }
  59.67% { opacity: 1; }
  67.54% { opacity: .08; }
  75.41% { opacity: 1; }
  88.52% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC2_1 {
  0.0% { opacity: 0; }
  24.59% { opacity: 0; }
  27.54% { opacity: 1; }
  43.93% { opacity: 1; }
  51.8% { opacity: .08; }
  59.67% { opacity: 1; }
  67.54% { opacity: .08; }
  75.41% { opacity: 1; }
  88.52% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC3_0 {
  0.0% { opacity: 0; }
  2.37% { opacity: 1; }
  55.0% { opacity: 1; }
  61.32% { opacity: .08; }
  67.63% { opacity: 1; }
  73.95% { opacity: .08; }
  80.26% { opacity: 1; }
  90.79% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC3_1 {
  0.0% { opacity: 0; }
  19.74% { opacity: 0; }
  22.11% { opacity: 1; }
  55.0% { opacity: 1; }
  61.32% { opacity: .08; }
  67.63% { opacity: 1; }
  73.95% { opacity: .08; }
  80.26% { opacity: 1; }
  90.79% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC3_2 {
  0.0% { opacity: 0; }
  39.47% { opacity: 0; }
  41.84% { opacity: 1; }
  55.0% { opacity: 1; }
  61.32% { opacity: .08; }
  67.63% { opacity: 1; }
  73.95% { opacity: .08; }
  80.26% { opacity: 1; }
  90.79% { opacity: 1; }
  100.0% { opacity: 0; }
}
/* r171 — keyframes de 4 áreas (Trilha Precificação passou a atuar em Distribuição e Relacionamento) */
@keyframes seqC4_0 {
  0.0% { opacity: 0; }
  1.98% { opacity: 1; }
  62.42% { opacity: 1; }
  67.69% { opacity: .08; }
  72.97% { opacity: 1; }
  78.24% { opacity: .08; }
  83.52% { opacity: 1; }
  92.31% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC4_1 {
  0.0% { opacity: 0; }
  16.48% { opacity: 0; }
  18.46% { opacity: 1; }
  62.42% { opacity: 1; }
  67.69% { opacity: .08; }
  72.97% { opacity: 1; }
  78.24% { opacity: .08; }
  83.52% { opacity: 1; }
  92.31% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC4_2 {
  0.0% { opacity: 0; }
  32.97% { opacity: 0; }
  34.95% { opacity: 1; }
  62.42% { opacity: 1; }
  67.69% { opacity: .08; }
  72.97% { opacity: 1; }
  78.24% { opacity: .08; }
  83.52% { opacity: 1; }
  92.31% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC4_3 {
  0.0% { opacity: 0; }
  49.45% { opacity: 0; }
  51.43% { opacity: 1; }
  62.42% { opacity: 1; }
  67.69% { opacity: .08; }
  72.97% { opacity: 1; }
  78.24% { opacity: .08; }
  83.52% { opacity: 1; }
  92.31% { opacity: 1; }
  100.0% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .detail-hero__mapa-art .nwheel--chase .n-node,
  .detail-hero__mapa-art .nwheel--chase .t-lbl-spot { animation: none !important; opacity: 1 !important; }
  .detail-hero__mapa-art .nwheel--chase .n-dot { display: none !important; }
}
@media (max-width: 1080px) {
  .detail-hero__mapa-art { position: relative; right: auto; top: auto; transform: none; width: 86%; margin: 20px auto 0; }
}

/* r159 — navegador de trilhas no fim do hero: pill da trilha atual destacada (não-clicável) */
.trilha-pill--current { background: var(--pill-cor, var(--green-glow)); border-color: var(--pill-cor, var(--green-glow)); cursor: default; }
.trilha-pill--current .trilha-pill__dot { background: var(--ink); box-shadow: none; }
.trilha-pill--current .trilha-pill__num { color: var(--ink); opacity: 0.65; }
.trilha-pill--current .trilha-pill__title { color: var(--ink); font-weight: 600; }
.trilha-pill--current:hover { transform: none; }

/* r159 — pill da trilha atual piscando ("você está aqui"), em todas as páginas de trilha */
@keyframes trilhaCurrentBlink {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 var(--pill-cor, var(--green-glow)); }
  50%      { opacity: .6;  box-shadow: 0 0 18px 2px var(--pill-cor, var(--green-glow)); }
}
.trilha-pill--current { animation: trilhaCurrentBlink 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .trilha-pill--current { animation: none; } }

/* r159 — navegador de trilhas: reduzir ~1 linha o espaçamento acima/abaixo do card */
.trilha-rail--nav { margin-top: 28px; }
.trilha-nav-sec { padding-top: 120px; padding-bottom: 52px; } /* r269 — +1 linha entre hero e navegador */
.trilha-garantia-wrap > .section { padding-top: 40px; } /* r269 — -1 linha entre cursos e garantia (trilha) */

/* r159 — chip de valor textual (ex.: nível) com fonte menor p/ harmonizar com os chips numéricos */
.trilha-stat--text b { font-size: 16px; font-family: var(--sans); line-height: 1.2; padding-top: 3px; }


/* r159 — keyframes do holofote para 5 áreas (Trilha Data Analytics) */
@keyframes seqC5_0 {
  0.0% { opacity: 0; }
  1.7% { opacity: 1; }
  67.74% { opacity: 1; }
  72.26% { opacity: .08; }
  76.79% { opacity: 1; }
  81.32% { opacity: .08; }
  85.85% { opacity: 1; }
  93.4% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC5_1 {
  0.0% { opacity: 0; }
  14.15% { opacity: 0; }
  15.85% { opacity: 1; }
  67.74% { opacity: 1; }
  72.26% { opacity: .08; }
  76.79% { opacity: 1; }
  81.32% { opacity: .08; }
  85.85% { opacity: 1; }
  93.4% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC5_2 {
  0.0% { opacity: 0; }
  28.3% { opacity: 0; }
  30.0% { opacity: 1; }
  67.74% { opacity: 1; }
  72.26% { opacity: .08; }
  76.79% { opacity: 1; }
  81.32% { opacity: .08; }
  85.85% { opacity: 1; }
  93.4% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC5_3 {
  0.0% { opacity: 0; }
  42.45% { opacity: 0; }
  44.15% { opacity: 1; }
  67.74% { opacity: 1; }
  72.26% { opacity: .08; }
  76.79% { opacity: 1; }
  81.32% { opacity: .08; }
  85.85% { opacity: 1; }
  93.4% { opacity: 1; }
  100.0% { opacity: 0; }
}
@keyframes seqC5_4 {
  0.0% { opacity: 0; }
  56.6% { opacity: 0; }
  58.3% { opacity: 1; }
  67.74% { opacity: 1; }
  72.26% { opacity: .08; }
  76.79% { opacity: 1; }
  81.32% { opacity: .08; }
  85.85% { opacity: 1; }
  93.4% { opacity: 1; }
  100.0% { opacity: 0; }
}
/* r159 — seção de cursos da trilha: +1 linha de respiro entre o cabeçalho e os módulos/cursos */
.section--trilha-cursos .section__head { margin-bottom: 68px; }

/* r160 — linha horizontal discreta logo abaixo do hero inicial das trilhas */
.trilha-hero-rule { padding: 0 40px; margin-top: -32px; }
.trilha-hero-rule__line { display: block; max-width: var(--container); margin: 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--dark-line) 8%, var(--dark-line) 92%, transparent); }

/* r160 — hero da trilha contém a roda+legenda (absolutas) p/ a linha discreta ficar SEMPRE abaixo da legenda */
.detail-hero--mapa { min-height: calc(120px + min(46vw, 520px) + 150px); }
@media (max-width: 1080px) { .detail-hero--mapa { min-height: 0; } }

/* r161 — bloco "Para quem é este curso" destacado, antes do conteúdo do curso */
/* r199 — "Para quem é este curso" no padrão ÂMBAR da faixa Formação Básica (.fb-card) */
.curso-paraquem { margin-top: 40px; padding: 24px 28px;
  background: linear-gradient(180deg, rgba(186,117,23,0.10), rgba(5,41,32,0.35));
  border: 1px solid rgba(235,200,117,0.28); border-left: 4px solid var(--gold);
  border-radius: var(--radius-md); box-shadow: 0 0 30px rgba(186,117,23,0.10); }
.curso-paraquem__title { font-family: var(--display-pf); font-weight: 600; font-size: 20px; color: var(--gold); margin: 0 0 8px; }   /* r367d — Playfair */
.curso-paraquem__text { font-size: 15.5px; line-height: 1.65; color: var(--dark-text); margin: 0; }


/* r161 — destaque do card "Conteúdo do Curso" (.modulo-item), igual ao "Para quem é este curso"; vence a regra global de cards (L5787) por especificidade */
.course-main .modulo-item {
  background: linear-gradient(135deg, rgba(93,202,165,0.13), rgba(93,202,165,0.04));
  border-color: rgba(93,202,165,0.30);
  border-left: 4px solid var(--green-glow);
  box-shadow: 0 0 30px rgba(93,202,165,0.10);
}

/* r162 — descrição (sublinha) do "Match de talentos" nos cards Para Empresas */
.empresa-plan__features li .feature-sub { font-size: 13px; font-weight: 400; color: rgba(4, 52, 44, 0.62); }

/* Legenda da roda dos Cursos Livres em uma única linha (r166) */
.trilha-mapa-caption--oneline { max-width: none; white-space: nowrap; }
@media (max-width: 640px){ .trilha-mapa-caption--oneline { white-space: normal; max-width: 320px; } }

/* r174 — Formação Básica: card do hub (/trilhas) + eyebrow compacto (trilhas) */
.fb-card { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: 124px; padding: 22px 28px; border: 1px solid rgba(235,200,117,0.28); border-left: 4px solid var(--gold); border-radius: 20px; background: linear-gradient(180deg, rgba(186,117,23,0.10), rgba(5,41,32,0.35)); }
.fb-card__head { display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.fb-card__title { font-family: var(--mono); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 18px; color: var(--gold); }
.fb-card__sub { font-size: 13px; color: var(--dark-text-soft); }
.fb-card__cursos { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.fb-course { font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--dark-text); padding: 9px 18px; border: 1px solid rgba(235,200,117,0.45); border-radius: 999px; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.fb-course:hover { background: var(--gold); color: #2A1C00; border-color: var(--gold); }
.fb-card__atravessa { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; padding-top: 2px; }
.fb-card__atravessa-label { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--gold); margin-right: 4px; }
.fb-chip { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--dark-text-soft); padding: 5px 12px; border: 1px solid var(--dark-line); border-radius: 999px; }
.fb-hint { display: flex; justify-content: center; margin: 8px auto 0; }
.fb-hint__link { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px; border: 1px solid rgba(235,200,117,0.35); border-radius: 999px; background: rgba(186,117,23,0.08); transition: border-color .2s ease, background .2s ease; }
.fb-hint__link:hover { border-color: var(--gold); background: rgba(186,117,23,0.16); }
.fb-hint__eyebrow { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.fb-hint__text { font-size: 13px; color: var(--dark-text-soft); }
.fb-hint__arrow { color: var(--gold); font-weight: 700; }
@media (max-width: 640px) { .fb-card { padding: 18px 18px; } .fb-hint__text { display: none; } }

/* r174 — seção 'Da mentoria ao ROI' (escada portada do protótipo Mentorias+KPIs) */
.mroi-wrap { max-width: 1160px; margin: 0 auto; }
.mroi-svg { width: 100%; height: auto; display: block; }

/* r178 — "A linha do preço": seção-conceito interativa da Trilha Precificação (portada do deck Precificacao_WEB_v1, telas 1-3) */
.plp-root { width: 100%; }
.plp-deck { position: relative; width: 100%; margin: 0; aspect-ratio: 16/9; }
.plp-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .6s ease; pointer-events: none; }
.plp-slide.plp-active { opacity: 1; visibility: visible; pointer-events: auto; }
.plp-stage { position: relative; width: 100%; height: 100%; container-type: size; }


@keyframes plpBlink { 0%,100%{opacity:1} 50%{opacity:.25} }
.plp-title { font-family: var(--display-pf); font-weight: 500; line-height: 1.05; letter-spacing: 0; color: var(--paper); font-size: clamp(32px, 4.6vw, 64px); margin-top: 1.1cqh; }
.plp-title em { font-style: italic; color: var(--green-glow); }
.plp-head { position: absolute; left: 0; top: 3cqh; max-width: 96cqw; z-index: 5; }
.plp-actchip { position: absolute; left: 0; bottom: 5cqh; z-index: 5; font-family: var(--mono); font-size: 1cqw; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,247,238,.45); }
.plp-actchip b { color: var(--green-glow); font-weight: 500; }
.plp-route-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; }
.plp-route { fill: none; stroke: var(--green-glow); stroke-width: 2.2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(93,202,165,.55)); }
.plp-route-soft { fill: none; stroke: rgba(93,202,165,.16); stroke-width: 8; stroke-linecap: round; }
.plp-station { position: absolute; z-index: 4; opacity: 0; transform: translateY(1.4cqh) scale(.7); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.plp-station.plp-lit { opacity: 1; transform: translateY(0) scale(1); }
.plp-station.plp-lit .plp-st-dot { animation: plpDotFlash .9s cubic-bezier(.16,1,.3,1); background: #F3D07A; border-color: #F3D07A; box-shadow: 0 0 0 .2cqw rgba(4,52,44,.85), 0 0 16px 2px rgba(233,185,73,.5); }
.plp-comet { fill: #F3D07A; opacity: 0; filter: drop-shadow(0 0 5px rgba(243,208,122,.95)) drop-shadow(0 0 13px rgba(233,185,73,.6)); }
@keyframes plpDotFlash { 0%{box-shadow:0 0 0 .258cqw rgba(4,52,44,.9),0 0 8px rgba(93,202,165,.4)} 35%{box-shadow:0 0 0 .258cqw rgba(4,52,44,.9),0 0 30px 8px rgba(243,208,122,.95);border-color:#F3D07A} 100%{box-shadow:0 0 0 .2cqw rgba(4,52,44,.85),0 0 16px 2px rgba(233,185,73,.5);border-color:#F3D07A} }
.plp-st-dot { position: absolute; left: 0; top: 0; width: 1.38cqw; height: 1.38cqw; border-radius: 50%; background: var(--ink); border: .258cqw solid var(--green-glow); transform: translate(-50%,-50%); box-shadow: 0 0 0 .258cqw rgba(4,52,44,.9), 0 0 14px rgba(93,202,165,.6); transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; }
.plp-st-num { position: absolute; left: 0; top: 0; transform: translate(-50%,-260%); font-family: var(--mono); font-weight: 500; font-size: 1.15cqw; color: var(--green-glow); letter-spacing: .05em; }
.plp-st-label { position: absolute; left: 0; top: 1.9cqw; transform: translateX(-50%); width: 14.7cqw; text-align: center; }
.plp-st-label strong { display: block; font-family: var(--sans-hero); font-weight: 600; font-size: 1.29cqw; color: var(--paper); line-height: 1.15; }
.plp-st-label span { display: block; font-family: var(--sans); font-weight: 400; font-size: .97cqw; color: rgba(251,247,238,.68); margin-top: .4cqh; line-height: 1.25; }
.plp-callout { position: absolute; z-index: 6; transform: translate(-50%,-50%) scale(.8); opacity: 0; transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: 5.15s; font-family: var(--display); font-style: italic; font-size: 1.75cqw; color: var(--ink); background: linear-gradient(100deg,#E9B949,#F3D07A); padding: 1.15cqh 1.8cqw; border-radius: 1.4cqw; box-shadow: 0 8px 30px rgba(233,185,73,.35); white-space: nowrap; width: 30cqw; text-align: center; }
.plp-callout::after { content: ""; position: absolute; left: 50%; bottom: -.55cqh; width: 1.05cqw; height: 1.05cqw; background: #F3D07A; transform: translateX(-50%) rotate(45deg); }
.plp-active .plp-callout { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.plp-loads { position: absolute; z-index: 5; width: 25cqw; opacity: 0; transform: translateY(1cqh); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: 5.4s; }
.plp-active .plp-loads { opacity: 1; transform: none; }
.plp-loads-h { font-family: var(--mono); font-size: .95cqw; letter-spacing: .08em; text-transform: uppercase; color: #F3D07A; margin-bottom: .9cqh; }
.plp-loads-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55cqh .7cqw; }
.plp-loads-grid span { font-family: var(--sans); font-size: .92cqw; color: rgba(251,247,238,.86); text-align: center; border: 1px solid rgba(93,202,165,.35); background: rgba(93,202,165,.07); border-radius: 1cqw; padding: .42cqh .7cqw; }
.plp-venn { position: absolute; left: 64%; top: 63%; transform: translate(-50%,-50%); height: 57cqh; width: 57cqh; z-index: 3; }
.plp-venn-set { opacity: 0; transform: scale(.82); transform-box: fill-box; transform-origin: center; transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.plp-active .plp-venn-set { opacity: 1; transform: scale(1); }
.plp-active .plp-set-mar { transition-delay: 3s; }
.plp-active .plp-set-dem { transition-delay: 3.3s; }
.plp-active .plp-set-tep { transition-delay: 3.6s; }
.plp-ring-tep { fill: rgba(233,185,73,.10); stroke: #F3D07A; stroke-width: 2.4; }
.plp-ring-mar { fill: rgba(93,202,165,.10); stroke: var(--green-glow); stroke-width: 2.4; }
.plp-ring-dem { fill: rgba(127,176,255,.10); stroke: #7FB0FF; stroke-width: 2.4; }
.plp-setname { font-family: var(--display); font-size: 28px; fill: var(--paper); text-anchor: middle; opacity: 0; transition: opacity .6s ease; transition-delay: 3.9s; }
.plp-lens { font-family: var(--sans-hero); font-weight: 600; font-size: 21px; fill: rgba(251,247,238,.9); text-anchor: middle; opacity: 0; transition: opacity .6s ease; transition-delay: 4.1s; }
.plp-active .plp-setname, .plp-active .plp-lens { opacity: 1; }
.plp-vpstar-g { opacity: 0; transition: opacity .6s ease; transition-delay: 4.5s; }
.plp-active .plp-vpstar-g { opacity: 1; }
.plp-vpstar-core { fill: #F3D07A; }
.plp-vpstar-halo { fill: none; stroke: #E9B949; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: plpHalo 2.2s ease-out infinite; }
@keyframes plpHalo { 0%{transform:scale(.6);opacity:.9} 100%{transform:scale(2.6);opacity:0} }
.plp-vpstar-lbl { font-family: var(--mono); font-weight: 700; font-size: 36px; fill: #F3D07A; text-anchor: middle; }
.plp-vpstar-sub { font-family: var(--display); font-style: italic; font-size: 26px; fill: var(--paper); text-anchor: middle; }
.plp-cap { position: absolute; z-index: 4; opacity: 0; transform: translateY(1cqh); transition: opacity .7s ease, transform .7s ease; }
.plp-active .plp-cap { opacity: 1; transform: none; }
.plp-cap-le { left: 10cqw; top: 54%; width: 35cqw; text-align: left; }
.plp-active .plp-cap-le { transition-delay: 4.8s; }
.plp-le { font-family: var(--mono); font-size: 1.05cqw; line-height: 1.5; color: rgba(251,247,238,.6); }
.plp-le b { color: var(--paper); }
[data-plp-tw].plp-typing::after { content: "▋"; color: var(--green-glow); animation: plpCaret .75s steps(1) infinite; margin-left: .05em; }
@keyframes plpCaret { 50%{opacity:0} }
.plp-cc { position: absolute; z-index: 5; text-align: left; opacity: 0; transform: translateY(1.6cqh); transition: opacity .7s ease, transform .7s ease; transition-delay: 5.3s; }
.plp-active .plp-cc { opacity: 1; transform: translateY(0); }
.plp-cc-k { font-family: var(--mono); font-size: 1.05cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--green-glow); }
.plp-cc-v { font-family: var(--mono); font-weight: 700; font-size: 5.6cqw; line-height: 1; margin-top: .7cqh; opacity: 0; transition: opacity .4s ease; transition-delay: 6.2s; }
.plp-active .plp-cc-v { opacity: 1; }
.plp-cc-v .plp-to { color: var(--green-glow); }
.plp-cc-v .plp-arw { color: #E9B949; margin: 0 .12em; }
.plp-cc-sub { font-family: var(--sans); font-size: 1.15cqw; color: rgba(251,247,238,.7); margin-top: .9cqh; max-width: 34cqw; line-height: 1.4; }
.plp-tagline { position: absolute; z-index: 5; font-family: var(--display); font-style: italic; font-size: 2.4cqw; color: var(--paper); opacity: 0; transform: translateY(1cqh); transition: all .7s ease; transition-delay: 9.4s; max-width: 34cqw; line-height: 1.1; }
.plp-active .plp-tagline { opacity: 1; transform: translateY(0); }
.plp-iaword { font-family: var(--display-ub); font-weight: 700; font-style: normal; text-transform: none; color: var(--green-glow); letter-spacing: 0; }
.plp-pill { position: absolute; z-index: 6; font-family: var(--sans-hero); font-weight: 600; font-size: 1.3cqw; color: var(--ink); background: linear-gradient(100deg,var(--green-glow),#F3D07A); padding: 1cqh 2cqw; border-radius: 3cqw; width: 34cqw; opacity: 0; transform: translateY(1cqh); transition: all .7s ease; transition-delay: 10.2s; box-shadow: 0 8px 26px rgba(93,202,165,.3); }
.plp-active .plp-pill { opacity: 1; transform: translateY(0); }
.plp-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 26px auto 0; background: rgba(4,52,44,.6); border: 1px solid rgba(93,202,165,.25); padding: 9px 16px; border-radius: 999px; width: max-content; }
.plp-btn { background: none; border: none; color: var(--paper); cursor: pointer; font-family: var(--mono); font-size: 13px; display: flex; align-items: center; gap: 6px; opacity: .8; }
.plp-btn:hover { opacity: 1; }
.plp-dots { display: flex; gap: 9px; }
.plp-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(251,247,238,.3); cursor: pointer; transition: all .3s; }
.plp-dots i.on { background: var(--green-glow); box-shadow: 0 0 10px var(--green-glow); width: 26px; border-radius: 999px; }
.plp-mobile { display: none; max-width: 560px; margin: 0 auto; }
.plpm-phase { margin-bottom: 30px; }
.plpm-phase-head { margin-bottom: 14px; }
.plpm-phase-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-glow); }
.plpm-phase-head h3 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--paper); margin-top: 4px; }
.plpm-phase-head h3 em { font-style: italic; color: var(--green-glow); }
.plpm-steps { list-style: none; margin: 0; padding: 0; }
.plpm-step { position: relative; display: flex; gap: 13px; padding-bottom: 16px; }
.plpm-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: -2px; width: 2px; background: linear-gradient(var(--green-glow), rgba(93,202,165,.18)); }
.plpm-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--green-glow); color: var(--green-glow); font-family: var(--mono); font-weight: 500; font-size: 12px; display: flex; align-items: center; justify-content: center; background: var(--dark-1); position: relative; z-index: 1; }
.plpm-step > div strong { display: block; font-family: var(--sans-hero); font-weight: 600; font-size: 15px; color: var(--paper); line-height: 1.25; }
.plpm-step > div span { display: block; font-size: 13px; color: var(--dark-text-soft); margin-top: 3px; line-height: 1.35; }
.plpm-callout { margin: 4px 0 16px; padding: 11px 16px; border-radius: 12px; background: linear-gradient(100deg,#E9B949,#F3D07A); color: var(--ink); font-family: var(--display); font-style: italic; font-size: 16px; text-align: center; }
.plpm-loads-h { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #F3D07A; margin-bottom: 8px; }
.plpm-loads-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.plpm-loads-grid span { font-size: 12px; color: var(--dark-text-soft); text-align: center; border: 1px solid rgba(93,202,165,.35); background: rgba(93,202,165,.07); border-radius: 999px; padding: 5px 8px; }
.plpm-optimum { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--dark-line); border-left: 3px solid #E9B949; border-radius: 12px; }
.plpm-optimum strong { display: block; font-family: var(--mono); font-weight: 700; color: #F3D07A; font-size: 14px; margin-bottom: 6px; }
.plpm-optimum p { font-size: 13.5px; color: var(--dark-text-soft); line-height: 1.45; }
.plpm-optimum b { color: var(--paper); font-weight: 600; }
.plpm-case { margin-top: 4px; padding: 16px; border: 1px solid var(--dark-line); border-radius: 14px; text-align: center; }
.plpm-case-k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--green-glow); }
.plpm-case-v { font-family: var(--mono); font-weight: 700; font-size: 42px; line-height: 1; margin: 8px 0; color: var(--paper); }
.plpm-case-v span { color: #E9B949; margin: 0 4px; }
.plpm-case-v b { color: var(--green-glow); font-weight: 700; }
.plpm-case p { font-size: 13px; color: var(--dark-text-soft); line-height: 1.4; margin-top: 6px; }
.plpm-close { margin-top: 16px; font-family: var(--display); font-style: italic; font-size: 18px; color: #F3D07A; text-align: center; }
@media (max-width: 768px) { .plp-root { display: none; } .plp-mobile { display: block; } }

/* r178 — versão mobile (timeline vertical) da escada "Da mentoria ao ROI" na Para Empresas */
.mroi-mobile { display: none; max-width: 560px; margin: 0 auto; }
.mrm-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-text-muted); margin-bottom: 14px; }
.mrm-steps { list-style: none; margin: 0; padding: 0; }
.mrm-step { position: relative; display: flex; gap: 13px; padding-bottom: 14px; }
.mrm-step:not(:last-child)::before { content: ""; position: absolute; left: 14px; top: 34px; bottom: -2px; width: 2px; }
.mrm-step--base:not(:last-child)::before { background: linear-gradient(var(--green-glow), rgba(93,202,165,.2)); }
.mrm-step--gold:not(:last-child)::before { background: linear-gradient(#E9B949, rgba(233,185,73,.2)); }
.mrm-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 2px solid; font-family: var(--mono); font-weight: 500; font-size: 13px; display: flex; align-items: center; justify-content: center; background: var(--dark-1); position: relative; z-index: 1; }
.mrm-step--base .mrm-n { border-color: var(--green-glow); color: var(--green-glow); }
.mrm-step--gold .mrm-n { border-color: #E9B949; color: #F3D07A; }
.mrm-k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.mrm-step--base .mrm-k { color: var(--green-glow); }
.mrm-step--gold .mrm-k { color: #F3D07A; }
.mrm-step strong { display: block; margin-top: 3px; }
.mrm-step--base strong { font-family: var(--sans); font-style: italic; font-weight: 400; font-size: 15px; color: var(--dark-text-soft); }
.mrm-step--gold strong { font-family: var(--mono); font-weight: 700; font-size: 17px; color: var(--paper); }
.mrm-divider { margin: 2px 0 14px; padding-left: 43px; font-family: var(--sans); font-size: 12.5px; color: var(--dark-text-soft); line-height: 1.35; }
.mrm-divider-k { display: block; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #F3D07A; margin-bottom: 2px; }
.mrm-panel { margin-top: 6px; padding: 16px; border: 1px solid var(--dark-line); border-radius: 14px; }
.mrm-panel-h { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dark-text-muted); margin-bottom: 10px; }
.mrm-panel p { font-size: 13px; color: var(--dark-text-soft); line-height: 1.5; margin-bottom: 4px; }
.mrm-panel p b { color: var(--green-glow); font-weight: 600; }
.mrm-defs { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--dark-line); display: flex; flex-direction: column; gap: 5px; }
.mrm-defs span { font-size: 12px; color: var(--dark-text-muted); line-height: 1.35; }
.mrm-defs b { color: var(--dark-text-soft); font-weight: 600; }
.mrm-note { margin-top: 14px; font-size: 13px; color: var(--dark-text-soft); line-height: 1.45; }
.mrm-note b { color: #F3D07A; font-weight: 600; }
.mrm-close { margin-top: 12px; font-family: var(--sans-hero); font-weight: 600; font-size: 15px; color: #F3D07A; line-height: 1.4; }
@media (max-width: 768px) { .mroi-wrap { display: none; } .mroi-mobile { display: block; } }

/* r178b — preservar o caixa da marca "InsurIA" dentro dos rótulos mono em caixa-alta (mobile) */

/* r179 — Opção C: mobile do Mapa (roda decorativa + acordeão de áreas→trilhas) */
.wheel-areas-mobile { display: none; max-width: 620px; margin: 4px auto 0; }
.wa-hint { font-size: 13.5px; color: var(--dark-text-soft); text-align: center; margin-bottom: 14px; }
.wheel-area-item { border: 1px solid var(--dark-line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: rgba(93,202,165,.03); }
.wheel-area-item[open] { border-color: var(--dark-line-strong); }
.wa-head { display: flex; align-items: center; gap: 11px; padding: 13px 15px; cursor: pointer; list-style: none; }
.wa-head::-webkit-details-marker { display: none; }
.wa-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--area-cor); flex: 0 0 auto; box-shadow: 0 0 8px var(--area-cor); }
.wa-num { font-family: var(--mono); font-size: 11px; color: var(--dark-text-muted); }
.wa-nome { font-family: var(--sans-hero); font-weight: 600; font-size: 15px; color: var(--paper); flex: 1; line-height: 1.2; }
.wa-chev { font-family: var(--mono); font-size: 20px; line-height: 1; color: var(--green-glow); transition: transform .22s ease; }
.wheel-area-item[open] .wa-chev { transform: rotate(45deg); }
.wa-body { padding: 0 15px 15px; }
.wa-tagline { font-size: 13.5px; color: var(--dark-text-soft); font-style: italic; margin-bottom: 11px; }
.wa-trilhas { display: flex; flex-wrap: wrap; gap: 7px; }
.wa-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 12.5px; color: var(--dark-text); border: 1px solid var(--dark-line); border-radius: 999px; padding: 6px 13px; background: rgba(93,202,165,.05); transition: border-color .2s ease, color .2s ease; }
.wa-pill:hover { border-color: var(--green-glow); color: var(--green-glow); }
.wa-pill__num { font-family: var(--mono); font-size: 10px; color: var(--green-glow); }
.wa-empty { font-size: 13px; color: var(--dark-text-soft); }
.wa-empty a { color: var(--green-glow); }
@media (max-width: 880px) {
  .wheel-areas-mobile { display: block; }
  .wheel-hint-desktop { display: none; }
  .mapa-roda-section .wheel-side-wrap { display: none !important; }
  .mapa-roda-section .wheel-connector, .mapa-roda-section .wheel-trilha-svg { display: none !important; }
  .mapa-roda-section .nwheel--int { pointer-events: none; }
  .mapa-roda-section .nwheel--int .node-name { display: none; }
  .mapa-roda-section .wheel-stage .nwheel { max-width: min(84vw, 380px); }
  .mapa-roda-section .wheel-stage { min-height: auto !important; padding: 24px 0 4px !important; }
}

/* ============================================================
   FUNIL DA SUBSCRIÇÃO (r181) — portado do Deck_Subscricao_WEB_v1.html (Fase 1)
   Desktop = painel 16:9 animado; Mobile = timeline vertical .srfm-*
   ============================================================ */
.srf-title { text-align: left; max-width: none; margin: 40px 0 6px; font-family: var(--display-pf); font-weight: 500; line-height: 1.05; letter-spacing: 0; color: var(--paper); font-size: clamp(32px, 4.6vw, 64px); }
.srf-title .srf-tg { color: var(--green-glow); }
.srf-title em { font-style: italic; }
/* r182: +1 linha entre "Formação Básica" e "Quais são os cursos" — só na Trilha Produtos */
/* r184: frase "São Formações e Trilhas, mas parecem MBAs profissionais" acima do card Formação Básica (/trilhas) */
.mba-head { margin-bottom: 124px; }
.mba-green { color: var(--green-glow); }
.trilha-cursos-gap { height: 40px; }
@media (max-width: 480px) { .trilha-cursos-gap { height: 24px; } }
.srf-section { padding-bottom: 40px; }
.srf-root { width: 100%; }
.srf-deck { position: relative; width: 100%; margin: -120px 0 0; aspect-ratio: 16/9; container-type: size; }
.srf-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.srf-lbls { fill: var(--green-glow); font-family: var(--mono); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .85; }
.srf-step { opacity: 0; transition: opacity .6s ease; }
.srf-playing .srf-step { opacity: 1; }
.srf-playing .srf-step.srf-d1 { transition-delay: 1.0s; }
.srf-playing .srf-step.srf-d2 { transition-delay: 3.4s; }
.srf-playing .srf-step.srf-d3 { transition-delay: 4.4s; }

.srf-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.srf-tab { cursor: pointer; }
.srf-tab-bg { fill: #0c3a2f; stroke: var(--green-glow); stroke-opacity: .4; }
.srf-tab.on .srf-tab-bg { fill: var(--green-glow); }
.srf-tab-t { fill: var(--paper); font-family: var(--sans); font-size: 13px; font-weight: 600; pointer-events: none; }
.srf-tab.on .srf-tab-t { fill: var(--ink); }
#srf-sinFill { transition: width .7s cubic-bezier(.5,0,.2,1), fill .5s ease; }
#srf-sinPct, #srf-combV, #srf-resV { transition: fill .4s ease; }
@media (prefers-reduced-motion: reduce) { .srf-step { transition: opacity .3s !important; } }

.srf-mobile { display: none; max-width: 560px; margin: 0 auto; }
.srfm-phase { margin-bottom: 30px; }
.srfm-phase-head { margin-bottom: 14px; }
.srfm-phase-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-glow); }
.srfm-phase-head h3 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--paper); margin-top: 4px; }
.srfm-phase-head h3 em { font-style: italic; color: var(--green-glow); }
.srfm-steps { list-style: none; margin: 0; padding: 0; }
.srfm-step { position: relative; display: flex; gap: 13px; padding-bottom: 16px; }
.srfm-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: -2px; width: 2px; background: linear-gradient(var(--green-glow), rgba(93,202,165,.18)); }
.srfm-n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--green-glow); color: var(--green-glow); font-family: var(--mono); font-weight: 500; font-size: 12px; display: flex; align-items: center; justify-content: center; background: var(--dark-1); position: relative; z-index: 1; }
.srfm-step > div strong { display: block; font-family: var(--sans-hero); font-weight: 600; font-size: 15px; color: var(--paper); line-height: 1.25; }
.srfm-step > div span { display: block; font-size: 13px; color: var(--dark-text-soft); margin-top: 3px; line-height: 1.35; }
.srfm-decision { display: grid; gap: 10px; margin-top: 2px; }
.srfm-dec { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--dark-line); }
.srfm-dec b { display: block; font-family: var(--sans-hero); font-weight: 700; font-size: 14px; }
.srfm-dec span { display: block; font-size: 12.5px; color: var(--dark-text-soft); margin-top: 2px; }
.srfm-dec--out { border-left: 3px solid #C55F3D; }
.srfm-dec--out b { color: #E39B7F; }
.srfm-dec--in { border-left: 3px solid var(--green-glow); }
.srfm-dec--in b { color: var(--green-glow); }
.srfm-levers { padding: 14px 16px; border: 1px solid var(--dark-line); border-left: 3px solid #F3D07A; border-radius: 12px; }
.srfm-levers-h { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #F3D07A; margin-bottom: 10px; }
.srfm-levers ul { list-style: none; margin: 0; padding: 0; }
.srfm-levers li { position: relative; padding: 0 0 9px 16px; font-family: var(--sans-hero); font-weight: 600; font-size: 14px; color: var(--paper); }
.srfm-levers li:last-child { padding-bottom: 0; }
.srfm-levers li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--green-glow); }
.srfm-levers li span { display: block; font-family: var(--mono); font-weight: 400; font-size: 12px; color: #F3D07A; margin-top: 2px; }
.srfm-scen { display: grid; gap: 12px; }
.srfm-scen-card { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--dark-line); }
.srfm-scen-k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.srfm-scen-card ul { list-style: none; margin: 0; padding: 0; }
.srfm-scen-card li { font-size: 13.5px; color: var(--dark-text-soft); padding: 3px 0; overflow: hidden; }
.srfm-scen-card li b { float: right; font-family: var(--mono); font-weight: 700; }
.srfm-scen--tec { border-left: 3px solid var(--green-glow); }
.srfm-scen--tec .srfm-scen-k, .srfm-scen--tec li b { color: var(--green-glow); }
.srfm-scen--nao { border-left: 3px solid #D98A6A; }
.srfm-scen--nao .srfm-scen-k, .srfm-scen--nao li b { color: #D98A6A; }
.srfm-close { margin-top: 16px; font-family: var(--display); font-style: italic; font-size: 17px; color: #F3D07A; text-align: center; }
.srfm-close b { font-style: normal; font-weight: 700; color: var(--paper); }
/* r181: mobile = Opção D — funil decorativo (animado, sem toque) no topo + timeline legível abaixo */
@media (max-width: 768px) {
  .srf-root { display: block; max-width: 380px; margin: 0 auto 6px; }
  .srf-root .srf-scene { pointer-events: none; }
  .srf-deck { margin-top: 0; }
  .srf-section { padding-bottom: 22px; }
  .srf-mobile { display: block; }
}

/* ============================================================
   TRIÂNGULO DE RUN-OFF (Provisões, r185) — portado do Deck_Provisoes_WEB_v1.html (telas 1-3)
   Desktop = painel 16:9 animado (3 telas); Mobile = timeline vertical .pvtm-*
   ============================================================ */
.pvt-section { padding-bottom: 40px; }
.pvt-root { width: 100%; }
.pvt-deck { position: relative; width: 100%; margin: 0; aspect-ratio: 16/9; container-type: size; }
.pvt-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease; pointer-events: none; }
.pvt-slide.pvt-active { opacity: 1; visibility: visible; pointer-events: auto; }
.pvt-stage { position: relative; width: 100%; height: 100%; container-type: size; }
.pvt-head { position: absolute; left: 0; top: 3cqh; max-width: 80cqw; z-index: 6; }
.pvt-title { font-family: var(--display-pf); font-weight: 500; line-height: 1.05; letter-spacing: 0; color: var(--paper); font-size: clamp(32px, 4.6vw, 64px); }
.pvt-title em { font-style: italic; color: var(--green-glow); }
.pvt-actchip { position: absolute; left: 0; bottom: 5cqh; z-index: 6; font-family: var(--mono); font-size: 1cqw; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,247,238,.45); }
.pvt-actchip b { color: var(--green-glow); font-weight: 500; }
.pvt-tri { position: absolute; z-index: 3; }
.pvt-tri-c { left: 49%; top: 54%; transform: translate(-50%,-50%); height: 54cqh; width: 54cqh; }
.pvt-tri-l { left: 32%; top: 60%; transform: translate(-50%,-50%); height: 54cqh; width: 54cqh; }
.pvt-tcell { opacity: 0; }
.pvt-tnum-k { font-family: var(--mono); font-size: 24px; fill: rgba(251,247,238,.85); font-weight: 400; }
.pvt-tnum-p { font-family: var(--mono); font-size: 24px; fill: #F3D07A; font-weight: 500; }
.pvt-frontier { fill: none; stroke: var(--green-glow); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity .9s ease; }
.pvt-active .pvt-frontier { opacity: .95; transition-delay: 2.5s; }
.pvt-axlab { position: absolute; z-index: 4; font-family: var(--mono); font-size: .9cqw; letter-spacing: .1em; text-transform: uppercase; color: rgba(251,247,238,.5); opacity: 0; transition: opacity 1s ease; }
.pvt-active .pvt-axlab { opacity: 1; transition-delay: 1.2s; }
.pvt-chips { position: absolute; z-index: 5; display: flex; flex-wrap: wrap; gap: .5cqw; max-width: 30cqw; }
.pvt-chip { font-family: var(--sans); font-size: .92cqw; color: rgba(251,247,238,.85); border: 1px solid rgba(93,202,165,.35); background: rgba(93,202,165,.07); border-radius: 1cqw; padding: .4cqh .8cqw; opacity: 0; transform: translateY(.6cqh); transition: opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.pvt-active .pvt-chip { opacity: 1; transform: none; }
.pvt-chips-h { width: 100%; font-family: var(--mono); font-size: .9cqw; letter-spacing: .1em; text-transform: uppercase; color: #F3D07A; margin-bottom: .7cqh; }
.pvt-chip.pvt-data { border-color: rgba(251,247,238,.25); background: rgba(251,247,238,.05); color: rgba(251,247,238,.7); font-family: var(--mono); font-size: .82cqw; }
.pvt-chip.pvt-fund { border-color: rgba(93,202,165,.45); background: rgba(93,202,165,.10); color: #DFF3EA; font-family: var(--mono); font-size: .91cqw; }
.pvt-t1fund .pvt-chips-h, .pvt-t1data .pvt-chips-h { opacity: 0; transition: opacity .9s ease; font-size: .99cqw; color: #FCEAB0; }
.pvt-active .pvt-t1fund .pvt-chips-h { opacity: 1; transition-delay: 2.6s; }
.pvt-active .pvt-t1fund .pvt-chip:nth-child(2) { transition-delay: 2.8s; }
.pvt-active .pvt-t1fund .pvt-chip:nth-child(3) { transition-delay: 2.96s; }
.pvt-active .pvt-t1fund .pvt-chip:nth-child(4) { transition-delay: 3.12s; }
.pvt-active .pvt-t1fund .pvt-chip:nth-child(5) { transition-delay: 3.28s; }
.pvt-active .pvt-t1fund .pvt-chip:nth-child(6) { transition-delay: 3.44s; }
.pvt-active .pvt-t1fund .pvt-chip:nth-child(7) { transition-delay: 3.6s; }
.pvt-active .pvt-t1data .pvt-chips-h { opacity: 1; transition-delay: 3.8s; }
.pvt-active .pvt-t1data .pvt-chip:nth-child(2) { transition-delay: 4.0s; }
.pvt-active .pvt-t1data .pvt-chip:nth-child(3) { transition-delay: 4.16s; }
.pvt-active .pvt-t1data .pvt-chip:nth-child(4) { transition-delay: 4.32s; }
.pvt-active .pvt-t1data .pvt-chip:nth-child(5) { transition-delay: 4.48s; }
.pvt-active .pvt-t1data .pvt-chip:nth-child(6) { transition-delay: 4.64s; }
.pvt-active .pvt-t1data .pvt-chip:nth-child(7) { transition-delay: 4.8s; }
.pvt-active .pvt-t1data .pvt-chip:nth-child(8) { transition-delay: 4.96s; }
.pvt-br { flex-basis: 100%; height: 0; margin: 0; }
.pvt-t2methods .pvt-chips-h { opacity: 0; transition: opacity .8s ease; }
.pvt-active .pvt-t2methods .pvt-chips-h { opacity: 1; transition-delay: 2.6s; }
.pvt-active .pvt-t2methods span:nth-of-type(1) { transition-delay: 2.9s; }
.pvt-active .pvt-t2methods span:nth-of-type(2) { transition-delay: 3.1s; }
.pvt-active .pvt-t2methods span:nth-of-type(3) { transition-delay: 3.3s; }
.pvt-active .pvt-t2methods span:nth-of-type(4) { transition-delay: 3.5s; }
.pvt-active .pvt-t2methods span:nth-of-type(5) { transition-delay: 3.7s; }
.pvt-hl { position: absolute; z-index: 5; opacity: 0; transform: translateY(1cqh); transition: opacity .6s ease, transform .6s ease; }
.pvt-active .pvt-hl { opacity: 1; transform: none; transition-delay: 3.8s; }
.pvt-hl-k { font-family: var(--mono); font-size: 1cqw; letter-spacing: .14em; text-transform: uppercase; color: #F3D07A; }
.pvt-hl-v { font-family: var(--mono); font-weight: 700; font-size: 4.6cqw; line-height: 1; color: #F3D07A; margin-top: .5cqh; }
.pvt-hl-s { font-family: var(--sans); font-size: 1cqw; color: rgba(251,247,238,.65); margin-top: .6cqh; max-width: 24cqw; }
.pvt-fan { position: absolute; z-index: 3; left: 36%; top: 0; width: 64%; height: 100%; pointer-events: none; overflow: visible; }
.pvt-fanline { fill: none; stroke: var(--green-glow); stroke-width: 1.2; }
.pvt-band { fill: rgba(233,185,73,.10); }
.pvt-pstar-dot { fill: #F3D07A; }
.pvt-pstar-halo { fill: none; stroke: #E9B949; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: pvtHalo 2.2s ease-out infinite; }
@keyframes pvtHalo { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.6); opacity: 0; } }
.pvt-fan-lbl { position: absolute; z-index: 5; font-family: var(--mono); font-size: .95cqw; color: #F3D07A; opacity: 0; transition: opacity .6s ease; }
.pvt-active .pvt-fan-lbl { opacity: 1; transition-delay: 2.8s; }
.pvt-gpanel { position: absolute; z-index: 5; right: 4.5cqw; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; width: 34cqw; }
.pvt-gcell { border: 1px solid rgba(93,202,165,.3); background: rgba(10,74,58,.5); border-radius: 1cqw; padding: 1cqh 1cqw; opacity: 0; transform: translateY(.8cqh); transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1); }
.pvt-active .pvt-gcell { opacity: 1; transform: none; }
.pvt-active .pvt-gcell:nth-child(1) { transition-delay: 3.3s; }
.pvt-active .pvt-gcell:nth-child(2) { transition-delay: 3.6s; }
.pvt-active .pvt-gcell:nth-child(3) { transition-delay: 3.9s; }
.pvt-gk { font-family: var(--mono); font-size: .82cqw; letter-spacing: .08em; text-transform: uppercase; color: var(--green-glow); }
.pvt-gt { font-family: var(--sans-hero); font-weight: 600; font-size: 1.15cqw; color: var(--paper); margin-top: .4cqh; line-height: 1.2; }
.pvt-gpanel-h { position: absolute; z-index: 5; right: 4.5cqw; top: 24%; font-family: var(--mono); font-size: 1cqw; letter-spacing: .12em; text-transform: uppercase; color: #F3D07A; opacity: 0; transition: opacity .6s ease; }
.pvt-active .pvt-gpanel-h { opacity: 1; transition-delay: 3.0s; }
.pvt-gwhy { position: absolute; z-index: 5; font-family: var(--sans); font-size: 1.02cqw; line-height: 1.5; color: rgba(251,247,238,.9); border-left: 2px solid rgba(243,208,122,.55); padding-left: 1cqw; opacity: 0; transition: opacity .5s ease; }
.pvt-active .pvt-gwhy { opacity: 1; transition-delay: 4.6s; }
.pvt-gwhy .pvt-g2 { color: #F3D07A; font-weight: 600; }
.pvt-copy { position: absolute; z-index: 5; font-family: var(--display); font-style: italic; font-size: 1.7cqw; color: var(--paper); opacity: 0; transform: translateY(1cqh); transition: opacity .7s ease, transform .7s ease; }
.pvt-active .pvt-copy { opacity: 1; transform: none; }
.pvt-copy .pvt-g { color: #F3D07A; }
[data-pvt-tw].pvt-typing::after { content: "▋"; color: var(--green-glow); margin-left: .05em; }
.pvt-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.pvt-btn { background: none; border: 1px solid rgba(93,202,165,.3); color: var(--dark-text-soft); cursor: pointer; font-family: var(--mono); font-size: 12px; padding: 7px 14px; border-radius: 999px; }
.pvt-btn:hover { color: var(--paper); border-color: var(--green-glow); }
.pvt-dots { display: flex; gap: 9px; }
.pvt-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(251,247,238,.3); cursor: pointer; transition: all .3s; }
.pvt-dots i.on { background: var(--green-glow); box-shadow: 0 0 10px var(--green-glow); width: 26px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .pvt-slide, .pvt-chip, .pvt-axlab, .pvt-hl, .pvt-gcell, .pvt-copy, .pvt-gwhy, .pvt-fan-lbl, .pvt-frontier { transition: opacity .3s !important; } }

.pvt-mobile { display: none; max-width: 560px; margin: 0 auto; }
.pvtm-phase { margin-bottom: 30px; }
.pvtm-phase-head { margin-bottom: 12px; }
.pvtm-phase-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-glow); }
.pvtm-phase-head h3 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--paper); margin-top: 4px; }
.pvtm-phase-head h3 em { font-style: italic; color: var(--green-glow); }
.pvtm-lead { font-size: 14px; line-height: 1.5; color: var(--dark-text-soft); margin-bottom: 14px; }
.pvtm-lead b { color: var(--paper); font-weight: 600; }
.pvtm-block { margin-bottom: 14px; }
.pvtm-block-h { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #F3D07A; margin-bottom: 8px; }
.pvtm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pvtm-tags span { font-family: var(--mono); font-size: 11.5px; color: var(--dark-text-soft); border: 1px solid rgba(93,202,165,.35); background: rgba(93,202,165,.07); border-radius: 999px; padding: 4px 10px; }
.pvtm-ibnr { margin-top: 4px; padding: 14px 16px; border: 1px solid var(--dark-line); border-left: 3px solid #E9B949; border-radius: 12px; }
.pvtm-ibnr strong { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #F3D07A; }
.pvtm-ibnr-v { display: block; font-family: var(--mono); font-weight: 700; font-size: 40px; line-height: 1; color: #F3D07A; margin: 6px 0; }
.pvtm-ibnr p { font-size: 13px; color: var(--dark-text-soft); line-height: 1.4; }
.pvtm-gcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.pvtm-gcard { border: 1px solid rgba(93,202,165,.3); background: rgba(10,74,58,.4); border-radius: 10px; padding: 9px 11px; }
.pvtm-gcard b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--green-glow); }
.pvtm-gcard span { display: block; font-family: var(--sans-hero); font-weight: 600; font-size: 13px; color: var(--paper); margin-top: 3px; line-height: 1.2; }
.pvtm-close { font-size: 13.5px; line-height: 1.5; color: var(--dark-text-soft); border-left: 2px solid rgba(243,208,122,.55); padding-left: 12px; }
.pvtm-close b { color: #F3D07A; font-weight: 600; }
@media (max-width: 768px) {
  .pvt-root { display: block; margin-bottom: 10px; }
  .pvt-mobile { display: block; }
  .pvt-section { padding-bottom: 22px; }
  .pvt-deck { aspect-ratio: 5 / 6; }
  .pvt-head { max-width: 92cqw; }
  .pvt-title { font-size: 22px; }
  .pvt-chips, .pvt-copy, .pvt-hl, .pvt-gpanel, .pvt-gpanel-h, .pvt-gwhy, .pvt-fan-lbl, .pvt-fan, .pvt-axlab { display: none; }
  .pvt-tri-c, .pvt-tri-l { left: 50%; top: 56%; height: 64cqh; width: 64cqh; }
}

/* =========================================================================
   r202 — Trilhas de acesso exclusivo pelo Plano PRO (flag `soPro` no data).
   Produtos e Subscrição têm poucos cursos e não são vendidas em separado.
   ========================================================================= */
.trilha-pro {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px;
  margin-top: 22px; padding: 14px 18px; max-width: 660px;
  border: 1px solid rgba(212,175,55,0.30);
  border-left: 4px solid #D4AF37;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(186,117,23,0.12), rgba(5,41,32,0.35));
}
.trilha-pro__tag {
  flex: none;
  font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .08em;
  padding: 5px 11px; border-radius: 999px;
  background: linear-gradient(135deg, #F2D98A, #D4AF37 55%, #B8860B);
  color: #2A1C00;
}
.trilha-pro__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.trilha-pro__txt strong { font-family: var(--sans); font-weight: 700; font-size: 15px; color: var(--gold); }
.trilha-pro__txt span   { font-size: 13px; color: var(--dark-text-soft); }
.trilha-pro__link {
  flex: none; font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: var(--gold);
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s ease, gap .2s ease;
}
.trilha-pro__link:hover { color: #F2D98A; gap: 10px; }

/* Selo PRO no card do grid /trilhas */
.trilha-card__pro {   /* r206 — rótulo âmbar "Disponível no Plano PRO" (era só "PRO") */
  margin-left: auto; margin-right: 10px; align-self: center; white-space: nowrap;
  font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .01em;
  padding: 5px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #F2D98A, #D4AF37 55%, #B8860B);
  color: #2A1C00;
}
@media (max-width: 480px) { .trilha-card__pro { font-size: 10px; padding: 4px 9px; } }

@media (max-width: 640px) {
  .trilha-pro { padding: 13px 14px; }
  .trilha-pro__link { width: 100%; }
}

/* ============================================================
   r252 — BLOCO Garantia de 7 dias (Home, entre Planos e Dúvidas)
   ============================================================ */
.garantia-card {
  background: #052920;
  border: 1px solid rgba(93,202,165,.18);
  border-radius: 24px;
  padding: 44px 46px;
  max-width: 940px; margin: 0 auto;
  display: flex; align-items: center; gap: 44px;
  box-shadow: 0 24px 60px rgba(0,0,0,.40);
}
.garantia-card__logo { flex: 0 0 auto; width: 230px; display: flex; justify-content: center; }
.garantia-card__logo img { width: 100%; height: auto; max-width: 230px; display: block; }
.garantia-card__body { flex: 1 1 auto; min-width: 0; }

.garantia-card__title {
  font-family: var(--display-pf); font-weight: 500; font-size: 34px;   /* r352 — Playfair, branco 500 */
  color: var(--paper); line-height: 1.1; margin: 0 0 16px;
}
.garantia-card__text {
  color: var(--dark-text-soft); font-size: 15.5px; line-height: 1.6; margin: 0 0 26px; max-width: 640px;
}
.garantia-card__steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  border-top: 1px solid rgba(93,202,165,.16); padding-top: 22px;
}
.garantia-step__num { font-family: var(--mono); font-size: 12px; color: var(--green-glow); font-weight: 700; margin-bottom: 8px; }
.garantia-step__t { color: var(--dark-text); font-size: 14px; line-height: 1.45; }
.garantia-card__aviso {
  margin: 24px 0 0;
  display: flex; gap: 16px; align-items: flex-start;
  background: linear-gradient(180deg, rgba(186,117,23,0.10), rgba(5,41,32,0.35));
  border: 1px solid rgba(235,200,117,0.28);
  border-left: 4px solid var(--gold);
  border-radius: 12px;
  padding: 15px 18px;
}
.garantia-card__aviso-num {
  font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--gold);
  flex: 0 0 auto; padding-top: 1px;
}
.garantia-card__aviso-t { margin: 0; color: var(--dark-text-soft); font-size: 13.5px; line-height: 1.55; }
.garantia-card__aviso-t strong { color: var(--gold); font-weight: 600; }
@media (max-width: 880px) {
  .garantia-card { flex-direction: column; text-align: center; padding: 36px 26px; gap: 28px; }
  .garantia-card__logo { width: 190px; }
  .garantia-card__steps { grid-template-columns: 1fr; text-align: left; gap: 16px; }
  .garantia-card__aviso { text-align: left; }   /* r360 — nota 04 à esquerda no mobile (o card fica center e ela herdava) */
  .garantia-card__text { max-width: none; }
}

/* r351 — o logo InsurIA do bloco de garantia NÃO pisca mais (o time pediu).
   Removida a animação garLogoBlink (r272); a imagem fica estática em opacity 1. */
.garantia-card__logo { position: relative; }
.garantia-card__logo img { position: relative; z-index: 1; }

/* ============================================================
   r259 — Seção "Para quem é esta trilha?" (após o navegador)
   ============================================================ */
.trilha-paraquem { margin-top: 40px; padding-bottom: 40px; }
@media (max-width: 480px) { .trilha-paraquem { margin-top: 24px; } }
.trilha-paraquem .paraquem-card {
  background: #04241C; border: 1px solid rgba(93,202,165,.14); border-radius: 22px;
  padding: 44px 46px; display: grid; grid-template-columns: 0.9fr 1.25fr; gap: 56px;
  box-shadow: 0 22px 55px rgba(0,0,0,.40);
}
.paraquem-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--green-glow); font-weight: 600; text-transform: uppercase; margin-bottom: 18px; }
.paraquem-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-glow); flex: 0 0 auto; }
.paraquem-title { font-family: var(--display-pf); font-size: 32px; font-weight: 600; color: var(--paper); line-height: 1.12; margin: 0 0 16px; }
.paraquem-title em { font-style: italic; font-weight: 500; color: var(--green-glow); }   /* r367b — Playfair itálico real (peso 400 daria faux) */
.paraquem-desc { color: var(--dark-text-soft); font-size: 15px; line-height: 1.6; margin: 0 0 26px; }
.paraquem-cta { align-self: flex-start; }
.paraquem-list { display: flex; flex-direction: column; }
.paraquem-row { display: grid; grid-template-columns: 44px 0.92fr 1.12fr; gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid rgba(93,202,165,.12); }
.paraquem-row:last-child { border-bottom: none; }
.paraquem-row__ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(93,202,165,.10); border: 1px solid rgba(93,202,165,.25); display: flex; align-items: center; justify-content: center; color: var(--green-glow); }
.paraquem-row__ic svg { width: 18px; height: 18px; }
.paraquem-row__nome { font-size: 16px; font-weight: 600; color: var(--paper); line-height: 1.25; }
.paraquem-row__desc { font-size: 13.5px; color: var(--dark-text-muted); line-height: 1.5; }
@media (max-width: 880px) {
  .trilha-paraquem .paraquem-card { grid-template-columns: 1fr; gap: 30px; padding: 32px 24px; }
  .paraquem-row { grid-template-columns: 38px 1fr; }
  .paraquem-row__desc { grid-column: 2; }
}

/* r262 — 'Outros cursos' na página do curso: 3 colunas (cards mais largos, thumb menos alto) */
.course-main .cursos-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .course-main .cursos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .course-main .cursos-grid { grid-template-columns: 1fr; } }

/* ============================================================
   r275 — Intensificar a sensação de "flutuar": sombra de
   elevação (longa) nos cards principais. Dupla camada:
   ambiente curta + sombra longa difusa (escura, no tema dark).
   ============================================================ */
:root {
  --float-shadow: 0 2px 8px rgba(0,0,0,.22), 0 34px 64px -22px rgba(0,0,0,.60);
  --float-shadow-hover: 0 4px 14px rgba(0,0,0,.28), 0 50px 90px -20px rgba(0,0,0,.72);
}
.curso-card, .trilha-card, .formacao-card, .plano-card {
  box-shadow: var(--float-shadow);
}
.trilha-card { transition: background .25s ease, box-shadow .3s ease, transform .3s ease; }
.curso-card:hover, .trilha-card:hover, .formacao-card:hover, .plano-card:hover {
  box-shadow: var(--float-shadow-hover);
}

/* ============================================================
   r276 — Pontos de luz próprios nos cards CLAROS de planos
   (.plano-card e .empresa-plan). O overlay global desenha pontos
   CLAROS → somem no fundo claro (#BDC6BE). Aqui uso pontos ESCUROS
   (2 camadas com deriva) via pseudo-elementos. isolation+z-index:-1
   deixa os pontos ACIMA do fundo claro e ABAIXO do texto.
   ============================================================ */
.plano-card, .empresa-plan { isolation: isolate; }
.plano-card::before, .plano-card::after,
.empresa-plan::before, .empresa-plan::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: -1;
}
.plano-card::before, .empresa-plan::before {
  background-image:
    radial-gradient(2px 2px at 18% 22%, rgba(9,64,50,.22), transparent 62%),
    radial-gradient(2px 2px at 62% 40%, rgba(9,64,50,.18), transparent 62%),
    radial-gradient(2px 2px at 38% 74%, rgba(9,64,50,.20), transparent 62%),
    radial-gradient(2px 2px at 84% 80%, rgba(9,64,50,.16), transparent 62%);
  background-size: 240px 280px;
  animation: planoDotsA 26s linear infinite;
}
.plano-card::after, .empresa-plan::after {
  background-image:
    radial-gradient(1.5px 1.5px at 30% 55%, rgba(9,64,50,.16), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(9,64,50,.14), transparent 60%),
    radial-gradient(1.5px 1.5px at 52% 88%, rgba(9,64,50,.14), transparent 60%);
  background-size: 180px 200px;
  animation: planoDotsB 34s linear infinite;
}
@keyframes planoDotsA { from { background-position: 0 0; } to { background-position: 240px -280px; } }
@keyframes planoDotsB { from { background-position: 0 0; } to { background-position: -180px -200px; } }
@media (prefers-reduced-motion: reduce) {
  .plano-card::before, .plano-card::after,
  .empresa-plan::before, .empresa-plan::after { animation: none; }
}

/* ============================================================
   r277 — Dúvidas Frequentes em ACCORDION (pergunta + resposta)
   ============================================================ */
.faq-list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq-item {
  background: rgba(6, 40, 32, 0.55);
  border: 1px solid rgba(93, 202, 165, 0.16);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .25s ease, background .25s ease;
}
.faq-item:hover { border-color: rgba(93, 202, 165, 0.34); }
.faq-item__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; background: none; border: none; cursor: pointer; text-align: left;
}
.faq-item__q {
  font-family: var(--body); font-size: 16px; font-weight: 500; color: var(--paper); line-height: 1.35;
  transition: color .25s ease;
}
.faq-item__chev {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(93, 202, 165, 0.30); color: var(--green-glow);
  transition: transform .3s ease, background .25s ease, border-color .25s ease;
}
.faq-item.open { border-color: var(--green-glow); background: rgba(10, 58, 46, 0.55); }
.faq-item.open .faq-item__q { color: var(--green-glow); }
.faq-item.open .faq-item__chev { transform: rotate(180deg); background: rgba(93, 202, 165, 0.14); border-color: var(--green-glow); }
.faq-item__panel { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.faq-item.open .faq-item__panel { max-height: 340px; }
.faq-item__panel p {
  margin: 0; padding: 0 24px 22px; color: var(--dark-text-soft);
  font-size: 14.5px; line-height: 1.6; max-width: 760px;
}
@media (prefers-reduced-motion: reduce) { .faq-item__panel, .faq-item__chev { transition: none; } }
@media (max-width: 480px) {
  .faq-item__head { padding: 16px 18px; }
  .faq-item__q { font-size: 15px; }
  .faq-item__panel p { padding: 0 18px 18px; }
}

/* ============================================================
   r278 — Botão flutuante do WhatsApp (fixo, canto inferior direito).
   Aparece em todas as páginas, EXCETO nas páginas de curso
   (body.route-curso). Fica no index.html, fora do #app.
   ============================================================ */
.wa-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 200;
  width: 58px; height: 58px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 26px rgba(0,0,0,0.30);
  transition: transform .2s ease, box-shadow .2s ease;
  animation: waPulse 2.6s ease-out infinite;
}
.wa-fab:hover { transform: scale(1.06); box-shadow: 0 14px 34px rgba(0,0,0,0.40); color: #fff; }
.wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes waPulse {
  0%   { box-shadow: 0 10px 26px rgba(0,0,0,0.30), 0 0 0 0 rgba(37,211,102,0.45); }
  70%  { box-shadow: 0 10px 26px rgba(0,0,0,0.30), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 26px rgba(0,0,0,0.30), 0 0 0 0 rgba(37,211,102,0); }
}
body.route-curso .wa-fab { display: none; }
@media (prefers-reduced-motion: reduce) { .wa-fab { animation: none; } }
@media (max-width: 480px) { .wa-fab { right: 16px; bottom: 16px; width: 52px; height: 52px; } }

/* ============================================================
   r279 — Página legal (Termos de Uso): conteúdo em seções
   ============================================================ */
.legal-content { max-width: 840px; margin: 0 auto; }
.legal-content .legal-atualizado {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--green-glow); margin: 0 0 10px;
}
.legal-content .legal-intro { font-size: 16px; color: var(--paper); line-height: 1.6; margin: 0 0 34px; }
.legal-sec { margin-bottom: 30px; }
.legal-sec__title { font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--paper); margin: 0 0 12px; }
.legal-sec p { font-size: 14.5px; line-height: 1.7; color: var(--dark-text-soft); margin: 0 0 10px; }
.legal-sec ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.legal-sec li {
  position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.65; color: var(--dark-text-soft);
}
.legal-sec li::before {
  content: ""; position: absolute; left: 2px; top: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--green-glow);
}
@media (max-width: 480px) { .legal-sec__title { font-size: 19px; } }

/* r281 — hero compacto das páginas legais (Termos / Política): sem o min-height dos heros com imagem */
.hero--legal { min-height: auto; padding-top: 128px; padding-bottom: 28px; }

/* ============================================================
   r283 — Padronização visual PREMIUM: pill "★ Premium" âmbar
   (bullet + estrela + texto) e card "Compra Avulsa" dos cursos
   premium com o mesmo formato âmbar + colchete do "Para quem".
   ============================================================ */
.pill.pill--premium { background: linear-gradient(135deg, #F2D98A, #D4AF37 55%, #B8860B); color: #2A1C00; border-color: transparent; font-weight: 700; }
.pill.pill--premium::before { display: none; }
.curso-avulso-cta--premium {
  border: 1px solid rgba(235,200,117,0.28);
  border-left: 4px solid var(--gold);
  background: linear-gradient(180deg, rgba(186,117,23,0.10), rgba(5,41,32,0.35));
  box-shadow: 0 0 30px rgba(186,117,23,0.10);
}
.curso-avulso-cta--premium .curso-avulso-cta__eyebrow { color: var(--gold); }

/* ============================================================================
   r376 — AJUSTES DE RESPONSIVIDADE MOBILE (pedido do Aldy, 24/07/2026)
   ⚠️ TUDO aqui está dentro de @media (max-width:…) → o DESKTOP NÃO é afetado.
   Colocado no FIM do arquivo de propósito: pela cascata (mesma especificidade,
   vence a ÚLTIMA regra), estas regras mobile vencem as anteriores de mesmo alvo
   (ex.: o bloco @880 do certificado) sem precisar editar nada acima.
   (1) heros centralizados · (2) cards com mais largura ·
   (3) cards de planos compactos · (4) certificado menos esticado.
   ============================================================================ */
@media (max-width: 768px) {
  /* (1) HEROS CENTRALIZADOS ------------------------------------------------ */
  .hero__text { text-align: center; }
  .formacao-detail-hero .hero__text { align-items: center; }   /* era flex-start */
  .hero__ctas { justify-content: center; }

  .detail-hero__container { text-align: center; }
  .detail-hero__container .trilha-stats { justify-content: center; }
  .detail-hero__container .trilha-pro { text-align: left; }     /* faixa PRO continua legível */
  .detail-hero__tagline { margin-left: auto; margin-right: auto; }

  .course-hero__container > div:first-child { text-align: center; }
  .course-hero__pills { justify-content: center; }

  .formacao-detail-hero__bottom { text-align: center; justify-content: center; }
  .formacao-detail-hero__subtitle { max-width: 100%; }

  /* (3) CARDS DE PLANOS COMPACTOS ------------------------------------------ */
  .plano-card { padding: 28px 22px 24px; border-radius: 20px; }
  .plano-card__name { font-size: 24px; }
  .plano-card__price { padding-bottom: 22px; }
  .plano-card__price-label { font-size: 15px; }
  .plano-card__price-value { font-size: 34px; }
  .plano-card__features { margin-bottom: 18px; }
  .plano-card__features li { font-size: 15px; padding: 7px 0; }
  .plano-card__saibamais { padding: 18px 0; margin-bottom: 16px; font-size: 14px; }

  /* (4) CERTIFICADO MENOS ESTICADO ----------------------------------------- */
  .certificado-mock { padding: 30px 22px 22px; }
  .certificado-mock__corner { width: 92px; height: 92px; }   /* era 140px */
  .certificado-mock__logo { margin-bottom: 18px; }
  .certificado-mock__type { margin-bottom: 16px; }
  .certificado-mock__nome { font-size: 20px; margin-bottom: 16px; }
  .certificado-mock__horas { margin-bottom: 22px; }
}

/* (2) CARDS COM MAIS LARGURA — menos padding lateral nas telas pequenas ----- */
@media (max-width: 640px) {
  .section { padding: 64px 20px; }
  .hero { padding: 92px 20px 44px; }
  .detail-hero { padding: 100px 20px 64px; }
  .significa-card { padding: 28px 22px; }
}
@media (max-width: 480px) {
  .section { padding: 56px 16px; }
  .hero { padding: 88px 16px 40px; }
  .detail-hero { padding: 96px 16px 56px; }
  .plano-card__price-value { font-size: 28px; }   /* garante o preço "de/por" numa linha em telas 360px */
}

/* ============================================================================
   r377 — CORREÇÕES MOBILE (após teste no celular do Aldy, 24/07/2026)
   ⚠️ TUDO dentro de @media → o DESKTOP NÃO é afetado.
   (A) nav não quebra o botão "Matricule-se" ao rolar
   (B) card de plano não estoura a largura da tela (preço deixa de ser 1 linha forçada)
       -> esta era a causa REAL do texto/heros aparecerem deslocados p/ a esquerda
   (C) card de plano mais compacto (remove o espaçador invisível no mobile)
   ============================================================================ */
@media (max-width: 880px) {
  /* (A) nav no mobile (r377+r378): ao rolar, .nav.scrolled usava 40px de padding
     (valor de desktop) e quebrava o "Matricule-se". Agora: menos padding lateral (16px)
     e o botão trava numa linha só (nowrap + não encolhe), no topo E ao rolar. */
  .nav { padding: 14px 16px; }
  .nav.scrolled { padding: 12px 16px; }
  .nav__cta { white-space: nowrap; flex-shrink: 0; padding: 11px 18px; }
}
@media (max-width: 768px) {
  /* (B) o preço tinha white-space:nowrap; no formato "de/por" ficava mais largo que
     o card e empurrava a página inteira para o lado. Deixa quebrar linha no mobile. */
  .plano-card__price-value { white-space: normal; }
  /* (C) espaçador invisível que alinha a altura dos 3 cards no desktop; no mobile os
     cards ficam empilhados, então ele só gerava um vão enorme dentro do card. */
  .plano-card__formacao-toggle--ghost { display: none; }
  .plano-card__periodline { margin-bottom: 18px; }
}

/* ============================================================================
   r379 — MENU MOBILE (hamburger) não abria as páginas (24/07/2026)
   ⚠️ TUDO dentro de @media (max-width:880px) e só com body.menu-open (que só
   existe no mobile) → o DESKTOP NÃO é afetado.
   CAUSA: o `.nav` tem `backdrop-filter: blur()`, que o torna o "containing block"
   dos filhos `position:fixed`. O overlay do menu (`body.menu-open .nav__links`,
   fixed com top:68px / bottom:0) passava a ser medido em relação à BARRA do nav
   (~56px de altura) em vez da tela → altura negativa → o menu abria (ícone vira X)
   mas ficava sem tamanho e sumia.
   FIX: ao abrir o menu, remover o backdrop-filter do nav → o overlay volta a se
   posicionar pela janela (tela cheia) e os 7 links aparecem.
   ============================================================================ */
@media (max-width: 880px) {
  body.menu-open .nav { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ============================================================================
   r380 — Seletor de período (Anual / 2 anos) centralizado no MOBILE (24/07/2026)
   ⚠️ TUDO dentro de @media (max-width:880px) → o DESKTOP NÃO é afetado.
   O `.planos-toggle` é `display:inline-flex` e o `.section__container` não tem
   text-align:center, então o seletor ficava encostado à esquerda no celular (os
   cards do grid já ocupam a largura toda). Centraliza como bloco com margin auto.
   ============================================================================ */
@media (max-width: 880px) {
  .section__container > .planos-toggle {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================================
   r381 — Menu mobile + card de plano centralizado (24/07/2026)
   ⚠️ TUDO oculto no desktop / dentro de @media → o DESKTOP NÃO é afetado.
   (A) "Acessar Plataforma": o botão ghost do nav some no mobile (display:none em
       ≤1080). Adicionei um link no menu hambúrguer (index.html) que fica oculto
       no desktop e aparece só quando o menu mobile abre.
   (B) overflow-x:hidden no html (≤768) — mata qualquer sobra de deslocamento
       horizontal (o card aparecia empurrado p/ a direita). Seguro: no mobile não
       há position:sticky (a única, .course-sidebar, vira relative em ≤1080).
   (C) card de plano um pouco mais estreito e centralizado no celular.
   ============================================================================ */
.nav__menu-login { display: none; }   /* nunca no desktop (lá já existe o botão no nav) */
@media (max-width: 880px) {
  body.menu-open .nav__menu-login { display: block; }   /* aparece só no menu mobile */
}
@media (max-width: 768px) {
  html { overflow-x: hidden; }
}
@media (max-width: 640px) {
  .planos-grid .plano-card { width: 92%; margin-left: auto; margin-right: auto; }
}

/* ============================================================================
   r382 — Toggle "Escolha sua Formação" empilhado no MOBILE (24/07/2026)
   ⚠️ @media (max-width:640px) → o DESKTOP NÃO é afetado.
   Com o card de plano mais estreito (r381), os 3 botões (Seguros / Data Analytics
   e IA / Acesso Total) espremiam o texto lado a lado. No mobile eles passam a ficar
   empilhados na vertical, cada opção em largura cheia. Escopo só no toggle do card
   PRO da Home (.plano-card__formacao-toggle), não mexe no da página Para Empresas.
   ============================================================================ */
@media (max-width: 640px) {
  .plano-card__formacao-toggle .formacao-pills {
    flex-direction: column;
    border-radius: 16px;
  }
  .plano-card__formacao-toggle .formacao-pill {
    width: 100%;
    border-radius: 12px;
    padding: 11px 14px;
  }
}

/* ============================================================================
   r383 — Preço "de/por" (Plano PRO) numa linha só no MOBILE (24/07/2026)
   ⚠️ @media (max-width:640px) → o DESKTOP NÃO é afetado.
   Com o card estreito (r381) + white-space:normal (r377, que matou o overflow),
   "R$ 193,29 por R$ 153,20" quebrava e partia o "R$ 153,20". Reduz um pouco as 3
   partes SÓ dos preços que têm o formato "de/por" (via :has), pra caber numa linha.
   Os preços simples (ex.: "R$ 50,38" do Básico) ficam no tamanho de sempre.
   ============================================================================ */
@media (max-width: 640px) {
  .plano-card__price-value:has(.plano-card__price-value-de) { font-size: 24px; }
  .plano-card__price-value:has(.plano-card__price-value-de) .plano-card__price-value-de { font-size: 17px; }
  .plano-card__price-value:has(.plano-card__price-value-de) .plano-card__price-por { font-size: 13px; }
}

/* ============================================================================
   r384 — Título do card menor no MOBILE, nas páginas com cards de curso — Cursos Livres + Trilhas (r385, 24/07/2026)
   ⚠️ @media (max-width:880px) + body.route-cursos-grid → o DESKTOP e as outras
   páginas NÃO são afetados. (Teste; se aprovado, vira global p/ as trilhas.)
   O .curso-card__title (16px + min-height 2.6em) deixava os cards altos no card
   estreito de 2 colunas. Reduz a fonte e solta o min-height só aqui.
   ============================================================================ */
@media (max-width: 880px) {
  body.route-cursos-grid .curso-card__title {
    font-size: 12px;                 /* r384b — 16 -> 12 */
    min-height: 0;
    line-height: 1.25;
  }
  /* r384b — menos gap entre o thumbnail e os textos (topo) e menos margem no fundo do card */
  body.route-cursos-grid .curso-card__body { padding: 12px 16px 12px; }   /* era 18px 20px 22px */
  /* r384c — empurra "x horas" para o RODAPÉ do card: como os cards da linha têm
     altura igual (stretch), as horas colam no fundo e ficam ALINHADAS entre os
     cards (igual ao desktop), e o vazio abaixo vira só o padding (12px). Isto
     substitui o min-height do título como mecanismo de alinhamento no mobile. */
  body.route-cursos-grid .curso-card__meta { margin-top: auto; }           /* era 14px */
  /* r384d removida na r384e — a uniformização entre módulos passou a ser feita por JS (equalizeCursoCards) */
}

/* ============================================================================
   r386 — Tarjas Premium/Avulso e preço menores no MOBILE (cards com preço) (24/07/2026)
   ⚠️ @media (max-width:880px) + body.route-cursos-grid → DESKTOP e outras páginas intactos.
   O card com preço (ex.: "Indicadores de Desempenho", Premium/Avulso/R$ 849,00) é o mais
   alto e, com a altura uniforme (equalizeCursoCards), puxa TODOS os cards da trilha p/ cima.
   Encolhendo as tarjas e o preço, esse card baixa e a página toda das trilhas fica mais baixa.
   ============================================================================ */
@media (max-width: 880px) {
  body.route-cursos-grid .curso-card__premium,
  body.route-cursos-grid .curso-card__avulso,
  body.route-cursos-grid .curso-card__meta .curso-card__avulso {
    font-size: 8px;                 /* r387b — 8.5 -> 8 */
    padding: 2px 6px;                /* r387b — mais estreito */
    letter-spacing: 0.02em;          /* r387b — menos espaçamento */
  }
  body.route-cursos-grid .curso-card__preco { font-size: 11px; }   /* r387b — 12 -> 11 */
}

/* ============================================================================
   r387 — Avulso à esquerda + preço na MESMA linha no MOBILE (24/07/2026)
   ⚠️ @media (max-width:880px) + body.route-cursos-grid → DESKTOP intocado.
   Antes: "AVULSO" era empurrado p/ a direita (margin-left:auto) e o preço caía numa
   linha separada abaixo (2-3 linhas na meta). Agora: horas ocupam a linha de cima
   sozinhas e AVULSO + preço ficam juntos numa linha só à esquerda → 1 linha a menos
   → card de preço mais baixo → (com a altura uniforme) a página das trilhas baixa.
   ============================================================================ */
@media (max-width: 880px) {
  body.route-cursos-grid .curso-card__meta > span:first-child { width: 100%; }        /* horas sozinha na linha de cima */
  body.route-cursos-grid .curso-card__meta .curso-card__avulso { margin-left: 0; }     /* avulso não é mais empurrado p/ a direita */
  body.route-cursos-grid .curso-card__meta { column-gap: 6px; }                        /* r387b — AVULSO e preço mais juntos p/ caberem numa linha */
}

/* ============================================================================
   r388 — Página QUEM SOMOS no MOBILE (24/07/2026)
   ⚠️ @media (max-width:640px) → o DESKTOP NÃO é afetado.
   (1) nome "Aldy Fernandes da Silva" numa linha só (36px quebrava);
   (2) lista abaixo do nome com identação pendente (linha quebrada alinha com o
       TEXTO, não com o marcador ●);
   (3) título dos cards de pilares ("Profundidade técnica", "Conexão com a prática"…)
       numa linha só (36px quebrava).
   ============================================================================ */
@media (max-width: 640px) {
  .lideranca__nome { font-size: clamp(22px, 6vw, 32px); }

  .lideranca ul li { padding-left: 18px; position: relative; }
  .lideranca ul li::before { position: absolute; left: 0; margin-right: 0; }

  .pillar .v { font-size: clamp(22px, 6.5vw, 32px); }
}

/* ============================================================================
   r389 — Hero do MAPA DE CARREIRAS: menos vão entre subtítulo e arte no MOBILE (24/07/2026)
   ⚠️ @media (max-width:968px) → DESKTOP intocado (o mapa vira 1 coluna em <969px).
   A arte (.mapa-hero__video) herda margin-top:70px de `.hero__container--wide > .hero__media`
   (alinha o vídeo no desktop de 2 colunas). No mobile empilhado, isso + o gap de 48px da
   grade viravam ~118px de vão entre o subtítulo e a arte. Zera o margin-top e reduz o gap.
   ============================================================================ */
@media (max-width: 968px) {
  .hero--mapa .hero__container--wide > .hero__media { margin-top: 0; }
  .hero--mapa .hero__container--wide { gap: 20px; }
}

/* ============================================================================
   r390 — CONTEÚDOS GRATUITOS no MOBILE (24/07/2026)
   ⚠️ @media (max-width:640px) + escopo .hero--cg → DESKTOP intocado.
   (1) legenda do carrossel (`.video-carousel__caption`) menor e mais no canto, pra
       não tapar a arte da árvore (no desktop segue 15px, decisão da r322).
   (2) botões "Ver formações" / "Ver trilhas" (`.hero--cg__ctas .btn`) menores,
       proporcionais à tela.
   ============================================================================ */
@media (max-width: 640px) {
  /* (1) legenda menor (r390c: 10px) */
  .hero--cg .video-carousel__caption {
    font-size: 10px;
    padding: 5px 10px;
    left: 12px; bottom: 12px;
    letter-spacing: 0;
  }
  /* (2) botões Ver formações / Ver trilhas menores (r390c: 12px, 10/16) */
  .hero--cg__ctas .btn {
    font-size: 12px;
    padding: 10px 16px;
  }
  /* (3) setas ‹ › do carrossel menores (r390c: 30px, mais no canto) */
  .hero--cg .video-carousel__nav { width: 30px; height: 30px; font-size: 16px; }
  .hero--cg .video-carousel__nav--prev { left: 8px; }
  .hero--cg .video-carousel__nav--next { right: 8px; }
  /* (4) indicador de posição (bolinhas/pílula ativa) menor (r390c) */
  .hero--cg .video-carousel__dots { gap: 6px; margin-top: 12px; }
  .hero--cg .video-carousel__dot { width: 6px; height: 6px; }
  .hero--cg .video-carousel__dot.active { width: 12px; }
}

/* ============================================================================
   r391 — CONTEÚDOS GRATUITOS: carrossel (videoimagem) um pouco maior no MOBILE (24/07/2026)
   ⚠️ @media (max-width:640px) + .hero--cg → DESKTOP intocado.
   Alarga levemente (margem negativa, dentro do padding do hero, sem estourar a tela)
   e deixa um pouco mais alto (aspect-ratio 16/9 → 16/11).
   ============================================================================ */
@media (max-width: 640px) {
  .hero--cg .video-carousel { margin-left: -8px; margin-right: -8px; }
  .hero--cg .video-carousel__viewport { aspect-ratio: 16 / 11; }
}

/* ============================================================================
   r392 — Página FORMAÇÕES no MOBILE (24/07/2026)
   ⚠️ @media → o DESKTOP NÃO é afetado (hero vira 1 coluna em <969px).
   (1) menos vão entre o subtítulo do 1º hero e a videoimagem da árvore
       (mesma causa do Mapa: margin-top:70px que alinha o vídeo no desktop 2-col);
   (2) botões "Formação Seguros" / "Formação Data Analytics e IA" menores;
   (3) título do card de formação numa fonte que cabe em 2 linhas
       (ex.: "Formação Data Analytics e IA" quebrava em 3).
   ============================================================================ */
@media (max-width: 968px) {
  .hero--form .hero__container--wide > .hero__media { margin-top: 0; }
  .hero--form .hero__container--wide { gap: 20px; }
}
@media (max-width: 640px) {
  .hero--form .hero__ctas .btn { font-size: 13px; padding: 11px 18px; }
  .hero--form .hero__ctas--center { gap: 12px; }
  .formacao-card__title { font-size: clamp(22px, 6.5vw, 30px); }
}

/* ============================================================================
   r393 — FORMAÇÃO (detalhe) no MOBILE — vale p/ Seguros E Data Analytics e IA (24/07/2026)
   ⚠️ @media + escopo .formacao-detail-hero → DESKTOP intocado. Mesmo template p/ as duas.
   (1) menos vão entre título/subtítulo e o vídeo da árvore (margin-top:70px herdado);
   (2) legenda do vídeo menor + vídeo menos "solto" (margem);
   (3) menos espaço entre a descrição "Domine…" e a pílula "N trilhas · ~Xh".
   ============================================================================ */
@media (max-width: 968px) {
  .formacao-detail-hero .hero__container--wide > .hero__media { margin-top: 0; }
  .formacao-detail-hero .hero__container--wide { gap: 20px; }
}
@media (max-width: 880px) {
  .formacao-detail-hero .video-carousel__caption { font-size: 10px; padding: 4px 8px; left: 10px; bottom: 10px; }   /* r393b — reduzido mais */
  .formacao-detail-hero .video-carousel { margin: 8px 0 16px; }
  .formacao-detail-hero__bottom { gap: 12px; }
}

/* ============================================================================
   r394 — Formação (detalhe): corrige o VÃO gigante entre a descrição e a pílula (24/07/2026)
   ⚠️ @media (max-width:880px) → DESKTOP intocado.
   CAUSA: `.formacao-detail-hero__desc` tem `flex: 1 1 480px`. No desktop o bloco é
   uma LINHA (main axis horizontal) → 480px é a LARGURA. No mobile o bloco vira COLUNA
   (main axis vertical) → 480px vira a ALTURA da caixa da descrição, criando ~400px de
   vazio abaixo do texto e empurrando a pílula p/ baixo. Fix: descrição com altura automática.
   ============================================================================ */
@media (max-width: 880px) {
  .formacao-detail-hero__desc { flex: none; }
}

/* ============================================================================
   r395 (24/07/2026) — MOBILE: trilhas empilhadas como CARDS SEPARADOS
   -----------------------------------------------------------------------------
   No desktop a seção "Trilhas dessa formação" é UMA grade única (.trilhas-grid
   com fundo/borda + gap:1px = emendas), parecendo "1 card grande com divisões".
   No mobile precisa virar 1 card por bloco, um embaixo do outro. Trocar só as
   colunas era frágil (o card CTA tem inline `grid-column: span 2`, que cria
   colunas implícitas e mantinha 2 colunas). Solução robusta: no ≤768 a grade
   vira FLEX vertical (ignora grid-column), fundo/borda da grade somem e cada
   .trilha-card ganha a própria borda + cantos arredondados = cards separados.
   Vale p/ FORMAÇÃO SEGUROS, FORMAÇÃO DATA ANALYTICS E IA e TRILHAS.
   Desktop (>768px) intocado. [[padrao-ajustes-mobile]]
   ============================================================================ */
@media (max-width: 768px) {
  .trilhas-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .trilhas-grid .trilha-card {
    border: 1px solid var(--dark-line);
    border-radius: var(--radius-lg);
    min-height: 0;
  }
}

/* ============================================================================
   r396 (24/07/2026) — MOBILE: reduzir a pílula "ASSINE O PLANO PRO"
   -----------------------------------------------------------------------------
   Só nas páginas de FORMAÇÃO (detalhe) — escopo body.route-formacoes (adicionado
   no app_v3.js). O CTA .trilha-card__cta-btn ficava grande demais empilhado no
   celular. Reduz padding (tamanho da pílula) + font-size (texto interno).
   A página TRILHAS usa o mesmo botão mas com outro texto ("Plano Especialista")
   e NÃO tem route-formacoes → intocada. Desktop (>768px) intocado.
   [[padrao-ajustes-mobile]]
   ============================================================================ */
@media (max-width: 768px) {
  body.route-formacoes .trilha-card__cta-btn {
    padding: 10px 18px;
    font-size: 10px;
    margin-top: 4px;
  }
}

/* ============================================================================
   r397 (24/07/2026) — TRILHAS no mobile (3 ajustes; só @media, desktop intocado)
   -----------------------------------------------------------------------------
   (1) Vão entre o subtítulo do hero e a videoimagem da árvore — mesma causa do
       Mapa (r389)/Formações (r392): `.hero__container--wide > .hero__media`
       herda `margin-top:70px` (alinha o vídeo no desktop 2-col); no mobile
       empilhado vira vão. Fix `@media ≤968`: zerar + `gap:20px`.
   (2) Botões dos planos (`.hero--trilhas__ctas .btn`: Básico/Especialista/PRO)
       grandes no celular → 16→13px, padding 16/28→11/18, gap 16→12px (`≤640`).
   (3) CTA "ASSINE O PLANO ESPECIALISTA" (`.trilha-card__cta-btn`) quebrava em 2
       linhas → reduz fonte/padding p/ caber numa linha. Escopo `body.route-cursos-grid`
       (Cursos Livres + Trilhas; só Trilhas tem esse botão) → não afeta Formação
       (que usa `body.route-formacoes`, r396) nem o desktop.
   ============================================================================ */
@media (max-width: 968px) {
  .hero--trilhas .hero__container--wide > .hero__media { margin-top: 0; }
  .hero--trilhas .hero__container--wide { gap: 20px; }
}
@media (max-width: 768px) {
  body.route-cursos-grid .trilha-card__cta-btn {
    font-size: 10px;
    padding: 10px 14px;
    letter-spacing: 0.04em;
    margin-top: 4px;
  }
}
@media (max-width: 640px) {
  .hero--trilhas__ctas .btn { font-size: 13px; padding: 11px 18px; }
  .hero--trilhas__ctas { gap: 12px; }
}

/* ============================================================================
   r398 (24/07/2026) — TRILHAS no mobile: botões "Assinar Plano PRO…" menores
   -----------------------------------------------------------------------------
   Os 3 cards de assinatura de formação na base da página Trilhas
   (`.trilhas-cta-card`: Seguros / Data Analytics e IA / Acesso Total) tinham o
   botão `.btn` grande (base 15px, padding 14/24), quebrando em 2 linhas nos
   textos longos. Reduz fonte + padding no celular. `@media ≤640`, desktop
   intocado. [[padrao-ajustes-mobile]]
   ============================================================================ */
@media (max-width: 640px) {
  .trilhas-cta-card .btn { font-size: 12px; padding: 10px 16px; }
}

/* ============================================================================
   r399 (24/07/2026) — PARA EMPRESAS: hero no mobile (só @media, desktop intocado)
   -----------------------------------------------------------------------------
   No mobile o painel (`.hero__media` = emp-dash) aparecia ANTES do título/subtítulo
   e estourava a largura da tela (KPIs e barras cortados na direita). No DOM o texto
   vem primeiro (hero__text → hero__media); o problema é do grid `.hero__container--wide`
   (que fica 2-col em ≥969 pela regra r141). Fix `@media ≤968`: o container vira FLEX
   COLUNA → empilha na ordem do DOM (texto → painel); e o painel recebe `min-width:0` +
   `width:100%` p/ caber na tela (o `min-width:auto` do item de grid/flex era o que
   deixava o conteúdo empurrar além do viewport). Desktop (≥969) intocado. [[padrao-ajustes-mobile]]
   ============================================================================ */
@media (max-width: 968px) {
  .hero--empresa .hero__container--wide {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .hero--empresa .hero__text  { order: 0; }
  .hero--empresa .hero__media { order: 1; min-width: 0; width: 100%; }
  .hero--empresa .emp-dash { width: 100%; max-width: 100%; }
}

/* ============================================================================
   r400 (24/07/2026) — PARA EMPRESAS mobile: KPI sem estourar + botões menores
   -----------------------------------------------------------------------------
   (A) O 3º KPI ("82 Alto · Índice de Engajamento (IEC)") vazava para fora do
       card no celular. Causa: `.emp-dash__kpi` é item de grid com `min-width:auto`
       → a faixa não encolhe abaixo do conteúdo e a grade de 3 colunas estoura o
       painel. Fix `@media ≤640`: `min-width:0` (faixa pode encolher) + fontes/
       padding menores → os 3 KPIs cabem. (Sobrepõe os aumentos globais da r146.)
   (B) Os 2 botões abaixo do painel (`.emp-cta-row`: "Conhecer modelos" / "Solicitar
       proposta") estavam grandes → fonte 16→13px, padding 16/28→11/18, mais perto.
   Desktop intocado (tudo em @media ≤640). [[padrao-ajustes-mobile]]
   ============================================================================ */
@media (max-width: 640px) {
  .emp-dash__kpis { gap: 8px; }
  .emp-dash__kpi { min-width: 0; padding: 9px 10px; }
  .emp-dash__kpi-v { font-size: 19px; }
  .emp-dash__kpi-l { font-size: 10px; line-height: 1.25; }
  .emp-dash__iec-tag { font-size: 9px; padding: 1px 6px; }
  .hero--empresa .emp-cta-row { margin-top: 24px; gap: 10px; }
  .hero--empresa .emp-cta-row .btn { font-size: 13px; padding: 11px 18px; }
}

/* ============================================================================
   r402 (24/07/2026) — PLANOS PARA EMPRESAS (Business/Partner) no mobile
   -----------------------------------------------------------------------------
   Mesmo problema/solução dos planos da Home (r381): no celular os cards
   `.empresa-plan` ficavam largos (colados nas bordas) e "descentralizados".
   Fix `@media ≤640`: `width:92%` + `margin` auto (centraliza com respiro lateral)
   + padding reduzido (36/32 → 26/22; eles nunca tinham sido encolhidos como os da
   Home). Desktop intocado. [[padrao-ajustes-mobile]]
   ============================================================================ */
@media (max-width: 640px) {
  .empresas-plans .empresa-plan {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    padding: 26px 22px;
  }
}

/* ============================================================================
   r403 (24/07/2026) — PLANOS PARA EMPRESAS: centralizar DE FATO no mobile
   -----------------------------------------------------------------------------
   Depois do r402 (width:92% + margin auto) o card continuava deslocado p/ a
   esquerda. Causa (mesma do painel, r399/r400): `.empresa-plan` é item de grid
   com `min-width:auto` → algum conteúdo interno (preço/toggle/highlight) estica a
   faixa 1fr para ALÉM do viewport; aí o `margin:auto` centraliza dentro de uma
   faixa maior que a tela e o card aparece torto/à esquerda. Fix `@media ≤640`:
   `min-width:0` (a faixa encolhe até o viewport) + `justify-items:center` (reforço)
   → o width:92% passa a centralizar na tela. Desktop intocado. [[padrao-ajustes-mobile]]
   ============================================================================ */
@media (max-width: 640px) {
  .empresas-plans { justify-items: center; }
  .empresas-plans .empresa-plan { min-width: 0; max-width: 100%; }
}

/* ============================================================================
   r404 (24/07/2026) — PLANOS PARA EMPRESAS mobile: mais largos + fonte menor + CTA menor
   -----------------------------------------------------------------------------
   Após centralizar (r402/r403), os textos internos quebravam feio (cards estreitos
   + fonte grande). Fix `@media ≤640`: (1) cards mais largos (92%→96%) com menos
   padding (26/22→22/16) = mais espaço horizontal; (2) fontes internas menores
   (nome, meta, preço, highlight, features, contratação à parte); (3) o botão
   "Agendar reunião comercial" (`.empresa-plan__cta`) tinha `min-width:300px`
   (quase a largura do card) → `min-width:0` + fonte/padding menores, encolhe ao
   conteúdo e fica centralizado. Desktop intocado. [[padrao-ajustes-mobile]]
   ============================================================================ */
@media (max-width: 640px) {
  .empresas-plans .empresa-plan { width: 96%; padding: 22px 16px; }

  .empresa-plan .empresa-plan__name { font-size: 18px; }
  .empresa-plan .empresa-plan__meta { font-size: 13px; }
  .empresa-plan .empresa-plan__sub-chip { font-size: 11px; }
  .empresa-plan .empresa-plan__price { font-size: 13px; }
  .empresa-plan .empresa-plan__price strong { font-size: 20px; }
  .empresa-plan .empresa-plan__highlight { font-size: 13px; padding: 11px 13px; margin-bottom: 18px; }
  .empresa-plan .empresa-plan__features li { font-size: 13.5px; padding: 6px 0; }
  .empresa-plan .empresa-plan__contracted-title { font-size: 12px; }
  .empresa-plan .empresa-plan__contracted ul li { font-size: 12.5px; }

  .empresa-plan .empresa-plan__cta { min-width: 0; padding: 11px 22px; font-size: 13px; }
}

/* ============================================================================
   r405 (24/07/2026) — PARA EMPRESAS mobile: quebra da marca nas features + botão contato
   -----------------------------------------------------------------------------
   (1) "Emissão de certificados de conclusão InsurIA" quebrava errado (InsurIA na
       1ª linha, "conclusão" na 2ª). Causa: `.empresa-plan__features li` é
       `display:flex`, então o <span class="brand">InsurIA</span> vira um ITEM DE
       FLEX à parte, colado ao lado do texto que quebra. Fix `@media ≤640`: o li
       vira BLOCO com recuo pendente (check via ::before absoluto à esquerda) → o
       texto + a marca fluem inline e quebram naturalmente.
   (2) Botão "Agendar reunião comercial →" (seção de contato, `.contato-card .btn`)
       quebrava em 2 linhas e ficava grande. Causa: `.contato-card` tem `padding:48px`
       (enorme no mobile). Fix `@media ≤640`: padding do card menor + botão com
       fonte/padding menores e `nowrap` (cabe numa linha). Desktop intocado.
   [[padrao-ajustes-mobile]]
   ============================================================================ */
@media (max-width: 640px) {
  /* (1) features: bloco + recuo pendente → marca "InsurIA" flui inline */
  .empresa-plan .empresa-plan__features li {
    display: block;
    position: relative;
    padding-left: 22px;
  }
  .empresa-plan .empresa-plan__features li::before {
    position: absolute;
    left: 0;
    top: 8px;
    margin-top: 0;
  }
  /* (2) seção de contato: card mais compacto + botão numa linha */
  .contato-card { padding: 24px 20px; gap: 22px; }
  .contato-card__email, .contato-card__whatsapp { font-size: 13px; }
  .contato-card .btn { font-size: 13px; padding: 11px 20px; white-space: nowrap; }
}

/* ===========================================================
   r438 — CTA de plano sem link de checkout ainda cadastrado.
   Enquanto o produto não existe na Greenn, o botão fica visível
   mas inerte: sem cursor de mão e sem resposta ao passar o mouse,
   para ninguém (nem no time) achar que clicou e a compra falhou.
   Basta preencher `url` no data_v2.js que a classe some sozinha.
   =========================================================== */
.plano-cta--sem-link{ cursor: default; opacity: .55; }
.plano-cta--sem-link:hover{ transform: none; filter: none; }