/* =============================================================================================
   PÁGINA DE VENDAS V5 — porte escopado de `pareto-oab-vtsd-mockup/styles.css`
   sha256 da fonte: 769079bab623f1c08af54cd830cf0b36fe335a451ae2e6e40713598a7f5942b9

   REGIME (docs/113, VISUAL MODEL LOCK): esta folha reproduz o modelo visual do mockup do Diogo —
   alternância de fundos, grids, cartões, ritmo, hierarquia, tipografia, paleta preto/marfim/
   dourado e posição dos CTAs. A direção "documento jurídico encadernado" da primeira composição
   V5 foi REJEITADA e não sobrevive aqui.

   MAPA DE CLASSES: cada seletor `.sp5-X` corresponde a `.X` do mockup (`.sp5-hero` ↔ `.hero`,
   `.sp5-problem-card--focus` ↔ `.problem-card-focus`, e assim por diante). O prefixo existe por
   uma razão técnica, não estética: `.container`, `.button`, `.section`, `.brand` e `.light` já
   existem em `app.css`, e reusar os nomes crus criaria colisões silenciosas entre duas folhas
   carregadas na mesma página.

   TUDO fica sob `body.sales-page-v5`, então nenhuma regra daqui alcança V4/V3/V2 ou as páginas
   secundárias. Fraunces e Hanken Grotesk já são self-hosted pelo `app.css` (mesmas faces do
   mockup) — esta folha não declara @font-face nem baixa nada.

   ARMADILHA REGISTRADA: `app.css` declara `h1,h2,h3 { color: var(--legal-black) }`. Valor
   DECLARADO vence herança, então todo título sobre fundo escuro precisa de cor explícita aqui.
   ============================================================================================= */

body.sales-page-v5 {
  --v5-black: #16161b;
  --v5-black-deep: #101014;
  --v5-surface: #1f1f25;
  --v5-cream: #f5f2ea;
  --v5-paper: #ece7dc;
  --v5-gold: #b88a2e;
  --v5-gold-deep: #7d5c1e;
  --v5-ink-dim: #c9c6bd;
  --v5-dark-dim: #3f3d38;
  --v5-line: rgba(245, 242, 234, 0.15);
  --v5-line-dark: rgba(22, 22, 27, 0.16);
  --v5-max-width: 72rem;
  --v5-radius: 4px;
  --v5-focus: #d9a638;

  margin: 0;
  /* R3-03: `min-width: 320px` no body criava overflow horizontal REAL em viewports de 320px
     sempre que a scrollbar clássica consome largura — o conteúdo passava a exigir 320px de
     área útil que já não existia. A largura mínima agora é responsabilidade do container
     (`.sp5-container` usa `min()`), e nada aqui esconde o sintoma com overflow-x. */
  color: var(--v5-cream);
  background: var(--v5-black);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.sales-page-v5 img,
body.sales-page-v5 svg {
  display: block;
  max-width: 100%;
}

/* Cor padrão de link = a do contexto. Envolvido em `:where()` de propósito: assim a regra
   custa especificidade ZERO e é um PADRÃO, não um vencedor. Sem isso, `body.sales-page-v5 a`
   valeria (0,1,1) e derrotaria `.sp5-btn--primary` (0,1,0) — o CTA dourado herdaria o creme do
   contexto e cairia para 2,8:1 de contraste, abaixo do mínimo AA. */
:where(body.sales-page-v5 a) {
  color: inherit;
}

body.sales-page-v5 :focus-visible {
  outline: 2px solid var(--v5-focus);
  outline-offset: 4px;
}

body.sales-page-v5 ::selection {
  color: var(--v5-black);
  background: var(--v5-gold);
}

/* ── Tipografia ─────────────────────────────────────────────────────────────────────────── */
body.sales-page-v5 h1,
body.sales-page-v5 h2,
body.sales-page-v5 h3,
body.sales-page-v5 h4 {
  margin-top: 0;
  color: var(--v5-cream);           /* vence o `color: var(--legal-black)` global do app.css */
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.09;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

body.sales-page-v5 p {
  margin-top: 0;
  text-wrap: pretty;
}

body.sales-page-v5 h1 {
  max-width: 20ch;
  margin: 0 auto 1.1rem;
  font-size: clamp(2.2rem, 5.3vw, 4.25rem);
}

body.sales-page-v5 h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
}

body.sales-page-v5 h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.72rem);
}

body.sales-page-v5 h4 {
  font-size: 1.27rem;
}

/* ── Estrutura ──────────────────────────────────────────────────────────────────────────── */
.sp5-container {
  width: min(100% - 2.5rem, var(--v5-max-width));
  margin-inline: auto;
}

.sp5-section {
  padding-block: clamp(4.5rem, 8vw, 7rem);
  scroll-margin-top: 1rem;
}

.sp5-surface {
  background: var(--v5-surface);
}

.sp5-light {
  color: var(--v5-black);
  background: var(--v5-cream);
}

/* Fundo claro: os títulos voltam ao preto jurídico, ainda de forma explícita.
   O prefixo `body.sales-page-v5` NÃO é decorativo — é aritmética de especificidade. A regra
   escura acima é `body.sales-page-v5 h2` (0,1,2); um `.sp5-light h2` (0,1,1) PERDERIA dela e
   os títulos das seções claras sairiam creme sobre creme, invisíveis. Com o prefixo, esta
   regra vale (0,2,2) e vence. Mesmo motivo nas duas regras logo abaixo. */
body.sales-page-v5 .sp5-light h1,
body.sales-page-v5 .sp5-light h2,
body.sales-page-v5 .sp5-light h3,
body.sales-page-v5 .sp5-light h4 {
  color: var(--v5-black);
}

.sp5-eyebrow {
  margin-bottom: 0.72rem;
  color: var(--v5-gold);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.145em;
  text-transform: uppercase;
}

.sp5-light .sp5-eyebrow {
  color: var(--v5-gold-deep);
}

.sp5-lead {
  max-width: 63ch;
  color: var(--v5-ink-dim);
  font-size: clamp(1.05rem, 2vw, 1.23rem);
  line-height: 1.56;
}

.sp5-light .sp5-lead {
  color: var(--v5-dark-dim);
}

.sp5-section-heading {
  max-width: 52rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

.sp5-section-heading--narrow {
  max-width: 45rem;
}

.sp5-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Contador (EX-01) — ocupa a posição e a função da faixa de prazo do mockup ───────────── */
.sp5-countbar {
  color: var(--v5-black);
  background: var(--v5-gold);
}

.sp5-countbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  padding-block: 0.5rem;
  text-align: center;
}

.sp5-countbar__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.025em;
}

.sp5-countbar__units {
  /* R6-05.1 — SEM `flex-wrap` esta linha tinha min-content de ~391 px depois que os rótulos
     subiram para 16 px (R5): quatro células indivisíveis somadas. Era a origem do overflow
     que a auditoria mediu em 320, 360, 390 e no texto a 200% (docs/126 §2.3). Quebrar a
     linha preserva TODAS as unidades e todos os rótulos — nada é omitido, abreviado ou
     escondido; só passa a ocupar duas fileiras quando não cabe em uma. */
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  align-items: baseline;
  justify-content: center;
  gap: 0.35rem 0.85rem;
}

.sp5-countbar__cell {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}

.sp5-countbar__num {
  /* R6-05.1 — a auditoria mediu a largura variando 25→26 px quando o segundo mudava:
     `tabular-nums` só funciona se a fonte tiver o recurso, e a de display não tem. O piso em
     `ch` (largura do "0" na fonte corrente) fixa a caixa em duas casas; qualquer par de
     dígitos passa a render na MESMA largura, sem depender de recurso opcional da fonte.
     Três casas (dias > 99) apenas expandem a caixa, sem cortar nada. */
  min-width: 2.75ch;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.sp5-countbar__unit {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sp5-countbar__date,
.sp5-countbar__reached,
.sp5-countbar__nojs {
  width: 100%;
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.sp5-countbar__date-mobile {
  display: none;
}

.sp5-countbar__nojs {
  display: none;                    /* o <noscript> do template religa esta linha */
}

/* ── Header + navegação responsiva (EX-14) ─────────────────────────────────────────────── */
body.sales-page-v5 .site-header.sp5-header {
  position: relative;
  z-index: 20;
  background: var(--v5-black);
  border-bottom: 1px solid var(--v5-line);
}

.sp5-header__inner {
  display: flex;
  flex-wrap: wrap;
  min-height: 4rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 1rem;
}

.sp5-brand {
  /* R5-03.9: marca clicável É controle autônomo — leva ao topo. Media ~21,6 px de altura
     (font-size × line-height 1) e nenhum teste enxergava, porque a lista estática de
     controles da R4 tinha só quatro seletores. */
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  gap: 0.72rem;
  color: var(--v5-cream);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.sp5-brand img {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--v5-radius);
}

.sp5-brand__dot {
  color: var(--v5-gold);
}

.sp5-nav {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(0.65rem, 1.6vw, 1.25rem);
}

.sp5-nav__link,
.sp5-nav__entry {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding-block: 0.4rem;
  color: var(--v5-ink-dim);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.sp5-nav__entry {
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.sp5-nav__link:hover,
.sp5-nav__link:focus-visible,
.sp5-nav__entry:hover,
.sp5-nav__entry:focus-visible {
  color: var(--v5-gold);
}

.sp5-nav__link--panel {
  display: none;
}

.sp5-nav__toggle {
  display: none;
  width: 2.75rem;
  min-width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--v5-cream);
  background: transparent;
  border: 1px solid var(--v5-line);
  border-radius: var(--v5-radius);
  cursor: pointer;
}

.sp5-nav__toggle:focus-visible {
  outline: 2px solid var(--v5-focus);
  outline-offset: 2px;
}

.sp5-nav__burger,
.sp5-nav__burger::before,
.sp5-nav__burger::after {
  display: block;
  width: 1.125rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.sp5-nav__burger {
  position: relative;
}

.sp5-nav__burger::before,
.sp5-nav__burger::after {
  position: absolute;
  left: 0;
  content: "";
}

.sp5-nav__burger::before {
  top: -6px;
}

.sp5-nav__burger::after {
  top: 6px;
}

/* ── Hero + VSL ─────────────────────────────────────────────────────────────────────────── */
.sp5-hero {
  padding-top: clamp(1.75rem, 3vw, 2.35rem);
  padding-bottom: clamp(3.2rem, 5vw, 4.4rem);
  text-align: center;
}

.sp5-hero__inner {
  max-width: 52rem;
}

.sp5-hero__copy {
  max-width: 60rem;
  margin-inline: auto;
}

.sp5-hero h1 {
  max-width: 23ch;
  font-size: clamp(2.2rem, 4.2vw, 3.1rem);
  line-height: 1.04;
}

.sp5-hero .sp5-lead {
  max-width: 48rem;
  margin: 0 auto 0.85rem;
}

.sp5-play-instruction {
  margin-bottom: 1.35rem;
  color: var(--v5-gold);
  font-size: 1rem;
  font-weight: 700;
}

.sp5-vsl {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--v5-black-deep);
  border: 1px solid rgba(184, 138, 46, 0.72);
  border-radius: var(--v5-radius);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.28);
}

.sp5-vsl__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* O atributo `hidden` é TERMINAL dentro do player, em qualquer camada.
   O defeito que isto fecha: a folha do UA declara `[hidden] { display: none }` com
   especificidade (0,0,1); `.sp5-vsl__poster { display: block }` tem (0,1,0) e vence. O
   controlador marcava `poster.hidden = true` depois do clique e o pôster continuava
   desenhado por cima da mídia — o vídeo tocava atrás de uma capa opaca. O mesmo vale para
   `.sp5-vsl__frame` (iframe/vídeo, que nascem `hidden`), loading e erro: quem decide a
   visibilidade é o atributo, não a ordem das regras. */
.sp5-vsl [hidden] {
  display: none !important;
}

.sp5-vsl__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  color: var(--v5-cream);
  background: var(--v5-black-deep);
  border: 0;
  cursor: pointer;
}

.sp5-vsl__poster--static {
  cursor: default;
}

.sp5-vsl__poster picture,
.sp5-vsl__poster img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O pôster aprovado é uma fotografia clara; o véu existe para o título sobreposto — copy
   travada do mockup — manter contraste de texto em qualquer região da imagem. */
.sp5-vsl__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 13, 0.36) 0%, rgba(10, 10, 13, 0.66) 100%);
}

.sp5-vsl__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: clamp(0.75rem, 2vw, 1.15rem);
  padding: 1.5rem;
  text-align: center;
}

.sp5-vsl__content strong {
  max-width: 23ch;
  color: var(--v5-cream);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4vw, 3.35rem);
  font-weight: 560;
  line-height: 1.05;
  text-shadow: 0 1px 12px rgba(10, 10, 13, 0.7);
  text-wrap: balance;
}

.sp5-vsl__play {
  display: grid;
  width: clamp(3.4rem, 7vw, 5.2rem);
  height: clamp(3.4rem, 7vw, 5.2rem);
  place-items: center;
  color: var(--v5-black);
  background: var(--v5-gold);
  border: 1px solid var(--v5-cream);
  border-radius: 50%;
  transition: transform 160ms ease, background-color 160ms ease;
}

.sp5-vsl__poster:hover .sp5-vsl__play,
.sp5-vsl__poster:focus-visible .sp5-vsl__play {
  background: var(--v5-cream);
  transform: scale(1.055);
}

.sp5-vsl__loading {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0.4rem 1rem;
  color: var(--v5-ink-dim);
  background: rgba(10, 10, 13, 0.9);
  font-size: 1rem;
  text-align: center;
}

.sp5-vsl__loading[hidden],
.sp5-vsl__error[hidden] {
  display: none;
}

/* Estado de erro do player: fica SOBRE o pôster, legível, com o botão de retry como alvo real. */
.sp5-vsl__error {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
  color: var(--v5-cream);
  background: rgba(10, 10, 13, 0.92);
  text-align: center;
}

.sp5-vsl__error p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.sp5-vsl__error .sp5-btn {
  min-height: 2.75rem;
}

.sp5-vsl__noscript {
  margin: 0.8rem 0 0;
  color: var(--v5-ink-dim);
  font-size: 1rem;
}

/* ── CTAs ───────────────────────────────────────────────────────────────────────────────── */
.sp5-ctagroup {
  margin-top: 1.5rem;
  text-align: center;
}

.sp5-ctagroup p {
  margin: 0.72rem auto 0;
  color: var(--v5-ink-dim);
  font-size: 1rem;
}

.sp5-ctagroup--light p {
  max-width: 49rem;
  color: var(--v5-dark-dim);
}

.sp5-btn {
  display: inline-flex;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  padding: 0.82rem 1.45rem;
  border: 1px solid transparent;
  border-radius: var(--v5-radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.045em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.sp5-btn:active {
  transform: translateY(1px);
}

.sp5-btn--primary {
  color: var(--v5-black);
  background: var(--v5-gold);
  border-color: var(--v5-gold);
}

.sp5-btn--primary:hover,
.sp5-btn--primary:focus-visible {
  color: #fff;
  background: var(--v5-gold-deep);
  border-color: var(--v5-gold-deep);
}

.sp5-btn--block {
  width: 100%;
}

/* ── 3. Os três problemas ───────────────────────────────────────────────────────────────── */
.sp5-problems {
  background: var(--v5-surface);
}

.sp5-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--v5-line);
  border-bottom: 1px solid var(--v5-line);
}

.sp5-problem-card {
  position: relative;
  min-width: 0;
  padding: 1.5rem clamp(1rem, 2.5vw, 1.7rem) 1.75rem;
  border-right: 1px solid var(--v5-line);
}

.sp5-problem-card:last-child {
  border-right: 0;
}

.sp5-problem-card::before {
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 3px;
  content: "";
  background: transparent;
}

.sp5-problem-card--focus::before {
  background: var(--v5-gold);
}

.sp5-problem-card--muted {
  color: var(--v5-ink-dim);
}

.sp5-section-number {
  display: block;
  margin-bottom: 2rem;
  color: var(--v5-gold);
  font-family: var(--font-display);
  font-size: 1.15rem;
}

.sp5-problem-status {
  margin-bottom: 0.65rem;
  color: var(--v5-gold);
  font-size: 0.69rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.11em;
}

.sp5-problem-card h3 {
  min-height: 4.15em;
  margin-bottom: 0.8rem;
}

.sp5-problem-card p:last-child {
  margin-bottom: 0;
  color: var(--v5-ink-dim);
  font-size: 1rem;
}

/* ── 4. Ideia central ───────────────────────────────────────────────────────────────────── */
.sp5-premise__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: start;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.sp5-premise__copy h2 {
  max-width: 10ch;
}

.sp5-premise__copy p:not(.sp5-eyebrow):not(.sp5-lead) {
  max-width: 47ch;
  color: var(--v5-dark-dim);
}

.sp5-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--v5-line-dark);
  border-bottom: 1px solid var(--v5-line-dark);
}

.sp5-comparison article {
  padding: 1.4rem 1.35rem 1.55rem;
}

.sp5-comparison article + article {
  border-left: 1px solid var(--v5-line-dark);
}

.sp5-comparison--focus {
  box-shadow: inset 0 3px 0 var(--v5-gold);
}

.sp5-comparison__label {
  min-height: 2.9em;
  margin-bottom: 1rem;
  color: var(--v5-gold-deep);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sp5-line-list {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}

.sp5-line-list li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.15rem;
  color: var(--v5-dark-dim);
  border-top: 1px solid var(--v5-line-dark);
  font-size: 1rem;
}

.sp5-line-list li::before {
  position: absolute;
  top: 1.38rem;
  left: 0;
  width: 0.34rem;
  height: 0.34rem;
  content: "";
  background: var(--v5-black);
}

.sp5-line-list--gold li::before {
  background: var(--v5-gold);
}

/* ── 5. Método / Núcleo Forte ───────────────────────────────────────────────────────────── */
.sp5-method {
  background: var(--v5-black);
}

.sp5-data-chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1.2fr;
  align-items: stretch;
  border: 1px solid var(--v5-line);
}

.sp5-data-cell {
  display: flex;
  min-height: 10rem;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 1.2rem clamp(0.9rem, 2vw, 1.4rem);
}

.sp5-data-cell strong {
  color: var(--v5-cream);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.4rem);
  font-weight: 560;
  line-height: 1;
}

.sp5-data-cell span {
  margin-top: 0.55rem;
  color: var(--v5-gold);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sp5-data-cell--emphasis {
  background: var(--v5-surface);
  box-shadow: inset 0 -3px 0 var(--v5-gold);
}

.sp5-data-arrow {
  display: grid;
  place-items: center;
  color: var(--v5-gold);
  border-right: 1px solid var(--v5-line);
  border-left: 1px solid var(--v5-line);
  font-size: 1.5rem;
}

.sp5-method-note {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--v5-line);
}

.sp5-method-note strong {
  color: var(--v5-gold);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 560;
}

.sp5-method-note p {
  max-width: 65rem;
  margin: 0;
  color: var(--v5-ink-dim);
  font-size: 1rem;
}

.sp5-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  margin: 2.4rem 0 0;
  list-style: none;
  border-top: 1px solid var(--v5-line);
}

.sp5-process-grid li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 1.35rem 1rem 0 0;
}

.sp5-process-grid li + li {
  padding-left: 1rem;
  border-left: 1px solid var(--v5-line);
}

.sp5-process-grid li > span {
  color: var(--v5-gold);
  font-family: var(--font-display);
  font-size: 1rem;
}

.sp5-process-grid h3 {
  margin-bottom: 0.4rem;
  font-size: 1.18rem;
}

.sp5-process-grid p {
  margin: 0;
  color: var(--v5-ink-dim);
  font-size: 1rem;
}

/* ── 6. Revisão em movimento ────────────────────────────────────────────────────────────── */
.sp5-audio__layout {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  align-items: start;
  gap: clamp(2.4rem, 6vw, 5rem);
}

.sp5-audio__copy h2 {
  max-width: 12ch;
}

.sp5-routine-facts {
  display: grid;
  gap: 0;
  margin-top: 2rem;
  border-top: 1px solid var(--v5-line);
  border-bottom: 1px solid var(--v5-line);
}

.sp5-routine-facts > div {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.9rem 0;
}

.sp5-routine-facts > div + div {
  border-top: 1px solid var(--v5-line);
}

.sp5-routine-facts strong {
  color: var(--v5-gold);
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.sp5-routine-facts span {
  color: var(--v5-ink-dim);
  font-size: 1rem;
}

/* Capturas INERTES do player real da área do aluno (decisão do owner em 2026-08-05).
   O play, a timeline e 1.25x existem somente nos pixels: figure/picture/img não recebem foco,
   não têm listener e não carregam áudio. */
.sp5-audio__stack {
  display: grid;
  margin: 0;
  gap: 1rem;
}

.sp5-audio-figure {
  display: grid;
  gap: 0.8rem;
  margin: 0;
  padding: 1rem;
  background: var(--v5-black);
  border: 1px solid var(--v5-line);
  border-radius: 12px;
}

.sp5-audio-figure figcaption {
  display: grid;
  gap: 0.25rem;
}

.sp5-audio-figure figcaption strong {
  color: var(--v5-ink);
  font-size: 1rem;
  line-height: 1.3;
}

.sp5-audio-figure figcaption span {
  color: var(--v5-ink-dim);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.sp5-audio-figure picture {
  display: block;
  overflow: hidden;
  background: #fbfaf6;
  border: 1px solid rgba(245, 242, 234, 0.2);
  border-radius: 9px;
}

.sp5-audio-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 7. Produto, interface e entregáveis ────────────────────────────────────────────────── */
.sp5-interface {
  margin-bottom: clamp(3.5rem, 7vw, 5.5rem);
  overflow: hidden;
  background: var(--v5-cream);
  border: 1px solid var(--v5-line-dark);
  border-radius: var(--v5-radius);
  box-shadow: 0 1rem 2.8rem rgba(22, 22, 27, 0.09);
}

.sp5-interface__shot {
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--v5-line-dark);
}

.sp5-flow-track {
  display: grid;
  grid-template-columns: repeat(7, auto);
  align-items: center;
  justify-content: center;
  gap: clamp(0.55rem, 1.5vw, 1rem);
  padding: 2rem 1.2rem;
}

.sp5-flow-track article {
  width: min(10.5rem, 16vw);
  min-height: 10.8rem;
  padding: 1rem;
  background: #fffdf8;
  border: 1px solid var(--v5-line-dark);
  border-top: 3px solid var(--v5-gold);
  border-radius: var(--v5-radius);
}

.sp5-flow-track article > span {
  color: var(--v5-gold-deep);
  font-family: var(--font-display);
  font-size: 1rem;
}

body.sales-page-v5 .sp5-flow-track h3 {
  margin: 1.2rem 0 0.55rem;
  color: var(--v5-black);
  font-size: 1.06rem;
}

.sp5-flow-track p {
  margin: 0;
  color: var(--v5-dark-dim);
  font-size: 1rem;
  line-height: 1.45;
}

.sp5-flow-track > i {
  color: var(--v5-gold-deep);
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-style: normal;
}

.sp5-deliverables-heading {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 1.6rem;
}

.sp5-deliverables-heading p,
.sp5-deliverables-heading h3 {
  margin-bottom: 0;
}

.sp5-deliverables-heading h3 {
  max-width: 23ch;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
}

.sp5-deliverables-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--v5-line-dark);
}

.sp5-deliverables-grid article {
  min-height: 12rem;
  padding: 1.25rem 1.2rem 1.5rem 0;
  border-top: 1px solid var(--v5-line-dark);
}

.sp5-deliverables-grid article:not(:nth-child(3n + 1)) {
  padding-left: 1.2rem;
  border-left: 1px solid var(--v5-line-dark);
}

.sp5-deliverables-grid article > span {
  color: var(--v5-gold-deep);
  font-family: var(--font-display);
  font-size: 1rem;
}

body.sales-page-v5 .sp5-deliverables-grid h4 {
  margin: 1.1rem 0 0.55rem;
  color: var(--v5-black);
}

.sp5-deliverables-grid p {
  margin: 0;
  color: var(--v5-dark-dim);
  font-size: 1rem;
}

.sp5-deliverables-grid .sp5-deliverable-meta {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  margin-top: 0;
  padding-top: 0.9rem;
  color: var(--v5-gold-deep);
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sp5-deliverable-meta span + span::before {
  margin-right: 0.8rem;
  color: var(--v5-dark-dim);
  content: "·";
}

/* ── 8. Para quem faz sentido ───────────────────────────────────────────────────────────── */
.sp5-fit {
  background: var(--v5-black);
}

.sp5-fit__grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  align-items: start;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.sp5-fit h2 {
  max-width: 13ch;
}

.sp5-check-list,
.sp5-offer-list {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--v5-line);
}

.sp5-check-list li,
.sp5-offer-list li {
  position: relative;
  padding: 0.95rem 0 0.95rem 1.6rem;
  color: var(--v5-ink-dim);
  border-bottom: 1px solid var(--v5-line);
}

.sp5-check-list li::before,
.sp5-offer-list li::before {
  position: absolute;
  top: 1.36rem;
  left: 0;
  width: 0.48rem;
  height: 0.48rem;
  content: "";
  border: 1px solid var(--v5-gold);
  transform: rotate(45deg);
}

/* ── 9. Autoridade ──────────────────────────────────────────────────────────────────────── */
.sp5-authority__grid {
  display: grid;
  grid-template-columns: minmax(15rem, 19rem) 1fr;
  align-items: center;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.sp5-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--v5-black);
  border: 1px solid rgba(184, 138, 46, 0.72);
  border-radius: var(--v5-radius);
}

.sp5-authority .sp5-lead {
  max-width: 58ch;
}

.sp5-authority__grid > div:last-child > p:not(.sp5-eyebrow):not(.sp5-lead) {
  max-width: 62ch;
  color: var(--v5-ink-dim);
}

/* Cinco itens, cinco colunas. A grade nasceu com quatro trilhas e a lista tem 01→05: o quinto
   item (`Advocacia tributária`) caía sozinho numa segunda fileira, sem borda superior e com a
   borda esquerda de continuação — leitura de item órfão, não de linha do tempo. */
.sp5-career-line {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 2rem 0 0;
  margin: 2rem 0 0;
  list-style: none;
  border-top: 1px solid var(--v5-line);
}

.sp5-career-line li {
  position: relative;
  display: grid;
  gap: 0.5rem;
  padding-right: 0.7rem;
}

.sp5-career-line li + li {
  padding-left: 0.7rem;
  border-left: 1px solid var(--v5-line);
}

.sp5-career-line span {
  color: var(--v5-gold);
  font-family: var(--font-display);
}

.sp5-career-line strong {
  color: var(--v5-cream);
  font-size: 1rem;
  line-height: 1.3;
}

/* ── 10. Oferta + direito de arrependimento ─────────────────────────────────────────────── */
.sp5-offer {
  padding-block: clamp(5rem, 9vw, 8rem);
  background: var(--v5-black);
}

.sp5-offer__shell {
  display: grid;
  grid-template-columns: 1fr minmax(20rem, 27rem);
  align-items: start;
  gap: clamp(2.5rem, 6vw, 5rem);
}

.sp5-offer__copy h2 {
  max-width: 13ch;
}

.sp5-offer-list {
  max-width: 35rem;
  margin-top: 2rem;
}

/* EX-20 (docs/158): o cartão é destino de âncora (`#preco`), então precisa da mesma cortesia
   que as seções têm — parar um pouco abaixo da borda da janela, e não colado nela. O header da
   V5 é `position: relative` e não flutua sobre o conteúdo, então esta folga é respiro visual,
   não compensação de barra fixa: 1,5rem em telas estreitas, até 2,5rem nas largas. Só isso muda;
   padding, fundo, borda e sombra do cartão seguem intactos. */
.sp5-price-card {
  padding: clamp(1.45rem, 4vw, 2.25rem);
  background: var(--v5-surface);
  border: 1px solid rgba(184, 138, 46, 0.72);
  border-radius: var(--v5-radius);
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.24);
  scroll-margin-top: clamp(1.5rem, 4vw, 2.5rem);
}

.sp5-price__label {
  margin: 0 0 0.4rem;
  color: var(--v5-ink-dim);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.sp5-price {
  margin-bottom: 0.35rem;
  color: var(--v5-cream);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.9rem);
  font-weight: 560;
  line-height: 1.05;
}

.sp5-price span {
  /* "até 12x de R$" / "R$" é copy comercial, não ornamento. Com `0.38em` sobre o piso do
     clamp (38,4 px em 320 px) computava 14,59 px. `max()` garante o piso de 16 px sem
     perder a proporção tipográfica nas telas largas. */
  color: var(--v5-gold);
  font-size: max(1rem, 0.42em);
}

.sp5-price__daily {
  margin: 0.8rem 0 0.65rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--v5-gold);
  color: var(--v5-cream);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  font-weight: 700;
  line-height: 1.4;
}

.sp5-price__cash {
  margin-bottom: 0.6rem;
  color: var(--v5-ink-dim);
  font-size: 1rem;
}

.sp5-price__disclosure {
  margin-bottom: 1.4rem;
  color: var(--v5-ink-dim);
  font-size: 1rem;
  line-height: 1.45;
}

.sp5-access-note {
  margin: 0.8rem 0 0;
  color: var(--v5-ink-dim);
  font-size: 1rem;
  line-height: 1.45;
  text-align: center;
}

.sp5-guarantee {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr;
  gap: 1.35rem;
  align-items: start;
  margin-top: 0.4rem;
  padding: 1.5rem;
  background: var(--v5-surface);
  border: 1px solid var(--v5-line);
  border-left: 3px solid var(--v5-gold);
  border-radius: var(--v5-radius);
}

.sp5-guarantee__mark {
  display: grid;
  width: 3.1rem;
  height: 3.1rem;
  place-items: center;
  color: var(--v5-gold);
  border: 1px solid var(--v5-gold);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.5rem;
}

.sp5-guarantee .sp5-eyebrow {
  margin-bottom: 0.3rem;
}

.sp5-guarantee h3 {
  margin-bottom: 0.55rem;
}

.sp5-guarantee p:last-child {
  max-width: 66rem;
  margin: 0;
  color: var(--v5-ink-dim);
  font-size: 1rem;
}

.sp5-offer__payee {
  grid-column: 1 / -1;
  max-width: 66rem;
  margin: 1.2rem 0 0;
  color: var(--v5-ink-dim);
  font-size: 1rem;
  line-height: 1.5;
}

/* ── 11. FAQ ────────────────────────────────────────────────────────────────────────────── */
.sp5-faq__grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: start;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.sp5-faq__heading {
  position: sticky;
  top: 1.5rem;
}

.sp5-faq__heading p:last-child {
  max-width: 38ch;
  color: var(--v5-dark-dim);
}

.sp5-faq__list {
  border-top: 1px solid var(--v5-line-dark);
}

.sp5-faq__list details {
  border-bottom: 1px solid var(--v5-line-dark);
}

.sp5-faq__list summary {
  position: relative;
  padding: 1.15rem 2.5rem 1.15rem 0;
  color: var(--v5-black);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 560;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.sp5-faq__list summary::-webkit-details-marker {
  display: none;
}

.sp5-faq__list summary::after {
  position: absolute;
  top: 1.05rem;
  right: 0.25rem;
  color: var(--v5-gold-deep);
  content: "+";
  font-family: var(--font-body);
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 160ms ease;
}

.sp5-faq__list details[open] summary::after {
  transform: rotate(45deg);
}

.sp5-faq__list details p {
  max-width: 58ch;
  padding: 0 0 1.2rem;
  margin: 0;
  color: var(--v5-dark-dim);
  font-size: 1rem;
}

/* ── 11.1. Contato por WhatsApp ao final do FAQ (EX-19, docs/155) ────────────────────────
   Subbloco AUXILIAR do FAQ, não seção nova. `grid-column: 1 / -1` o tira das duas colunas do
   `.sp5-faq__grid` e o entrega como faixa cheia depois das perguntas — é assim que ele lê como
   "bloco pós-FAQ" sem virar etapa narrativa própria.

   HIERARQUIA: rota SECUNDÁRIA. O cartão usa `--v5-paper` (um degrau abaixo do creme da seção),
   e o botão é contorno escuro, nunca `--v5-gold`. O dourado continua sendo exclusivo dos CTAs
   de compra; o próximo elemento dominante segue sendo o fechamento com o checkout.

   Nada aqui flutua: sem `position: fixed`, sem `sticky`, sem overlay, sem animação. O bloco
   vive no fluxo normal e some junto com o resto quando a página rola. */
.sp5-faq-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1.4rem, 4vw, 2rem);
  border: 1px solid var(--v5-line-dark);
  border-radius: var(--v5-radius);
  margin-top: clamp(2.75rem, 6vw, 4.25rem);
  background: var(--v5-paper);
  gap: clamp(1.1rem, 3vw, 2rem);
  grid-column: 1 / -1;
}

.sp5-faq-contact__copy {
  max-width: 44ch;
}

/* O `h3` já recebe `--v5-black` da regra de seção clara; aqui só se reduz a escala, porque a
   escala padrão de `h3` competiria com o "Perguntas frequentes" logo acima. */
body.sales-page-v5 .sp5-faq-contact__copy h3 {
  margin-bottom: 0.35rem;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  line-height: 1.25;
}

.sp5-faq-contact__copy p {
  max-width: 42ch;
  margin: 0;
  color: var(--v5-dark-dim);
  font-size: 1rem;
}

/* Contraste medido sobre o cartão `--v5-paper` (#ece7dc), sem composição de alpha — cores
   sólidas de propósito, porque alpha sobre fundo claro engana a conta: texto #16161b ≈ 15:1
   (AA/AAA) e a borda #3f3d38 ≈ 8,9:1, bem acima dos 3:1 exigidos de um limite de controle.

   `:focus-visible` não fica só no outline global dourado (≈2:1 sobre creme): o botão TROCA de
   fundo ao receber foco, então o estado é inequívoco mesmo para quem não distingue a cor do
   contorno. */
.sp5-btn--whatsapp {
  max-width: 100%;
  color: var(--v5-black);
  background: transparent;
  border-color: var(--v5-dark-dim);
  white-space: normal;
}

.sp5-btn--whatsapp:hover,
.sp5-btn--whatsapp:focus-visible {
  color: var(--v5-cream);
  background: var(--v5-black);
  border-color: var(--v5-black);
}

/* ── Ícone do WhatsApp (EX-19-R2, docs/157) ─────────────────────────────────────────────
   O SVG é o ÚNICO elemento verde do componente: fundo, borda e tipografia do botão seguem
   exatamente como a EX-19 os aprovou, e o dourado continua sendo exclusividade dos CTAs de
   compra.

   GEOMETRIA — duas armadilhas encontradas e resolvidas, nesta ordem:

   1. ícone como item flex IRMÃO do texto: a partir de 414px a copy quebra em duas linhas, o
      rótulo encolhe até a largura disponível e centraliza o texto DENTRO dela. O ícone ficava
      encostado na borda esquerda, a mais de cem pixels da primeira palavra — visivelmente solto;
   2. ícone puramente inline dentro do texto: ícone + copy inteira não cabem em uma linha abaixo
      de ~414px, e o único ponto de quebra disponível é logo depois do ícone. Resultado: o ícone
      sozinho na primeira linha, a copy inteira na segunda. Pior que o anterior.

   O arranjo final é um rótulo `flex`: ícone e texto são itens do MESMO container, o ícone fica
   centrado verticalmente em relação ao bloco de texto e a copy, quando quebra, alinha à esquerda
   logo após ele — os dois sempre juntos, sem vão e sem linha órfã. `flex-shrink: 0` impede que o
   ícone seja espremido justamente onde o espaço é curto.

   COR POR ESTADO, e não por gosto. O verde de marca (#25d366) rende só 1,6:1 sobre o marfim
   #ece7dc do cartão — invisível como elemento gráfico e abaixo do piso de 3:1 para componentes
   não textuais. No estado normal ele aparece escurecido na MESMA matiz (#147a3d ≈ 4,4:1); no
   hover/foco, em que o botão inverte para preto, entra o verde oficial (#25d366 ≈ 9,2:1). É o
   único arranjo em que o ícone é simultaneamente reconhecível e legível nos dois fundos.
   Valores medidos sobre cores SÓLIDAS — nada de alpha, que falsearia a conta em fundo claro. */
.sp5-btn__whatsapp-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: left;
}

.sp5-btn__whatsapp-icon {
  width: 1.125rem;   /* 18px */
  height: 1.125rem;
  flex-shrink: 0;
  color: #147a3d;
}

.sp5-btn--whatsapp:hover .sp5-btn__whatsapp-icon,
.sp5-btn--whatsapp:focus-visible .sp5-btn__whatsapp-icon,
.sp5-btn--whatsapp:active .sp5-btn__whatsapp-icon {
  color: #25d366;
}

/* ── EX-21 (docs/166) + R1 (docs/167) — WhatsApp SUBORDINADO, logo abaixo do CTA da hero ──
   O CTA principal continua sendo a ação dominante: preenchido, dourado, maior, primeiro na
   leitura. Este bloco é a rota de quem assistiu à VSL e ficou com uma dúvida — precisa estar
   presente e visivelmente MENOR, nunca ao lado.

   R1 — POR QUE ESTE BLOCO VIVE AQUI, E NÃO JUNTO DO `.sp5-ctagroup`:

   Na EX-21 ele ficava logo depois dos CTAs, ANTES de `.sp5-btn`, `.sp5-btn--whatsapp` e das
   regras do ícone. Com a mesma especificidade e declarado antes, ele PERDIA tudo: em Chrome
   real, a 1280×800, o botão computava `color: rgb(22, 22, 27)` — preto sobre a hero preta —,
   borda `rgb(63, 61, 56)`, `font-size: 15px` e altura de 51px, idênticos aos do CTA principal.
   Sobrava, visivelmente, o ícone verde. A microcopy perdia para `.sp5-ctagroup p` (0,1,1) e
   ficava em 16px.

   A correção usa DUAS proteções, nenhuma delas `!important`:

   1. ORDEM — o bloco vem depois de todas as regras genéricas que precisa vencer;
   2. ESPECIFICIDADE — `.sp5-hero .sp5-btn.sp5-btn--whatsapp-hero` (0,3,0) vence `.sp5-btn`
      (0,1,0), `.sp5-btn--whatsapp` (0,1,0) e a regra móvel `.sp5-hero .sp5-btn` (0,2,0).

   `!important` resolveria a linha, mas transferiria o problema: quem viesse depois teria de
   escalar também, e o arquivo passaria a ser disputado por prioridade em vez de organizado por
   ordem. O escopo `.sp5-hero` já diz o que a regra é — específica de UM lugar — e mantém o
   botão claro do FAQ intocado.

   O seletor do grupo é restrito à hero de propósito: `.sp5-ctagroup` também existe na versão
   clara, e empilhar/centralizar globalmente mudaria um grupo que ninguém pediu para mexer. */
.sp5-hero .sp5-ctagroup {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sp5-hero .sp5-hero-assist {
  width: 100%;
  max-width: 30rem;
  margin: 0.75rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

/* Microcopy, não chamada. `--v5-ink-dim` (#c9c6bd) sobre o preto da hero (#16161b) rende
   ≈ 10,6:1 — bem acima dos 4,5:1 de AA para texto normal — e ainda assim lê como secundário ao
   lado do dourado do CTA acima. Peso 500 e 0.875rem mantêm a hierarquia sem virar sussurro.

   R1: o seletor precisa do escopo `.sp5-hero` para vencer `.sp5-ctagroup p` (0,1,1), que
   impunha `font-size: 1rem` e `margin: 0.72rem auto 0`. */
.sp5-hero .sp5-hero-assist__prompt {
  margin: 0;
  color: var(--v5-ink-dim);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Contorno, não preenchimento: a diferença de peso visual entre este botão e o CTA acima é o
   que comunica a hierarquia. Sem dourado (exclusividade dos CTAs de compra), sem verde de
   fundo, sem sombra, sem glow, sem animação.

   CONTRASTE, medido em cores sólidas sobre o preto da hero (#16161b): texto `--v5-cream`
   (#f5f2ea) ≈ 16,1:1; borda `--v5-ink-dim` (#c9c6bd) ≈ 10,6:1, muito acima dos 3:1 exigidos de
   um limite de controle. No fundo escuro o verde de marca #25d366 rende ≈ 9,1:1 e é usado
   direto — ao contrário do botão claro do FAQ, onde ele precisa escurecer para #147a3d. */
.sp5-hero .sp5-btn.sp5-btn--whatsapp-hero {
  width: auto;
  max-width: 100%;
  min-height: 44px;
  padding: 0.625rem 1rem;
  color: var(--v5-cream);
  background: transparent;
  border: 1px solid var(--v5-ink-dim);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

.sp5-hero .sp5-btn.sp5-btn--whatsapp-hero:hover,
.sp5-hero .sp5-btn.sp5-btn--whatsapp-hero:focus-visible {
  color: var(--v5-black);
  background: var(--v5-cream);
  border-color: var(--v5-cream);
}

.sp5-hero .sp5-btn.sp5-btn--whatsapp-hero .sp5-btn__whatsapp-icon {
  color: #25d366;
}

.sp5-hero .sp5-btn.sp5-btn--whatsapp-hero:hover .sp5-btn__whatsapp-icon,
.sp5-hero .sp5-btn.sp5-btn--whatsapp-hero:focus-visible .sp5-btn__whatsapp-icon,
.sp5-hero .sp5-btn.sp5-btn--whatsapp-hero:active .sp5-btn__whatsapp-icon {
  color: #147a3d;
}

/* Abaixo de 560px o botão ocupa a largura toda — mesma decisão do bloco do FAQ. R1: as
   declarações são repetidas aqui de propósito, porque a regra móvel genérica
   `.sp5-hero .sp5-btn` (0,2,0) impõe `min-height: 2.75rem`, `padding: 0.68rem 0.8rem` e
   `font-size: 0.8rem` a TODOS os botões da hero — e descaracterizaria justamente o secundário.
   `overflow-wrap` garante que o rótulo quebre em vez de estourar a caixa em 320px. */
@media (max-width: 560px) {
  .sp5-hero .sp5-hero-assist {
    max-width: 100%;
  }

  .sp5-hero .sp5-btn.sp5-btn--whatsapp-hero {
    width: 100%;
    min-height: 44px;
    padding: 0.625rem 1rem;
    font-size: 0.8125rem;
  }
}

@media (max-width: 560px) {
  .sp5-faq-contact {
    justify-content: flex-start;
  }

  .sp5-btn--whatsapp {
    width: 100%;
  }
}

/* ── 12. Fechamento ─────────────────────────────────────────────────────────────────────── */
.sp5-final-cta {
  text-align: center;
}

.sp5-final__inner {
  max-width: 58rem;
}

.sp5-final__inner h2 {
  max-width: 19ch;
  margin-inline: auto;
}

.sp5-final__inner .sp5-lead {
  margin: 0 auto 1.6rem;
}

/* ── Painel interno de readiness (staff) ────────────────────────────────────────────────── */
.sp5-readiness {
  padding-block: 2rem;
  color: var(--v5-ink-dim);
  background: var(--v5-black-deep);
  border-top: 1px solid var(--v5-line);
  font-size: 0.85rem;
}

.sp5-readiness summary {
  color: var(--v5-gold);
  cursor: pointer;
}

.sp5-readiness code {
  color: var(--v5-cream);
  font-size: 0.82em;
  word-break: break-all;
}

/* ── 13. Rodapé publicado da V4 ───────────────────────────────────────────────────────────
   O HTML e as métricas abaixo reproduzem o rodapé atualmente em produção. O reset de h4
   neutraliza apenas a regra tipográfica global da própria V5, que não existe na V4. */
body.sales-page-v5 .sp4-footer .sp4-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem 2rem;
  padding-block: 2rem 1.2rem;
}

body.sales-page-v5 .sp4-footer .sp4-footer__group h4 {
  margin: 0 0 0.5rem;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-wrap: normal;
}

body.sales-page-v5 .sp4-footer .sp4-footer__group ul {
  display: grid;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

body.sales-page-v5 .sp4-footer .sp5-footer__brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  margin: 0 0 0.65rem;
  text-align: left;
}

body.sales-page-v5 .sp4-footer .sp5-footer__brand img {
  width: 2rem;
  height: 2rem;
  flex: 0 0 2rem;
  border-radius: var(--v5-radius);
}

body.sales-page-v5 .sp4-footer .sp5-footer__brand .brand__mark {
  display: inline;
  line-height: 1;
}

body.sales-page-v5 .sp4-footer .sp4-footer__group .small,
body.sales-page-v5 .sp4-footer .sp4-footer__legal .small {
  font-size: 0.8125rem;
  line-height: 1.55;
}

body.sales-page-v5 .sp4-footer .sp4-footer__institutional {
  margin: 0;
}

body.sales-page-v5 .sp4-footer p {
  text-wrap: wrap;
}

body.sales-page-v5 .sp4-footer .sp4-footer__legal {
  display: grid;
  gap: 0.4rem;
  padding-block: 0.9rem 1.6rem;
  border-top: 1px solid rgba(245, 242, 234, 0.14);
}

@media (min-width: 900px) {
  body.sales-page-v5 .sp4-footer .sp4-footer__grid {
    grid-template-columns: 1.1fr 0.8fr 0.9fr 1.4fr;
  }
}

@media (max-width: 520px) {
  body.sales-page-v5 .sp4-footer .brand__mark {
    display: inline;
  }
}

/* ── 14. Mini-player móvel da VSL (EX-18 — docs/146) ──────────────────────────────────────
   A barra móvel de preço/CTA saiu daqui por decisão expressa do owner. O canto inferior do
   celular passa a ser ocupado, SOMENTE enquanto a VSL está tocando, pelo player que já existe
   no hero — nunca por um segundo elemento e nunca por uma superfície comercial.

   Este bloco NÃO cria caixa nova: ele reposiciona o MESMO `.sp5-vsl__frame` — o iframe do
   Cloudflare Stream, ou o `<video>` do provider html5 — que está reproduzindo. O slot
   `.sp5-vsl` permanece onde estava, com a mesma `aspect-ratio` e a mesma altura: é ele que o
   controlador observa para decidir, e é por isso que nada salta quando o player flutua ou
   volta.

   Quem liga e desliga a classe é o `sales-page-v5.js`; o CSS não tem opinião sobre quando.
   Acima de 760px nenhuma regra daqui existe — o desktop não recebe mini-player. */
@media (max-width: 760px) {
  /* O slot recorta o pôster no raio da borda com `overflow: hidden`. Um elemento
     `position: fixed` cujo containing block é a viewport não é recortado por esse overflow
     (nenhum ancestral do slot cria containing block — não há `transform`, `filter`,
     `will-change` nem `contain` no caminho), mas a garantia fica explícita aqui. Nada além do
     recorte muda: largura, altura e posição do slot no fluxo continuam as mesmas. */
  .sp5-vsl--mini {
    overflow: visible;
  }

  .sp5-vsl--mini .sp5-vsl__frame {
    position: fixed;
    /* `inset: auto` ANTES de right/bottom: a regra base declara `inset: 0`, e sem zerá-la o
       frame flutuante herdaria `top`/`left` e voltaria a ocupar a tela inteira. */
    inset: auto;
    right: max(0.75rem, env(safe-area-inset-right));
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    /* Abaixo do cabeçalho/menu (z-index 20, acima) e do consentimento (z-index 60, no
       app.css). O controlador já devolve o player quando qualquer um dos dois abre; o
       z-index garante que, mesmo num estado não previsto, o mini nunca vença esses
       componentes. */
    z-index: 15;
    /* 44vw dá 140,8px em 320 e 171,6px em 390; o teto de 176px impede que o mini cresça
       demais em telas móveis largas. Somado ao afastamento de 0,75rem, cabe inteiro na
       viewport em ambas as larguras, sem overflow horizontal. */
    width: clamp(140px, 44vw, 176px);
    height: auto;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(184, 138, 46, 0.72);
    border-radius: 0.5rem;
    box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.38);
    /* O mini é vitrine, não controle: o toque atravessa para a página. Não há botão de
       fechar, play, pause, velocidade, preço ou texto — e o controlador ainda oculta os
       controles do player, tira o frame da ordem de foco e o remove da árvore acessível
       enquanto ele estiver aqui. */
    pointer-events: none;
    /* Sem animação, em qualquer preferência de movimento: entrada e saída instantâneas. */
    transition: none;
  }

  /* EX-19-R1 (docs/156) + EX-21 (docs/166) — SUPRESSÃO VISUAL DURANTE COLISÃO.
     `sp5-vsl--mini` PERMANECE: o player segue flutuando, tocando e sendo a mesma instância;
     o controlador apenas acrescenta esta segunda classe enquanto o retângulo do frame
     sobrepõe qualquer bloco marcado com `[data-vsl-mini-avoid]` — hoje, WhatsApp pós-VSL e
     WhatsApp pós-FAQ.

     `visibility: hidden` é escolha mecânica, não estética. `display: none` zeraria a caixa,
     a colisão deixaria de ser medida, o mini voltaria, colidiria de novo — oscilação a cada
     quadro. Mantendo a caixa mensurável, o veredito é estável e a volta é imediata quando a
     rolagem separa os dois. Sem transição: nada de fade entrando ou saindo. */
  .sp5-vsl--mini.sp5-vsl--mini-suppressed .sp5-vsl__frame {
    visibility: hidden;
  }
}

/* ── Responsivo ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* A travessia mobile → desktop não pode deixar a navegação semanticamente fechada. */
  .sales-page-v5 .sp5-nav[hidden] {
    display: flex;
  }
}

@media (max-width: 899px) {
  .sp5-nav__toggle {
    display: inline-flex;
  }

  .sp5-header__inner .sp5-brand {
    margin-inline-end: auto;
  }

  /* Fechado já no primeiro paint: sem flash de links antes do controlador. */
  .sales-page-v5 .sp5-nav {
    display: none;
  }

  .sp5-nav-open .sales-page-v5 .sp5-nav {
    display: flex;
    max-height: calc(100vh - 7rem);
    max-height: calc(100dvh - 7rem);
    flex: 1 1 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.2rem;
    padding-block: 0.45rem 0.6rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--v5-line);
  }

  .sales-page-v5 .sp5-nav__link,
  .sales-page-v5 .sp5-nav__entry,
  .sales-page-v5 .sp5-nav__link--panel {
    display: flex;
    min-height: 2.75rem;
    justify-content: flex-start;
    padding: 0.62rem 0.1rem;
  }
}

@media (max-width: 960px) {
  .sp5-premise__grid,
  .sp5-audio__layout,
  .sp5-fit__grid,
  .sp5-faq__grid {
    grid-template-columns: 1fr;
  }

  .sp5-premise__copy h2,
  .sp5-audio__copy h2,
  .sp5-fit h2 {
    max-width: 18ch;
  }

  .sp5-comparison {
    max-width: 50rem;
  }

  .sp5-faq__heading {
    position: static;
  }

  .sp5-data-chain {
    grid-template-columns: 1fr 1fr;
  }

  .sp5-data-arrow {
    display: none;
  }

  .sp5-data-cell {
    border-bottom: 1px solid var(--v5-line);
  }

  .sp5-data-cell:nth-child(4n + 1) {
    border-right: 1px solid var(--v5-line);
  }

  .sp5-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp5-process-grid li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .sp5-process-grid li:nth-child(n + 3) {
    border-top: 1px solid var(--v5-line);
  }

  .sp5-flow-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .sp5-flow-track article {
    width: auto;
  }

  .sp5-flow-track > i {
    display: none;
  }

  .sp5-offer__shell {
    grid-template-columns: 1fr;
  }

  .sp5-price-card {
    max-width: 32rem;
  }

  .sp5-authority__grid {
    grid-template-columns: minmax(12rem, 16rem) 1fr;
  }

  /* 5 → 3 colunas. Este é o ponto em que a linha de carreira fica mais apertada de toda a
     página: a coluna de texto da autoridade ainda divide espaço com o retrato, então cinco
     trilhas caberiam em pouco mais de 80 px cada. Com 3 colunas as fileiras são [01 02 03] e
     [04 05]: o item 4 abre fileira, recebe a borda superior e perde a borda/padding de
     continuação à esquerda. */
  .sp5-career-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem 0;
  }

  .sp5-career-line li:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }

  .sp5-career-line li:nth-child(n + 4) {
    padding-top: 1rem;
    border-top: 1px solid var(--v5-line);
  }
}

@media (max-width: 760px) {
  body.sales-page-v5 {
    font-size: 1rem;
  }

  .sp5-container {
    width: min(100% - 2rem, var(--v5-max-width));
  }

  .sp5-section {
    padding-block: clamp(3.75rem, 14vw, 5rem);
  }

  .sp5-countbar__inner {
    gap: 0.25rem 0.9rem;
  }

  .sp5-countbar__title {
    width: 100%;
  }

  .sp5-problem-grid {
    grid-template-columns: 1fr;
  }

  .sp5-problem-card {
    border-right: 0;
  }

  .sp5-problem-card + .sp5-problem-card {
    border-top: 1px solid var(--v5-line);
  }

  .sp5-problem-card h3 {
    min-height: 0;
  }

  .sp5-section-number {
    margin-bottom: 1rem;
  }

  .sp5-deliverables-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sp5-deliverables-grid article:not(:nth-child(3n + 1)) {
    padding-left: 0;
    border-left: 0;
  }

  .sp5-deliverables-grid article:nth-child(2n) {
    padding-left: 1rem;
    border-left: 1px solid var(--v5-line-dark);
  }

  .sp5-authority__grid {
    grid-template-columns: 1fr;
  }

  .sp5-portrait {
    max-width: 20rem;
  }
}

@media (max-width: 580px) {
  /* EX-13 revisada em 05/08/2026: a thumbnail inteira — não o CTA — define a primeira dobra.
     Isso devolve presença à tipografia e ao ritmo sem mudar ou abreviar a copy do hero. */
  .sp5-container {
    width: min(100% - 1.5rem, var(--v5-max-width));
  }

  .sp5-countbar__inner {
    gap: 0.08rem;
    padding-block: 0.24rem 0.28rem;
  }

  .sp5-countbar__title {
    overflow: hidden;
    font-size: 0.66rem;
    line-height: 1.08;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sp5-countbar__units {
    width: 100%;
    flex-wrap: nowrap;
    gap: 0.48rem;
    line-height: 1;
  }

  .sp5-countbar__cell {
    gap: 0.12rem;
  }

  .sp5-countbar__num {
    min-width: 2ch;
    font-size: 1rem;
  }

  .sp5-countbar__unit {
    font-size: 0;
    line-height: 1;
    letter-spacing: 0;
  }

  .sp5-countbar__cell:first-child .sp5-countbar__unit {
    font-size: 0.66rem;
  }

  .sp5-countbar__cell:nth-child(2) .sp5-countbar__unit::after,
  .sp5-countbar__cell:nth-child(3) .sp5-countbar__unit::after,
  .sp5-countbar__cell:nth-child(4) .sp5-countbar__unit::after {
    font-size: 0.66rem;
    font-weight: 700;
  }

  .sp5-countbar__cell:nth-child(2) .sp5-countbar__unit::after {
    content: "h";
  }

  .sp5-countbar__cell:nth-child(3) .sp5-countbar__unit::after {
    content: "min";
  }

  .sp5-countbar__cell:nth-child(4) .sp5-countbar__unit::after {
    content: "s";
  }

  .sp5-countbar__date {
    font-size: 0.66rem;
    line-height: 1.08;
    white-space: nowrap;
  }

  .sp5-countbar__date-desktop {
    display: none;
  }

  .sp5-countbar__date-mobile {
    display: inline;
  }

  .sp5-header__inner {
    min-height: 3.25rem;
  }

  .sp5-brand {
    gap: 0.58rem;
    font-size: 1.08rem;
  }

  .sp5-brand img {
    width: 1.8rem;
    height: 1.8rem;
  }

  .sp5-hero {
    padding-block: 0.9rem 1.5rem;
  }

  body.sales-page-v5 .sp5-hero h1 {
    max-width: 23ch;
    margin-bottom: 0.7rem;
    font-size: clamp(1.82rem, 8.5vw, 2.12rem);
    line-height: 1.03;
  }

  body.sales-page-v5 h2 {
    font-size: clamp(1.9rem, 9vw, 2.7rem);
  }

  .sp5-hero .sp5-lead {
    max-width: 46ch;
    margin-bottom: 0.5rem;
    font-size: 0.88rem;
    line-height: 1.35;
  }

  .sp5-play-instruction {
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.25;
  }

  .sp5-hero .sp5-ctagroup {
    margin-top: 0.85rem;
  }

  .sp5-hero .sp5-btn {
    min-height: 2.75rem;
    padding: 0.68rem 0.8rem;
    font-size: 0.8rem;
    line-height: 1.18;
    letter-spacing: 0.025em;
  }

  .sp5-vsl__content {
    gap: 0.55rem;
    padding: 0.85rem;
  }

  .sp5-vsl__content strong {
    font-size: clamp(1.05rem, 5.6vw, 1.55rem);
  }

  .sp5-comparison,
  .sp5-deliverables-heading {
    grid-template-columns: 1fr;
  }

  .sp5-comparison article + article {
    border-top: 1px solid var(--v5-line-dark);
    border-left: 0;
  }

  .sp5-comparison__label {
    min-height: 0;
  }

  .sp5-data-chain {
    grid-template-columns: 1fr;
  }

  .sp5-data-cell:nth-child(4n + 1) {
    border-right: 0;
  }

  .sp5-data-cell {
    min-height: 7.6rem;
  }

  .sp5-method-note {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .sp5-process-grid {
    grid-template-columns: 1fr;
  }

  .sp5-process-grid li,
  .sp5-process-grid li + li,
  .sp5-process-grid li:nth-child(3) {
    padding: 1rem 0;
    border-top: 1px solid var(--v5-line);
    border-left: 0;
  }

  .sp5-routine-facts > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .sp5-flow-track {
    grid-template-columns: 1fr;
  }

  .sp5-flow-track article {
    min-height: 0;
  }

  .sp5-deliverables-grid {
    grid-template-columns: 1fr;
  }

  .sp5-deliverables-grid article,
  .sp5-deliverables-grid article:nth-child(2n) {
    min-height: 0;
    padding: 1.15rem 0 1.35rem;
    border-left: 0;
  }

  /* 3 → 2 colunas. Fileiras [01 02], [03 04] e [05]: quem abre fileira agora são os ímpares
     3 e 5, e são eles que perdem a borda/padding de continuação à esquerda. */
  .sp5-career-line {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0;
  }

  .sp5-career-line li:nth-child(3),
  .sp5-career-line li:nth-child(5) {
    padding-left: 0;
    border-left: 0;
  }

  /* O item 4 volta a ser continuação: aqui ele fica na SEGUNDA coluna. Sem esta linha, a regra
     de 3 colunas (mesma especificidade, bloco anterior) continuaria valendo e a fileira
     [03 04] apareceria sem o filete que a separa. */
  .sp5-career-line li:nth-child(4) {
    padding-left: 0.7rem;
    border-left: 1px solid var(--v5-line);
  }

  .sp5-career-line li:nth-child(n + 3) {
    padding-top: 1rem;
    border-top: 1px solid var(--v5-line);
  }

  .sp5-guarantee {
    grid-template-columns: 1fr;
  }

  .sp5-price-card {
    padding: 1.35rem;
  }
}

@media (max-width: 370px) {
  .sp5-container {
    width: min(100% - 1.5rem, var(--v5-max-width));
  }

  .sp5-btn {
    width: 100%;
    padding-inline: 0.85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sales-page-v5 *,
  body.sales-page-v5 *::before,
  body.sales-page-v5 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* R2-07: rolagem suave é movimento. Com redução pedida, âncora salta direto ao destino. */
    scroll-behavior: auto !important;
  }

  body.sales-page-v5,
  html:has(body.sales-page-v5) {
    scroll-behavior: auto !important;
  }
}


/* ── R5-03.9 — o link de pular conteúdo também é controle autônomo ────────────────────
   O estilo base dele vive inline em `base.html` e é COMPARTILHADO com V2/V3/V4; elevá-lo
   ali mudaria linhagens que esta fase não pode tocar. Aqui o piso é aplicado só quando a
   V5 está no ar, que é o escopo autorizado. Ele só fica visível ao receber foco — e é
   nesse estado que precisa ter alvo utilizável. */
body.sales-page-v5 .skip-link {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
}


/* ── R6-05.2 — tokens indivisíveis longos ────────────────────────────────────────────
   `contato@paretooab.com.br` tem 24 caracteres sem espaço: a 16 px ele mede ~190 px e, em
   320 px de viewport dentro de um cartão com padding, força overflow horizontal. Quebrar a
   PALAVRA é typografia legítima — diferente de esconder com `overflow-x`, que esta fase
   proíbe. O texto continua inteiro e legível; só ganha permissão de quebrar quando não cabe. */
body.sales-page-v5 .sp5-guarantee p,
body.sales-page-v5 .sp5-faq__list details p,
body.sales-page-v5 .sp5-offer__payee {
  overflow-wrap: anywhere;
}


/* ══════════════════════════════════════════════════════════════════════════════════════
   R6-05.6 — CONSENTIMENTO NA V5 PÚBLICA
   ══════════════════════════════════════════════════════════════════════════════════════
   Com `external_tags` ON a V5 pública herda o componente de `base.html`, estilizado por
   `static/css/app.css` — arquivo que esta fase NÃO pode tocar, e que serve também V2/V3/V4.
   A auditoria mediu ali copy em 13,12–14,72 px, botões em 13,76 px e checkbox de 16×16 px
   (docs/126 §P1-01). Os pisos da V5 valem para essa superfície porque ela é parte da página
   pública.

   Escopo: tudo abaixo está sob `body.sales-page-v5`, então V2/V3/V4 seguem intactas.

   Especificidade: `app.css` usa `.consent:not(.consent--panel) .consent__text`, que vale
   (0,3,0). Um `body.sales-page-v5 .consent__text` valeria (0,2,1) e PERDERIA. Por isso os
   seletores abaixo repetem a estrutura do original e acrescentam o escopo — a cascata é
   ganha por especificidade, não por ordem de carga (que também favorece este arquivo, mas
   não é garantia se alguém reordenar o head).
   ────────────────────────────────────────────────────────────────────────────────────── */

/* copy corrida do banner e do painel: piso de 16 px */
body.sales-page-v5 .consent .consent__text,
body.sales-page-v5 .consent:not(.consent--panel) .consent__text,
body.sales-page-v5 .consent .consent__opt,
body.sales-page-v5 .consent .consent__opt span,
body.sales-page-v5 .consent .consent__opt strong {
  font-size: 1rem;
  line-height: 1.4;
}

body.sales-page-v5 .consent .consent__title {
  font-size: 1.15rem;
}

/* CTAs do consentimento: fonte ≥15 px e alvo ≥44×44 */
body.sales-page-v5 .consent .consent__actions .btn,
body.sales-page-v5 .consent .consent__actions .btn--sm {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  font-size: 0.9375rem;
}

/* As caixas de seleção são CONTROLES autônomos: o alvo tem de ser real, não só o rótulo.
   O Chrome escala a caixa nativa com `width`/`height`, então o alvo medido é o do próprio
   input — e não um truque de área invisível. */
body.sales-page-v5 .consent .consent__opt input[type="checkbox"] {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  flex: 0 0 auto;
  margin: 0;
}

/* O rótulo acompanha, para o texto não colar na caixa maior. */
body.sales-page-v5 .consent .consent__opt {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

/* O botão em forma de link do rodapé publicado também mantém um alvo autônomo utilizável. */
body.sales-page-v5 .linklike {
  display: inline-flex;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  font-size: 1rem;
}

/* O painel e o banner não podem estourar 320 px: `min-width: 0` e quebra de token longo. */
body.sales-page-v5 .consent,
body.sales-page-v5 .consent .consent__inner,
body.sales-page-v5 .consent .consent__actions {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

body.sales-page-v5 .consent .consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}