/* ============================================
   PAGE: Edu-Led Growth — DARK HERO + LIGHT MIDDLE
   ============================================
   Ritmo de cores intencional:
     1. Topstrip      → dark (abyss/ink)
     2. Nav           → paper-warm (bege)
     3. Hero          → DARK gradient (abyss → canopy)
     4. Bridge        → paper-warm (bege)
     5. Vision        → DARK (forest sólido) — diferente do hero
     6. Program → Price → paper-warm (bege)
     7. Doubt         → paper-warm (continuação da Price)
     8. Stats         → DARK (forest, harmoniza com Vision)
     9. Footer        → DARK
   ============================================ */

[data-page="elg"] {
  --bg: var(--paper-warm);
  --fg: var(--ink-900);
  --accent: var(--lime);
  --accent-strong: var(--sage);
  --fg-on-dark: var(--paper);
}

[data-page="elg"] body,
[data-page="elg"].brutalist-bg {
  background: var(--paper-warm);
  color: var(--ink-900);
}

/* ——— Topstrip ——— */
[data-page="elg"] .topstrip {
  background: var(--abyss);
  color: var(--paper);
}

/* ——— Nav: bege bem suave, dá continuidade pro hero ——— */
[data-page="elg"] .nav {
  background: color-mix(in oklab, var(--paper-warm) 92%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink-900) 8%, transparent);
}
[data-page="elg"] .nav__logo,
[data-page="elg"] .nav__links a {
  color: var(--ink-900);
}
[data-page="elg"] .nav__cta {
  background: var(--ink-900);
  color: var(--paper);
}
[data-page="elg"] .nav__cta:hover {
  background: var(--abyss);
}

/* ============================================
   HERO — DARK GRADIENT
   Diferencial: gradiente abyss → canopy (mais verde no fim).
   Distingue do Vision (que é forest sólido).
   ============================================ */
/* ============================================
   HERO (ELG) — versão scroll-driven em duas colunas:
   a section é alta (300vh) e o conteúdo (texto + animação)
   fica sticky no topo enquanto o usuário rola, avançando a
   animação. Em mobile, vira 1 coluna empilhada com altura
   reduzida pra não ficar exaustivo.
   ============================================ */
[data-page="elg"] .hero {
  background: var(--paper-warm);
  color: var(--ink-900);
  /* 200vh = ~2 telas de scroll. Animação avança mais rápido com
     menos scroll necessário. */
  height: 200vh;
  position: relative;
  /* sections.css aplica overflow:hidden em .hero — isso quebra o
     position:sticky do .hero__inner. Forçamos visible aqui. */
  overflow: visible;
  /* Remove o padding default da hero pra não competir com o sticky. */
  padding: 0;
}
[data-page="elg"] .hero__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 0;
  /* Esquerda (texto) com mais espaço pro H1 ter peso de hero; direita (animação) ainda boa. */
  grid-template-columns: 1.4fr 1fr;
  /* Gap entre texto e animação — bem menor que o var(--space-2xl) (~96px) padrão. */
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
}
[data-page="elg"] .hero__kicker {
  color: color-mix(in oklab, var(--ink-900) 70%, transparent);
}
[data-page="elg"] .hero__kicker small {
  background: var(--sage);
  color: var(--paper);
}
[data-page="elg"] .hero__title {
  color: var(--ink-900);
  /* Peso de hero, mas calibrado pra as 3 linhas caberem na coluna de texto
     (a animação ocupa a outra coluna) — sem voltar pro estouro de ~6 linhas. */
  font-size: clamp(3.6rem, 2.6rem + 2.1vw, 5.4rem);
}
[data-page="elg"] .hero__title .line {
  /* Se uma linha precisar quebrar (telas estreitas), quebra de forma equilibrada. */
  text-wrap: balance;
}
/* "depender" = problema → cinza dessaturado */
[data-page="elg"] .hero__emph--neg {
  color: color-mix(in oklab, var(--ink-900) 50%, transparent);
}
/* "indicações" = ponto a superar → verde escuro com ênfase */
[data-page="elg"] .hero__emph--pos {
  color: var(--deep-green);
  font-style: italic;
}
[data-page="elg"] .hero__title .period {
  color: var(--sage);
}
[data-page="elg"] .hero__sub,
[data-page="elg"] .hero__deck,
[data-page="elg"] .hero__subtitle {
  color: color-mix(in oklab, var(--ink-900) 78%, transparent);
}
[data-page="elg"] .hero__meta,
[data-page="elg"] .hero__meta * {
  color: color-mix(in oklab, var(--ink-900) 70%, transparent);
}
[data-page="elg"] .hero__marquee-wrap {
  background: var(--ink-900);
  color: var(--paper);
}

/* CTA do hero — agora sobre paper-warm */
[data-page="elg"] .hero .btn--primary {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
[data-page="elg"] .hero .btn--primary:hover {
  background: var(--deep-green);
  border-color: var(--deep-green);
}
[data-page="elg"] .hero .btn--ghost {
  color: var(--ink-900);
  border: 1.5px solid color-mix(in oklab, var(--ink-900) 30%, transparent);
}
[data-page="elg"] .hero .btn--ghost:hover {
  background: color-mix(in oklab, var(--ink-900) 8%, transparent);
  border-color: color-mix(in oklab, var(--ink-900) 50%, transparent);
}

/* ============================================
   BRIDGE — vive DENTRO da hero (.hero__right--bridge).
   Stage é só um bloco normal ocupando a coluna direita;
   a hero inteira é que é sticky/scroll-driven.
   ============================================ */
[data-page="elg"] .hero__right--bridge {
  display: block;
  width: 100%;
  /* Garante margem extra embaixo pro caption respirar. */
  padding-bottom: clamp(24px, 4vh, 48px);
}
/* Mobile-only animation (webp). Hidden by default; shown via @media (max-width: 900px) */
[data-page="elg"] .bridge__mobile-anim {
  display: none;
}

[data-page="elg"] .hero__right--bridge .bridge__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  display: block;
  margin: 0 auto;
}

/* Mobile: hero com layout calmo, generoso e legível.
   Não usa pin/sticky — flui natural. A animação é um webp leve;
   a hierarquia: animação compacta no topo, título grande, sub, CTA. */
@media (max-width: 900px) {
  /* Reset do desktop: nada de altura artificial nem sticky. */
  [data-page="elg"] .hero {
    height: auto;
    min-height: auto;
    padding: 0;
    overflow: hidden;
    /* Borda sutil pra separar da próxima section (vision). */
    border-bottom: 1px solid color-mix(in oklab, var(--ink-900) 8%, transparent);
  }
  [data-page="elg"] .hero__inner {
    position: static !important;
    height: auto !important;
    min-height: 0;
    overflow: visible;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(20px, 4vh, 32px);
    padding: clamp(32px, 6vh, 56px) clamp(20px, 6vw, 32px) clamp(48px, 8vh, 72px);
    max-width: 560px;
    margin: 0 auto;
  }

  /* === Animação webp mobile === */
  [data-page="elg"] .hero__right--bridge {
    order: 1;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  [data-page="elg"] .hero__right--bridge .bridge__stage {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 800 / 650;
    height: auto;
    margin: 0 auto;
    /* Fundo limpo — apenas a imagem */
    background: transparent;
  }
  /* Esconde SVG/seal/caption/takeover no mobile — usamos só o webp */
  [data-page="elg"] .hero__right--bridge .bridge__svg,
  [data-page="elg"] .hero__right--bridge .bridge__takeover,
  [data-page="elg"] .hero__right--bridge .bridge__caption {
    display: none !important;
  }
  /* Mostra o webp animado */
  [data-page="elg"] .bridge__mobile-anim {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* leve fade-in, persistente */
    animation: heroAnimFadeIn 600ms var(--ease-out) both;
  }
  @keyframes heroAnimFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* === Texto === */
  [data-page="elg"] .hero__left {
    order: 2;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(16px, 3vh, 24px);
    width: 100%;
  }
  [data-page="elg"] .hero__title {
    order: 1;
    font-size: clamp(34px, 9vw, 48px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0;
    text-wrap: balance;
  }
  [data-page="elg"] .hero__title .line {
    display: block;
  }
  [data-page="elg"] .hero__subtitle {
    order: 2;
    font-size: clamp(16px, 4.4vw, 19px);
    line-height: 1.45;
    margin: 0;
    max-width: 36ch;
    color: color-mix(in oklab, var(--ink-900) 72%, transparent);
  }
  [data-page="elg"] .hero__actions {
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: clamp(4px, 1vh, 12px) 0 0;
  }
  [data-page="elg"] .hero__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 16px;
  }

  /* Topstrip e nav mantêm o comportamento padrão (sticky no topo).
     Não escondemos topstrip nem absolutizamos nav — isso causava sobreposição. */
}

/* Tela bem pequena (≤520px): ajustes finos */
@media (max-width: 520px) {
  [data-page="elg"] .hero__inner {
    padding: clamp(24px, 5vh, 40px) 20px clamp(40px, 7vh, 56px);
    gap: 22px;
  }
  [data-page="elg"] .hero__title {
    font-size: clamp(30px, 9.5vw, 40px);
  }
  [data-page="elg"] .hero__right--bridge .bridge__stage {
    max-width: 340px;
  }
}
[data-page="elg"] .bridge__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
[data-page="elg"] .axis-line {
  stroke: var(--ink-900);
  stroke-width: 1.5;
  fill: none;
}
[data-page="elg"] .axis-arrow {
  fill: var(--ink-900);
}
[data-page="elg"] .axis-label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  fill: var(--ink-700);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
[data-page="elg"] .axis-label-x { text-anchor: end; }
[data-page="elg"] .axis-label-y { text-anchor: start; }

[data-page="elg"] .point-circle {
  fill: var(--paper);
  stroke: var(--ink-900);
  stroke-width: 2.5;
  transition: stroke 280ms var(--ease-out), fill 280ms var(--ease-out);
}
[data-page="elg"] .point-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  fill: var(--ink-900);
  letter-spacing: -0.01em;
  text-anchor: middle;
}
/* Tag "Fase N": kicker pequeno em mono uppercase, cor sage,
   posicionado acima do label principal de cada ponto.
   Cria hierarquia: Fase N → Nome → bolinha. */
[data-page="elg"] .point-phase {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  fill: var(--sage);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-anchor: middle;
}
/* No estado verde (fase 3+), o kicker fica num verde mais escuro
   pra continuar legível sobre a curva sage que pode passar perto. */
[data-page="elg"] .bridge.is-green .point-phase,
[data-page="elg"] .bridge__stage.is-green .point-phase {
  fill: var(--deep-green);
}
[data-page="elg"] .point-sublabel {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  fill: var(--ink-500);
  letter-spacing: 0.06em;
  text-anchor: middle;
  text-transform: uppercase;
}
[data-page="elg"] .point-b,
[data-page="elg"] .point-c {
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}
[data-page="elg"] .point-b.is-on,
[data-page="elg"] .point-c.is-on {
  opacity: 1;
}
/* Curva ÚNICA contínua (A → B → C). pathLength=100 → dashoffset 100 esconde
   completamente; conforme dashoffset diminui, a curva cresce continuamente. */
[data-page="elg"] .journey-line {
  fill: none;
  stroke: var(--ink-900);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke 480ms var(--ease-out), stroke-width 480ms var(--ease-out);
}

/* Fase verde: curva + bolinhas viram verde (antes do takeover) */
[data-page="elg"] .bridge.is-green .journey-line,
[data-page="elg"] .bridge__stage.is-green .journey-line {
  stroke: var(--sage);
  stroke-width: 4;
}
[data-page="elg"] .bridge.is-green .point-circle,
[data-page="elg"] .bridge__stage.is-green .point-circle {
  fill: var(--lime);
  stroke: var(--sage);
}

/* Takeover: plano verde que "invade" o gráfico inteiro.
   Inicia escondido (clip-path circle 0% no centro), expande pra cobrir tudo. */
[data-page="elg"] .bridge__takeover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--sage);
  border-radius: 12px;
  pointer-events: none;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 720ms var(--ease-out);
  z-index: 5;
}
[data-page="elg"] .bridge__takeover.is-on {
  clip-path: circle(80% at 50% 50%);
}

/* Selo Education-Led Growth — centralizado dentro do takeover.
   Aparece com fade+scale após o takeover ter expandido. */
[data-page="elg"] .bridge__seal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 26px;
  background: transparent;
  color: var(--paper);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 380ms 180ms var(--ease-out),
              transform 380ms 180ms var(--ease-out);
}
[data-page="elg"] .bridge__seal.is-on {
  opacity: 1;
  transform: scale(1);
}
[data-page="elg"] .bridge__seal-check {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--sage);
  font-size: 18px;
  font-weight: 900;
}
/* Caption (texto guia abaixo do gráfico) */
[data-page="elg"] .bridge__caption {
  position: absolute;
  bottom: -7%;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-500);
  white-space: nowrap;
  transition: color 240ms var(--ease-out), opacity 240ms var(--ease-out);
}
[data-page="elg"] .bridge__caption[data-state="done"] {
  color: var(--sage);
  font-weight: 600;
}
/* Quando o takeover invade, esconde a caption pra não competir com o selo */
[data-page="elg"] .bridge.is-revealed .bridge__caption,
[data-page="elg"] .bridge__stage.is-revealed .bridge__caption {
  opacity: 0;
}

@media (max-width: 700px) {
  [data-page="elg"] .bridge { height: 320vh; }
  [data-page="elg"] .bridge__stage { width: min(340px, 88vw); aspect-ratio: 4 / 3; }
  [data-page="elg"] .axis-label { font-size: 11px; }
  [data-page="elg"] .point-label { font-size: 13px; }
  [data-page="elg"] .point-sublabel { font-size: 9px; }
  [data-page="elg"] .bridge__seal { font-size: clamp(16px, 4vw, 22px); padding: 10px 16px 10px 20px; }
  [data-page="elg"] .bridge__seal-check { width: 24px; height: 24px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-page="elg"] .bridge { height: auto; min-height: 100vh; }
  [data-page="elg"] .journey-line { stroke-dashoffset: 0; stroke: var(--sage); stroke-width: 4; }
  [data-page="elg"] .point-b, [data-page="elg"] .point-c { opacity: 1; }
  [data-page="elg"] .point-circle { fill: var(--lime); stroke: var(--sage); }
  [data-page="elg"] .bridge__takeover { clip-path: circle(80% at 50% 50%); }
  [data-page="elg"] .bridge__seal { opacity: 1; transform: none; }
}

/* ============================================
   VISION — DARK (forest), diferente do hero
   ============================================ */
[data-page="elg"] .vision {
  background: var(--forest);
  color: var(--paper);
}
[data-page="elg"] .vision__title {
  color: var(--paper);
}
[data-page="elg"] .vision__card h3 {
  color: var(--paper);
}
[data-page="elg"] .vision__card p {
  color: color-mix(in oklab, var(--paper) 75%, transparent);
}
[data-page="elg"] .vision__illus {
  background: color-mix(in oklab, var(--paper) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--paper) 12%, transparent);
}
[data-page="elg"] .vision em.hl,
[data-page="elg"] .vision .hl {
  color: var(--lime);
  font-style: normal;
}

/* ============================================
   PROGRAM → PRICE — paper-warm
   ============================================ */
[data-page="elg"] .program {
  background: var(--paper-warm);
  color: var(--ink-900);
}
[data-page="elg"] .program__card {
  background: transparent;
}
[data-page="elg"] .program__card-media {
  background: var(--white);
}
[data-page="elg"] .program-deep {
  background: var(--ink-900);
}

/* Stats — DARK (forest, harmoniza com Vision e Footer) */
[data-page="elg"] .stats {
  background: var(--forest);
  color: var(--paper);
}

[data-page="elg"] .personas {
  background: var(--paper);
  color: var(--ink-900);
}
[data-page="elg"] .instructor {
  background: var(--ink-900);
  color: var(--paper);
}
[data-page="elg"] .instructor .sec-eyebrow {
  color: color-mix(in oklab, var(--paper) 70%, transparent);
}
[data-page="elg"] .instructor strong {
  color: var(--lime, #b3ff5a);
}
[data-page="elg"] .instructor .instructor__title em.hl {
  color: var(--lime, #b3ff5a);
}
[data-page="elg"] .instructor .instructor__signature a {
  color: var(--paper);
  border-color: color-mix(in oklab, var(--paper) 30%, transparent);
}
[data-page="elg"] .instructor .instructor__signature a:hover {
  background: var(--paper);
  color: var(--ink-900);
}
[data-page="elg"] .testimonials {
  background: var(--paper);
  color: var(--ink-900);
}
[data-page="elg"] .price {
  background: var(--paper-warm);
  color: var(--ink-900);
}

/* Doubt — continuação da Price (mesmo bg) */
[data-page="elg"] .doubt {
  background: var(--paper-warm);
  color: var(--ink-900);
}

/* CTAs primários verdes (default tweak --green=accent → sobrescreve) */
[data-page="elg"] .btn--green {
  background: var(--sage);
  color: var(--paper);
}
[data-page="elg"] .btn--green:hover {
  background: var(--ink-900);
}


/* ============================================
   MODULE — variant "em construção" (sem aulas listadas).
   Mantém a row visível mas em estado dimmed; o body abre
   só com o lead (sem ol de aulas).
   ============================================ */
[data-page="elg"] .module--coming { opacity: 0.62; }
[data-page="elg"] .module--coming .module__icon { opacity: 0.45; }
[data-page="elg"] .module--coming .module__meta {
  font-style: italic;
  color: color-mix(in oklab, var(--ink-900) 55%, transparent);
}

/* ============================================
   FAQ — perguntas frequentes (usa <details>/<summary>)
   Layout simples sobre paper-warm, mesmo idioma das outras seções.
   ============================================ */
[data-page="elg"] .faq {
  background: var(--paper-warm);
  color: var(--ink-900);
  padding: var(--space-4xl) 0;
  position: relative;
}
[data-page="elg"] .faq__head {
  max-width: 820px;
  margin: 0 auto var(--space-2xl);
  text-align: center;
}
[data-page="elg"] .faq__title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: var(--space-sm) 0 0;
  text-wrap: balance;
}
[data-page="elg"] .faq__title .hl {
  color: var(--deep-green);
  font-style: italic;
}
[data-page="elg"] .faq__list {
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid color-mix(in oklab, var(--ink-900) 15%, transparent);
}
[data-page="elg"] .faq-item {
  border-bottom: 1px solid color-mix(in oklab, var(--ink-900) 15%, transparent);
}
[data-page="elg"] .faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.3;
  color: var(--ink-900);
  text-wrap: pretty;
}
[data-page="elg"] .faq-item__q::-webkit-details-marker { display: none; }
[data-page="elg"] .faq-item__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in oklab, var(--ink-900) 30%, transparent);
  border-radius: 999px;
  font-size: 18px;
  line-height: 1;
  transition: transform var(--dur-med) var(--ease-out), background var(--dur-med);
}
[data-page="elg"] .faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
  background: var(--deep-green);
  color: var(--paper);
  border-color: var(--deep-green);
}
[data-page="elg"] .faq-item__a {
  padding: 0 0 var(--space-lg);
  color: color-mix(in oklab, var(--ink-900) 82%, transparent);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  max-width: 72ch;
}
[data-page="elg"] .faq-item__a > * + * { margin-top: 0.7em; }
[data-page="elg"] .faq-item__a ul {
  padding-left: 1.2em;
  list-style: disc;
}
[data-page="elg"] .faq-item__a li + li { margin-top: 0.35em; }
[data-page="elg"] .faq-item__a b { color: var(--ink-900); font-weight: 600; }

@media (max-width: 760px) {
  [data-page="elg"] .faq { padding: var(--space-3xl) 0; }
  [data-page="elg"] .faq-item__q { padding: var(--space-md) 0; }
}




/* ============================================
   TOPBAR — agora é um <a> (clica e leva pra #preco).
   Hover sutil, seta à direita.
   ============================================ */
[data-page="elg"] a.topbar {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--dur-med);
}
[data-page="elg"] a.topbar:hover { filter: brightness(1.15); }
[data-page="elg"] a.topbar .topbar__arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform var(--dur-med) var(--ease-out);
}
[data-page="elg"] a.topbar:hover .topbar__arrow { transform: translateX(3px); }

/* ============================================
   PRICE — strike note + corner flag (selo diagonal "Promo de pré-venda")
   ============================================ */
[data-page="elg"] .price__strike-note {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: color-mix(in oklab, currentColor 70%, transparent);
  margin-left: 4px;
}
[data-page="elg"] .price__card { position: relative; overflow: hidden; }
[data-page="elg"] .price__corner-flag {
  position: absolute;
  top: 0; right: 0;
  width: 180px;
  height: 180px;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
[data-page="elg"] .price__corner-flag span {
  position: absolute;
  display: block;
  top: 32px;
  right: -50px;
  width: 220px;
  text-align: center;
  background: var(--deep-green);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 0;
  transform: rotate(45deg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
@media (max-width: 600px) {
  [data-page="elg"] .price__corner-flag { width: 140px; height: 140px; }
  [data-page="elg"] .price__corner-flag span {
    top: 24px; right: -56px; width: 200px;
    font-size: 10px; padding: 6px 0;
  }
}


/* ============================================
   MODULE — variant "em elaboração": força meta visível
   mesmo no mobile (sections.css esconde .module__meta lá).
   E destaca o texto "em elaboração" em itálico verde.
   ============================================ */
[data-page="elg"] .module--coming .module__meta {
  display: inline-block !important;
  font-style: italic;
  font-weight: 600;
  color: var(--deep-green);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  opacity: 0.85;
}
@media (max-width: 760px) {
  /* No mobile, garantir que o meta dos coming-modules apareça
     numa linha embaixo do nome (já que o grid colapsa pra 60/1fr/40). */
  [data-page="elg"] .module--coming .module__meta {
    grid-column: 2;
    margin-top: 4px;
    font-size: 13px;
  }
}

/* ============================================
   STATS — rating bloco textual (substitui a linha estrelada).
   Estilo discreto, dois níveis: H3 + sub.
   ============================================ */
[data-page="elg"] .stats__rating {
  display: block;
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-xl);
}
[data-page="elg"] .stats__rating-title {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-wrap: balance;
}
[data-page="elg"] .stats__rating-sub {
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.45;
  color: color-mix(in oklab, currentColor 70%, transparent);
  margin: 0;
}


/* PILL discreta ao lado de "R$ 300 OFF" — substitui a label antiga, que estava
   se renderizando feia (corner-flag não pegou; promo-tag aparecia desencaixada).
   Solução: pill pequena, em verde, in-line no strike row. */
[data-page="elg"] .price__strike { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-page="elg"] .price__strike-pill {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--lime, #b3ff5a) 30%, transparent);
  color: var(--lime, #b3ff5a);
  border: 1px solid color-mix(in oklab, var(--lime, #b3ff5a) 50%, transparent);
}


/* ============================================
   PERSONAS — variant text-only (sem imagens)
   4 cards num grid 2×2 (mobile: 1 col)
   ============================================ */
[data-page="elg"] .personas--text .personas__grid--4text {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
[data-page="elg"] .personas--text .persona--text {
  background: var(--paper-warm);
  border: 1px solid color-mix(in oklab, var(--ink-900) 14%, transparent);
  border-radius: 6px;
  padding: clamp(28px, 2.6vw, 40px);
  min-height: 220px;
  position: relative;
  overflow: hidden;
  cursor: default;
  transition:
    transform var(--dur-fast, 200ms) var(--ease, ease-out),
    box-shadow var(--dur-fast, 200ms) var(--ease, ease-out),
    border-color var(--dur-fast, 200ms) var(--ease, ease-out);
}
[data-page="elg"] .personas--text .persona--text:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--ink-900) 30%, transparent);
}
[data-direction="brutalist"][data-page="elg"] .personas--text .persona--text {
  border: 2px solid var(--ink-900);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ink-900);
}
[data-direction="brutalist"][data-page="elg"] .personas--text .persona--text:hover {
  box-shadow: 6px 6px 0 var(--ink-900);
}
[data-page="elg"] .personas--text .persona--text .persona__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0;
  height: 100%;
}
[data-page="elg"] .personas--text .persona--text .persona__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(56px, 6.5vw, 88px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--sage, #5a7a52);
  margin: 0 0 clamp(16px, 2vw, 28px) 0;
  padding: 0;
  font-feature-settings: "tnum" 1;
}
[data-page="elg"] .personas--text .persona--text .persona__h {
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.18;
  margin: 0 0 8px 0;
  font-weight: 700;
}
[data-page="elg"] .personas--text .persona--text .persona__sub {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.45;
  color: color-mix(in oklab, var(--ink-900) 70%, transparent);
  margin: 0;
  max-width: 38ch;
}
@media (max-width: 720px) {
  [data-page="elg"] .personas--text .personas__grid--4text { grid-template-columns: 1fr; }
}


/* ============================================
   PERSONAS — variant text-only · refined
   Número vira detalhe pequeno (top-right);
   headline ganha protagonismo.
   ============================================ */
[data-page="elg"] .personas--text .persona--text .persona__body {
  display: block;
  position: relative;
}
[data-page="elg"] .personas--text .persona--text .persona__num {
  position: absolute;
  top: 0;
  right: 0;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  color: color-mix(in oklab, var(--ink-900) 35%, transparent);
  margin: 0;
  padding: 0;
  font-feature-settings: "tnum" 1;
}
[data-page="elg"] .personas--text .persona--text .persona__h {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 12px 0;
  padding-right: 36px; /* não esbarrar no número */
  color: var(--ink-900);
}
[data-page="elg"] .personas--text .persona--text .persona__sub {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.5;
  color: color-mix(in oklab, var(--ink-900) 72%, transparent);
  margin: 0;
  max-width: 38ch;
}
[data-page="elg"] .personas--text .persona--text {
  min-height: 200px;
  padding: clamp(28px, 2.4vw, 36px);
}


/* ============================================
   MOBILE RESPONSIVE LAYER — ELG
   Foco: enquadramento visual em viewport ≤ 900px
   ============================================ */

/* Hero mobile já é tratada na regra principal acima (≤900px e ≤520px),
   incluindo o swap pra webp animado. Esta camada só cobre as outras seções. */

/* --- Vision (texto dark) --- */
@media (max-width: 720px) {
  [data-page="elg"] .vision .container { padding-left: 16px; padding-right: 16px; }
  [data-page="elg"] .vision__title { font-size: clamp(28px, 7vw, 40px); line-height: 1.1; }
  [data-page="elg"] .vision__lead { font-size: clamp(15px, 4vw, 17px); }
}

/* --- Program/módulos: layout mobile com 3 colunas (num | title+meta | + icon) --- */
@media (max-width: 760px) {
  [data-page="elg"] .module__row {
    grid-template-columns: 56px 1fr 40px !important;
    column-gap: 12px;
    row-gap: 4px;
    padding: 16px 0;
    align-items: start;
  }
  [data-page="elg"] .module__num { grid-row: 1; grid-column: 1; align-self: start; }
  [data-page="elg"] .module__name,
  [data-page="elg"] .module__title { grid-row: 1; grid-column: 2; font-size: clamp(17px, 4.5vw, 20px); line-height: 1.15; }
  [data-page="elg"] .module__meta {
    grid-row: 2 !important; grid-column: 2 !important;
    display: block !important;
    font-size: 12px;
    margin-top: 4px;
  }
  [data-page="elg"] .module__icon { grid-row: 1 / span 2; grid-column: 3; align-self: center; width: 36px; height: 36px; }
  [data-page="elg"] .module__lead { grid-column: 1 / -1; font-size: 14px; line-height: 1.45; }
  [data-page="elg"] .module__lessons { grid-column: 1 / -1; padding-left: 0; }
  [data-page="elg"] .module__body { grid-column: 1 / -1; }
}

/* --- Personas (text-only): cards stack 1 col em ≤640 --- */
@media (max-width: 640px) {
  [data-page="elg"] .personas--text .personas__grid--4text {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  [data-page="elg"] .personas--text .persona--text {
    min-height: auto;
    padding: clamp(20px, 5vw, 28px);
  }
  [data-page="elg"] .personas--text .persona--text .persona__h {
    font-size: clamp(20px, 5.5vw, 24px);
    padding-right: 32px;
  }
  [data-page="elg"] .personas__title { font-size: clamp(28px, 7vw, 38px); }
}

/* --- Instructor (dark): foto + texto stack --- */
@media (max-width: 840px) {
  [data-page="elg"] .instructor__inner {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 40px);
  }
  [data-page="elg"] .instructor__media {
    order: -1;
    max-width: 480px;
    margin: 0 auto;
  }
  [data-page="elg"] .instructor__title { font-size: clamp(28px, 7vw, 40px); }
  [data-page="elg"] .instructor__bio p { font-size: clamp(15px, 4vw, 17px); line-height: 1.5; }
}

/* --- Price card: corner-flag responsivo, conteúdo bem contido --- */
@media (max-width: 520px) {
  [data-page="elg"] .price__card {
    padding: clamp(24px, 6vw, 32px);
  }
  [data-page="elg"] .price__title { font-size: clamp(28px, 7.5vw, 38px); }
  [data-page="elg"] .price__amount .big { font-size: clamp(64px, 18vw, 96px); }
  [data-page="elg"] .price__strike {
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 14px;
  }
  [data-page="elg"] .price__corner-flag { width: 110px; height: 110px; }
  [data-page="elg"] .price__corner-flag span { font-size: 9px; }
}

/* --- FAQ: padding reduzido em mobile --- */
@media (max-width: 520px) {
  [data-page="elg"] .faq-item__q { font-size: clamp(15px, 4.2vw, 18px); padding: 18px 0; gap: 12px; }
  [data-page="elg"] .faq-item__icon { font-size: 18px; }
  [data-page="elg"] .faq-item__a p,
  [data-page="elg"] .faq-item__a li { font-size: 14px; line-height: 1.55; }
}

/* --- Container global: padding lateral consistente em mobile --- */
@media (max-width: 720px) {
  [data-page="elg"] .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --- Garante que nenhuma section provoque overflow horizontal --- */
[data-page="elg"] { overflow-x: clip; }
[data-page="elg"] section { max-width: 100vw; }
[data-page="elg"] img,
[data-page="elg"] svg,
[data-page="elg"] video,
[data-page="elg"] iframe { max-width: 100%; }


/* --- Stats grid: 2x2 em mobile com itens que não vazam --- */
@media (max-width: 720px) {
  [data-page="elg"] .stats__grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: clamp(20px, 5vw, 36px) !important;
    padding: clamp(20px, 5vw, 32px);
  }
  [data-page="elg"] .stats__item {
    padding: 8px 4px;
    min-width: 0;
  }
  [data-page="elg"] .stats__item .num,
  [data-page="elg"] .stats__num,
  [data-page="elg"] .stats__item > :first-child {
    font-size: clamp(36px, 11vw, 56px) !important;
    line-height: 1;
  }
  [data-page="elg"] .stats__label,
  [data-page="elg"] .stats__item > :nth-child(2) {
    font-size: 11px !important;
    letter-spacing: 0.06em;
    white-space: normal;
  }
}

/* --- Hero animation: dar tempo de leitura antes da animação começar.
   Mobile (520px): aumenta altura pra 200vh e a animação só começa depois
   da primeira tela (texto + CTA já lido). Desktop também ganha um buffer inicial. */



/* ============================================
   MOBILE — padding lateral CONSISTENTE em todas as seções
   Garante que imagens (vision cards, programa, animação hero,
   instructor, FAQ etc) tenham a mesma "moldura" lateral.
   ============================================ */
@media (max-width: 720px) {
  [data-page="elg"] .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Vision cards: zerar margens internas extras pra ficarem do mesmo tamanho */
  [data-page="elg"] .vision__grid,
  [data-page="elg"] .program__grid,
  [data-page="elg"] .features__grid,
  [data-page="elg"] .program-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Cards de imagem ocupam 100% da largura disponível */
  [data-page="elg"] .vision__card,
  [data-page="elg"] .program__card,
  [data-page="elg"] .feature-card,
  [data-page="elg"] .program-card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  /* Imagens dentro de cards: 100% width, mesmo aspect-ratio */
  [data-page="elg"] .vision__card img,
  [data-page="elg"] .program__card img,
  [data-page="elg"] .feature-card img {
    width: 100% !important;
    display: block;
  }
}