/* ============================================================
   PROFESSOR PINGUIM — Homepage Site Principal
   styles.css — implementação fiel ao DESIGN-SPEC v1.0
   Tokens autoritativos em tokens.css (carregado antes deste).
   Mobile-first, BEM-ish, 100% variáveis CSS, sem !important.
   ============================================================ */

/* ============================================================
   1. RESET MÍNIMO + BASE
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--fonte-principal);
  font-size: var(--tipo-corpo);
  line-height: var(--tipo-corpo-altura);
  color: var(--texto-principal-escuro);
  background: var(--cor-preto-cosmos);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

hr {
  border: 0;
  height: 1px;
  background: var(--cor-cinza-aula);
}

/* ============================================================
   2. ACESSIBILIDADE — skip link e focus visível global
   ============================================================ */

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--espaco-md);
  z-index: 1000;
  padding: var(--espaco-sm) var(--espaco-md);
  background: var(--cor-laranja-energia);
  color: var(--cor-preto-cosmos);
  font-weight: var(--peso-semibold);
  border-radius: var(--raio-md);
  transition: top var(--transicao-padrao);
}
.skip-link:focus-visible {
  top: var(--espaco-md);
  outline: 2px solid var(--cor-branco-limpo);
  outline-offset: 4px;
}

/* Focus visível UNIVERSAL — anel laranja, offset 4px, raio herdado */
:focus-visible {
  outline: 2px solid var(--cor-laranja-energia);
  outline-offset: 4px;
  border-radius: var(--raio-sm);
}
/* Não removemos outline em :focus normal — confiamos no :focus-visible */

/* ============================================================
   3. UTILITÁRIOS — eyebrow, pill, container
   ============================================================ */

.eyebrow {
  font-size: 13px;
  font-weight: var(--peso-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
}
.eyebrow--laranja {
  color: var(--cor-laranja-energia);
}

/* ============================================================
   BADGE DE SEÇÃO — componente .section-badge
   Spec: 04-criativos/brandbook/BADGE-SECAO-spec.md v1.1 (2026-05-26)
   Substitui .eyebrow.eyebrow--laranja nas 9 seções não-hero.
   Estrutura: pílula glass com wash colorido vertical + ícone Lucide
   + texto uppercase tracking 0.14em. 3 variantes principais
   (padrão, --urgencia, --azul) + variante --claro (adaptação dev
   pra fundos brancos: depoimentos e quem é o Pinguim).
   ============================================================ */

.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--badge-gap-mobile);
  padding: var(--badge-py-mobile) var(--badge-px-mobile);
  min-height: var(--badge-min-h-mobile);
  margin: 0 auto var(--badge-mb-mobile);
  border-radius: var(--raio-pill);
  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  box-shadow: var(--badge-shadow);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);
  font-family: var(--fonte-principal);
  font-size: var(--badge-fs-mobile);
  font-weight: var(--peso-bold);
  line-height: 1;
  letter-spacing: var(--badge-tracking);
  text-transform: uppercase;
  color: var(--badge-text);
  white-space: nowrap;
  max-width: 90vw;
  cursor: default;
  transition:
    background var(--transicao-padrao) var(--easing-suave),
    border-color var(--transicao-padrao) var(--easing-suave),
    transform var(--transicao-padrao) var(--easing-suave);
  will-change: transform;
}

.section-badge:hover {
  background: var(--badge-bg-hover);
  border-color: var(--badge-border-hover);
  transform: translateY(-1px);
}

.section-badge__icon {
  flex-shrink: 0;
  width: var(--badge-icon-size-mobile);
  height: var(--badge-icon-size-mobile);
  color: currentColor;
  /* stroke-width customizado conforme spec (2.25 vs 2.0 default Lucide) */
  stroke-width: var(--badge-icon-stroke);
}

.section-badge__text {
  display: inline-block;
  line-height: 1;
}

/* Pulse-dot usado na variante --urgencia (substitui ícone) */
.section-badge__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--cor-urgencia);
  box-shadow: 0 0 0 0 var(--cor-urgencia-glow);
  animation: pulse-badge var(--anim-pulse) ease-in-out infinite;
}

/* ----- Variante URGÊNCIA — wash coral, único uso simultâneo ----- */
.section-badge--urgencia {
  background: var(--badge-bg-urgencia);
  border-color: var(--badge-border-urgencia);
  color: var(--badge-text-urgencia);
}
.section-badge--urgencia:hover {
  background: var(--badge-bg-urgencia-hover);
  border-color: var(--badge-border-urgencia-hover);
}

/* ----- Variante INSTITUCIONAL AZUL — exclusiva pra autoridade ----- */
.section-badge--azul {
  background: var(--badge-bg-azul);
  border-color: var(--badge-border-azul);
  color: var(--badge-text-azul);
}
.section-badge--azul:hover {
  background: var(--badge-bg-azul-hover);
  border-color: var(--badge-border-azul-hover);
}

/* ----- Variante CLARO — adaptação dev pra fundos brancos
   (depoimentos com --cor-branco-suave; quem com --cor-branco-limpo).
   Mantém DNA visual: wash laranja vertical, mesma estrutura, mas
   inverte camada base (branco translúcido) e usa texto laranja
   escuro pra contraste WCAG AA. ----- */
.section-badge--claro {
  background: var(--badge-bg-claro);
  border-color: var(--badge-border-claro);
  color: var(--badge-text-claro);
  box-shadow: var(--badge-shadow-claro);
}
.section-badge--claro:hover {
  background: var(--badge-bg-claro-hover);
  border-color: var(--badge-border-claro-hover);
}

/* Alinhamento dentro da seção: padrão centralizado.
   Para a seção "quem", forçamos alinhamento à esquerda quando o
   layout interno usar quem__eyebrow (preserva a hierarquia atual). */
.quem .section-badge {
  margin-inline: 0 auto;
  margin-inline-start: 0;
}
@media (min-width: 1024px) {
  /* No desktop, o badge da bio "Quem é o Pinguim" alinha à esquerda
     da coluna de copy (não centraliza). Conforme spec §2.7. */
  .quem .section-badge {
    margin-inline-start: 0;
    margin-inline-end: auto;
  }
}

/* Espaçamento desktop — proporções do spec §2.6 e §4.3 */
@media (min-width: 1024px) {
  .section-badge {
    gap: var(--badge-gap);
    padding: var(--badge-py) var(--badge-px);
    min-height: var(--badge-min-h);
    font-size: var(--badge-fs);
    margin-bottom: var(--badge-mb);
  }
  .section-badge__icon {
    width: var(--badge-icon-size);
    height: var(--badge-icon-size);
  }
}

/* Reveal escalonado — badge aparece ANTES do H2 (delay 0ms) quando
   a seção .reveal recebe .is-visible. O badge usa o mesmo gatilho
   da seção, mas com offset menor pra antecipar o H2 (~80ms à frente). */
.reveal .section-badge {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--transicao-cinematic) var(--easing-confiante),
    transform var(--transicao-cinematic) var(--easing-confiante),
    background var(--transicao-padrao) var(--easing-suave),
    border-color var(--transicao-padrao) var(--easing-suave);
}
.reveal.is-visible .section-badge {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion — fade-only, sem translate, sem lift no hover,
   sem pulse no dot. Pulse-dot já é desabilitado pelo @media em tokens.css. */
@media (prefers-reduced-motion: reduce) {
  .section-badge,
  .reveal .section-badge {
    opacity: 1;
    transform: none;
    transition: background var(--transicao-padrao) ease,
                border-color var(--transicao-padrao) ease;
  }
  .section-badge:hover {
    transform: none;
  }
  .section-badge__dot {
    animation: none;
  }
}

/* Pill laranja — padding em em (proporcional ao font-size do contexto) */
.pill-laranja {
  display: inline-block;
  background: var(--cor-laranja-energia);
  color: var(--cor-branco-limpo);
  padding: 0.08em 0.32em;
  border-radius: var(--raio-sm);
  white-space: nowrap;
}

/* Botões base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-xs);
  padding: 16px 32px;
  min-height: 48px;
  border-radius: var(--raio-md);
  font-family: var(--fonte-principal);
  font-size: var(--tipo-botao);
  font-weight: var(--peso-semibold);
  line-height: var(--tipo-botao-altura);
  letter-spacing: var(--tipo-botao-letra);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicao-padrao),
              transform var(--transicao-padrao),
              box-shadow var(--transicao-padrao),
              border-color var(--transicao-padrao);
}
.btn svg {
  width: 18px;
  height: 18px;
}

.btn--outline-claro {
  border: 2px solid var(--cor-branco-limpo);
  color: var(--cor-branco-limpo);
  background: transparent;
}
.btn--outline-claro:hover {
  background: rgba(255, 255, 255, 0.08);
}
.btn--outline-claro:active {
  background: rgba(255, 255, 255, 0.16);
}

/* CTA primário — assinatura visual do Pinguim: gradiente laranja com glow.
   Brilho desliza esquerda→direita no hover (background-position animado). */
.btn--cta-primario {
  color: var(--cor-branco-limpo);
  background: linear-gradient(90deg, #F39419 0%, #F9B255 55%, #F39419 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  border: 0;
  box-shadow: var(--sombra-cta);
  transition: background-position var(--transicao-lenta),
              transform var(--transicao-padrao),
              box-shadow var(--transicao-padrao);
}
.btn--cta-primario:hover {
  background-position: 100% 0%;
  transform: translateY(-1px);
  box-shadow:
    0 12px 28px rgba(243, 148, 25, 0.42),
    0 4px 10px rgba(243, 148, 25, 0.28);
}
.btn--cta-primario:active {
  transform: translateY(0);
  box-shadow: var(--sombra-cta);
}

/* ============================================================
   4. HEADER (2 estados: top / scroll)
   Layout: logo CENTRALIZADO horizontalmente (position absolute);
   botão "Plataforma de cursos" à direita. Sem nav interno,
   sem hamburger, sem drawer.
   ============================================================ */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 104px;
  background: transparent;
  transition: background var(--transicao-padrao),
              height var(--transicao-padrao),
              box-shadow var(--transicao-padrao);
}
.header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding-inline: clamp(16px, 4vw, 32px);
}

/* Header v2: blur padrao 8px (estado topo), intensifica pra 16px no scroll.
   Mesh herda da hero quando no topo (header transparente).
   F6 (auditoria mobile 2026-05-28): background semi-opaco minimo (18%) pra
   Safari iOS renderizar o backdrop-filter. Sem fundo, iOS ignora o blur. */
.header {
  background: rgba(14, 15, 18, 0.18);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
}

/* Estado scroll: blur intensificado + glass forte + sombra + altura reduzida */
.header[data-scrolled="true"] {
  background: rgba(14, 15, 18, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--sombra-2);
  height: 88px;
  border-bottom: 1px solid var(--cor-borda-glass);
}

/* Logo CENTRALIZADO horizontalmente, AUMENTADO */
.header__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
}
.header__logo img {
  height: 80px;
  width: auto;
}

/* Botão "Plataforma de cursos" — CTA secundário (Azul Pinguim).
   Touch target ≥ 44px garantido via min-height. */
.header__plataforma {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--cor-azul-pinguim);
  color: #fff;
  font-size: 14px;
  font-weight: var(--peso-semibold);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background var(--transicao-padrao),
              transform var(--transicao-rapida),
              box-shadow var(--transicao-padrao);
}
.header__plataforma svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.header__plataforma:hover {
  background: var(--cor-azul-pinguim-claro);
  transform: translateY(-1px);
  box-shadow: var(--sombra-2);
}
.header__plataforma:active {
  background: var(--cor-azul-pinguim-escuro);
  transform: translateY(0);
}
.header__plataforma:focus-visible {
  outline: 2px solid var(--cor-laranja-energia);
  outline-offset: 2px;
}

/* ---- Mobile (≤639px): logo alinhado à esquerda (não centralizado) + altura
   reduzida pra liberar espaço pro botão "Plataforma" à direita SEM sobreposição.
   Feedback USER 2026-05-24 (R1): em ≤400px o logo centralizado (80px altura =
   ~400px largura) sobrepunha o botão. Solução: logo sai do centro, alinha
   à esquerda do container, altura cai pra 40px (largura ~200px).
   Feedback USER 2026-05-24 (R2): 40px ficou pequeno demais. Logo sobe pra 64px
   (+60%) pra ganhar presença visual próxima do desktop (sem ser idêntico).
   Pra acomodar SEM sobreposição: botão "Plataforma" colapsa pra ícone-only JÁ
   em ≤639px (antes só ≤479px), header sobe de 64 → 80px. Sanity-check 640px:
   logo 64px ≈ 320px + gap 8 + botão 44 = 372px no espaço útil de 608px (640 -
   32 padding). Folga confortável. */
@media (max-width: 639px) {
  .header { height: 80px; }
  .header[data-scrolled="true"] { height: 68px; }
  .header__inner {
    justify-content: space-between;
  }
  .header__logo {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }
  .header__logo img {
    height: 64px;
  }
  /* Botão "Plataforma" vira ícone-only desde ≤639px (não só em ≤479px).
     Mantém touch target 44x44 + a11y via texto .sr-only. */
  .header__plataforma {
    padding: 0 12px;
    width: 44px;
    justify-content: center;
  }
  .header__plataforma span {
    /* esconde visualmente, mantém a11y */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---- Mobile estreito (≤479px): logo cai pra 52px (vs 36px R1, +44%).
   Motivo de não manter 56px sugerido no briefing: em viewport 360px (iPhone
   SE/12 mini), logo 56px ≈ 280px largura + gap 8 + botão 44 = 332px num
   espaço útil de 328px (360 - 32 padding) — estoura por 4px. Com 52px =
   ~260 + 8 + 44 = 312px ✓ cabe com folga de 16px. Header acompanha 80→72px. */
@media (max-width: 479px) {
  .header { height: 72px; }
  .header[data-scrolled="true"] { height: 64px; }
  .header__logo img {
    height: 52px;
  }
}

@media (min-width: 1024px) {
  .header { height: 128px; }
  .header[data-scrolled="true"] { height: 104px; }
  .header__logo img { height: 96px; }
}

/* ============================================================
   5. SEÇÃO HERO
   ============================================================ */

/* ============================================================
   HERO v2 — FULL-BLEED BACKGROUND (2026-05-29)
   Substitui o layout split (texto esquerda / foto retrato direita).
   Background: Pinguim escrevendo parábola na lousa, com overlay
   gradient escuro pra legibilidade do H1/sub/marcadores/microcopy.
   CSS antigo do split-layout comentado mais abaixo (ver bloco
   "LEGADO v1 — comentado pra rollback").
   ============================================================ */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* iOS safe — desconta nav bars */
  overflow: hidden;
  background: #0E0F12; /* cor de base atrás da imagem (fallback) */
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
}
.hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center; /* base: foco no Pinguim/lousa do lado direito (desktop refina abaixo) */
  transform-origin: right center; /* zoom ancorado à direita pra empurrar Pinguim pro terço direito */
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(14, 15, 18, 0.55) 0%,
    rgba(14, 15, 18, 0.75) 45%,
    rgba(14, 15, 18, 0.92) 100%);
}

/* CONTAINER da página: mesmo sistema do .stats-band__inner / .bancas__inner
   (max-width: var(--container-max) 1200px + margin-inline auto + padding-inline
   var(--espaco-lg)). Garante que a borda esquerda do texto do Hero ALINHE
   exatamente com o conteúdo da seção seguinte. Refator 2026-05-29. */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: left;
  /* padding-top maior pra escapar do header sticky (88-104px mobile, 96-120px desktop) */
  padding: 140px var(--espaco-lg) var(--espaco-3xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* bloco de texto ancorado à esquerda do container */
  min-height: 100vh;
  min-height: 100svh;
}
/* Bloco de texto interno: limita a largura de leitura sem deslocar a borda
   esquerda (que segue o padding-inline do container = grid da página). */
.hero__h1,
.hero__sub,
.hero__marcadores,
.hero__microcopy { max-width: 640px; }
@media (min-width: 1024px) {
  .hero__content { padding-top: 180px; }
}

.hero__h1 {
  font-size: var(--tipo-hero-mobile);
  line-height: var(--tipo-hero-altura);
  letter-spacing: var(--tipo-hero-letra);
  font-weight: var(--peso-bold);
  color: var(--texto-principal-claro);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
/* Destaque "PAULISTA" — mesmo gradient azul da assinatura visual do site
   (#10BCFB -> #4181FF), padrao usado no logo do Curso do Mes. */
.hero__h1-paulista {
  background: linear-gradient(135deg, #10BCFB 0%, #4181FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: inherit;
}
/* LEGADO (2026-05-29): .hero__sub removida do HTML — a subheadline (trio
   paulista) foi substituída pelos 3 marcadores como apoio do H1. Regras
   mantidas órfãs sem risco; reativar exige recolocar o <p> no markup. */
.hero__sub {
  margin-top: var(--espaco-lg);
  font-size: var(--tipo-corpo-grande);
  line-height: var(--tipo-corpo-grande-altura);
  color: var(--texto-secundario-claro);
  max-width: 620px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}
.hero__sub strong {
  font-weight: 700;
  color: inherit;
}
/* v2.x (2026-05-29): subheadline <p> removida. Os 3 marcadores agora ocupam
   o papel de apoio direto do H1 — margin-top reduzido de --espaco-xl (32px)
   pra --espaco-lg (24px), mesma respiração que a antiga .hero__sub tinha. */
.hero__marcadores {
  margin-top: var(--espaco-lg);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  align-items: flex-start; /* texto à esquerda dos próprios marcadores, mas grupo centralizado pelo flex pai */
  text-align: left;
}
.hero__marcador {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-sm);
  color: var(--texto-principal-claro);
  /* v2.x (2026-05-29): bullets promovidos a apoio do H1 (subheadline removida).
     font-size de 16px (--tipo-corpo) -> 17px pra ganhar presença sem
     competir com o H1. */
  font-size: 17px;
  line-height: 1.45;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.hero__marcador-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--cor-laranja-energia);
  margin-top: 2px;
}
.hero__microcopy {
  margin-top: var(--espaco-xl);
  font-size: clamp(20px, 1.2vw + 0.9rem, 26px);
  line-height: 1.35;
  font-weight: 500;
  color: var(--texto-principal-claro);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
.hero__microcopy-destaque {
  font-weight: 700;
  letter-spacing: 0.01em;
  /* Gradient text laranja -> branco, mesmo padrao do curso-mes__h2 (v2.0 R2).
     Fallback solido em navegadores sem background-clip:text. */
  color: var(--cor-laranja-energia);
  background: linear-gradient(135deg,
    var(--cor-laranja-energia) 0%,
    var(--cor-laranja-clara) 60%,
    var(--cor-branco-limpo) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .hero__microcopy-destaque {
    color: var(--cor-laranja-energia);
    -webkit-text-fill-color: currentColor;
  }
}

/* ============================================================
   LEGADO v1 — HERO SPLIT (comentado pra rollback em 2026-05-29).
   .hero__figure / .hero__foto / .hero__grid não existem mais no HTML.
   Mantido aqui só pra reverter rápido se o full-bleed for descartado.
   ============================================================ */
/*
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: var(--espaco-2xl); align-items: center; width: 100%; max-width: var(--container-max); }
.hero__texto { display: flex; flex-direction: column; }
.hero__figure {
  position: relative;
  width: 100%;
  max-height: 380px;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio-xl);
  overflow: hidden;
  box-shadow: var(--sombra-3);
}
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 50%, var(--cor-preto-cosmos-70) 100%);
  pointer-events: none;
}
.hero__figure picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
*/

/* ---- Mobile pequeno (≤479px) ── tipografia mais sóbria.
   Feedback USER 2026-05-24: "as fontes não precisam ser grandes na
   visualização mobile". Reduz hero H1, subheadline, marcadores e
   microcopy do hero proporcionalmente. Hierarquia preservada:
   H1 (28px) > microcopy (18px) > subheadline/marcadores (15-16px). */
@media (max-width: 479px) {
  /* LEGADO v1: padding da .hero (section) — agora controlado pelo .hero__content. Comentado em 2026-05-29.
  .hero {
    padding-top: 96px;
    padding-bottom: var(--espaco-2xl);
    padding-inline: var(--espaco-lg);
  }
  */
  /* Hero v2 mobile pequeno: padding-top do content reduzido pra header de 72px (≤479px). */
  .hero__content { padding-top: 110px; padding-bottom: var(--espaco-2xl); }
  .hero__h1 {
    font-size: var(--tipo-hero-mobile-pequeno);
  }
  .hero__sub {
    margin-top: var(--espaco-md);
    font-size: var(--tipo-subheadline-mobile-pequeno);
  }
  .hero__marcadores {
    /* v2.x: bullets como apoio do H1 — herda a respiração que a .hero__sub
       tinha no mobile pequeno (--espaco-md). */
    margin-top: var(--espaco-md);
    gap: var(--espaco-sm);
  }
  .hero__marcador {
    font-size: var(--tipo-marcador-mobile-pequeno);
  }
  .hero__marcador-icon {
    width: 18px;
    height: 18px;
  }
  .hero__microcopy {
    margin-top: var(--espaco-lg);
    font-size: var(--tipo-microcopy-mobile-pequeno);
  }
  /* F2 (auditoria mobile 2026-05-28): max-height removido. Aspect-ratio 4/5
     opera livre — foto ganha presença e nao fica esmagada em telas grandes. */
}

/* Mobile (≤768px) — foto portrait 720x1280, Pinguim centralizado no topo.
   Texto alinhado à esquerda e ancorado na METADE INFERIOR (área escura),
   deixando o Pinguim visível em cima. Overlay VERTICAL forte (não horizontal). */
@media (max-width: 768px) {
  .hero__bg img {
    object-position: center center;
    transform: none; /* sem zoom horizontal em portrait — Pinguim já centralizado */
  }
  .hero__content {
    justify-content: flex-end; /* conteúdo desce pra base, sobre a área escura */
    /* align-items:flex-start e padding-inline herdados do base = mesma borda
       esquerda da seção seguinte. */
  }
  /* texto pode usar a largura toda da coluna em portrait */
  .hero__h1,
  .hero__sub,
  .hero__marcadores,
  .hero__microcopy { max-width: 100%; }
  .hero__overlay {
    /* base forte (texto embaixo) + topo translúcido (Pinguim visível em cima) */
    background: linear-gradient(180deg,
      rgba(14, 15, 18, 0.38) 0%,
      rgba(14, 15, 18, 0.62) 38%,
      rgba(14, 15, 18, 0.90) 70%,
      rgba(14, 15, 18, 0.97) 100%);
  }
}

@media (min-width: 640px) {
  .hero__h1 { font-size: var(--tipo-hero-tablet); }
  /* LEGADO v1: split grid 1fr 1fr / hero__figure 3/4 — comentado em 2026-05-29.
     .hero__grid { grid-template-columns: 1fr 1fr; }
     .hero__figure { aspect-ratio: 3 / 4; max-height: 480px; } */
}

/* ---- Desktop (≥769px) ── HERO ASSIMÉTRICO (fix 2026-05-29).
   Feedback USER: texto centralizado sobrepunha o rosto do Pinguim.
   Solução: texto na METADE ESQUERDA, Pinguim enquadrado à DIREITA via
   object-position + zoom, e overlay horizontal que escurece a esquerda
   (legibilidade do texto) e revela a direita (Pinguim nítido). ---- */
@media (min-width: 769px) {
  /* .hero__content já é o container da página (1200px + auto + padding-inline),
     com align-items:flex-start. O texto começa na MESMA linha vertical que o
     conteúdo da .stats-band logo abaixo. Aqui só refinamos a largura de leitura. */
  .hero__h1,
  .hero__sub,
  .hero__marcadores,
  .hero__microcopy { max-width: 560px; }

  /* zoom ancorado à direita: Pinguim avança pro terço direito e ganha presença */
  .hero__bg img {
    object-position: 78% center;
    transform: scale(1.10);
  }

  /* overlay HORIZONTAL reforçado: foto clara + lousa branca exigem mais peso à
     esquerda pra legibilidade WCAG AA. Direita revela o Pinguim. Base coesa. */
  .hero__overlay {
    background:
      linear-gradient(90deg,
        rgba(14, 15, 18, 0.95) 0%,
        rgba(14, 15, 18, 0.82) 45%,
        rgba(14, 15, 18, 0.46) 72%,
        rgba(14, 15, 18, 0.20) 100%),
      linear-gradient(180deg,
        rgba(14, 15, 18, 0.15) 0%,
        rgba(14, 15, 18, 0) 50%,
        rgba(14, 15, 18, 0.50) 100%);
  }
}

@media (min-width: 1024px) {
  /* v2.0 Round 1.1 (refino pós-feedback USER 2026-05-21):
     hero desktop reduzido de 88px pra 68px (peso 800 mantido). Em 88px
     quebrava em 7 linhas e empurrava bullets pra baixo da dobra. Em 68px
     com tracking -0.035em o headline fecha em ~3 linhas no 1440px. */
  .hero__h1 {
    font-size: var(--tipo-hero-desktop-v2-refined);
    font-weight: var(--peso-extrabold);
    letter-spacing: -0.035em;
    line-height: var(--tipo-display-altura);
  }
  .hero__sub {
    font-size: var(--tipo-subheadline-desktop);
    line-height: var(--tipo-subheadline-desktop-altura);
    font-weight: var(--peso-regular);
    max-width: 640px;
  }
  /* LEGADO v1: split grid 1.35fr 1fr / hero__figure max-height 560px — comentado em 2026-05-29.
     .hero__grid { grid-template-columns: 1.35fr 1fr; padding-inline: 0; }
     .hero__figure { max-height: 560px; } */
}

/* ============================================================
   6. SEÇÃO BANCAS (Especialista nesses vestibulares)
   ============================================================ */

.bancas {
  position: relative;
  background: var(--mesh-autoridade);
  padding-block: var(--espaco-3xl);
  overflow: hidden;
}
.bancas__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--espaco-lg);
  text-align: center;
}
.bancas__h2 {
  margin-top: var(--espaco-sm);
  font-size: var(--tipo-h3-tamanho);
  line-height: var(--tipo-h3-altura);
  letter-spacing: var(--tipo-h3-letra);
  font-weight: var(--peso-bold);
  color: var(--texto-principal-claro);
  max-width: 720px;
  margin-inline: auto;
}
.bancas__grid {
  margin-top: var(--espaco-2xl);
  display: grid;
  /* v2.2: grid uniforme. Mobile 2x4, tablet/desktop 4x2 — sem cards orfaos
     na ultima linha (antes era 6+2 centralizados, USER reprovou).
     F10 (auditoria mobile 2026-05-28): gap menor (--espaco-sm) em ≤479px
     pros cards respirarem sem competir com o resto da pagina. */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaco-sm);
  justify-content: center;
}
/* v2.0 R2-fix: hibrido card glass dark + logo em pilula branca interna.
   Motivo: PNGs raster com simbolos coloridos sobre fundo branco nao toleram
   filter: brightness(0) invert(1) (vira retangulo branco solido). Solucao:
   card mantem glass dark, logo respira em pilula branca arredondada interna. */
.bancas__card {
  /* v2.4: zero respiro interno — logo preenche todo o card. Como o SVG tem
     fundo branco e o card tambem e branco, eles fundem e o border-radius
     continua visivel nos 4 cantos (clip via overflow: hidden).
     M3 (auditoria mobile 2026-05-28): 8px de padding pra dar leve respiro
     entre logo e borda. Border-radius continua visivel via overflow:hidden. */
  background: var(--cor-branco-limpo, #fff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--raio-lg);
  padding: 8px;
  overflow: hidden;
  /* Aspect 4:3 em todas as breakpoints — uniforme, sem layout reflowing. */
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transicao-padrao) var(--easing-suave),
              border-color var(--transicao-padrao) var(--easing-suave),
              box-shadow var(--transicao-padrao) var(--easing-suave);
}
.bancas__card:hover {
  transform: translateY(-2px);
  border-color: var(--cor-laranja-energia-30, rgba(243, 148, 25, 0.3));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.bancas__card img {
  /* v2.4: logo preenche 100% do card. object-fit: contain garante que nao
     ha distorcao — o SVG escala respeitando proporcao e o fundo branco do
     SVG funde com o card branco, mantendo border-radius visivel via clip. */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  transition: transform var(--transicao-padrao) var(--easing-suave);
}
.bancas__card:hover img { transform: scale(1.02); }
/* Disponivel pra futuro: aplicar essa classe num li.bancas__card
   se quiser destacar uma logo individual com card branco completo
   (ao inves da pilula interna padrao). Nao usada nas 8 logos atuais. */
.bancas__card--logo-color {
  background: var(--cor-branco-limpo);
  border-color: transparent;
}
.bancas__card--logo-color img {
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.bancas__card--logo-color:hover {
  background: var(--cor-branco-limpo);
  border-color: var(--cor-laranja-energia-30);
}
/* v2.1: classe legada — mantida pra nao quebrar HTML, mas sem efeito extra.
   Os 8 SVGs definitivos sao uniformes (viewBox 500x500), nao precisam mais
   de override individual. */
.bancas__card--logo-padded img {
  max-width: 100%;
  max-height: 100%;
}

@media (min-width: 640px) {
  .bancas { padding-block: var(--espaco-4xl); }
  .bancas__h2 { font-size: var(--tipo-h2-tamanho); line-height: var(--tipo-h2-altura); letter-spacing: var(--tipo-h2-letra); }
  /* v2.2: 4 colunas em tablet/desktop — grid 4x2 uniforme. Sem orfaos. */
  .bancas__grid { grid-template-columns: repeat(4, 1fr); gap: var(--espaco-md); }
  .bancas__card { padding: 8px; }
}
@media (min-width: 1024px) {
  .bancas__grid {
    /* v2.2: mantemos 4 colunas no desktop pra preservar grid 4x2 balanceado.
       USER reprovou layout 6+2 com cards centralizados na segunda linha. */
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espaco-lg);
  }
  .bancas__card { padding: 8px; }
}

/* ============================================================
   7. SEÇÃO DEPOIMENTOS
   ============================================================ */

.depoimentos {
  position: relative;
  background:
    radial-gradient(ellipse 600px 400px at 90% 50%, rgba(243, 148, 25, 0.04), transparent 65%),
    var(--cor-branco-suave);
  padding-block: var(--espaco-3xl);
  overflow: hidden;
}
.depoimentos__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--espaco-lg);
  text-align: center;
}
.depoimentos__h2 {
  margin-top: var(--espaco-sm);
  font-size: var(--tipo-h3-tamanho);
  line-height: var(--tipo-h3-altura);
  letter-spacing: var(--tipo-h3-letra);
  font-weight: var(--peso-bold);
  color: var(--texto-principal-escuro);
  max-width: 720px;
  margin-inline: auto;
}
.depoimentos__grid {
  margin-top: var(--espaco-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-lg);
  text-align: left;
}
.depoimentos__grid > li {
  display: flex;
  justify-content: center;
}
/* v2.0 R2: glass leve sobre fundo claro (translucido 70% + blur 8px) */
.depoimento {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(14, 15, 18, 0.06);
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  transition: transform var(--transicao-padrao) var(--easing-suave),
              box-shadow var(--transicao-padrao) var(--easing-suave),
              border-color var(--transicao-padrao) var(--easing-suave);
}
.depoimento:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-3);
  border-color: rgba(14, 15, 18, 0.12);
}
.depoimento__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
}
.depoimento__caption {
  padding: var(--espaco-lg);
}
.depoimento__nome {
  font-size: 16px;
  font-weight: var(--peso-semibold);
  color: var(--texto-principal-escuro);
}
.depoimento__contexto-inline {
  font-weight: var(--peso-regular);
  color: var(--texto-secundario-escuro);
}
.depoimento__contexto {
  margin-top: var(--espaco-xs);
  font-size: var(--tipo-pequeno);
  color: var(--texto-secundario-escuro);
  line-height: 1.5;
}

@media (min-width: 640px) {
  .depoimentos { padding-block: var(--espaco-4xl); }
  .depoimentos__h2 { font-size: var(--tipo-h2-tamanho); line-height: var(--tipo-h2-altura); letter-spacing: var(--tipo-h2-letra); }
  .depoimentos__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .depoimentos__grid > li { justify-content: stretch; }
  .depoimento { max-width: none; }
}
@media (min-width: 1024px) {
  .depoimentos__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   8. SEÇÃO CURSO COMEÇANDO AGORA (vitrine do Semi Paulista — azul cosmos)
   Substitui o antigo .cta-meio (decisão USER v4.3 da copy).
   ============================================================ */

/* v2.0 R2: container vira glass premium central, com mesh duplo de fundo
   (azul topo + laranja base) e borda gradient luminosa. */
.curso-mes {
  position: relative;
  background: var(--mesh-oferta);
  padding-block: var(--espaco-3xl);
  text-align: center;
  overflow: hidden;
}
.curso-mes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noise-overlay);
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.curso-mes__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin-inline: auto;
  padding: var(--espaco-2xl) var(--espaco-lg);
  background: rgba(20, 24, 38, 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-radius: var(--raio-xl);
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* Borda gradient luminosa via pseudo-elemento (tecnica padding+mask) */
.curso-mes__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raio-xl);
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 179, 71, 0.45) 0%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(91, 143, 255, 0.35) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Espaçamento ritmo: eyebrow → 16px → H2 → 8px → sub → 32px → desc → 32px → bullets → 40px → CTAs → 16px → microcopy */
.curso-mes .eyebrow--laranja {
  margin-bottom: var(--espaco-md);
}

.curso-mes__h2 {
  /* v2.1: container do logo SVG inline. Texto "Semi Paulista" preservado
     em <span class="sr-only"> para SEO e leitores de tela.
     Flexbox para centralizar o SVG inline horizontalmente (display:block
     anterior nao respeitava text-align herdado). */
  margin: 0;
  line-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.curso-mes__logo {
  /* SVG inline com viewBox 446x245 (aspect ratio ~1.82:1). Altura controla
     a escala — largura segue automaticamente. Cores ja embutidas no SVG:
     branco no "SEM" e gradient azul (#10BCFB -> #4181FF) no "PAULISTA". */
  display: block;
  height: clamp(72px, 9vw + 1rem, 120px);
  width: auto;
  max-width: 100%;
  /* Sutil glow azul pra integrar com o fundo Azul Cosmos. */
  filter: drop-shadow(0 4px 16px rgba(16, 188, 251, 0.18));
}

.curso-mes__sub {
  margin-top: var(--espaco-xs);
  font-size: var(--tipo-corpo-grande);
  line-height: var(--tipo-corpo-grande-altura);
  color: var(--texto-secundario-claro);
  font-weight: var(--peso-regular);
}

.curso-mes__desc {
  margin-top: var(--espaco-xl);
  margin-inline: auto;
  max-width: 680px;
  font-size: var(--tipo-corpo-grande);
  line-height: var(--tipo-corpo-grande-altura);
  color: var(--texto-secundario-claro);
}

.curso-mes__bullets {
  list-style: none;
  margin: var(--espaco-xl) auto 0;
  padding: 0;
  max-width: 680px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}
.curso-mes__bullets li {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-sm);
  color: var(--texto-principal-claro);
  font-size: var(--tipo-corpo);
  line-height: var(--tipo-corpo-altura);
}
.curso-mes__bullet-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--cor-laranja-energia);
}

/* Grupo de CTAs compartilhado: oferta principal (.curso-mes) + bandas
   recorrentes (.cta-band). Regra única (DRY) garante o mesmo
   comportamento column→row e full-width mobile sem divergência. */
.curso-mes__ctas,
.cta-band__ctas {
  margin-top: var(--espaco-2xl);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--espaco-md);
}
.curso-mes__ctas .btn,
.cta-band__ctas .btn {
  justify-content: center;
  width: 100%;
}

.curso-mes__microcopy {
  margin-top: var(--espaco-md);
  font-size: var(--tipo-pequeno);
  line-height: var(--tipo-pequeno-altura);
  color: var(--texto-secundario-claro);
}

@media (min-width: 640px) {
  .curso-mes { padding-block: var(--espaco-4xl); }
  .curso-mes__inner { padding-inline: var(--espaco-lg); }

  .curso-mes__ctas,
  .cta-band__ctas {
    flex-direction: row;
    flex-wrap: wrap;        /* se os 2 botoes nao couberem, empilham — nunca vazam a borda */
    justify-content: center;
    align-items: center;
    gap: var(--espaco-md);
  }
  .curso-mes__ctas .btn,
  .cta-band__ctas .btn {
    width: auto;
  }
}

/* ============================================================
   8.5 CTA RECORRENTE — .cta-band (componente DRY)
   Dois blocos de reforço de oferta: banda leve (após depoimentos)
   e card glass de fechamento (após FAQ). Reusa tokens existentes,
   o .btn primário/outline e a regra compartilhada .cta-band__ctas.
   Zero cor ou fonte nova.
   ============================================================ */
.cta-band {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra horizontalmente cada filho (headline + grupo CTAs) */
  justify-content: center;
  text-align: center;
}
/* Reforco anti-regressao: cada filho direto da banda fica centrado no
   eixo cruzado mesmo se algum reset futuro mexer no align-items.
   .cta-band--leve mantem o fundo full-bleed (a propria banda e full-width);
   apenas o CONTEUDO e que e limitado/centrado. */
.cta-band > * {
  align-self: center;
  margin-inline: auto;
}
/* Conteudo de texto centralizado e legivel (token --container-conteudo
   nao existe; usamos valor explicito coerente com o resto da pagina). */
.cta-band__headline,
.cta-band__sub {
  max-width: 620px;
}
.cta-band__headline {
  margin: 0;
  font-size: var(--tipo-subheadline-mobile-pequeno); /* 16px mobile */
  line-height: 1.35;
  font-weight: var(--peso-bold);
  letter-spacing: var(--tipo-h3-letra);
  color: var(--texto-principal-claro);
  text-wrap: balance;
}
.cta-band__sub {
  margin: var(--espaco-sm) 0 0;
  font-size: var(--tipo-pequeno);
  line-height: var(--tipo-pequeno-altura);
  color: var(--texto-secundario-claro);
}

/* Lista "3 jeitos de usar a plataforma" (.cta-band--leve). Reusa o
   padrao visual de .curso-mes__bullets: bloco centrado de largura
   limitada com o TEXTO alinhado a esquerda (lista longa centralizada
   fica ruim de ler) + check laranja a esquerda de cada item. Mantem a
   banda leve — sem card, so respiro vertical. */
.cta-band__usos {
  list-style: none;
  margin: var(--espaco-lg) auto 0;
  padding: 0;
  width: 100%;
  max-width: 520px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}
.cta-band__usos li {
  display: flex;
  align-items: flex-start;
  gap: var(--espaco-sm);
  color: var(--texto-secundario-claro);
  font-size: var(--tipo-corpo);
  line-height: var(--tipo-corpo-altura);
}
.cta-band__usos li strong {
  color: var(--texto-principal-claro);
  font-weight: var(--peso-bold);
}
.cta-band__uso-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  color: var(--cor-laranja-energia);
}
.cta-band__fecho {
  max-width: 520px;
  margin: var(--espaco-lg) auto 0;
  font-size: var(--tipo-pequeno);
  line-height: var(--tipo-pequeno-altura);
  color: var(--texto-secundario-claro);
}
/* O pai .cta-band e flex/align-items:center, entao o grupo de CTAs
   precisa esticar ate o limite util no mobile (botoes full-width
   empilhados) e, no desktop, voltar a largura automatica + centralizado
   (a regra compartilhada com .curso-mes__ctas ja faz justify-content:
   center >=640px). Largura cap pra nao virar botao gigante. */
.cta-band__ctas {
  width: 100%;
  max-width: 420px;
}
@media (min-width: 640px) {
  .cta-band__ctas {
    width: auto;
    max-width: none;
  }
}

/* --- Variante LEVE: banda sobre o fundo escuro, sem card pesado --- */
.cta-band--leve {
  position: relative;
  padding-block: var(--espaco-2xl);
  padding-inline: var(--espaco-lg);
  background:
    radial-gradient(ellipse 700px 400px at 50% 50%, rgba(243, 148, 25, 0.05), transparent 65%),
    var(--cor-preto-cosmos);
  border-top: 1px solid var(--cor-borda-glass);
  border-bottom: 1px solid var(--cor-borda-glass);
}

/* --- Variante FECHAMENTO: card glass premium + glow laranja sutil --- */
.cta-band--fechamento {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin-block: var(--espaco-3xl);
  margin-inline: auto;
  padding: var(--espaco-2xl) var(--espaco-lg);
  background: var(--glass-card-bg);
  -webkit-backdrop-filter: var(--glass-card-blur);
  backdrop-filter: var(--glass-card-blur);
  border: 1px solid var(--cor-borda-glass-forte);
  border-radius: var(--raio-xl);
  box-shadow: var(--glow-cta-primary-soft), var(--sombra-3);
}
/* glow laranja difuso atrás do card de fechamento */
.cta-band--fechamento::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(243, 148, 25, 0.10), transparent 70%);
  pointer-events: none;
}

@media (min-width: 640px) {
  .cta-band__headline {
    font-size: var(--tipo-h4-tamanho); /* 22px — escala de subheadline */
    line-height: var(--tipo-h4-altura);
  }
  .cta-band--leve {
    padding-block: var(--espaco-3xl);
  }
  .cta-band--fechamento {
    padding: var(--espaco-3xl) var(--espaco-2xl);
  }
}

/* ============================================================
   9. SEÇÃO QUEM É O PINGUIM (bio + 3 stats)
   ============================================================ */

.quem {
  position: relative;
  background:
    radial-gradient(ellipse 700px 400px at 50% 100%, rgba(243, 148, 25, 0.05), transparent 65%),
    var(--cor-branco-limpo);
  padding-block: var(--espaco-3xl);
  overflow: hidden;
}
.quem__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--espaco-lg);
}
.quem__eyebrow {
  text-align: center;
}
.quem__bio {
  margin-top: var(--espaco-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-2xl);
  align-items: center;
}
.quem__figure {
  margin: 0;
  border-radius: var(--raio-lg);
  overflow: hidden;
  box-shadow: var(--sombra-2);
  aspect-ratio: 4 / 5;
  max-height: 400px;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 340px;
}
.quem__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.quem__texto {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}
.quem__h2 {
  font-size: var(--tipo-h3-tamanho);
  line-height: var(--tipo-h3-altura);
  letter-spacing: var(--tipo-h3-letra);
  font-weight: var(--peso-bold);
  color: var(--texto-principal-escuro);
  max-width: 540px;
}
.quem__texto p {
  font-size: var(--tipo-corpo-grande);
  line-height: var(--tipo-corpo-grande-altura);
  color: var(--texto-principal-escuro);
  max-width: 540px;
}
.quem__assinatura {
  font-weight: var(--peso-semibold);
  color: var(--texto-secundario-escuro);
}
@media (min-width: 640px) {
  .quem { padding-block: var(--espaco-4xl); }
  .quem__h2 { font-size: var(--tipo-h2-tamanho); line-height: var(--tipo-h2-altura); letter-spacing: var(--tipo-h2-letra); }
}
@media (min-width: 1024px) {
  .quem__bio { grid-template-columns: 1fr 1.4fr; }
  .quem__figure { max-height: 520px; max-width: none; }
}

/* ============================================================
   10. SEÇÃO FAQ (Preto Cosmos — princípio escuro→claro→escuro)
   ============================================================ */

.faq {
  position: relative;
  background: var(--mesh-faq);
  padding-block: var(--espaco-3xl);
  overflow: hidden;
}
.faq__inner {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--espaco-lg);
  text-align: center;
}
.faq__h2 {
  margin-top: var(--espaco-sm);
  font-size: var(--tipo-h3-tamanho);
  line-height: var(--tipo-h3-altura);
  letter-spacing: var(--tipo-h3-letra);
  font-weight: var(--peso-bold);
  color: var(--texto-principal-claro);
  max-width: 720px;
  margin-inline: auto;
}
.faq__lista {
  margin-top: var(--espaco-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
  text-align: left;
}
/* v2.0 R2: glass dark sutil, blur leve (10px) pra nao matar performance
   em 10 itens simultaneos. Borda translucida padrao, laranja no aberto. */
.faq__item {
  background: rgba(255, 255, 255, 0.03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--raio-lg);
  overflow: hidden;
  transition: border-color var(--transicao-padrao) var(--easing-suave),
              background var(--transicao-padrao) var(--easing-suave);
}
.faq__item:hover {
  border-color: var(--cor-laranja-energia-30);
}
.faq__item[data-open="true"] {
  border-color: var(--cor-laranja-energia);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 32px rgba(243, 148, 25, 0.12);
}
.faq__heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
.faq__pergunta {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espaco-md);
  padding: var(--espaco-md) var(--espaco-lg);
  min-height: 56px;
  text-align: left;
  font-size: 16px;
  font-weight: var(--peso-semibold);
  line-height: 1.4;
  color: var(--texto-principal-claro);
}
.faq__pergunta:focus-visible {
  outline: 2px solid var(--cor-laranja-energia);
  outline-offset: 4px;
  border-radius: var(--raio-lg);
}
.faq__indicador {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--cor-laranja-energia);
  transition: transform 200ms ease-out;
}
.faq__item[data-open="true"] .faq__indicador {
  transform: rotate(45deg); /* + vira × */
}
.faq__resposta {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--anim-accordion) ease-out;
  padding-inline: var(--espaco-lg);
  color: var(--texto-secundario-claro);
}
.faq__item[data-open="true"] .faq__resposta {
  max-height: 800px;
  padding-block: 0 var(--espaco-md);
}
.faq__resposta p {
  font-size: 15px;
  line-height: 1.6;
}
.faq__bullets {
  margin-top: var(--espaco-sm);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  padding-left: var(--espaco-lg);
}
.faq__bullets li {
  position: relative;
  padding-left: var(--espaco-md);
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto-secundario-claro);
}
.faq__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background: var(--cor-laranja-energia);
  border-radius: 50%;
}

@media (min-width: 640px) {
  .faq { padding-block: var(--espaco-4xl); }
  .faq__h2 { font-size: var(--tipo-h2-tamanho); line-height: var(--tipo-h2-altura); letter-spacing: var(--tipo-h2-letra); }
  .faq__pergunta {
    padding: var(--espaco-lg) var(--espaco-xl);
    font-size: 18px;
  }
  .faq__resposta { padding-inline: var(--espaco-xl); }
  .faq__item[data-open="true"] .faq__resposta { padding-block: 0 var(--espaco-lg); }
  .faq__resposta p { font-size: 16px; }
  .faq__bullets { padding-left: var(--espaco-xl); }
  .faq__bullets li { font-size: 16px; }
}

/* ============================================================
   8.5 SEÇÃO AULA SEMANAL (captura de e-mail — form inline FullFunnel)
   Fundo dark on-brand (mesh-oferta), conteúdo centralizado, form
   em card de largura confortável com min-height reservado pra não
   colapsar antes do form_embed.js ajustar a altura do iframe.
   ============================================================ */
.aula-semanal {
  position: relative;
  background: var(--mesh-faq);
  padding-block: var(--espaco-3xl);
  text-align: center;
  overflow: hidden;
}
.aula-semanal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--noise-overlay);
  opacity: 0.35;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
}
.aula-semanal__inner {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin-inline: auto;
  padding-inline: var(--espaco-lg);
}
.aula-semanal__h2 {
  margin-top: var(--espaco-sm);
  font-size: var(--tipo-h3-tamanho);
  line-height: var(--tipo-h3-altura);
  letter-spacing: var(--tipo-h3-letra);
  font-weight: var(--peso-bold);
  color: var(--texto-principal-claro);
  max-width: 620px;
  margin-inline: auto;
}
.aula-semanal__sub {
  margin-top: var(--espaco-sm);
  margin-inline: auto;
  max-width: 560px;
  color: var(--texto-secundario-claro);
  font-size: 16px;
  line-height: 1.55;
}
.aula-semanal__form {
  margin-top: var(--espaco-2xl);
  margin-inline: auto;
  max-width: 560px;
  min-height: 460px;
}
.aula-semanal__form iframe {
  width: 100%;
  min-height: 460px;
  border: none;
  border-radius: var(--raio-lg);
}
.aula-semanal__nota {
  margin-top: var(--espaco-md);
  color: var(--texto-secundario-claro);
  font-size: 13px;
  text-align: center;
}

@media (min-width: 640px) {
  .aula-semanal { padding-block: var(--espaco-4xl); }
  .aula-semanal__h2 {
    font-size: var(--tipo-h2-tamanho);
    line-height: var(--tipo-h2-altura);
    letter-spacing: var(--tipo-h2-letra);
  }
}

/* ============================================================
   10.5 SEÇÃO DEPOIMENTOS EM VÍDEO (3 verticais 9:16 — Smartplayer)
   Bloco de prova social em vídeo posicionado entre #quem (branco) e
   #faq (cosmos com mesh). Fundo Preto Cosmos PURO (sem mesh) pra
   funcionar como respiro escuro entre os dois extremos. Os cards
   são placeholders estéticos aguardando o ID Smartplayer — quando
   colados, viram <iframe> ocupando o mesmo retângulo 9:16.
   ============================================================ */

.depo-videos {
  position: relative;
  background: var(--cor-preto-cosmos);
  padding-block: var(--espaco-3xl);
  overflow: hidden;
}
/* Pontinho de luz central sutil — gradient radial que dá profundidade
   sem competir com mesh-faq da seção seguinte. */
.depo-videos::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 700px 320px at 50% 0%, rgba(243, 148, 25, 0.06), transparent 60%),
    radial-gradient(ellipse 700px 320px at 50% 100%, rgba(91, 143, 255, 0.05), transparent 60%);
  pointer-events: none;
}
.depo-videos__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--espaco-lg);
  text-align: center;
}
.depo-videos__h2 {
  margin-top: var(--espaco-sm);
  font-size: var(--tipo-h3-tamanho);
  line-height: var(--tipo-h3-altura);
  letter-spacing: var(--tipo-h3-letra);
  font-weight: var(--peso-bold);
  color: var(--texto-principal-claro);
  max-width: 720px;
  margin-inline: auto;
}
.depo-videos__sub {
  margin-top: var(--espaco-md);
  font-size: var(--tipo-corpo-grande);
  line-height: var(--tipo-corpo-grande-altura);
  font-weight: var(--peso-medio);
  color: var(--texto-secundario-claro);
  max-width: 720px;
  margin-inline: auto;
}
.depo-videos__grid {
  margin-top: var(--espaco-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espaco-lg);
  justify-items: center;
}
.depo-videos__card {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--glass-card-bg);
  /* Borda laranja translúcida — separa visualmente os 3 cards do letterbox preto
     do iframe Scaleup, sem competir com a CTA principal da página.
     M9 (auditoria mobile 2026-05-28): reduzida de 50% pra 25% — menos
     chamativa, ainda separa do fundo. Glow hover mantem laranja pleno. */
  border: 2px solid rgba(243, 148, 25, 0.25);
  -webkit-backdrop-filter: var(--glass-card-blur);
          backdrop-filter: var(--glass-card-blur);
  box-shadow:
    var(--sombra-2),
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    0 0 18px var(--cor-laranja-energia-10);
  transition: transform var(--transicao-padrao) var(--easing-suave),
              border-color var(--transicao-padrao) var(--easing-suave),
              box-shadow var(--transicao-padrao) var(--easing-suave);
}
.depo-videos__card:hover {
  transform: translateY(-3px);
  border-color: var(--cor-laranja-energia);
  box-shadow:
    var(--sombra-3),
    0 0 0 1px rgba(0, 0, 0, 0.4) inset,
    var(--glow-laranja-sm);
}
/* Placeholder interno — ícone play + label "Vídeo N", centralizado no 9:16.
   Wash radial laranja MUITO sutil pra sinalizar "vai ter algo aqui",
   sem competir com CTA (sem glow, sem gradient cheio). */
.depo-videos__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-md);
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(243, 148, 25, 0.08), transparent 70%);
  color: var(--cor-laranja-energia-claro);
  transition: background var(--transicao-padrao) var(--easing-suave);
}
.depo-videos__card:hover .depo-videos__ph {
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(243, 148, 25, 0.14), transparent 65%);
}
.depo-videos__ph-icon {
  width: 64px;
  height: 64px;
  stroke-width: 1.5;
  opacity: 0.85;
  transition: transform var(--transicao-padrao) var(--easing-suave),
              opacity var(--transicao-padrao) var(--easing-suave);
}
.depo-videos__card:hover .depo-videos__ph-icon {
  transform: scale(1.06);
  opacity: 1;
}
.depo-videos__ph-label {
  font-family: var(--fonte-principal);
  font-size: 12px;
  font-weight: var(--peso-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-secundario-claro);
}
/* Card 9:16 (Reels-style) com iframe Scaleup nativo.
   IMPORTANTE: os vídeos fonte são 16:9 (Zoom-style PIP — Pinguim + aluno),
   mas o player Scaleup está configurado em canvas 9:16 e renderiza o vídeo
   numa faixa no TOPO do canvas (não centralizado), ocupando ~31% da altura.
   O resto do canvas é preto puro.
   TENTATIVA DE CROP CSS via transform:scale FALHOU em qualidade — escalar
   3× faz os rostos ficarem granulados (Zoom PIP é low-res) e a UI do player
   fica gigante. Decisão: manter o vídeo no tamanho/posição naturais que o
   Scaleup entrega, dentro do card 9:16. O letterbox preto fica controlado
   pelo overflow:hidden + background escuro do card.
   SOLUÇÃO DEFINITIVA é reconfigurar Scaleup OU regravar vídeos em 9:16
   nativo — registrada no design-rationale. */
.depo-videos__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.depo-videos__pendencia {
  margin-top: var(--espaco-lg);
  font-size: var(--tipo-pequeno);
  color: var(--texto-secundario-claro);
  opacity: 0.7;
}

@media (min-width: 640px) {
  .depo-videos { padding-block: var(--espaco-4xl); }
  .depo-videos__h2 {
    font-size: var(--tipo-h2-tamanho);
    line-height: var(--tipo-h2-altura);
    letter-spacing: var(--tipo-h2-letra);
  }
  .depo-videos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espaco-xl);
  }
  /* Em tablet, o 3º card ocupa as 2 colunas e centraliza, mantendo
     max-width pra não esticar — leitura natural "2 em cima, 1 embaixo". */
  .depo-videos__card:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: center;
  }
}
@media (min-width: 1024px) {
  .depo-videos__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaco-2xl);
    max-width: 1280px;
    margin-inline: auto;
  }
  .depo-videos__card {
    max-width: 360px;
  }
  /* Reset do override mobile/tablet — no desktop volta pro grid 3 colunas. */
  .depo-videos__card:nth-child(3) {
    grid-column: auto;
    justify-self: stretch;
  }
  .depo-videos__ph-icon {
    width: 72px;
    height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .depo-videos__card,
  .depo-videos__ph,
  .depo-videos__ph-icon {
    transition: none;
  }
  .depo-videos__card:hover {
    transform: none;
  }
  .depo-videos__card:hover .depo-videos__ph-icon {
    transform: none;
  }
}

/* ============================================================
   11. FOOTER
   ============================================================ */

.footer {
  position: relative;
  background:
    radial-gradient(ellipse 1000px 200px at 50% 0%, rgba(95, 107, 140, 0.06), transparent 80%),
    var(--cor-preto-cosmos);
  padding: var(--espaco-2xl) 0 var(--espaco-xl);
  color: var(--texto-principal-claro);
  overflow: hidden;
}
.footer__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--espaco-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--espaco-md);
}
.footer__logo {
  width: 140px;
  height: auto;
}
.footer__tagline {
  font-size: var(--tipo-pequeno);
  line-height: 1.55;
  color: var(--texto-secundario-claro);
  max-width: 480px;
  margin: 0;
}
/* "PAULISTA" no footer: mesmo gradiente azul do hero (#10BCFB -> #4181FF),
   mantendo a escala de tagline de rodape (nao herda o tamanho do H1). */
.footer__tagline-paulista {
  background: linear-gradient(135deg, #10BCFB 0%, #4181FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--espaco-md);
  margin-top: var(--espaco-xs);
}
.footer__links li {
  display: inline-flex;
}
.footer__links a {
  display: inline-block;
  padding: var(--espaco-xs) var(--espaco-sm);
  min-height: 44px;
  line-height: 28px;
  font-size: 14px;
  font-weight: var(--peso-semibold);
  color: var(--texto-principal-claro);
  transition: color var(--transicao-padrao);
}
.footer__links a:hover {
  color: var(--cor-laranja-energia);
}
.footer__links a:focus-visible {
  outline: 2px solid var(--cor-laranja-energia);
  outline-offset: 2px;
  border-radius: 4px;
}
.footer__copyright {
  margin-top: var(--espaco-sm);
  font-size: 12px;
  color: var(--texto-secundario-claro);
}

/* ============================================================
   12.5 FAIXA DE STATS NUMÉRICAS (PEÇA 5, v4.8 / DESIGN-SPEC v2.1 §3)
   Bloco silencioso de prova social após o Hero. 4 números secos sobre
   Preto Cosmos puro (sem mesh), gradient lines no topo e base, sepa-
   radores verticais 1px white/8 em desktop, grid 2x2 em mobile/tablet.
   Stagger de entrada via .reveal-stagger (delay nos 4 filhos).
   Princípios v2.0: cosmos puro, sem count-up, sem ícones, ritmo Linear.
   ============================================================ */

.stats-band {
  position: relative;
  background: var(--cor-preto-cosmos);
  padding-block: var(--espaco-lg);
  overflow: hidden;
}
.stats-band__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--espaco-lg);
  position: relative;
}

/* Gradient lines no topo e na base, 480px centralizadas. Token oficial
   --divider-gradient (laranja 40% no centro, transparente nas pontas). */
.stats-band__divider {
  width: 100%;
  max-width: 480px;
  height: 1px;
  margin: 0 auto;
  background: var(--divider-gradient);
}
.stats-band__divider--top { margin-bottom: var(--espaco-xl); }
.stats-band__divider--bottom { margin-top: var(--espaco-xl); }

/* Header do bloco de stats: container dos 2 badges B2 (v4.25).
   Layout flex com wrap — lado a lado no desktop, empilhados em mobile
   estreito quando a soma das larguras + gap exceder a viewport.
   O badge controla suas próprias margens internas via .section-badge,
   mas zeramos o margin-bottom interno aqui pra usar o gap do container
   como espaçamento consistente entre os 2 pills. */
.stats-band__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--espaco-lg);
}
.stats-band__header .section-badge {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .stats-band__header {
    gap: 16px;
  }
}

/* Grid mobile-first: 2x2 com gap 24px. Sem separadores em mobile. */
.stats-band__grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaco-lg);
  text-align: center;
}

.stats-band__item {
  padding: var(--espaco-sm) var(--espaco-xs);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-xs);
  /* Microinteração: hover sutil — text-shadow soft laranja no número.
     Sem lift (não é card clicável). */
  transition: opacity var(--transicao-padrao) var(--easing-suave);
}

/* Número — Inter 900, gradient text laranja-escuro → energia → claro.
   Gradient text com fallback de cor sólida via @supports.
   Tamanho mobile 48px, sobe pra 64px desktop.
   Clamp protege "100 mil" em viewports muito estreitos. */
.stats-band__numero {
  font-family: var(--fonte-principal);
  font-weight: var(--peso-black);
  /* F3 (auditoria mobile 2026-05-28): clamp menor + nowrap pra "+1,2K" e
     "+200K" caberem em 320px sem quebrar linha. */
  font-size: clamp(36px, 10vw, 48px);
  white-space: nowrap;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--cor-laranja-energia);
  background: linear-gradient(135deg,
    var(--cor-laranja-escuro) 0%,
    var(--cor-laranja-energia) 50%,
    var(--cor-laranja-clara) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: text-shadow var(--transicao-padrao) var(--easing-suave);
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .stats-band__numero {
    color: var(--cor-laranja-energia);
    -webkit-text-fill-color: currentColor;
  }
}

/* Label em caps, branco 80%, letter-spacing largo. */
.stats-band__label {
  font-size: 11px;
  line-height: 1.4;
  font-weight: var(--peso-semibold);
  letter-spacing: var(--tipo-overline-letra); /* 0.16em */
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.80);
  max-width: 18ch;
}

/* Micro-frase opcional, peso leve, branco 60%. */
.stats-band__micro {
  font-size: 13px;
  line-height: 1.45;
  font-weight: var(--peso-light);
  color: rgba(255, 255, 255, 0.60);
  max-width: 22ch;
}

/* M2 (auditoria mobile 2026-05-28): versao curta do micro em ≤375px pro
   stat 3 ("De aprovados") nao quebrar em 4 linhas em iPhone SE. */
.stats-band__micro-mobile  { display: inline; }
.stats-band__micro-desktop { display: none; }
@media (min-width: 376px) {
  .stats-band__micro-mobile  { display: none; }
  .stats-band__micro-desktop { display: inline; }
}

/* Hover sutil: glow soft no número via text-shadow. Sem lift. */
@media (hover: hover) and (pointer: fine) {
  .stats-band__item:hover .stats-band__numero {
    text-shadow: 0 0 24px rgba(243, 148, 25, 0.35);
  }
}

/* Stagger de entrada — usa o .reveal (IntersectionObserver via main.js
   adiciona .is-visible). Aqui cada filho herda esse estado e ganha
   transition-delay escalonado. */
.reveal-stagger .stats-band__item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transicao-cinematic) var(--easing-confiante),
              transform var(--transicao-cinematic) var(--easing-confiante);
}
.reveal-stagger.is-visible .stats-band__item:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible .stats-band__item:nth-child(2) { transition-delay: 80ms;  opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible .stats-band__item:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: translateY(0); }
.reveal-stagger.is-visible .stats-band__item:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: translateY(0); }

/* Tablet: mantém 2x2 com gap maior, sem separadores (spec §3.6). */
@media (min-width: 640px) {
  .stats-band { padding-block: var(--espaco-xl); }
  .stats-band__grid { gap: var(--espaco-xl); }
  .stats-band__numero { font-size: 56px; }
  .stats-band__label { font-size: 12px; }
}

/* Desktop: 4 colunas horizontais com separadores verticais 1px white/8,
   60% da altura via mask gradient vertical pra suavizar topo/base. */
@media (min-width: 1024px) {
  .stats-band { padding-block: var(--espaco-2xl); }
  .stats-band__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  .stats-band__item {
    position: relative;
    padding: var(--espaco-sm) var(--espaco-lg);
  }
  /* Separador vertical entre colunas — 1px white/8, ~60% da altura,
     fadeado nas pontas. Aplicado em todos menos no primeiro. */
  .stats-band__item + .stats-band__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      var(--cor-borda-glass) 25%,
      var(--cor-borda-glass) 75%,
      transparent 100%
    );
  }
  .stats-band__numero { font-size: 64px; }
  .stats-band__label { max-width: none; }
  .stats-band__micro { max-width: none; }
}

/* Reduced motion: stagger e hover-glow desligam. */
@media (prefers-reduced-motion: reduce) {
  .reveal-stagger .stats-band__item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .stats-band__item:hover .stats-band__numero {
    text-shadow: none;
  }
}

/* Utilitário visually-hidden — esconde visualmente mas mantém pro
   screen reader. Usado nos labels da faixa pra o leitor ouvir
   "34 anos de física..." em vez de só "anos de física...". */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   13. REVEAL ON SCROLL — fade-in-up via IntersectionObserver
   Stage inicial: opacity 0 + translateY(24px); ativo: anim-fade-in-up
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--anim-entrada) ease-out,
              transform var(--anim-entrada) ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   14. PREVENIR OVERFLOW HORIZONTAL EM MOBILE
   ============================================================ */

html, body {
  overflow-x: hidden;
}

/* ============================================================
   15. ROUND 3 v2.0 — GLOW PERMANENTE E MICROINTERACOES
   Glows estaticos (foto hero, logo), halos respirando (CTA, pulse-dot),
   hover-states elegantes (cards, CTAs, FAQ), progress bar de scroll,
   underline animado no footer. Tudo respeitando prefers-reduced-motion.
   ============================================================ */

/* ---- A1. LEGADO v1 — Halo dual no .hero__figure (foto retrato).
   Comentado em 2026-05-29: hero virou full-bleed, sem .hero__figure. ----
.hero__figure {
  box-shadow:
    var(--sombra-3),
    0 0 80px 20px rgba(243, 148, 25, 0.25),
    0 30px 120px rgba(63, 102, 194, 0.30);
}
*/

/* ---- A2. Logo Pinguim com glow soft sutil (some no scroll) ---- */
.header__logo img {
  filter: drop-shadow(0 0 12px rgba(243, 148, 25, 0.35));
  transition: filter var(--transicao-padrao) var(--easing-suave);
}
.header[data-scrolled="true"] .header__logo img {
  filter: none;
}

/* ============================================================
   B. HALOS ANIMADOS (respirando)
   ============================================================ */

/* ---- B1. CTA primario respirando (halo laranja oscilando)
   Round 4 refactor: era box-shadow animado (custo CPU/repaint).
   Agora: box-shadow base estatico (sombra "soft") + pseudo-elemento
   ::after com radial-gradient laranja escalando/opacidade (GPU).
   Performance friendly: animar transform/opacity nao causa repaint. */
.curso-mes .btn--cta-primario {
  position: relative;
  box-shadow: 0 8px 24px rgba(243, 148, 25, 0.35);
  isolation: isolate;
}
.curso-mes .btn--cta-primario::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at center,
    rgba(243, 148, 25, 0.55) 0%,
    rgba(243, 148, 25, 0.0) 65%);
  z-index: -1;
  opacity: 0.35;
  transform: scale(0.85);
  pointer-events: none;
  animation: cta-breathe 3s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes cta-breathe {
  0% {
    opacity: 0.30;
    transform: scale(0.85);
  }
  100% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}
.curso-mes .btn--cta-primario.is-paused::after {
  animation-play-state: paused;
}

/* ---- B2. Pulse dot (indicador "Curso comecando agora") ---- */
@keyframes pulse-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.55;
  }
}
@keyframes pulse-dot-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--cor-laranja-energia);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(243, 148, 25, 0.6);
  will-change: transform, opacity;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--cor-laranja-energia);
  animation: pulse-dot-ring 2s ease-out infinite;
  pointer-events: none;
}
.pulse-dot.is-paused,
.pulse-dot.is-paused::after,
.section-badge__dot.is-paused {
  animation-play-state: paused;
}

/* ============================================================
   C. HOVER STATES ELEGANTES (apenas em hover-capable devices)
   ============================================================ */

@media (hover: hover) {

  /* ---- C1. Cards de bancas: border-trace gradient + lift ---- */
  .bancas__card {
    position: relative;
    transition: transform 280ms var(--easing-cinematic),
                border-color 280ms var(--easing-cinematic),
                background 280ms var(--easing-cinematic),
                box-shadow 280ms var(--easing-cinematic);
  }
  .bancas__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--raio-lg);
    padding: 1px;
    background: linear-gradient(
      135deg,
      rgba(243, 148, 25, 0) 0%,
      rgba(243, 148, 25, 0.6) 50%,
      rgba(243, 148, 25, 0) 100%);
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 280ms var(--easing-cinematic);
    pointer-events: none;
  }
  .bancas__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sombra-2), 0 0 24px rgba(243, 148, 25, 0.18);
  }
  .bancas__card:hover::before {
    opacity: 1;
  }

  /* ---- C2. Cards de depoimentos: lift + glow azul ---- */
  .depoimento {
    transition: transform 280ms var(--easing-cinematic),
                box-shadow 280ms var(--easing-cinematic),
                border-color 280ms var(--easing-cinematic);
  }
  .depoimento:hover {
    transform: translateY(-4px);
    box-shadow:
      0 12px 32px rgba(57, 90, 255, 0.18),
      0 4px 12px rgba(14, 15, 18, 0.10);
    border-color: rgba(63, 102, 194, 0.22);
  }

  /* ---- C3. Container do Curso: lift + glow laranja sutil ---- */
  .curso-mes__inner {
    transition: transform 320ms var(--easing-cinematic),
                box-shadow 320ms var(--easing-cinematic);
  }
  .curso-mes__inner:hover {
    transform: translateY(-2px);
    box-shadow:
      0 32px 80px rgba(0, 0, 0, 0.40),
      0 0 60px rgba(243, 148, 25, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  /* ---- C4. CTAs: shimmer (linha de luz cruzando da esquerda pra direita) ---- */
  .btn--cta-primario,
  .btn--outline-claro {
    position: relative;
    overflow: hidden;
  }
  .btn--cta-primario::before,
  .btn--outline-claro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.35) 50%,
      transparent 100%);
    transform: translateX(-100%);
    pointer-events: none;
  }
  .btn--cta-primario:hover::before,
  .btn--outline-claro:hover::before {
    animation: cta-shimmer 600ms var(--easing-suave) forwards;
  }
}

@keyframes cta-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* re-abre o media (hover: hover) fechado acima */
@media (hover: hover) {

  /* ---- C5. FAQ: chevron com leve glow no hover ---- */
  .faq__item:hover .faq__indicador {
    filter: drop-shadow(0 0 6px rgba(243, 148, 25, 0.55));
  }

  /* ---- C6. Links do footer: underline animado esquerda -> direita ---- */
  .footer__links a {
    background-image: linear-gradient(90deg,
      var(--cor-laranja-energia) 0%,
      var(--cor-laranja-energia-claro) 100%);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: color var(--transicao-padrao) var(--easing-suave),
                background-size 240ms var(--easing-suave);
  }
  .footer__links a:hover {
    background-size: 100% 2px;
  }
}

/* ---- C5b. FAQ chevron rotate suave (override do timing v1) ---- */
.faq__indicador {
  transition: transform 240ms var(--easing-cinematic),
              filter 240ms var(--easing-cinematic);
}

/* ============================================================
   D. HEADER PROGRESS BAR DE SCROLL
   ============================================================ */

.header__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  overflow: hidden;
}
.header__progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    var(--cor-laranja-energia) 0%,
    var(--cor-laranja-energia-claro) 50%,
    var(--cor-laranja-energia) 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  transition: transform 80ms linear;
}

/* ============================================================
   E. PREFERS-REDUCED-MOTION (respeito total)
   Desliga animacoes contidas no Round 3 sem quebrar layout.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .pulse-dot,
  .pulse-dot::after,
  .curso-mes .btn--cta-primario::after {
    animation: none !important;
  }
  .pulse-dot::after {
    display: none;
  }
  .btn--cta-primario::before,
  .btn--outline-claro::before {
    display: none;
  }
  .bancas__card::before {
    transition: none !important;
  }
  .header__progress-bar {
    transition: none !important;
  }
  .footer__links a {
    transition: none !important;
  }
  .hero::before {
    animation: none !important;
  }
  .hero__foto {
    transform: none !important;
  }
}

/* ============================================================
   F. ROUND 4 — PARALLAX, MESH-SHIFT AMBIENTE E GPU HINTS
   Otimizacoes finais de polish e performance.
   ============================================================ */

/* ---- F1. Will-change cirurgico nos 4 elementos animados criticos ----
   IMPORTANTE: will-change em excesso degrada performance. Aplicar
   APENAS nos elementos que de fato animam transform/opacity/box-shadow. */

.hero__foto {
  will-change: transform;       /* parallax JS */
  transform: translate3d(0, 0, 0); /* forca GPU layer (compositor) */
}

@media (hover: hover) {
  .bancas__card,
  .depoimento {
    will-change: transform;     /* hover-lift */
  }
}

/* ---- F2. LEGADO v1 — Mesh-shift ambiente no fundo do hero.
   Comentado em 2026-05-29: hero virou full-bleed com background photo
   + overlay gradient. O mesh-shift radial conflitava com a imagem.
.hero {
  position: relative;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(ellipse 700px 500px at 85% 15%, rgba(63, 102, 194, 0.10), transparent 65%),
    radial-gradient(ellipse 600px 400px at 15% 85%, rgba(243, 148, 25, 0.08), transparent 60%);
  opacity: 0.85;
  pointer-events: none;
  animation: mesh-shift 20s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes mesh-shift {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.75; }
  100% { transform: translate3d(-2%, 1.5%, 0) scale(1.06); opacity: 1; }
}

.hero__figure.is-paused ~ * .hero::before,
.hero:has(.hero__figure.is-paused)::before {
  animation-play-state: paused;
}
*/

/* ============================================================
   G. MOBILE-PEQUENO (≤479px) — REDUÇÃO TIPOGRÁFICA GLOBAL
   Feedback USER 2026-05-24: "as fontes não precisam ser grandes na
   visualização mobile". O Hero já foi tratado na seção 5. Aqui
   consolidamos as reduções das DEMAIS seções: H2 das seções
   institucionais (bancas, depoimentos, curso-mes, quem, faq,
   depo-videos, newsletter) + número grande dos stats + ajustes
   secundários (CTAs, FAQ, subheadlines).

   Hierarquia preservada:
   - H1 hero ........................ 28px
   - Número stats ................... 40px (gradient, visualmente
                                     "menor" que o H1 do hero pelo
                                     gradient suave)
   - H2 seções ...................... 24px
   - microcopy hero / curso H2 ...... 18-22px
   - body / subheadline ............. 15-16px

   Todos os tamanhos ≥14px (a11y).
   ============================================================ */

@media (max-width: 479px) {

  /* H2 das seções institucionais — todos pra 24px peso bold */
  .bancas__h2,
  .depoimentos__h2,
  .quem__h2,
  .faq__h2,
  .depo-videos__h2 {
    font-size: var(--tipo-h2-mobile-pequeno);
    line-height: 1.25;
  }

  /* Curso Semi Paulista — logo SVG no mobile. Altura reduzida pra preservar
     peso visual de "headline da oferta" sem invadir tela (v2.1). */
  .curso-mes__logo {
    height: 64px;
  }
  .curso-mes__sub,
  .curso-mes__desc {
    font-size: var(--tipo-subheadline-mobile-pequeno);
  }
  .curso-mes__bullets li {
    font-size: var(--tipo-marcador-mobile-pequeno);
  }

  /* Subheadline depo-videos */
  .depo-videos__sub {
    font-size: var(--tipo-subheadline-mobile-pequeno);
  }

  /* Stats — número grande do prova social.
     Token atual: clamp(40px, 11vw, 48px). Em 360px = ~40px (já no mínimo).
     Em 414px = ~46px. Trava em 40px aqui pra coerência com a nova escala. */
  .stats-band__numero {
    font-size: 40px;
  }
  .stats-band__label {
    font-size: 10px;
  }
  .stats-band__micro {
    font-size: 12px;
  }

  /* FAQ — pergunta um pouco menor */
  .faq__pergunta {
    font-size: 15px;
    padding: var(--espaco-md) var(--espaco-md);
  }
  .faq__resposta {
    padding-inline: var(--espaco-md);
  }
  .faq__resposta p,
  .faq__bullets li {
    font-size: 14px;
  }

  /* Bio do Pinguim — parágrafos */
  .quem__texto p {
    font-size: var(--tipo-subheadline-mobile-pequeno);
  }

  /* Depoimentos — nome e contexto */
  .depoimento__nome {
    font-size: 15px;
  }
  .depoimento__contexto {
    font-size: 13px;
  }

  /* CTAs — botões um toque mais compactos (mantém 48px min-height a11y) */
  .btn {
    padding: 14px 24px;
    font-size: 15px;
  }
}

/* ============================================================
   SEÇÃO 06.5 — VEJA POR DENTRO DO SEMI (grid 2x2 + lightbox)
   Spec: 05-paginas/homepage/VEJA-POR-DENTRO-spec.md v1.0
   Copy: 03-copy/homepage-copy-v1.md PEÇA 11

   Estratégia: 100% tokens v2.0 existentes (mesh-autoridade,
   glass-1, glass-3, hover-lift, reveal-stagger, easings).
   Cards desktop 4:3, mobile 1:1 (reduz altura total).
   Lightbox vanilla com focus trap + ESC + backdrop close.
   ============================================================ */

.veja-dentro {
  position: relative;
  padding-block: var(--espaco-4xl);
  background: var(--mesh-autoridade);
  color: var(--cor-branco-limpo);
  isolation: isolate;
  overflow: hidden;
}

.veja-dentro__inner {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: var(--espaco-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-lg);
  text-align: center;
}

.veja-dentro__badge {
  margin-bottom: var(--espaco-xs);
}

.veja-dentro__h2 {
  font-family: var(--fonte-principal);
  font-size: var(--tipo-h2-display-mobile);
  font-weight: var(--peso-extrabold);
  line-height: 1.10;
  letter-spacing: -0.025em;
  color: var(--cor-branco-limpo);
  margin: 0;
  max-width: 720px;
}

.veja-dentro__sub {
  font-family: var(--fonte-principal);
  font-size: var(--tipo-tagline-mobile);
  font-weight: var(--peso-light);
  line-height: var(--tipo-tagline-altura);
  color: rgba(255, 255, 255, 0.70);
  margin: 0 0 var(--espaco-xl);
  max-width: 640px;
}

.veja-dentro__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-sm);
}

.veja-dentro__card {
  display: block;
  margin: 0;
}

/* O <button> ocupa o card inteiro pra cobrir target a11y.
   glass-1 declarativo (cor + blur + borda). hover-lift adiciona
   transform + glow no hover (já existente no projeto). */
.veja-dentro__btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--glass-card-bg);
  -webkit-backdrop-filter: var(--glass-card-blur);
  backdrop-filter: var(--glass-card-blur);
  border: 1px solid var(--cor-borda-glass);
  border-radius: var(--raio-lg);
  overflow: hidden;
  transition: border-color var(--transicao-padrao) var(--easing-suave),
              transform var(--transicao-padrao) var(--easing-suave),
              box-shadow var(--transicao-padrao) var(--easing-suave);
}

.veja-dentro__btn:hover,
.veja-dentro__btn:focus-visible {
  border-color: var(--cor-borda-glass-forte);
}

.veja-dentro__btn:focus-visible {
  outline: 2px solid var(--cor-laranja-energia);
  outline-offset: 3px;
}

.veja-dentro__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* mobile: quadrado pra reduzir altura total */
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(91, 143, 255, 0.10), transparent 70%),
    var(--cor-superficie-2);
}

.veja-dentro__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Placeholder visual (sem foto real). Mesma família dos
   placeholders Smartplayer (.depo-videos__ph) mas com ícone
   contextual por foto (definido inline no HTML). */
.veja-dentro__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-md);
  color: var(--cor-azul-ceu);
  transition: background var(--transicao-padrao) var(--easing-suave);
}

.veja-dentro__btn:hover .veja-dentro__ph {
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(91, 143, 255, 0.14), transparent 65%);
}

.veja-dentro__ph-icon {
  width: 56px;
  height: 56px;
  stroke-width: 1.5;
  opacity: 0.85;
}

.veja-dentro__ph-label {
  font-family: var(--fonte-principal);
  font-size: 12px;
  font-weight: var(--peso-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-secundario-claro);
}

/* Ícone "expandir" no canto inferior direito da foto.
   Aparece sutil; intensifica no hover do card. */
.veja-dentro__expand {
  position: absolute;
  bottom: var(--espaco-sm);
  right: var(--espaco-sm);
  width: 18px;
  height: 18px;
  stroke-width: 2;
  color: var(--cor-branco-limpo);
  opacity: 0.55;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
  transition: opacity var(--transicao-padrao) var(--easing-suave),
              transform var(--transicao-padrao) var(--easing-suave);
}

.veja-dentro__btn:hover .veja-dentro__expand {
  opacity: 1;
  transform: scale(1.08);
}

.veja-dentro__caption {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xxs);
  padding: var(--espaco-md);
}

.veja-dentro__eyebrow {
  font-family: var(--fonte-principal);
  font-size: 11px;
  font-weight: var(--peso-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-laranja-energia-claro);
}

.veja-dentro__titulo {
  font-family: var(--fonte-principal);
  font-size: 15px;
  font-weight: var(--peso-bold);
  line-height: 1.30;
  color: var(--cor-branco-limpo);
  display: block;
}

/* F7 (auditoria mobile 2026-05-28): titulos com versao curta em mobile
   (cabem em 1 linha em 320px) e completa em desktop. Copy aprovada v4.22. */
.veja-dentro__titulo-mobile  { display: inline; }
.veja-dentro__titulo-desktop { display: none; }
@media (min-width: 640px) {
  .veja-dentro__titulo-mobile  { display: none; }
  .veja-dentro__titulo-desktop { display: inline; }
}

.veja-dentro__tagline {
  display: none; /* mobile: tagline escondida (eyebrow + título bastam) */
  font-family: var(--fonte-principal);
  font-size: 14px;
  font-weight: var(--peso-regular);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.70);
  margin-top: var(--espaco-xxs);
}

.veja-dentro__hint {
  margin: var(--espaco-lg) 0 0;
  font-family: var(--fonte-principal);
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.60);
}

/* M10 (auditoria mobile 2026-05-28): hint oculto em ≤479px — redundante
   ja que os cards convidam ao toque naturalmente. Volta em tablet+. */
@media (max-width: 479px) {
  .veja-dentro__hint { display: none; }
}

.veja-dentro__hint--desktop { display: none; }
.veja-dentro__hint--mobile { display: inline; }

/* ----- Tablet (≥640px) ----- */
@media (min-width: 640px) {
  .veja-dentro { padding-block: var(--espaco-4xl); }
  .veja-dentro__h2 {
    font-size: 48px;
  }
  .veja-dentro__sub {
    font-size: var(--tipo-tagline-desktop);
  }
  .veja-dentro__grid {
    gap: var(--espaco-lg);
  }
  .veja-dentro__img-wrap {
    aspect-ratio: 4 / 3; /* tablet/desktop: 4:3 horizontal */
  }
  .veja-dentro__caption {
    padding: var(--espaco-lg);
  }
  .veja-dentro__eyebrow { font-size: 12px; }
  .veja-dentro__titulo  { font-size: 18px; }
  .veja-dentro__tagline { display: block; } /* tagline volta a aparecer */
  .veja-dentro__expand  { width: 20px; height: 20px; }
}

/* ----- Desktop (≥1024px) ----- */
@media (min-width: 1024px) {
  .veja-dentro { padding-block: var(--espaco-5xl); }
  .veja-dentro__h2 {
    font-size: var(--tipo-h2-display-desktop);
  }
  .veja-dentro__grid {
    gap: var(--espaco-xl);
  }
  .veja-dentro__caption {
    padding: var(--espaco-lg) var(--espaco-xl);
    gap: 6px;
  }
  .veja-dentro__hint--desktop { display: inline; }
  .veja-dentro__hint--mobile  { display: none; }
}

/* ============================================================
   LIGHTBOX — componente reutilizável (1º uso na home)
   glass-3 (rgba(10,11,14,0.85) + blur 32px) sobre backdrop
   preto translúcido. Comportamento controlado por main.js.
   ============================================================ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--espaco-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicao-padrao) var(--easing-suave);
}

.lightbox[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.lightbox[hidden] {
  display: none;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 11, 14, 0.92);
  cursor: pointer;
}

.lightbox__dialog {
  position: relative;
  width: min(92vw, 980px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--raio-xl);
  border: 1px solid var(--cor-borda-glass-forte);
  /* glass-3 declarativo (caso a classe utilitária não estiver presente) */
  background: rgba(10, 11, 14, 0.85);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  overflow: hidden;
  transform: scale(0.94);
  transition: transform var(--transicao-padrao) var(--easing-suave);
}

.lightbox[data-open="true"] .lightbox__dialog {
  transform: scale(1);
}

/* Botões base — ícones sobre glass com hit-area 44x44 */
.lightbox__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--cor-borda-glass);
  background: rgba(20, 22, 29, 0.55);
  color: var(--cor-branco-limpo);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--raio-pill);
  transition: background var(--transicao-padrao) var(--easing-suave),
              border-color var(--transicao-padrao) var(--easing-suave),
              transform var(--transicao-padrao) var(--easing-suave);
  z-index: 2;
}

.lightbox__btn:hover {
  background: rgba(34, 38, 47, 0.85);
  border-color: var(--cor-borda-glass-forte);
}

.lightbox__btn:focus-visible {
  outline: 2px solid var(--cor-laranja-energia);
  outline-offset: 2px;
}

.lightbox__btn svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.lightbox__btn--close {
  position: absolute;
  top: var(--espaco-sm);
  right: var(--espaco-sm);
  width: 44px;
  height: 44px;
}

.lightbox__btn--prev,
.lightbox__btn--next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
}

.lightbox__btn--prev { left: var(--espaco-sm); }
.lightbox__btn--next { right: var(--espaco-sm); }

.lightbox__btn--prev svg,
.lightbox__btn--next svg {
  width: 28px;
  height: 28px;
}

/* Hover/active não conflita com translateY usado no positioning */
.lightbox__btn--prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox__btn--next:hover { transform: translateY(-50%) scale(1.05); }

/* M11 (auditoria mobile 2026-05-28): em ≤479px, prev/next saem das laterais
   (colados na borda) e vao pro bottom, lado a lado — alcance fisico melhor
   pro polegar e nao competem com a foto ampliada. */
@media (max-width: 479px) {
  .lightbox__btn--prev,
  .lightbox__btn--next {
    top: auto;
    bottom: 16px;
    transform: none;
  }
  .lightbox__btn--prev { left: 25%; }
  .lightbox__btn--next { right: 25%; }
  .lightbox__btn--prev:hover,
  .lightbox__btn--next:hover { transform: scale(1.05); }
}

.lightbox__media {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 280px;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(91, 143, 255, 0.08), transparent 70%),
    var(--cor-superficie-1);
}

.lightbox__img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.lightbox__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espaco-md);
  color: var(--cor-azul-ceu);
}

.lightbox__ph-icon {
  width: 72px;
  height: 72px;
  stroke-width: 1.5;
  opacity: 0.6;
}

.lightbox__ph-label {
  font-family: var(--fonte-principal);
  font-size: 12px;
  font-weight: var(--peso-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texto-secundario-claro);
  opacity: 0.7;
}

.lightbox__info {
  padding: var(--espaco-lg) var(--espaco-xl) var(--espaco-xl);
  display: flex;
  flex-direction: column;
  gap: var(--espaco-xs);
  border-top: 1px solid var(--cor-borda-glass);
  text-align: left;
}

.lightbox__eyebrow {
  font-family: var(--fonte-principal);
  font-size: 12px;
  font-weight: var(--peso-bold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-laranja-energia-claro);
}

.lightbox__titulo {
  font-family: var(--fonte-principal);
  font-size: 20px;
  font-weight: var(--peso-bold);
  line-height: 1.30;
  color: var(--cor-branco-limpo);
  margin: 0;
}

.lightbox__texto {
  font-family: var(--fonte-principal);
  font-size: 15px;
  font-weight: var(--peso-regular);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.lightbox__contador {
  margin-top: var(--espaco-xs);
  font-family: var(--fonte-principal);
  font-size: 12px;
  font-weight: var(--peso-semibold);
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
  align-self: flex-end;
}

@media (min-width: 640px) {
  .lightbox { padding: var(--espaco-xl); }
  .lightbox__titulo { font-size: 24px; }
  .lightbox__texto  { font-size: 16px; }
  .lightbox__btn--close { top: var(--espaco-md); right: var(--espaco-md); }
  .lightbox__btn--prev  { left: var(--espaco-md); }
  .lightbox__btn--next  { right: var(--espaco-md); }
}

/* ----- a11y: respeitar prefers-reduced-motion ----- */
@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__dialog,
  .lightbox__btn,
  .veja-dentro__btn,
  .veja-dentro__expand,
  .veja-dentro__ph {
    transition: none !important;
  }
  .lightbox[data-open="true"] .lightbox__dialog {
    transform: none;
  }
}