/* ============================================================================ V4 — sales-page-v4.css Direção editorial premium escura/creme do blueprint, reutilizando os tokens e a tipografia já carregados em app.css (Fraunces display + Hanken Grotesk UI). Sem fonte externa, sem dependência nova, sem asset pesado. Mobile-first. O player da VSL (.vsl*), o lightbox e a sticky reutilizam a lógica de analytics.js e sales-page-v3.js — aqui só o visual dos containers .sp4-*. ============================================================================ */ .sales-page-v4 { --v4-bg: #16161b; /* fundo escuro dominante */ --v4-surface: #1f1f25; /* superfície escura alternada */ --v4-cream: #f5f2ea; /* marfim (blueprint) */ --v4-ink: #f5f2ea; /* texto sobre escuro */ --v4-ink-dim: #c9c6bd; /* texto secundário sobre escuro */ --v4-ink-dark: #16161b; /* texto sobre marfim */ --v4-dark-dim: #3f3d38; /* texto secundário sobre marfim */ --v4-gold: var(--gold, #b88a2e); --v4-gold-deep: var(--gold-deep, #7d5c1e); --v4-line: rgba(245, 242, 234, 0.14); --v4-line-dark: rgba(22, 22, 27, 0.14); background: var(--v4-bg); color: var(--v4-ink); } /* ── Ritmo de seções (alternância escuro/superfície/marfim) ───────────────── V4-CRO-POLISH (2026-08-03): o ritmo-base cai ~22%. A folga anterior — 60px no piso e 120px no teto, de CADA lado de CADA seção — foi calibrada quando a página ainda dependia de engenharia de viewport para manter o CTA fora da primeira dobra; com o fluxo natural de volta, ela virou vazio. A redução é de COMPOSIÇÃO pura (só padding): nenhuma palavra sai, nenhuma fonte encolhe, nenhum alvo de toque diminui, e nada do ritmo vertical depende de unidade de viewport, space-around, margem negativa, transform, posição absoluta ou espaçador artificial. (A única unidade de viewport que resta no arquivo é o `max-height` do painel de navegação mobile, que é altura máxima de um menu — não ritmo de seção.) piso 3,75rem → 2,9rem (60px → 46,4px, −22,7%) fluido 9vw → 7vw (−22,2%) teto 7,5rem → 5,85rem (120px → 93,6px, −22,0%) Oferta e fechamento respiram um pouco mais que a base (~+15%): são o clímax comercial e o encerramento da página, e comprimi-los ao mesmo passo das seções de argumento achataria a hierarquia. Ainda assim ficam bem abaixo do ritmo anterior. */ .sp4-section { padding-block: clamp(2.9rem, 7vw, 5.85rem); } .sp4-offer, .sp4-final { padding-block: clamp(3.35rem, 8vw, 6.75rem); } .sp4-hero { background: var(--v4-bg); } .sp4-routes { background: var(--v4-surface); padding-top: 2.2rem; padding-bottom: 2.2rem; } .sp4-vsl { background: var(--v4-surface); } .sp4-pain { background: var(--v4-cream); color: var(--v4-ink-dark); } .sp4-mech { background: var(--v4-bg); } .sp4-first { background: var(--v4-surface); } .sp4-demo { background: var(--v4-bg); } .sp4-stack { background: var(--v4-cream); color: var(--v4-ink-dark); } .sp4-vs { background: var(--v4-bg); } .sp4-author { background: var(--v4-surface); } .sp4-honesty { background: var(--v4-cream); color: var(--v4-ink-dark); } .sp4-social { background: var(--v4-surface); } .sp4-offer { background: var(--v4-bg); } /* V4-4 (revisão comercial M11): FAQ em creme separa o clímax (oferta) do fechamento — os dois blocos escuros âncora respiram e a reta final deixa de ser uma corrida escura contínua. */ .sp4-faq { background: var(--v4-cream); color: var(--v4-ink-dark); } .sp4-final { background: var(--v4-bg); } /* seções claras: texto auxiliar mais escuro para contraste AA */ .sp4-pain .small, .sp4-stack .small, .sp4-honesty .small, .sp4-faq .small { color: var(--v4-dark-dim); } /* ── Tipografia ───────────────────────────────────────────────────────────── */ .sp4-h2 { font-family: var(--font-display, "Fraunces", Georgia, serif); font-weight: 560; line-height: 1.12; letter-spacing: -0.01em; font-size: clamp(1.7rem, 4.4vw, 2.75rem); margin: 0 0 0.9rem; } .sp4-eyebrow { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v4-gold); margin: 0 0 0.65rem; } .sp4-lead { font-size: clamp(1.02rem, 2.2vw, 1.2rem); color: var(--v4-ink-dim); max-width: 60ch; } .sp4-pain .sp4-lead, .sp4-stack .sp4-lead, .sp4-honesty .sp4-lead { color: var(--v4-dark-dim); } .sp4-section p { line-height: 1.6; max-width: 68ch; } /* V4-4 (PARTE R): corpo ≥17px no desktop. Alvo restrito a parágrafos SEM classe + itens de .sp4-list — o compound vale (0,1,0) e empataria com .small/.sp4-lead etc. decididos por ordem de fonte (achado F1 da revisão); p:not([class]) elimina o conflito por construção. */ @media (min-width: 768px) { .sp4-section :where(p:not([class]), .sp4-list li) { font-size: 1.0625rem; } } /* V4-NVSL-01: .sp4-pain__q e .sp4-first__box saíram do HTML nesta fase (a pergunta retórica era o resto do bloco de DOR, hoje diagnóstico; a caixa do cursinho era a 3ª ocorrência do mesmo enquadramento). As regras vão junto — CSS órfão é dívida silenciosa. */ .sp4-nowrap { white-space: nowrap; } .sp4-callout { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 540; line-height: 1.3; margin-top: 1.5rem; padding-left: 1rem; border-left: 3px solid var(--v4-gold); } /* ── CONTRASTE DOS TÍTULOS (corrige app.css h1,h2,h3{color:var(--legal-black)}) ── Em app.css os títulos herdam #16161b — igual ao fundo escuro da V4 (contraste ~1:1). Aqui, com especificidade acima do seletor de elemento do app.css, fixamos: seções escuras → texto marfim (--v4-ink); seções creme → grafite (--v4-ink-dark). NÃO edita app.css. */ .sales-page-v4 .sp4-section h1, .sales-page-v4 .sp4-section h2, .sales-page-v4 .sp4-section h3, .sales-page-v4 .sp4-hero__title, .sales-page-v4 .sp4-offer__title { color: var(--v4-ink); } /* seções creme mantêm títulos escuros (mesma especificidade, declaradas depois) */ .sales-page-v4 .sp4-pain h1, .sales-page-v4 .sp4-pain h2, .sales-page-v4 .sp4-pain h3, .sales-page-v4 .sp4-stack h1, .sales-page-v4 .sp4-stack h2, .sales-page-v4 .sp4-stack h3, .sales-page-v4 .sp4-faq h1, .sales-page-v4 .sp4-faq h2, .sales-page-v4 .sp4-faq h3, .sales-page-v4 .sp4-honesty h1, .sales-page-v4 .sp4-honesty h2, .sales-page-v4 .sp4-honesty h3 { color: var(--v4-ink-dark); } /* ── ÂNCORAS: CONTRATO ÚNICO de scroll-margin ──────────────────────────────── O header da V4 é sticky em TODOS os viewports (a topbar dourada fica no fluxo e rola para fora; só o header gruda). Nenhum título pode ficar escondido atrás dele ao navegar por âncora. V4-CRO-POLISH (2026-08-03): havia DUAS declarações de scroll-margin-top para o mesmo seletor, e a segunda (4,5rem, sem media query) revogava em silêncio os 7rem do desktop — media query não soma especificidade, então a última declarada vencia em toda largura. Agora existe UM contrato, declarado uma única vez: mobile 4,75rem (76px) — cobre o header fechado real (≈62px: 44px de alvo de toque + 2×0,55rem de padding) com folga; ≥900px 7rem (112px) — cobre o header quebrado em duas linhas no zoom de texto 200%. Em rem de propósito: com zoom de texto a reserva cresce junto com o header. */ .sales-page-v4 [id] { scroll-margin-top: 4.75rem; } @media (min-width: 900px) { .sales-page-v4 [id] { scroll-margin-top: 7rem; } } /* ── V4-3 (PARTE B): barra de prazo ACIMA do header + header escuro integrado ── Renderizados pelo base.html apenas com v4_page (V4 pública/preview). Sem glassmorphism, gradiente neon ou animação. V4-CRO-POLISH (2026-08-03): abaixo de 900px a navegação passa a ser um painel comandado por botão hambúrguer — a descrição anterior ("header estático, mobile sem hamburger") deixou de valer e saiu daqui. */ .sales-page-v4 .sp4-topbar { background: var(--v4-gold); color: var(--v4-ink-dark); } .sp4-topbar__text { margin: 0 auto; padding: 0.42rem 0.9rem; max-width: 72rem; text-align: center; font-size: 0.82rem; line-height: 1.35; letter-spacing: 0.01em; } @media (max-width: 389px) { .sp4-topbar__text { font-size: 0.76rem; padding-block: 0.34rem; } } .sp4-topbar strong { font-weight: 700; } /* V4-CRO-POLISH: o header é sticky em TODA largura (antes, só ≥900px). A topbar dourada continua no fluxo e sai da tela ao rolar — só o header gruda, com fundo opaco. Zero CLS: sticky não retira o elemento do fluxo. A reserva das âncoras está no contrato único acima. */ .sales-page-v4 .site-header--v4 { position: sticky; top: 0; z-index: 60; background: var(--v4-bg); border-bottom: 1px solid var(--v4-line); } @media (min-width: 900px) { .sales-page-v4 .site-header--v4 { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); } } /* flex-wrap: em zoom de texto 200% o CTA quebra para a linha de baixo em vez de estourar */ .sp4-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 0.6rem; padding-block: 0.55rem; min-width: 0; } .sp4-nav { flex-wrap: wrap; } .sales-page-v4 .site-header--v4 .brand__mark { color: var(--v4-ink); } .sp4-nav { display: flex; align-items: center; gap: clamp(0.55rem, 2vw, 1.4rem); min-width: 0; } .sp4-nav__link { display: none; color: var(--v4-ink-dim); text-decoration: none; font-size: 0.92rem; white-space: nowrap; } .sp4-nav__link:hover { color: var(--v4-ink); } .sp4-nav__entry { color: var(--v4-ink-dim); text-decoration: none; font-size: 0.88rem; white-space: nowrap; } .sp4-nav__entry:hover { color: var(--v4-ink); } /* .sp4-nav__cta = SÓ layout/dimensões do CTA compacto do header; a paleta de compra (normal/hover/foco) vem exclusivamente da classe global .btn--purchase (app.css), aplicada JUNTO no próprio link. */ .sp4-nav__cta { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; font-size: 0.82rem; padding-inline: 0.8rem; } /* V4-VTSD-01: o CTA do header virou ÂNCORA para o vídeo (ação secundária), não compra. Some daqui a paleta dourada — ela continua exclusiva de .btn--purchase, e é essa exclusividade que faz o dourado significar "comprar". Contorno marfim sobre o header escuro: contraste alto, hierarquia visivelmente abaixo do CTA de checkout que aparece depois da VSL. */ .sp4-nav__cta--video { background: transparent; color: var(--v4-ink); border: 1px solid rgba(245, 242, 234, 0.45); letter-spacing: 0.04em; font-weight: 600; } .sp4-nav__cta--video:hover { border-color: var(--v4-ink); background: rgba(245, 242, 234, 0.08); } @media (max-width: 389px) { .sales-page-v4 .site-header--v4 .brand__mark { font-size: 0.95rem; } .sp4-nav__cta { padding-inline: 0.55rem; font-size: 0.74rem; } .sp4-nav__entry { font-size: 0.8rem; } } @media (min-width: 900px) { .sp4-nav__link { display: inline; } } /* ── F10: fachada do player da VSL — a THUMBNAIL DO PACOTE, em quadro inteiro ── O cabeçalho anterior descrevia um pôster composto em HTML/CSS sobre uma fotografia; essa composição saiu na V4-PREMEDIA-C. Hoje a fachada é a arte do pacote de mídia ocupando a moldura 16:9 inteira, sem título, selo, marca ou gradiente escritos por cima. O container .vsl (app.css) já reserva 16:9 → zero CLS. V4-VTSD-01-FIX1: a VSL vive na PRIMEIRA DOBRA, logo abaixo do hero, e a imagem carrega com loading="eager" e fetchpriority="high" (decoding="async" mantido), não mais lazy/low. O vídeo e o iframe/stream continuam SEM autoplay e com a mesma mecânica de carregamento sob demanda já aprovada: quem dispara é o clique no botão. O botão e os hooks data-vsl-play são os mesmos do player testado. */ /* z-index:1 cria stacking context no botão: o play (z-3) fica CONTIDO abaixo do overlay .vsl__loading (z-2 no contexto do .vsl) durante o carregamento — achado A3 da revisão. */ /* V4-PREMEDIA-C: FACHADA INTEGRAL. A thumbnail do pacote ocupa a moldura 16:9 inteira; o HTML não compõe mais título, selo, marca nem gradiente sobre ela (a arte definitiva já traz o seu). Saíram daqui, junto com o markup: .sp4-poster__content, __title, __badge, __brand, o grid 1.15fr/0.85fr e o ::before que escurecia a faixa esquerda da imagem. O fundo sólido permanece como piso da moldura enquanto a imagem carrega — não como camada sobre ela. */ .sales-page-v4 .sp4-poster { z-index: 1; } .sp4-poster__frame { position: absolute; inset: 0; display: block; background: #101014; } /* preenche a moldura inteira: sem coluna, sem recorte lateral */ .sp4-poster__photo { position: absolute; inset: 0; overflow: hidden; } /* object-fit:cover + centro: a arte final é a peça inteira, não um retrato a enquadrar pelo topo */ .sp4-poster__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; } .sp4-poster__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; } .sp4-poster:hover .sp4-poster__play, .sp4-poster:focus-visible .sp4-poster__play { transform: translate(-50%, -50%) scale(1.06); } /* telas estreitas: só o diâmetro encolhe — o play continua no centro exato da fachada (50%/50%), porque não há mais coluna de texto de onde se afastar */ @media (max-width: 559px) { .sp4-poster__play { width: 3.2rem; height: 3.2rem; } } /* A arte definitiva aprovada já traz o ícone de play. O span permanece no DOM para preservar os hooks e a semântica do botão testado, mas não desenha um segundo ícone sobre a thumbnail. */ .sales-page-v4 .sp4-poster__play { display: none; } /* ── CTA de compra V4 — cor CANÔNICA em .btn--purchase (app.css, decisão do owner 2026-07-20). Blueprint §8.5 (dourado/texto escuro) segue valendo, mas a paleta (fundo/texto/borda/hover/foco) NÃO é mais duplicada aqui: vem da classe global .btn--purchase aplicada JUNTO nos mesmos CTAs (--v4-gold/--v4-ink-dark == --gold/--legal-black). Restam só ajustes tipográficos da V4. ────── */ .sp4-cta--purchase { letter-spacing: 0.01em; } .sp4-cta-group { margin-top: 1.5rem; } .sp4-cta-group--center { text-align: center; } .sp4-microcopy { margin-top: 0.7rem; font-size: 0.9rem; color: var(--v4-ink-dim); } /* V4-VTSD-01: .sp4-hero__compliance saiu com os números do hero. V4-CRO-POLISH (2026-08-03): .sp4-vsl__source — a linha de ressalva que ficava logo abaixo do player — também saiu, do HTML e daqui. O compliance genérico deixou de ser repetido ao longo do percurso comercial e passou a viver UMA vez, no rodapé; os qualificadores específicos continuam adjacentes aos números que qualificam (mecanismo, escopo, rotas). */ /* ── Hero + VSL: UMA unidade de abertura ────────────────────────────────────── V4-VTSD-01. A arquitetura exige o poster e o play na PRIMEIRA DOBRA, e o gargalo é vertical: cada pixel entre o topo e o player é pixel que empurra o vídeo para fora. Três mudanças, todas de COMPOSIÇÃO — nada aqui reduz fonte de corpo, alvo de toque, contraste ou foco, e nada esconde conteúdo: 1. o hero passa a ser COLUNA ÚNICA centrada na mesma medida do player (47,5rem), o que também elimina a coluna direita que ficou vazia quando a screenshot saiu; 2. padding vertical do hero e da VSL reduzido — as duas seções passam a ler como um bloco só, e a troca de fundo (bg → surface) continua marcando a transição; 3. o teto do H1 cai de 3,4rem para 2,9rem: a headline nova é uma PERGUNTA longa (13 palavras), e no teto antigo ela ocupava três linhas de 54px no desktop. ORÇAMENTO VERTICAL ATÉ O TOPO DO PLAYER (estimado; este sandbox não tem navegador — bind de porta negado e Chromium indisponível — então a medição real é do Codex): mobile-320 .... topbar 28 + header 48 + hero 18 + eyebrow 27 + H1 ~73 + lead ~135 + instrução 29 + VSL pt 16 = ~374px; player 16:9 em 288px = 162px ⇒ poster inteiro dentro dos 568px, com folga de ~32px. desktop-1440 .. topbar 30 + header 56 + hero 24 + eyebrow 27 + H1 ~148 + lead ~125 + instrução 30 + VSL pt 26 = ~466px; player em 760px = 427px ⇒ base do poster em ~893px, dentro dos 900px. Margem estreita: se a medição real do Codex estourar, o ajuste seguinte é a medida do wrapper da VSL — nunca cortar copy obrigatória. */ /* padding-bottom ZERO: quem controla o vão hero→player é o padding-block-start da .sp4-vsl, no bloco de FLUXO NATURAL abaixo — e só ele. O padding-top da .sp4-vsl que ficava aqui saiu junto: eram duas declarações para o MESMO vão, e a segunda vencia em silêncio. */ .sp4-hero { padding-block: clamp(1.1rem, 3vw, 1.5rem) 0; } .sp4-hero__grid { display: grid; gap: clamp(1.75rem, 5vw, 3.25rem); align-items: center; } .sp4-hero__main { max-width: 47.5rem; margin-inline: auto; text-align: center; } .sp4-hero__title { font-family: var(--font-display, "Fraunces", Georgia, serif); font-weight: 580; line-height: 1.08; letter-spacing: -0.015em; font-size: clamp(1.62rem, 5.9vw, 2.9rem); margin: 0.35rem 0 0.7rem; } .sp4-hero__sub { font-size: clamp(0.98rem, 2.1vw, 1.18rem); color: var(--v4-ink-dim); max-width: 62ch; margin-inline: auto; } /* instrução explícita de consumo — o único "comando" da primeira dobra */ .sp4-hero__play { margin: 0.85rem 0 0; font-weight: 600; color: var(--v4-gold); font-size: clamp(0.92rem, 2vw, 1rem); } /* V4-VTSD-01: saíram do CSS, junto com os nós que os usavam, os blocos do hero antigo — as famílias .sp4-facts, .sp4-fact e .sp4-factgroup (a grade 43/3.440/3.025/216, hoje concentrada no mecanismo), a família .sp4-hero-proof (a screenshot, hoje só na demonstração) e .sp4-checks (a linha da fonte de teoria, hoje em .sp4-stack__frame). CSS órfão é dívida silenciosa. V4-VTSD-01-FIX1: este comentário tinha a abreviação ".sp4-fact" seguida de asterisco e barra, que o parser leu como FIM de comentário. O texto restante virou lixo e foi consumido até a chave seguinte, engolindo .sp4-vsl__wrap: a regra nunca entrou no CSSOM e o wrapper da VSL herdava a largura do .container (68rem = 1088px), o que empurrava o pôster para fora da primeira dobra. Nenhuma abreviação com asterisco encosta numa barra neste arquivo. */ /* ── VSL wrapper (V4-4: player dominante, ~700–760px no desktop) ────────────── V4-VTSD-01-FIX1 — GEOMETRIA DA PRIMEIRA DOBRA, medida pelo Codex em 1440×900 com o CSS ainda quebrado: hero 93,8→439,9 · pôster 485,5→1070,5 (largura 1040 ⇒ altura 585) · wrapper computado em 1088px. Com a regra abaixo restaurada em 47,5rem o pôster mediria 760×427,5 e terminaria em ~913px — ainda 13px fora dos 900. Duas mudanças fecham a conta, ambas de COMPOSIÇÃO (nada some, nada encolhe de fonte, nenhum alvo de toque diminui): 1. wrapper 47,5rem → 45rem: player de 720px (dentro da faixa dominante de 704–760px), altura 405px ⇒ −22,5px; 2. o vão hero→pôster cai de 45,6px para ~25px no desktop (padding-top da seção e margin-block da moldura), aproximando as duas metades da MESMA unidade de abertura ⇒ −20px, e o topo do pôster sobe junto. Projeção em 1440×900: pôster ~465 → ~870, com ~30px de folga contra os 900. Estimativa — este sandbox não tem navegador (bind de porta negado e Playwright ausente), então a medição real continua sendo do Codex. */ .sp4-vsl__wrap { max-width: 45rem; margin-inline: auto; } /* ── V4-VSL-FINAL: placeholder interno do player (preview staff) ───────────────────────── Mesma moldura 16:9 do player final para que a geometria da primeira dobra seja avaliável antes da mídia existir. Deliberadamente NÃO parece um player: sem botão de play, sem selo de duração e com rótulo explícito de pendência interna. Contraste alto sobre o fundo escuro da moldura. */ .vsl--placeholder { display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; border-radius: 14px; background: #16161b; border: 1px dashed rgba(245, 242, 234, 0.45); } .sp4-vsl__placeholder { max-width: 34rem; padding: 1.2rem; text-align: center; color: #f5f2ea; } .sp4-vsl__placeholder-tag { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--v4-gold, #d8b25f); } .sp4-vsl__placeholder-title { margin: 0 0 0.7rem; font-size: clamp(1.1rem, 2.6vw, 1.5rem); font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; color: #f5f2ea; } .sp4-vsl__placeholder-msg { margin: 0; font-size: 0.95rem; line-height: 1.5; color: #f5f2ea; } .sp4-vsl__placeholder-msg code { font-size: 0.85em; background: rgba(245, 242, 234, 0.14); border-radius: 4px; padding: 0.1rem 0.3rem; } /* margin ZERO de propósito: o vão player→metadado é do row-gap do .sp4-vsl__argumento e de mais nada (ver o bloco de FLUXO NATURAL abaixo). Margem aqui somaria com o gap. */ .sp4-vsl__meta { margin: 0; font-size: 0.86rem; color: var(--v4-ink-dim); text-align: center; } .sp4-section a:not(.btn):not(.sp4-cta) { color: var(--v4-gold); } /* V4-NVSL-01: válvula secundária abaixo do CTA da VSL — visualmente REBAIXADA de propósito (link, nunca botão), para não disputar com a ação primária. */ .sp4-vsl__secondary { margin: 0.75rem 0 0; text-align: center; color: var(--v4-ink-dim); } .sp4-pain a, .sp4-stack a, .sp4-honesty a, .sp4-faq a { color: var(--v4-gold-deep); } /* A moldura do player NÃO carrega margem própria: o vão acima dela é o padding-block-start da seção e o vão abaixo é o row-gap do .sp4-vsl__argumento. Antes havia margin-block de 1,25rem (0,6rem no desktop) aqui, e ela SOMAVA com o gap — era a causa direta de hero→player e player→metadado estourarem as faixas. Um vão, um controlador. */ .sp4-vsl .vsl { margin-block: 0; } @media (min-width: 900px) { /* V4-VTSD-01-FIX2: o wrapper carrega .container JUNTO de .sp4-vsl__wrap, e o padding-inline: 1.5rem do .container comia 48px do player — max-width 45rem (720px) rendia apenas 672px de vídeo, abaixo da faixa dominante de 704–760px que o contrato exige. Zerar o padding SÓ aqui devolve os 720px sem tocar em nenhum outro .container da página. A especificidade (0,2,0) vence .container (0,1,0) por construção, não por ordem de arquivo. max-width, centralização e a proporção 16:9 permanecem intactos; o pôster passa de 672×378 para 720×405, e em 1440×900 vai de 465,5→843,5 para 465,5→870,5 — ainda dentro dos 900, com ~29,5px de folga. */ .sales-page-v4 .sp4-vsl__wrap { padding-inline: 0; } } /* ───────────────────────────────────────────────────────────────────────────────────────── V4-CRO-POLISH (2026-08-03) — a abertura volta ao FLUXO NATURAL. Decisão expressa do owner: o contrato "CTA sempre fora da primeira dobra" foi REVOGADO, e com ele toda a engenharia que existia só para sustentá-lo — 40svh/60svh, space-around, min-height de viewport e as faixas calibradas por breakpoint das fases anteriores. Aquilo empurrava o pôster para fora da dobra em 1440×900 e abria vãos de até ~280px entre a fonte e o CTA. O contrato agora é SEMÂNTICO: nenhum CTA de compra antes do player, e o primeiro CTA de compra depois dele. Quem garante isso é a ordem do DOM, não espaçador nenhum. Eixo comum: hero, player, metadado e CTA compartilham a MESMA medida máxima (45rem) e o mesmo centro. O `max-width: 68ch` herdado de `.sp4-section p` deslocava o metadado ~98px à esquerda, porque limitava a largura sem recentrar o bloco; aqui ele é neutralizado só na abertura da V4. CADA VÃO TEM UM ÚNICO CONTROLADOR — este é o ponto que a primeira tentativa errou: o row-gap entrou, mas as margens antigas ficaram e passaram a SOMAR com ele (o `margin-block` da moldura dava 40px de hero→player onde o alvo era 20; o `margin-top` do metadado dava 24,4px onde o alvo era 10). Agora: hero → player .............. padding-block-start da .sp4-vsl ......... 20px player → metadado .......... row-gap do .sp4-vsl__argumento .......... 10px metadado → CTA ............. row-gap do .sp4-vsl__wrap .............. 20px (sem metadado) player → CTA. row-gap do .sp4-vsl__wrap .............. 20px fim do CTA → próxima seção . padding-block-start da seção seguinte ... 40px O último é medido do FIM COMPLETO do grupo de CTA (botão + microcopy + válvula secundária) ao primeiro conteúdo visível da seção seguinte, então o padding-block-end da .sp4-vsl é ZERO e o vão inteiro mora no seletor adjacente `.sp4-vsl + .sp4-section` — assim ele não depende de QUAL seção vem a seguir (rotas com 2,2rem próprios, ou a de dor com o ritmo-base). */ .sales-page-v4 .sp4-vsl__wrap { display: flex; flex-direction: column; row-gap: 1.25rem; /* 20px: metadado→CTA e, sem metadado, player→CTA */ max-width: 45rem; margin-inline: auto; } .sp4-vsl__argumento { display: flex; flex-direction: column; row-gap: 0.625rem; /* 10px: player→metadado */ } .sales-page-v4 .sp4-hero .container { max-width: 45rem; margin-inline: auto; } /* neutraliza o 68ch herdado APENAS nos textos da abertura, e recentra o bloco. V4-PRICE-ALIGN (2026-08-03): .sp4-vsl__secondary entra no MESMO grupo. Ela já tinha `text-align: center`, mas é um

dentro de .sp4-section — herdava `max-width: 68ch` e, com margem lateral zero, a CAIXA encostava à esquerda: o texto ficava centrado dentro dos 68ch, e não dentro dos 45rem do wrapper. No mobile o container é mais estreito que 68ch, a caixa ocupa a largura toda e o link já aparecia centrado — por isso o desalinhamento só se via no desktop. `margin-inline: auto` afeta apenas os lados: o respiro vertical de 0,75rem da regra base permanece, e tipografia, cor e hierarquia visual não são tocadas. */ .sales-page-v4 .sp4-hero__sub, .sales-page-v4 .sp4-hero__play, .sales-page-v4 .sp4-vsl__meta, .sales-page-v4 .sp4-vsl__secondary { max-width: 45rem; margin-inline: auto; } .sales-page-v4 .sp4-vsl { padding-block: 1.25rem 0; } /* hero→player = 20px */ .sales-page-v4 .sp4-vsl + .sp4-section { padding-block-start: 2.5rem; } /* CTA→próxima seção = 40px */ /* ESCOPADO ao grupo de CTA da abertura. A primeira tentativa zerou `.sp4-cta-group` GLOBALMENTE e, com isso, colou também os CTAs da demonstração, do primeiro acesso e do fechamento no conteúdo acima deles. Fora da VSL o respiro original de 1,5rem continua valendo. */ .sales-page-v4 .sp4-vsl__wrap > .sp4-cta-group { margin-top: 0; } /* TELAS ESTREITAS (≤359px) — compactação do hero, herdada da V4-VTSD-01-FIX2/FIX3. A justificativa original era pôr o centro do botão de play dentro dos 568px de altura de um 320×568. O contrato de dobra foi revogado nesta fase, mas a compactação FICA: em 320px cada linha ganha peso, e o hero mais justo continua sendo o melhor uso da tela. Só espaçamento e entrelinha mudam — nenhuma fonte encolhe, nada é escondido, nenhum alvo de toque diminui e nenhuma palavra é cortada: eyebrow, H1, lead e instrução seguem completos e do mesmo tamanho. Saíram deste bloco, junto com a reorganização dos vãos da abertura, duas regras que já não controlavam nada: `.sp4-vsl { padding-top }` (revogada pelo contrato de (0,2,0) acima) e `.sp4-vsl .vsl { margin-top: 0 }` (a moldura passou a nascer sem margem em toda largura). Alcance: as regras do hero são escopadas; a do .sp4-eyebrow é global — em ≤359px todos os eyebrows da página ficam com a mesma entrelinha e o mesmo respiro. É deliberado: a compactação é coerente em toda a página, sem mudar tamanho, cor ou conteúdo de nada. */ @media (max-width: 359px) { .sp4-hero { padding-top: 0.25rem; } .sp4-eyebrow { line-height: 1.35; margin-bottom: 0.2rem; } .sp4-hero__title { line-height: 1.04; margin: 0.1rem 0 0.25rem; } .sp4-hero__sub { line-height: 1.4; } .sp4-hero__play { margin-top: 0.25rem; } } /* ── Mecanismo / infográfico (mobile: 2×2 — sem torre de cards) ───────────── */ .sp4-flow { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 0.7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp4-flow__step { background: var(--v4-surface); border: 1px solid var(--v4-line); border-radius: 12px; padding: 1rem 1.1rem; min-width: 0; overflow-wrap: break-word; } @media (min-width: 768px) { .sp4-flow { gap: 1rem; } .sp4-flow__step { padding: 1.25rem 1.4rem; } } .sp4-flow__step--accent { border-color: var(--v4-gold); background: rgba(184, 138, 46, 0.1); } .sp4-flow__num { display: block; font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: clamp(2rem, 6vw, 2.9rem); font-weight: 600; color: var(--v4-gold); line-height: 1; } .sp4-flow__num--word { font-size: clamp(1.3rem, 3.6vw, 1.8rem); } .sp4-flow__step h3 { margin: 0.35rem 0 0.3rem; font-size: 1.02rem; } .sp4-flow__step p { margin: 0; color: var(--v4-ink-dim); } /* V4-4 (PARTE F): fluxo leve Provas → Classificação → Núcleo → Rota → Execução (sem animação) */ .sp4-mech__chain { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0; } .sp4-mech__chain li { color: var(--v4-ink-dim); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; } .sp4-mech__chain li:not(:last-child)::after { content: "→"; margin: 0 0.6rem; color: var(--v4-gold); font-weight: 700; } .sp4-mech__chain li:nth-child(3) { color: var(--v4-gold); } .sp4-mech__close { max-width: 40ch; } .sp4-disclosure { margin-top: 1.6rem; padding: 0.95rem 1.2rem; background: var(--v4-surface); border: 1px solid var(--v4-line); border-radius: 12px; } .sp4-disclosure p { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--v4-ink-dim); } /* ── V4-3 (PARTE F): 5 passos como ROTINA (linha de progressão), não cards ── Mobile: timeline vertical (linha à esquerda). Desktop (≥900px): sequência horizontal com linha de progressão e números maiores. Sem animação contínua. */ .sp4-timeline { list-style: none; counter-reset: step; margin: 1.9rem 0 0; padding: 0; position: relative; display: grid; gap: 1.35rem; } .sp4-timeline::before { content: ""; position: absolute; left: 0.95rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: linear-gradient(180deg, var(--v4-gold), rgba(184, 138, 46, 0.22)); } .sp4-timeline li { position: relative; padding-left: 2.95rem; counter-increment: step; } .sp4-timeline li::before { content: counter(step); position: absolute; left: 0; top: -0.1rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--v4-gold); color: var(--v4-ink-dark); font-family: var(--font-display, "Fraunces", Georgia, serif); font-weight: 700; display: grid; place-items: center; font-size: 1.05rem; } .sp4-timeline h3 { margin: 0 0 0.15rem; font-size: 1.02rem; } .sp4-timeline p { margin: 0; color: var(--v4-ink-dim); font-size: 0.95rem; } .sp4-first__pacing { margin-top: 1.5rem; color: var(--v4-ink-dim); } .sp4-first__pacing strong { color: var(--v4-gold); } /* ── V4-3 (PARTE G): prova de produto — tabs no desktop, acordeão no mobile ── DOM único (botão nativo + aria-expanded + region): a diferença desktop/mobile é só CSS. Painéis inativos ficam [hidden] → imagens lazy dentro deles NÃO carregam no 1º paint. */ .sp4-proofs { margin-top: 1.9rem; } .sp4-proof + .sp4-proof { margin-top: 0.6rem; } .sp4-proof__heading { margin: 0; } .sp4-proof__tab { width: 100%; min-height: 44px; text-align: left; cursor: pointer; position: relative; background: var(--v4-surface); color: var(--v4-ink); border: 1px solid var(--v4-line); border-radius: 10px; padding: 0.78rem 2.4rem 0.78rem 1rem; font-weight: 600; font-size: 0.97rem; } .sp4-proof__tab::after { content: "+"; position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--v4-gold); font-weight: 700; font-size: 1.2rem; } .sp4-proof__tab[aria-expanded="true"] { border-color: var(--v4-gold); background: rgba(184, 138, 46, 0.12); } .sp4-proof__tab[aria-expanded="true"]::after { content: "–"; } .sp4-proof__panel { padding: 1rem 0 0.35rem; } .sp4-proof__panel[hidden] { display: none !important; } .sp4-proof__shot { position: relative; display: block; width: 100%; max-width: 60rem; margin: 0 auto; padding: 0; border: 1px solid var(--v4-line); background: var(--v4-surface); border-radius: 12px; overflow: hidden; cursor: zoom-in; } .sp4-proof__shot img { display: block; width: 100%; height: auto; } .sp4-proof__shot--tall { max-width: 28rem; } .sp4-proof__chip { position: absolute; top: 0.7rem; left: 0.7rem; z-index: 1; background: rgba(22, 22, 27, 0.86); color: var(--v4-cream); border: 1px solid rgba(184, 138, 46, 0.6); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; } .sp4-proof__chip--br { top: auto; left: auto; bottom: 0.7rem; right: 0.7rem; } .sp4-proof__chip--tr { left: auto; right: 0.7rem; } /* affordance de ampliação (as provas abrem em lightbox) */ .sp4-proof__shot::after { content: "Ampliar +"; position: absolute; right: 0.7rem; bottom: 0.7rem; z-index: 1; background: rgba(22, 22, 27, 0.86); color: var(--v4-cream); border: 1px solid rgba(245, 242, 234, 0.3); border-radius: 999px; padding: 0.22rem 0.65rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; } .sp4-proof__thumbs { list-style: none; margin: 0.8rem auto 0; padding: 0; display: grid; gap: 0.8rem; grid-template-columns: repeat(2, 1fr); max-width: 56rem; } .sp4-proof__thumb { display: block; width: 100%; padding: 0; border: 1px solid var(--v4-line); background: var(--v4-surface); border-radius: 10px; overflow: hidden; cursor: zoom-in; } .sp4-proof__thumb img { display: block; width: 100%; height: auto; } .sp4-proof__cap { margin: 0.85rem auto 0; max-width: 56rem; font-size: 0.9rem; color: var(--v4-ink-dim); } .sp4-question { margin: 0 auto; max-width: 56rem; padding: 1.4rem; background: var(--v4-surface); border: 1px solid var(--v4-line); border-radius: 12px; } .sp4-question__label { font-size: 0.82rem; color: var(--v4-gold); margin-bottom: 0.7rem; } .sp4-question__alts { margin: 0.6rem 0 0; padding-left: 1.4rem; color: var(--v4-ink-dim); display: grid; gap: 0.35rem; } .sp4-sample { margin: 1.1rem auto 0; max-width: 56rem; padding: 1.2rem 1.4rem; background: var(--v4-surface); border: 1px solid var(--v4-line); border-radius: 12px; } .sp4-sample__id { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; margin-bottom: 0.7rem; } .sp4-sample__disc { font-weight: 600; color: var(--v4-gold); } .sp4-sample__topic { color: var(--v4-ink-dim); } .sp4-sample__audio { width: 100%; margin-top: 0.3rem; } .sp4-sample__note { margin-top: 0.6rem; font-size: 0.85rem; color: var(--v4-ink-dim); } .sp4-demo__secondary { margin-top: 1.5rem; } /* ── Stack (V4-4, PARTE I: benefício, não inventário; 3+2 no desktop) ─────── */ .sp4-pillars { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.75rem; } .sp4-pillar { background: #fff; border: 1px solid var(--v4-line-dark); border-radius: 14px; padding: 1.5rem 1.6rem; min-width: 0; overflow-wrap: break-word; } .sp4-pillar__icon { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: rgba(184, 138, 46, 0.14); color: var(--v4-gold-deep); margin-bottom: 0.7rem; } .sp4-pillar__icon svg { width: 1.45rem; height: 1.45rem; } .sp4-pillar h3 { margin: 0 0 0.1rem; font-size: 1.08rem; } .sp4-pillar__benefit { margin: 0 0 0.45rem; font-weight: 600; color: var(--v4-gold-deep); font-size: 0.95rem; } .sp4-pillar p { margin: 0; color: var(--v4-dark-dim); } .sp4-pillar p + p { margin-top: 0.4rem; } .sp4-pillar .small { color: var(--v4-dark-dim); } .sp4-stack__frame { margin-top: 1.75rem; font-weight: 600; font-size: 1.1rem; } /* ── V4-VTSD-01: os três diagnósticos (base · ordem · execução) ─────────────── Representação visual simples e sóbria: três cartões brancos sobre o creme da seção, o mesmo componente já usado em .sp4-fit — nenhum tom, sombra ou ícone novo. O cartão "Ordem" recebe a borda dourada porque é o único que o produto trata; os outros dois descrevem problemas que o Pareto declara NÃO resolver. */ .sp4-diag { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin: 1.4rem 0 0; } .sp4-diag__col { border-radius: 14px; padding: 1.1rem 1.3rem; background: #fff; border: 1px solid var(--v4-line-dark); } .sp4-diag__col--mine { border: 2px solid var(--v4-gold); } .sp4-diag__col h3 { margin: 0 0 0.35rem; font-size: 1.05rem; color: var(--v4-ink-dark); } .sp4-diag__col p { margin: 0; color: var(--v4-dark-dim); } @media (min-width: 768px) { .sp4-diag { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* reconhecimento (Pesquisa V2) ao lado da qualificação. V4-CRO-POLISH (2026-08-03): .sp4-pain__bridge saiu junto com o nó — a ponte "Prioridade histórica não prevê a prova; organiza a sequência" era compliance genérico no meio do argumento, e o mesmo limite segue declarado na disclosure do mecanismo e no rodapé. */ .sp4-pain__ack { margin: 1.4rem 0 0; color: var(--v4-gold-deep); } /* saída humana ao fim da FAQ */ .sp4-faq__contact { margin: 1.6rem 0 0; font-weight: 600; color: var(--v4-ink-dark); } /* ── Comparação (V4-4: diferença visual sem vermelho/verde gritantes) ─────── */ .sp4-vs__grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-top: 1.6rem; } .sp4-vs__col { background: var(--v4-surface); border: 1px solid var(--v4-line); border-radius: 14px; padding: 1.5rem 1.7rem; } .sp4-vs__col--strong { border: 2px solid var(--v4-gold); background: rgba(184, 138, 46, 0.1); } .sp4-vs__col h3 { font-size: 1.12rem; } .sp4-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.5rem; } .sp4-list li { position: relative; padding-left: 1.6rem; color: var(--v4-ink-dim); } .sp4-list--check li::before { content: "✓"; position: absolute; left: 0; color: var(--v4-gold); font-weight: 700; } .sp4-list--muted li::before { content: "–"; position: absolute; left: 0; color: var(--v4-ink-dim); } .sp4-vs__col--strong .sp4-list li { color: var(--v4-ink); } .sp4-vs__close { margin-top: 1.75rem; font-family: var(--font-display, "Fraunces", Georgia, serif); font-weight: 540; font-size: clamp(1.1rem, 2.4vw, 1.35rem); line-height: 1.35; } /* ── Criador (V4-4: humanizar, não currículo) ─────────────────────────────── */ .sp4-author__grid { display: grid; gap: clamp(1.5rem, 5vw, 3rem); align-items: center; } .sp4-author__photo img { display: block; width: 100%; max-width: 20rem; height: auto; border-radius: 12px; border: 1px solid var(--v4-line); } .sp4-author__bio p { color: var(--v4-ink-dim); } /* V4-VTSD-01: .sp4-author__quote saiu junto com a citação-síntese que a história humana substituiu — a seção agora conta a origem do método em três parágrafos, não em frase de efeito. */ .sp4-author__sign { margin-top: 1.1rem; color: var(--v4-ink) !important; } /* ── Honestidade — hoje QUALIFICAÇÃO (a seção passou a ser filtro de autoseleção) ─── V4-CRO-POLISH (2026-08-03): a grade "Eu não prometo / Eu entrego" saiu do HTML, e com ela a família .sp4-honesty__grid/__col daqui — CSS órfão é dívida silenciosa. O que a seção mostra agora é a dupla de cartões .sp4-fit (definida mais abaixo), que já existia e trata do mesmo layout de duas colunas sobre o creme. */ .sp4-honesty p { color: var(--v4-dark-dim); } /* ── Oferta (V4-4, PARTE M: clímax ABSOLUTO — 2 colunas no desktop) ─────────── DOM na ORDEM MOBILE exigida (head → badge → preço → CTA → assure → benefícios → entregáveis → comparação); no desktop, grid-template-areas monta as 2 colunas. */ .sp4-offer__card { max-width: 780px; margin: 0 auto; background: var(--v4-surface); border: 2px solid var(--v4-gold); border-radius: 18px; padding: clamp(1.4rem, 4vw, 2.6rem); box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45); } .sp4-offer__title { font-size: clamp(1.45rem, 3.6vw, 2.05rem); } .sp4-offer__badge { display: inline-block; margin: 1rem 0 0; border: 1px solid rgba(184, 138, 46, 0.6); border-radius: 999px; padding: 0.3rem 0.85rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--v4-gold); } .sp4-price { margin: 0.5rem 0 0.4rem; } .sp4-price__value { font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: clamp(2.7rem, 8vw, 3.8rem); font-weight: 640; color: var(--v4-ink); } .sp4-price__unit { color: var(--v4-ink-dim); } .sp4-offer__cta { min-height: 56px; font-size: 0.98rem; letter-spacing: 0.01em; padding-inline: 0.9rem; } /* V4-NVSL-03-FIX2 — o CTA da oferta media 68px em 1024/1366/1440 porque o texto quebrava em DUAS linhas dentro da coluna direita do cartão. O contrato pede uma linha, entre 56 e 66px. A copy NÃO muda, nada é escondido e não há overflow: o texto passa a caber de fato, por três ajustes mínimos que somam ~28px de largura na string mais longa ("QUERO COMEÇAR COM UMA ROTA CLARA — R$ 297"): letter-spacing 0.01em → 0 ≈ −6px padding-inline 0.9rem → 0.7rem ≈ −6px font-size 0.98rem → 0.94rem ≈ −16px (−4%, ainda acima de 15px — legibilidade premium) V4-NVSL-03-FIX3 — o `white-space: nowrap` que acompanhava esses ajustes SAIU. Ele resolvia o tamanho normal e criava um defeito de acessibilidade: com zoom de texto a 200% em 1366px, o texto proibido de quebrar transbordava e o DOCUMENTO INTEIRO ganhava overflow horizontal — medido pelo Codex. Uma linha deixa de ser imposta por regra e passa a ser CONSEQUÊNCIA de caber: a coluna do preço/CTA ganha largura no grid do card (0.94fr 1.06fr, abaixo), e quando o usuário amplia o texto o botão pode quebrar em paz, que é o comportamento acessível correto. O E2E deixou de aceitar a própria regra CSS como prova e passa a CONTAR as linhas renderizadas por Range.getClientRects(). */ @media (min-width: 900px) { .sp4-offer__cta { font-size: 0.94rem; letter-spacing: 0; padding-inline: 0.7rem; } } .sp4-offer__assure { margin-top: 0.85rem; } .sp4-offer__guarantee { margin: 0; font-weight: 600; color: var(--v4-ink); } .sp4-offer__pay { margin: 0.3rem 0 0; color: var(--v4-ink-dim); font-size: 0.94rem; } .sp4-offer__access { margin: 0.3rem 0 0; color: var(--v4-ink-dim); } /* V4-NVSL-01: .sp4-offer__benefits saiu do card (3ª paráfrase do mesmo ciclo). As regras base e a grid-area "benefits" foram removidas junto para não deixar CSS órfão nem faixa vazia. */ .sp4-offer__details { margin-top: 1.1rem; border-top: 1px solid var(--v4-line); } .sp4-offer__anchor { margin: 1.1rem 0 0; padding: 0.85rem 1.05rem; background: var(--v4-bg); border-radius: 10px; border: 1px solid var(--v4-line); } .sp4-offer__anchor p { margin: 0.15rem 0; font-size: 0.95rem; } .sp4-offer__anchor strong { color: var(--v4-gold); } .sp4-offer__company { margin: 0.9rem auto 0; max-width: 920px; color: var(--v4-ink-dim); text-align: center; } @media (min-width: 900px) { .sp4-offer__card--split { max-width: 920px; /* V4-NVSL-03-FIX3: 1.02fr 0.98fr → 0.94fr 1.06fr. A coluna direita carrega preço e CTA, e era ela que faltava largura para o botão caber numa linha sem depender de nowrap. A esquerda (head + inventário + details + âncora) é texto corrido e absorve bem a diferença. */ display: grid; grid-template-columns: 0.94fr 1.06fr; column-gap: clamp(1.6rem, 3vw, 2.6rem); grid-template-areas: "head badge" "head price" "inventory cta" "inventory assure" "details assure" "anchor assure" "anchor ."; align-content: start; } .sp4-offer__card--split .sp4-offer__head { grid-area: head; } .sp4-offer__card--split .sp4-offer__badge { grid-area: badge; justify-self: start; margin-top: 0; } .sp4-offer__card--split .sp4-price { grid-area: price; } .sp4-offer__card--split .sp4-offer__ctawrap { grid-area: cta; } .sp4-offer__card--split .sp4-offer__assure { grid-area: assure; align-self: start; } .sp4-offer__card--split .sp4-offer__details { grid-area: details; align-self: start; } .sp4-offer__card--split .sp4-offer__anchor { grid-area: anchor; align-self: start; } /* V4-CRO-01 (P024): as duas linhas novas ocupam a coluna esquerda, entre os benefícios e o

— sem grid-area explícita o auto-placement quebraria o cartão em ≥900px. */ .sp4-offer__card--split .sp4-offer__inventory { grid-area: inventory; align-self: start; } /* V4-NVSL-01: .sp4-offer__scope saiu do card (3ª ocorrência do escopo; mecanismo e FAQ bastam), então a linha "scope" saiu do grid-template-areas junto — mantê-la reservaria uma faixa vazia no cartão em ≥900px. */ } /* ── V4-CRO-01 (P024): resumo do inventário e escopo, sempre visíveis no card da oferta ── Legíveis em mobile e desktop, sem competir com o preço nem com o CTA. O separador "·" já vem no texto; aqui só se garante quebra saudável e hierarquia subordinada. */ .sp4-offer__inventory { margin: 0.9rem 0 0; font-size: 0.95rem; line-height: 1.5; color: var(--v4-ink-dim); text-wrap: pretty; overflow-wrap: break-word; } .sp4-offer__scope { margin: 0.5rem 0 0; color: var(--v4-ink-dim); } @media (min-width: 768px) { .sp4-offer__inventory { font-size: 1rem; } } /* V4-CRO-01 (P024): escopo 17+3 visível no bloco do mecanismo, antes da disclosure longa. */ .sp4-scope { margin: 1.1rem auto 0; color: var(--v4-ink-dim); text-wrap: pretty; } /* V4-NVSL-01: assinatura curta do criador, logo abaixo do H2 do mecanismo (autoridade antes do método, como na VSL) e o encadeamento compacto da classificação. Ambos sóbrios: são contexto do método, não destaque comercial. */ .sp4-mech__byline { margin: 0.5rem 0 0; color: var(--v4-ink-dim); } .sp4-mech__method { margin: 1.1rem auto 0; color: var(--v4-ink-dim); text-wrap: pretty; } /* ── Garantia (V4-4, PARTE N: bloco forte; card branco sobre o creme do FAQ) ── */ .sp4-details { border-top: 1px solid var(--v4-line); padding: 0.95rem 0; } .sp4-details > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 0.6rem; list-style: none; } .sp4-details > summary::-webkit-details-marker { display: none; } .sp4-details > summary::before { content: "+"; flex: 0 0 auto; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border: 1px solid var(--v4-gold); border-radius: 50%; color: var(--v4-gold); font-weight: 700; font-size: 0.95rem; line-height: 1; } .sp4-details[open] > summary::before { content: "–"; } .sp4-faq .sp4-details > summary { font-size: 1rem; } @media (min-width: 768px) { .sp4-faq .sp4-details > summary { font-size: 1.0625rem; } } .sp4-details > p { margin: 0.35rem 0 0.4rem 1.95rem; color: var(--v4-ink-dim); max-width: 62ch; } /* FAQ em creme: bordas e texto escuros; ícone +/− em dourado profundo */ .sp4-faq .sp4-details { border-top-color: var(--v4-line-dark); } .sp4-faq .sp4-details > p { color: var(--v4-dark-dim); } .sp4-faq .sp4-details > summary::before { border-color: var(--v4-gold-deep); color: var(--v4-gold-deep); } .sp4-question .sp4-details, .sp4-sample .sp4-details { border-top-color: var(--v4-line); } .sp4-question .sp4-details > p, .sp4-sample .sp4-details > p, .sp4-offer__details > * { margin-left: 0; } .sp4-offer__details > ul { margin-top: 0.5rem; } /* ── Fechamento (V4-4, PARTE P) ───────────────────────────────────────────── */ .sp4-final .sp4-lead { color: var(--v4-ink-dim); } .sp4-final__steps { list-style: none; counter-reset: fstep; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.55rem; } .sp4-final__steps li { position: relative; padding-left: 2.4rem; counter-increment: fstep; color: var(--v4-ink); font-weight: 500; } .sp4-final__steps li::before { content: counter(fstep); position: absolute; left: 0; top: -0.05rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--v4-gold); color: var(--v4-ink-dark); font-weight: 700; display: grid; place-items: center; font-size: 0.92rem; } /* V4-NVSL-01: ROMA canônica antes do CTA final e frase-memória fechando a página. */ .sp4-final__roma { margin-top: 1.4rem; } .sp4-final__memory { margin: 1.4rem 0 0; color: var(--v4-ink-dim); font-style: italic; text-wrap: pretty; } .sp4-final__deadline { margin-top: 1.3rem; color: var(--v4-ink-dim); font-size: 1.15rem; } .sp4-final__deadline strong { color: var(--v4-gold); font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 1.3em; } /* ── Rodapé compacto da V4 (PARTE Q; só na V4 — bloco footer do home_v4) ──── */ .sp4-footer .sp4-footer__grid { display: grid; gap: 1.4rem 2rem; grid-template-columns: 1fr; padding-block: 2rem 1.2rem; } .sp4-footer .sp4-footer__group h4 { margin: 0 0 0.5rem; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; } .sp4-footer .sp4-footer__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; } .sp4-footer .sp4-footer__group .small, .sp4-footer .sp4-footer__legal .small { font-size: 0.8125rem; line-height: 1.55; } .sp4-footer .sp4-footer__institutional { margin: 0; } .sp4-footer .sp4-footer__legal { border-top: 1px solid rgba(245, 242, 234, 0.14); padding-block: 0.9rem 1.6rem; display: grid; gap: 0.4rem; } @media (min-width: 900px) { .sp4-footer .sp4-footer__grid { grid-template-columns: 1.1fr 0.8fr 0.9fr 1.4fr; } } /* ── Painel interno de readiness (STAFF-ONLY; V4-3: no FIM da página, fechado) ── */ .sp4-readiness { background: #0d0d10; border-top: 2px dashed var(--v4-gold); padding: 1rem 0; color: var(--v4-ink); font-size: 0.9rem; } .sp4-readiness__summary { cursor: pointer; font-weight: 700; color: #f0d9a3; padding: 0.35rem 0; overflow-wrap: anywhere; } .sp4-readiness__badge { display: inline-block; font-weight: 700; letter-spacing: 0.06em; padding: 0.3rem 0.7rem; border-radius: 6px; margin: 0 0 0.6rem; } .sp4-readiness__badge--ready { background: #123d24; color: #7fe0a3; } .sp4-readiness__badge--blocked { background: #3d1212; color: #f0a3a3; } .sp4-readiness__notice { margin: 0.25rem 0 0.6rem; max-width: none; font-weight: 600; color: #f0d9a3; } .sp4-readiness__line { margin: 0.25rem 0; max-width: none; } .sp4-readiness__list { margin: 0.35rem 0 0.6rem; padding-left: 1.2rem; color: var(--v4-ink-dim); } .sp4-readiness__list li { overflow-wrap: anywhere; word-break: break-word; } .sp4-readiness code { background: rgba(245,242,234,0.08); padding: 0.05rem 0.35rem; border-radius: 4px; overflow-wrap: anywhere; word-break: break-word; } .sp4-readiness { overflow-x: hidden; } /* ── Lightbox (reusa sales-page-v3.js) ────────────────────────────────────── */ .sp4-lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; } .sp4-lightbox[hidden] { display: none; } .sp4-lightbox__backdrop { position: absolute; inset: 0; background: rgba(10,10,12,0.88); } .sp4-lightbox__dialog { position: relative; max-width: min(92vw, 900px); max-height: 90vh; } .sp4-lightbox__img { display: block; max-width: 100%; max-height: 86vh; border-radius: 8px; } .sp4-lightbox__close { position: absolute; top: -0.5rem; right: -0.5rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: none; background: var(--v4-gold); color: var(--v4-ink-dark); font-size: 1.5rem; line-height: 1; cursor: pointer; } /* ── Sticky mobile (reusa sales-page-v3.js) ───────────────────────────────── */ /* V4-6 (safe area): compensa o inset inferior de devices com notch/home-indicator (fallback 0px — em browsers sem env() a linha inteira é descartada e a declaração anterior permanece). Mesma composição usada por V2/V3; o CTA nunca fica sob o home indicator. */ .sp4-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; padding: 0.6rem 0.9rem; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); background: var(--v4-bg); border-top: 1px solid rgba(184,138,46,0.3); } .sp4-sticky[hidden] { display: none; } .sp4-sticky__info { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1 1 auto; } .sp4-sticky__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp4-sticky__price { font-size: 0.82rem; color: var(--v4-ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sp4-sticky__cta { min-height: 44px; padding-inline: 1rem; white-space: nowrap; flex: 0 0 auto; text-align: center; } /* V4-5: até 479px o bloco informativo INTEIRO sai (não só o nome) — o RED media 150px de conteúdo num espaço de 11–121px (truncado em 320–430). O CTA passa a usar a largura útil. */ @media (max-width: 479px) { .sp4-sticky__info { display: none; } /* V4-NVSL-03-FIX2: em 320px a barra media clientWidth 289 contra scrollWidth 301 — 12px de transbordo. O CTA usa a largura útil inteira, então o excesso vinha do padding lateral de 1rem (32px somados). 0,6rem devolve ~12,8px, exatamente o necessário. O texto continua íntegro, com nowrap, mesmo font-size e os 44px de alvo de toque preservados por min-height. */ .sp4-sticky__cta { flex: 1 1 auto; width: 100%; padding-inline: 0.6rem; } } /* V4-NVSL-03-FIX3 — 320px ainda transbordava: a medição pós-FIX2 deu clientWidth 289 contra scrollWidth 301, ou seja, 12px de texto truncado. Os 0,6rem da regra acima resolvem 430 e 390, mas não a tela mais estreita. Este breakpoint é DEDICADO à sticky e fica junto do CSS dela — deliberadamente separado do @media (max-width: 359px) do hero, que trata de altura e não tem relação com este defeito. Os 12px saem de onde sobra: 0,25rem de padding na barra (−20,8px somados) e padding zero no botão, que já ocupa a largura útil inteira nessa faixa (−19,2px). O letter-spacing zerado devolve mais alguns pixels sem mexer no tamanho da letra. Preservados por construção: o texto do CTA, o font-size, o white-space: nowrap e o min-height: 44px da regra base, o foco de teclado, a safe-area inferior e a ocultação do bloco informativo em ≤479px. Nada é escondido, cortado, transformado ou reduzido de fonte. */ @media (max-width: 359px) { .sp4-sticky { padding-inline: 0.25rem; } .sp4-sticky__cta { padding-inline: 0; letter-spacing: 0; } } /* ── Foco visível (a11y) ──────────────────────────────────────────────────── */ .sales-page-v4 a:focus-visible, .sales-page-v4 button:focus-visible, .sales-page-v4 summary:focus-visible { outline: 3px solid var(--v4-gold); outline-offset: 2px; border-radius: 4px; } .sp4-pain a:focus-visible, .sp4-stack a:focus-visible, .sp4-honesty a:focus-visible, .sp4-faq a:focus-visible, .sp4-faq summary:focus-visible { outline-color: var(--v4-gold-deep); } /* ── Desktop ─────────────────────────────────────────────────────────────── */ @media (min-width: 768px) { .sp4-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp4-pillars:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp4-vs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp4-author__grid { grid-template-columns: 0.8fr 1.2fr; } } @media (min-width: 900px) { /* V4-CRO-01 (P024): a sticky de compra some a partir de 900px — o mesmo ponto em que a barra de navegação volta a ser horizontal e o hambúrguer desaparece. Antes ela sumia em 768px, deixando a faixa 768–899px sem NENHUM CTA persistente. O JS acompanha por matchMedia("(max-width: 899px)") quando body.sales-page-v4 (sales-page-v3.js). */ .sp4-sticky { display: none; } /* V4-VTSD-01: o hero deixou de ter duas colunas — a screenshot saiu para a demonstração. A regra de 2 colunas foi removida; mantê-la abriria uma coluna vazia de 1.1fr ao lado do texto e reduziria a medida de leitura pela metade sem nenhum ganho. */ /* PARTE F: sequência horizontal com linha de progressão e números maiores */ .sp4-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; } .sp4-timeline::before { left: 1.2rem; right: 1.2rem; top: 1.2rem; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--v4-gold), rgba(184, 138, 46, 0.22)); } .sp4-timeline li { padding-left: 0; padding-top: 3.3rem; } .sp4-timeline li::before { top: 0; width: 2.5rem; height: 2.5rem; font-size: 1.25rem; box-shadow: 0 0 0 6px var(--v4-surface); } /* PARTE G: fileira de tabs (o DOM segue interleaved; :has é progressive enhancement — sem suporte, cai no acordeão empilhado, ainda 100% funcional) */ .sp4-proofs:has(> .sp4-proof:nth-of-type(2)) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; } .sp4-proofs:has(> .sp4-proof:nth-of-type(2)) > .sp4-proof { display: contents; } .sp4-proofs:has(> .sp4-proof:nth-of-type(2)) .sp4-proof__heading { grid-row: 1; } .sp4-proofs:has(> .sp4-proof:nth-of-type(2)) .sp4-proof__panel { grid-row: 2; grid-column: 1 / -1; padding-top: 1.4rem; } .sp4-proofs:has(> .sp4-proof:nth-of-type(2)) .sp4-proof__tab { height: 100%; text-align: center; padding: 0.85rem 0.9rem; } .sp4-proofs:has(> .sp4-proof:nth-of-type(2)) .sp4-proof__tab::after { content: none; } .sp4-proofs:has(> .sp4-proof:nth-of-type(2)) .sp4-proof__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { /* PARTE I: grade 3+2 (segunda linha centralizada) quando as 5 funções estão presentes */ .sp4-pillars:has(> :nth-child(5)) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sp4-pillars:has(> :nth-child(5)) .sp4-pillar { grid-column: span 2; } .sp4-pillars:has(> :nth-child(5)) .sp4-pillar:nth-child(4) { grid-column: 2 / span 2; } .sp4-pillars:has(> :nth-child(5)) .sp4-pillar:nth-child(5) { grid-column: 4 / span 2; } } @media (min-width: 1040px) { .sp4-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .sales-page-v4 * { animation: none !important; transition: none !important; } } /* ── V4-MAX (A): as 4 trilhas do Mapa de Estudo — bloco COMPACTO logo após o hero. Grid fluido (1 → 2 → 4 colunas) sem alturas fixas; nada aqui altera o player da VSL. */ .sp4-routes__grid { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.7rem; grid-template-columns: 1fr; } .sp4-route { border: 1px solid var(--v4-line); border-radius: 12px; padding: 0.8rem 0.95rem; background: var(--v4-bg); } .sp4-route__name { margin: 0; font-family: var(--font-display, "Fraunces", Georgia, serif); font-size: 1.06rem; font-weight: 700; color: var(--v4-gold); } .sp4-route__desc { margin: 0.25rem 0 0; font-size: 0.93rem; line-height: 1.45; color: var(--v4-ink); } .sp4-routes__close { margin: 0.9rem 0 0; font-size: 0.93rem; color: var(--v4-ink-dim); max-width: 70ch; } /* V4-NVSL-01: ressalva ADJACENTE aos cartões de rota — a antecipação das rotas ao topo é uma exceção estratégica (responde à objeção temporal), e é ela que exige o limite ao lado. */ .sp4-routes__caveat { margin: 0.5rem 0 0; color: var(--v4-ink-dim); max-width: 70ch; } @media (min-width: 620px) { .sp4-routes__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .sp4-routes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ── V4-MAX (B): qualificação da compra — duas colunas VISÍVEIS antes da oferta. Reusa a paleta clara da seção de honestidade; sem novo tom nem novo componente de card. */ .sp4-fit { display: grid; gap: 0.9rem; grid-template-columns: 1fr; margin: 1.4rem 0 0; } .sp4-fit__col { border-radius: 14px; padding: 1.1rem 1.3rem; background: #fff; border: 1px solid var(--v4-line-dark); } .sp4-fit__col--yes { border: 2px solid var(--v4-gold); } .sp4-fit__col h3 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--v4-ink-dark); } .sp4-fit__col .sp4-list { margin: 0; } .sp4-fit__col .sp4-list li { color: var(--v4-dark-dim); } .sp4-fit__col--yes .sp4-list li { color: var(--v4-ink-dark); } .sp4-fit__col--yes .sp4-list--check li::before { color: var(--v4-gold-deep); } @media (min-width: 768px) { .sp4-fit { grid-template-columns: 1fr 1fr; } } /* ═══════════════════════════════════════════════════════════════════════════════ V4-NVSL-01-FIX1 — MEDIDA DE LEITURA E FECHAMENTO NO DESKTOP (≥900px) Nasceu como bloco de compactação de altura: a página desktop tinha estourado o teto de +2% sobre BASELINE_H_DESKTOP=13292 e precisava recuperar ~185px por COMPOSIÇÃO, nunca por supressão. Nada aqui remove, oculta ou encurta conteúdo; nada reduz font-size, alvo de toque, contraste ou foco; nada usa transform: scale, altura fixa com overflow, nem margem negativa. V4-CRO-POLISH (2026-08-03): a terceira parte deste bloco — que reduzia o padding-block da honestidade (5,5rem) e do fechamento (5rem) — SAIU. O ritmo-base das seções caiu ~22% em toda a página, então aqueles dois overrides deixaram de compactar coisa alguma e passaram a fazer o contrário do que a decisão desta fase pede: com (0,2,0) eles venciam o respiro maior que o fechamento agora recebe. O que fica são as duas partes que tratam de LARGURA e ARRANJO, ortogonais ao ritmo vertical. ═══════════════════════════════════════════════════════════════════════════════ */ @media (min-width: 900px) { /* ── 1. MECANISMO: aproveitar a largura real do desktop ────────────────────── Estes três blocos herdam max-width: 68ch de `.sp4-section p` dentro de um .container--narrow de 40rem — no desktop isso deixa metade da largura vazia e quebra o texto em mais linhas do que o necessário. Alargar a medida de leitura para 92ch mantém uma linha confortável (bem abaixo dos ~110ch em que a leitura começa a sofrer) e recupera altura sem cortar uma palavra. A especificidade (0,2,0) vence `.sp4-section p` (0,1,1) por construção. */ .sales-page-v4 .sp4-mech__method, .sales-page-v4 .sp4-scope { max-width: 92ch; } .sales-page-v4 .sp4-disclosure { max-width: 60rem; } .sales-page-v4 .sp4-disclosure p { max-width: 92ch; } /* o encadeamento método → escopo → disclosure é uma sequência de ressalvas do MESMO assunto: 1,1rem entre elas é respiro de bloco independente, não de continuidade. */ .sales-page-v4 .sp4-mech__method { margin-top: 0.9rem; } .sales-page-v4 .sp4-scope { margin-top: 0.9rem; } .sales-page-v4 .sp4-disclosure { margin-top: 1.2rem; } /* ── 2. FECHAMENTO: os cinco passos em grid de duas colunas ────────────────── O fluxo pós-compra é uma sequência CURTA (pagamento → senha → Comece Aqui → Mapa de Estudo → rota). Empilhado em coluna única ele ocupa cinco linhas de altura para transportar cinco frases de uma linha. Em duas colunas viram três linhas, com a ordem de leitura preservada (grid-auto-flow: row ⇒ 1-2 / 3-4 / 5) e os contadores intactos. A largura sai do .container--narrow para caber a frase mais longa numa linha só — sem isso a compactação viraria quebra de texto. */ .sales-page-v4 .sp4-final .container--narrow { max-width: 52rem; } .sales-page-v4 .sp4-final__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.6rem; row-gap: 0.55rem; } } /* ═══════════════════════════════════════════════════════════════════════════════════════════ V4-CRO-POLISH (2026-08-03) — NAVEGAÇÃO ABAIXO DE 900px ESTADO INICIAL É DECIDIDO PELO CSS, NÃO PELO JS. Na primeira tentativa a