/* ==========================================================================
   sections.css — estilos por bloco BL1–BL9 (esqueleto das estruturas 08–10).
   Sessão S4: blocos de leitura (Dor, Solução, ROI, Comparativo, Prova, Oferta,
   FAQ). Hero/Fechamento (BL1/BL9) recebem ajuste fino na S5. Usa componentes
   da camada única (components.css); aqui só composição/layout de seção.
   ========================================================================== */

/* Título de seção compartilhado */
.section__title { margin-bottom: var(--sp-16); }
.section__lead { color: var(--tx-2-light); font-size: var(--f-body-lg); max-width: 60ch; }
.section--dark .section__lead { color: var(--tx-2-dark); }

/* ── BL3 Solução — pilares (captura + texto alternados) ── */
.pillar { display: grid; gap: var(--sp-32); align-items: center; margin-block: var(--sp-64); }
@media (min-width: 860px) {
  .pillar { grid-template-columns: 1fr 1fr; gap: var(--sp-64); }
  .pillar--reverse .pillar__media { order: 2; }
}
.pillar__kicker { color: var(--brand-blue); font-weight: 700; font-size: var(--f-sm); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-8); }
.pillar__title { margin-bottom: var(--sp-12); }
.pillar__text { color: var(--tx-2-light); }
.pillar__practice { margin-top: var(--sp-16); padding: var(--sp-16); border-left: 3px solid var(--brand-blue); background: rgba(46,107,230,0.04); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: var(--f-sm); color: var(--tx-2-light); }
.section--dark .pillar__text { color: var(--tx-2-dark); }

/* ── BL4 ROI — cards de conta (número-líder laranja permitido aqui) ── */
.roi-grid { display: grid; gap: var(--sp-24); grid-template-columns: 1fr; margin-top: var(--sp-32); }
@media (min-width: 720px) { .roi-grid { grid-template-columns: repeat(3, 1fr); } }
.roi-card__value { font-family: var(--mono); font-size: var(--f-h2); font-weight: 700; color: var(--cta-orange); line-height: 1; }
.roi-card__label { margin-top: var(--sp-8); color: var(--tx-2-dark); font-size: var(--f-sm); }
.roi-disclaimer { margin-top: var(--sp-24); font-size: var(--f-xs); color: var(--tx-3-dark); display: flex; align-items: center; gap: var(--sp-8); }
.roi-disclaimer svg { width: 16px; height: 16px; color: var(--warn); flex: 0 0 auto; }

/* ── BL7 Oferta — card de conversão centrado ── */
.offer { max-width: 640px; margin-inline: auto; text-align: center; }
.offer .form { margin-inline: auto; text-align: left; }
.offer__smart { margin-top: var(--sp-32); text-align: left; }

/* ── BL8 FAQ — largura de leitura ── */
.faq { max-width: 760px; margin-inline: auto; }

/* ── D3 Custo / D4 Virada — banda de frase única (statement) ── */
.statement { max-width: 820px; margin-inline: auto; text-align: center; }
.statement .eyebrow { justify-content: center; }
.statement__text { font-size: var(--f-h3); line-height: 1.4; color: var(--tx-1-light); margin-top: var(--sp-16); }
.statement__text strong { color: var(--brand-blue); font-weight: 600; }
.statement--dark .statement__text { color: var(--tx-1-dark); }
.statement--dark .statement__text strong { color: var(--tx-1-dark); }
.statement__text--lg { font-size: var(--f-h2); font-weight: 600; }

/* ── BL1 Hero — dor+solução+CTA+mídia acima da dobra (5s) ── */
/* Fundo escuro (âncora da dobra); screenshot claro vira o maior contraste. */
.hero { padding-top: calc(var(--header-h) + var(--sp-48)); }
.hero__grid { display: grid; gap: var(--sp-48); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.05fr 1fr; gap: var(--sp-64); } }
.hero__title { font-size: var(--f-h1); margin-bottom: var(--sp-16); }
.hero__title .hl { color: var(--brand-blue); }              /* destaque azul — nunca laranja em texto */
.hero__sub { color: var(--tx-2-dark); font-size: var(--f-body-lg); max-width: 52ch; margin-bottom: var(--sp-32); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-16); align-items: center; }
.hero__trust { margin-top: var(--sp-16); display: flex; align-items: center; gap: var(--sp-8); font-size: var(--f-sm); color: var(--tx-3-dark); }
.hero__trust svg { width: 16px; height: 16px; color: var(--ok); flex: 0 0 auto; }
.hero__media { position: relative; }
/* B destaca vídeo/loop; A/C imagem estática. Mobile: imagem estática antes do vídeo. */
.hero__media video { width: 100%; border-radius: var(--radius-md); }

/* Versão 4 Storytelling (D1): atmosfera de usinagem em tela cheia escurecida,
   zero sistema no hero (regra do 11, beat 1). Texto sobre overlay p/ contraste AA. */
.hero--scene { position: relative; overflow: hidden; min-height: 86vh; display: flex; align-items: center; }
.hero--scene .hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero--scene .hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); }
.hero--scene .hero__bg::after { content: ""; position: absolute; inset: 0; background: var(--img-overlay); }
@media (min-width: 900px) {
  .hero--scene .hero__bg::after { background: var(--img-overlay-lateral); }
  .hero--scene .hero__grid { grid-template-columns: 1fr; }   /* só a headline sobre a cena */
}
.hero--scene .container { position: relative; z-index: 1; }

/* ── BL9 Fechamento — última conversão + fecho da narrativa ── */
.closing { text-align: center; }
.closing__inner { max-width: 720px; margin-inline: auto; position: relative; z-index: 1; }
.closing__title { font-size: var(--f-h2); margin-bottom: var(--sp-16); }
.closing__sub { color: var(--tx-2-dark); font-size: var(--f-body-lg); margin-bottom: var(--sp-32); }
/* Faixa do app esmaecida ao fundo (FIM-01) + logo branca */
.closing--banner { position: relative; overflow: hidden; }
.closing--banner .closing__bg { position: absolute; inset: 0; opacity: .12; background-size: cover; background-position: center; filter: var(--img-filter); pointer-events: none; }