/* ============================================
   PAGE: Plano Head de Marketing
   Identidade visual distinta de FSM e ELG.

   Ritmo de cores:
     1. Topstrip       → (removido — sem cupom nessa página)
     2. Nav            → paper-warm
     3. Hero           → LIGHT (paper) — diferente da ELG (dark)
     4. Vision         → LIGHT (paper-warm) — distinto do hero, ainda claro
     5. Program        → DARK MOSS (#0D3D2C) — verde intermediário,
                         nem forest (escuro demais) nem sage (claro demais).
                         Grid 2×3 com imagens grandes.
     6. Vídeo+Módulos  → ink-900 (mantém)
     7. Stats          → forest
     8. Personas       → paper
     9. Instructor     → paper-warm
    10. Testimonials   → paper
    11. Price          → paper-warm
    12. Doubt          → paper-warm
    13. Footer         → dark
   ============================================ */

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

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

/* Nav: mesma cor do hero (paper) — funde com a hero, sem costura visível */
[data-page="phm"] .nav {
  background: var(--paper);
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
}
[data-page="phm"] .nav__logo,
[data-page="phm"] .nav__links a {
  color: var(--ink-900);
}
[data-page="phm"] .nav__cta {
  background: var(--ink-900);
  color: var(--paper);
}
[data-page="phm"] .nav__cta:hover {
  background: var(--abyss);
}

/* ============================================
   HERO — LIGHT (paper)
   Distinção da ELG (que é dark gradient).
   Glow verde sutil no fundo pra dar vida.
   ============================================ */
[data-page="phm"] .hero {
  background:
    radial-gradient(ellipse at 80% 30%, rgba(94, 159, 78, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(168, 224, 143, 0.10) 0%, transparent 50%),
    var(--paper);
  color: var(--ink-900);
}
[data-page="phm"] .hero__title {
  color: var(--ink-900);
  /* Maior no desktop (era max 4rem — ficava desnecessariamente pequeno). Min mantido pro mobile. */
  font-size: clamp(2.2rem, 1rem + 3.6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
/* Linhas quebram naturalmente e de forma equilibrada se não couberem. */
[data-page="phm"] .hero__title .line { text-wrap: balance; }
/* Coluna de texto mais larga pra acomodar o H1 maior. */
[data-page="phm"] .hero__inner {
  grid-template-columns: 2fr 1fr;
}
[data-page="phm"] .hero__left { max-width: none; }
[data-page="phm"] .hero__sub {
  margin-top: clamp(16px, 1.6vw, 22px);
  text-wrap: pretty;
}
@media (max-width: 900px) {
  /* Hero mobile: a imagem (gif) vem compacta no topo, depois H1 → subtítulo → CTA.
     Mesma "régua" da hero do /edu-led: padding generoso no .hero__inner, gaps confortáveis. */
  [data-page="phm"] .hero {
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in oklab, var(--ink-900) 8%, transparent);
  }
  [data-page="phm"] .hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: clamp(20px, 4vh, 32px);
    padding: clamp(32px, 6vh, 56px) clamp(20px, 6vw, 32px) clamp(48px, 8vh, 72px);
    max-width: 560px;
    margin-inline: auto;
  }
  /* Imagem primeiro */
  [data-page="phm"] .hero__right { order: -1; }
  [data-page="phm"] .hero__media {
    max-width: min(76vw, 320px);
    margin: 0 auto;
  }
  /* Texto empilhado */
  [data-page="phm"] .hero__left {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3vh, 24px);
  }
  [data-page="phm"] .hero__title { margin: 0; }
  [data-page="phm"] .hero__subtitle {
    margin: 0;
    font-size: clamp(16px, 4.4vw, 19px);
    line-height: 1.4;
    max-width: 40ch;
  }
  [data-page="phm"] .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: clamp(4px, 1vh, 12px) 0 0;
  }
  [data-page="phm"] .hero__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  [data-page="phm"] .hero__inner {
    padding: clamp(24px, 5vh, 40px) 20px clamp(40px, 7vh, 56px);
    gap: 22px;
  }
  [data-page="phm"] .hero__media { max-width: min(82vw, 280px); }
}
/* "crescer na carreira" / "ganhar mais" → verde escuro elegante em fundo claro */
[data-page="phm"] .hero__emph--pos {
  color: var(--deep-green);
  font-style: italic;
}
[data-page="phm"] .hero__title .period { color: var(--sage); }
[data-page="phm"] .hero__sub,
[data-page="phm"] .hero__deck,
[data-page="phm"] .hero__subtitle {
  color: color-mix(in oklab, var(--ink-900) 75%, transparent);
}
[data-page="phm"] .hero__meta,
[data-page="phm"] .hero__meta * {
  color: color-mix(in oklab, var(--ink-900) 65%, transparent);
}
[data-page="phm"] .hero .btn--primary {
  background: var(--ink-900);
  color: var(--paper);
  border-color: var(--ink-900);
}
[data-page="phm"] .hero .btn--primary:hover {
  background: var(--moss);
  border-color: var(--moss);
}
[data-page="phm"] .hero__media {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  display: block;
}
[data-page="phm"] .hero__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ============================================
   VISION "Pare e pense" — LIGHT (paper-warm)
   Distinto do hero (paper, mais frio): paper-warm é bege quente.
   Mantém clareza, mas há quebra visível na transição hero→vision.
   ============================================ */
[data-page="phm"] .vision {
  background: var(--paper-warm);
  color: var(--ink-900);
}
[data-page="phm"] .vision__head {
  max-width: 880px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}
[data-page="phm"] .vision__title {
  color: var(--ink-900);
  margin-bottom: var(--space-sm);
}
[data-page="phm"] .vision__sub {
  color: color-mix(in oklab, var(--ink-900) 72%, transparent);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 720px;
  margin: 0 auto;
}
[data-page="phm"] .vision__card h3 { color: var(--ink-900); }
[data-page="phm"] .vision__card p {
  color: color-mix(in oklab, var(--ink-900) 75%, transparent);
}
[data-page="phm"] .vision__illus {
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--ink-900) 8%, transparent);
}
[data-page="phm"] .vision em.hl,
[data-page="phm"] .vision .hl {
  color: var(--deep-green);
  font-style: italic;
}

/* ============================================
   PROGRAM "Uma conversa de carreira" — DARK MOSS
   Verde intermediário. Grid 2×3 com imagens grandes.
   ============================================ */
[data-page="phm"] .program {
  background: var(--moss);
  color: var(--paper);
}
[data-page="phm"] .program__title { color: var(--paper); }
[data-page="phm"] .program__sub {
  color: color-mix(in oklab, var(--paper) 78%, transparent);
}
[data-page="phm"] .program em.hl,
[data-page="phm"] .program .hl {
  color: var(--lime);
  font-style: normal;
}
/* Grid 2 colunas × 3 linhas — diferente do 3×2 padrão.
   Cards ficam mais largos → imagens maiores → mais respiro visual.
   No mobile colapsa pra 1 coluna. */
[data-page="phm"] .program__grid--2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}
@media (max-width: 760px) {
  [data-page="phm"] .program__grid--2col {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

[data-page="phm"] .program__card {
  background: transparent;
  color: var(--paper);
}
[data-page="phm"] .program__card h3 { color: var(--paper); }
[data-page="phm"] .program__card p {
  color: color-mix(in oklab, var(--paper) 75%, transparent);
}
[data-page="phm"] .program__card-num {
  color: var(--lime);
}
/* Mídia dos cards: fundo claro continua paper-warm pra contrastar com o verde
   da seção, mas com leve borda verde clara pra integrar. Aspect ratio 1:1
   pra acomodar as novas imagens 700×700 com generosidade. */
[data-page="phm"] .program__card-media {
  background: var(--paper);
  border: 1px solid color-mix(in oklab, var(--lime) 18%, transparent);
  aspect-ratio: 1 / 1;
}
[data-page="phm"] .program__card-media img,
[data-page="phm"] .program__card-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Vídeo + módulos: mantém ink-900 escuro padrão */
[data-page="phm"] .program-deep { background: var(--ink-900); }

/* MÓDULOS FIXOS — sempre abertos, sem ícone "+" */
[data-page="phm"] .module--fixed { cursor: default; }
[data-page="phm"] .module--fixed:hover {
  background: transparent;
  padding-inline: 0;
}
[data-page="phm"] .module--fixed .module__row {
  grid-template-columns: 80px 1fr auto;
}
[data-page="phm"] .module--fixed .module__body {
  max-height: none;
  padding-top: var(--space-md);
}
@media (max-width: 760px) {
  [data-page="phm"] .module--fixed .module__row {
    grid-template-columns: 60px 1fr;
  }
}

/* Stats — DARK forest (harmoniza com Vision dark do ELG, e mantém pareamento) */
[data-page="phm"] .stats {
  background: var(--forest);
  color: var(--paper);
}

[data-page="phm"] .personas {
  background: var(--paper);
  color: var(--ink-900);
}

/* 3-up text-only persona grid (no images) */
[data-page="phm"] .personas__grid--text {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}
[data-page="phm"] .persona--text {
  background: var(--paper-warm);
  border: 1px solid color-mix(in oklab, var(--ink-900) 12%, transparent);
  border-radius: var(--radius-md, 8px);
  padding: clamp(28px, 3vw, 44px);
  min-height: 260px;
  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),
    background var(--dur-fast, 200ms) var(--ease, ease-out);
}
/* override base persona__body grid → simple vertical stack */
[data-page="phm"] .persona--text .persona__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0;
  height: 100%;
  position: relative;
  z-index: 1;
}
/* Big number on top */
[data-page="phm"] .persona--text .persona__num {
  grid-row: auto;
  display: block;
  font-family: var(--font-display, var(--font-mono));
  font-size: clamp(64px, 8vw, 104px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--sage, #5a7a52);
  margin: 0 0 clamp(20px, 2.5vw, 32px) 0;
  padding: 0;
  font-feature-settings: "tnum" 1;
  transition: transform var(--dur-fast, 200ms) var(--ease, ease-out), color var(--dur-fast, 200ms) var(--ease, ease-out);
  transform-origin: left bottom;
}
[data-page="phm"] .persona--text .persona__h {
  font-size: clamp(20px, 1.55vw, 23px);
  line-height: 1.18;
  margin: 0 0 8px 0;
  text-wrap: balance;
  max-width: 22ch;
}
[data-page="phm"] .persona--text .persona__sub {
  font-size: clamp(15px, 1.05vw, 16px);
  color: color-mix(in oklab, var(--ink-900) 65%, transparent);
  line-height: 1.45;
  text-wrap: pretty;
  margin: 0;
  max-width: 28ch;
  text-align: left;
}

/* Subtle accent bar that grows on hover */
[data-page="phm"] .persona--text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--sage, #5a7a52);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 380ms cubic-bezier(.2,.7,.2,1);
  z-index: 2;
}

/* Soft radial that follows the cursor (set via JS) */
[data-page="phm"] .persona--text::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    180px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in oklab, var(--sage, #5a7a52) 14%, transparent),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 250ms var(--ease, ease-out);
  pointer-events: none;
  z-index: 0;
}

/* Hover state */
[data-page="phm"] .persona--text:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--sage, #5a7a52) 60%, transparent);
}
[data-page="phm"] .persona--text:hover::before {
  transform: scaleY(1);
}
[data-page="phm"] .persona--text:hover::after {
  opacity: 1;
}
[data-page="phm"] .persona--text:hover .persona__num {
  transform: scale(1.04);
}

/* Brutalist treatment */
[data-direction="brutalist"] [data-page="phm"] .persona--text {
  border: 2px solid var(--ink-900);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ink-900);
  background: var(--paper);
}
[data-direction="brutalist"] [data-page="phm"] .persona--text:hover {
  transform: translate(-2px, -3px);
  box-shadow: 8px 8px 0 var(--ink-900);
  border-color: var(--ink-900);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-page="phm"] .persona--text,
  [data-page="phm"] .persona--text::before,
  [data-page="phm"] .persona--text::after,
  [data-page="phm"] .persona--text .persona__num {
    transition: none;
  }
  [data-page="phm"] .persona--text:hover {
    transform: none;
  }
}

@media (max-width: 900px) {
  [data-page="phm"] .personas__grid--text { grid-template-columns: 1fr; }
  [data-page="phm"] .persona--text { min-height: 0; }
  [data-page="phm"] .persona--text .persona__h,
  [data-page="phm"] .persona--text .persona__sub { max-width: 100%; }
}
[data-page="phm"] .instructor {
  background: var(--paper-warm);
  color: var(--ink-900);
}
[data-page="phm"] .testimonials {
  background: var(--paper);
  color: var(--ink-900);
}
[data-page="phm"] .price {
  background: var(--paper-warm);
  color: var(--ink-900);
}
[data-page="phm"] .doubt {
  background: var(--paper-warm);
  color: var(--ink-900);
}

/* Diferenciais: imagens nas dimensões originais (856x546) */
[data-page="phm"] .diff-item__shot {
  aspect-ratio: 856 / 546;
}
[data-page="phm"] .diff-item__shot img {
  object-fit: cover;
}

[data-page="phm"] .btn--green {
  background: var(--sage);
  color: var(--paper);
}
[data-page="phm"] .btn--green:hover {
  background: var(--ink-900);
}