/* ══════════════════════════════════════════════════════════════
   03-DESIGN-FIX-V2.CSS — Padronização de hierarquia, spacing,
   tipografia e composição de cards. Carrega por último, sobrescreve.

   Princípios:
   1. ESCALA TIPOGRÁFICA: 10 tokens (--fs-*) substituem 80 font-sizes
      ad-hoc. Aplicado em headlines + body principais. Mantém 80%
      do CSS antigo intocado (substituição é incremental).
   2. HEADLINES H2 DE SEÇÃO: tamanho único (--fs-h2-section).
      Hero permanece em destaque (--fs-h1-hero).
   3. PADDING DE SEÇÃO: token único --space-section-y. Aplicado a
      todas seções principais; remove os 4 valores divergentes
      (88/96/112 + sem-padding).
   4. STATS NUMÉRICOS: número herói + label muted, escala maior.
   5. CASE-SPOTLIGHT desktop: layout horizontal (mockup + stats grid).
   6. GAPS: 4 tokens (--gap-*) ao invés de 13.
   7. CONTAINERS: 3 tokens (--container-*).
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ─── ESCALA TIPOGRÁFICA (10 tokens) ─── */
  --fs-xs:    0.75rem;   /* 12px - captions/badges */
  --fs-sm:    0.875rem;  /* 14px - labels, ribbon, footer */
  --fs-base:  1rem;      /* 16px - body */
  --fs-md:    1.125rem;  /* 18px - body destacado, subtitle */
  --fs-lg:    1.25rem;   /* 20px - lead */
  --fs-xl:    1.5rem;    /* 24px - H3 */
  --fs-2xl:   2rem;      /* 32px - H2 menor */
  /* HEADLINES — DEIXAR a versão publicada decidir (Leo prefere a hierarquia original).
     Os tokens abaixo NÃO são aplicados automaticamente em section-title (ver abaixo).
     Mantidos apenas pra referência interna / customização pontual. */
  --fs-h2-section: clamp(2.5rem, 5.8vw, 4.5rem);
  --fs-h1-hero:    clamp(2.75rem, 7.5vw, 5.25rem);
  --fs-stat-number: clamp(2rem, 4vw, 3.25rem);    /* 32→52px - números heróis */

  /* ─── SPACING ─── (compactado pra ficar próximo da PUB) */
  --space-section-y: 80px;
  --space-section-y-mobile: 56px;

  /* ─── GAPS (4 tokens) ─── */
  --gap-tight: 8px;
  --gap-base: 16px;
  --gap-wide: 24px;
  --gap-section: 48px;

  /* ─── CONTAINERS (3 tokens) ─── */
  --container-narrow: 960px;
  --container-base: 1140px;
  --container-wide: 1400px;
}

/* ══════════════════════════════════════════════════════════════
   1. HEADLINES — H1 hero levemente MAIOR + TODOS H2 padronizados.
   Leo: "gostando do H2 atual (76px), aumentar um pouco o H1,
   padronizar — about/pivot/final-cta estavam menores".
   ══════════════════════════════════════════════════════════════ */

/* H1 hero — REVERTIDO pro tamanho da versão publicada (Leo: gostou
   mais da experiência da primeira dobra publicada). Mantém igual ao
   .section-title global (76px desktop). */
/* Sem override aqui — herda do clamp(24px, 7vw, 76px) da regra global */

/* TODOS os H2 de seção → tamanho único 76px (remove os overrides
   menores que faziam about/pivot/final-cta destoarem) */
.about .section-title,
.pivot__title,
.final-cta__title,
.method .section-title,
.delivers .section-title,
.benefits .section-title,
.myths .section-title,
.polarize .section-title,
.depoimentos .section-title,
.case-spotlight .section-title,
.customer-reviews__title,
.prova-social-autoridades__title {
  font-size: clamp(24px, 7vw, 76px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.018em !important;
  text-wrap: balance;
}

/* About: dar mais espaço pra coluna do texto (60/40 em vez de 50/50)
   pra headline 76px não quebrar palavra por linha */
@media (min-width: 901px) {
  .about__layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    gap: 48px !important;
  }
}

/* Lead/subtítulo de seção padronizado */
.section-subtitle,
.method__lead,
.pivot__text,
.polarize__subtitle,
.myths__subtitle {
  font-size: var(--fs-md) !important;
  line-height: 1.55 !important;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

/* ══════════════════════════════════════════════════════════════
   2. PADDING DE SEÇÃO — token único
   ══════════════════════════════════════════════════════════════ */

.pains,
.myths,
.pivot,
.polarize,
.method,
.benefits,
.about,
.delivers,
.depoimentos,
.faq,
.case-spotlight,
.case-spotlight-root,
.customer-reviews,
.prova-social-autoridades,
.before-after,
.agenda-math {
  padding-top: var(--space-section-y) !important;
  padding-bottom: var(--space-section-y) !important;
}

/* Zera tokens internos de componentes que tinham padding-y próprio
   divergente do --space-section-y (case-spotlight 80px, customer-reviews
   64/96/120 por bp, prova-social-autoridades 100/80) */
.case-spotlight-root { --cs-padding-y: 0 !important; }
.customer-reviews { --cr-section-padding-y: 0 !important; }
.prova-social-autoridades { --psa-section-padding-y: 0 !important; }

/* Final CTA respira um pouco mais (último ar antes do submit) */
.final-cta {
  padding-top: calc(var(--space-section-y) * 1.15) !important;
  padding-bottom: calc(var(--space-section-y) * 1.15) !important;
}

/* Hero não precisa padding-top (já tem header acima) */
.hero {
  padding-top: 0 !important;
  padding-bottom: var(--space-section-y) !important;
}

@media (max-width: 768px) {
  .pains, .myths, .pivot, .polarize, .method, .benefits,
  .about, .delivers, .depoimentos, .faq, .case-spotlight,
  .customer-reviews, .prova-social-autoridades, .before-after,
  .agenda-math, .hero {
    padding-top: var(--space-section-y-mobile) !important;
    padding-bottom: var(--space-section-y-mobile) !important;
  }
  .hero { padding-top: 0 !important; }
  .final-cta {
    padding-top: calc(var(--space-section-y-mobile) * 1.15) !important;
    padding-bottom: calc(var(--space-section-y-mobile) * 1.15) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   3-4. PARQUEADO — Refactor de case-spotlight + tipografia heroica
   de stats requer ajuste nas classes legadas Elementor (.elementor-element-*).
   Fora do escopo dessa rodada de fix (alto risco). Manter regras existentes.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   5. CONTAINERS — 3 tokens
   ══════════════════════════════════════════════════════════════ */

.container {
  max-width: var(--container-base) !important;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.about__layout,
.method__pair {
  max-width: var(--container-wide) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.myths__grid,
.method__diagram,
.faq__list {
  max-width: var(--container-narrow) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ══════════════════════════════════════════════════════════════
   6. GAPS — substituir gaps mais usados pelos 4 tokens
   ══════════════════════════════════════════════════════════════ */

.pains__list,
.myths__grid,
.benefits__grid,
.delivers__grid,
.polarize__cols {
  gap: var(--gap-wide) !important;
}

.about__stats,
.case-spotlight__metrics {
  gap: var(--gap-base) !important;
}
/* .hero__cta-reasons REMOVIDO daqui — PUB usa 8px nativo. Override
   pra 16px causava +16px de altura no hero (vista mobile) */

/* ══════════════════════════════════════════════════════════════
   7. BRUSH-HIGHLIGHT — mais discreto, comportamento "underline
   pincelado" em vez de tarja gigante. Cobre só metade inferior
   da palavra (estilo Stabilo Boss / marca-texto real).
   ══════════════════════════════════════════════════════════════ */

/* Brush IGUAL ao da versão publicada — tarja amarela completa cobrindo
   quase 100% da palavra (cream-gold com pincelada). Leo aprovou esse
   estilo na versão publicada. */
.brush-highlight {
  position: relative;
  display: inline-block;
  padding: 0 0.18em;
  z-index: 0;
  color: var(--navy-deep); /* texto navy SOBRE brush cream-gold = legível */
}

.brush-highlight::before {
  content: '';
  position: absolute;
  /* Cobre quase 100% da palavra (estilo PUB original) */
  inset: 0.05em -0.08em 0.02em -0.08em;
  background: var(--cream-gold);
  opacity: 1;
  transform: skewX(-3deg) rotate(-0.6deg);
  border-radius: 6px 14px 8px 18px / 18px 6px 14px 10px;
  z-index: -1;
}

/* Permite quebra de linha em headlines grandes (não nowrap) */
.hero__title .brush-highlight,
.section-title .brush-highlight,
[class*="__title"] .brush-highlight {
  white-space: normal;
}

/* ══════════════════════════════════════════════════════════════
   8. RESPIRO ENTRE HEADLINE E SUBTÍTULO — REMOVIDO
   Estava adicionando 16px de margin-top no subtitle do hero
   (PUB tem 0px). Quebrava paridade mobile com a publicada.
   Cada componente decide seu próprio respiro via margin-bottom
   do __title (já compactado no bloco 10).
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   10. ESPAÇAMENTOS INTERNOS DO HERO + SEÇÕES — COMPACTAR (Leo: PUB
   é mais compacta entre H1→subtítulo→CTA→reasons→VSL).
   ══════════════════════════════════════════════════════════════ */

/* Hero: NÃO mexer mais aqui. PUB tem margins próprias que JÁ funcionam.
   Bloco anterior tinha 6 overrides que quebraram paridade mobile com PUB:
   - .hero__title mb 18px (PUB: 16px)
   - .hero__subtitle margin-top 16px via seletor [class*="__title"]+[class*="__subtitle"] (PUB: 0px)
   - .hero__cta-reasons mb 28px (PUB: 0px)
   - .hero__badge mb 20px (PUB: 24px)
   = soma de +44px-56px extras na 1ª dobra mobile.
   Decisão: zero override no hero — herdar tudo do 02-landing.css igual à PUB. */

/* Seções: reduzir margin-bottom de section-title pra próximo elemento */
.section-title { margin-bottom: 18px !important; }
.section-subtitle { margin-bottom: 28px !important; }

/* Method/delivers/about/etc.: reduzir gap entre lead text e grid de cards */
.method__lead, .pivot__text, .polarize__subtitle, .myths__subtitle {
  margin-bottom: 32px !important;
}

/* Reduzir gap entre o intro de cada seção e o conteúdo (grid/lista/etc) */
.pains__intro,
.myths__header,
.polarize__header,
.delivers__header {
  margin-bottom: 36px !important;
}

/* ══════════════════════════════════════════════════════════════
   9. DELIVERS CARDS — hero image editorial acima do título
   (3 ilustrações Higgsfield no estilo The New Yorker)
   ══════════════════════════════════════════════════════════════ */

.delivers__card {
  /* card respira mais agora que tem imagem grande no topo */
  padding: 0 !important;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 225, 166, 0.15);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.delivers__card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 225, 166, 0.35);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

.delivers__hero-image {
  margin: 0;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(255, 225, 166, 0.1);
}

.delivers__hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.delivers__card .delivers__title {
  padding: 24px 24px 8px;
  font-size: var(--fs-lg) !important;
  line-height: 1.3 !important;
  font-weight: 700;
  color: var(--cream-gold);
}

.delivers__card .delivers__text {
  padding: 0 24px 28px;
  font-size: var(--fs-base) !important;
  line-height: 1.6 !important;
}

/* Esconde o .delivers__icon antigo (legado SVG pequeno) — substituído pela hero-image */
.delivers__card .delivers__icon { display: none !important; }

/* Mobile: respira menos */
@media (max-width: 768px) {
  .delivers__card .delivers__title {
    padding: 20px 20px 8px;
    font-size: var(--fs-md) !important;
  }
  .delivers__card .delivers__text {
    padding: 0 20px 24px;
  }
}