/* =========================================================
   Expert Trading · LP VSL 1 (Figma: LP - Expert Trading › Headline 1)
   Tokens desktop (1440) → mobile (390) em max-width: 767px
   ========================================================= */
:root {
  /* cores */
  --color-bg-primary: #0d0c10;
  --color-bg-secondary: #17151b;
  --color-bg-surface: #24222a;
  --color-bg-inverse: #f8f7fa;
  --color-bg-brand: #7b1fea;
  --color-bg-brand-subtle: #320a63;
  --color-border-default: #24222a;
  --color-border-strong: #3b3842;
  --color-border-brand: #9c56f1;
  --color-border-brand-strong: #430e86;
  --color-text-primary: #f8f7fa;
  --color-text-secondary: #9f9aab;
  --color-text-brand: #ebdcfd;
  --color-text-accent: #bb8cf7;
  --color-text-inverse: #0d0c10;
  --color-dot: #57535f;
  --success-start: #32c771;
  --success-end: #188647;
  --success-border: #197e45;

  /* tipografia */
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-size-display: 72px; --line-height-display: 80px;
  --font-size-h2: 40px;      --line-height-h2: 48px;
  --font-size-h3: 32px;      --line-height-h3: 40px;
  --font-size-h4: 24px;      --line-height-h4: 32px;
  --font-size-body: 16px;    --line-height-body: 26px;
  --font-size-body-lg: 20px; --line-height-body-lg: 32px;
  --font-size-body-sm: 14px; --line-height-body-sm: 22px;
  --font-size-caption: 12px; --line-height-caption: 16px;
  --font-size-button: 16px;  --line-height-button: 24px;

  /* layout */
  --grid-margin: 120px;
  --section-padding-y: 120px;
  --section-gap: 64px;
  --container: 1200px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --header-h: 81px;

  /* tracking (o Figma usa % do tamanho da fonte) */
  --tracking-display: -0.02em;
  --tracking-h2: -0.015em;
  --tracking-h3: -0.01em;
  --tracking-h4: -0.005em;
  --tracking-label: 0.12em;

  /* vidro (badge, card do bloco 5) */
  --glass-fill: linear-gradient(to bottom right, rgba(255,255,255,.16) 14.644%, rgba(214,185,251,.08) 53.536%, rgba(123,31,234,.16) 85.356%);
  --glass-card-fill: linear-gradient(to bottom right, rgba(255,255,255,.08) 14.286%, rgba(123,31,234,.052) 53.571%, rgba(123,31,234,.06) 85.714%);
  /* borda de vidro: stroke linear 45° · branco 75% → 14% → 5% */
  --border-glass: linear-gradient(to bottom right, rgba(255,255,255,.75) 14.645%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.05) 85.355%);
  /* borda roxa dos cards em destaque: #24222a + gradiente vertical roxo 40% → 100% */
  --border-brand-gradient: linear-gradient(to bottom, rgba(123,31,234,.4), #7b1fea), linear-gradient(#24222a, #24222a);
}

@media (max-width: 1279px) { :root { --grid-margin: 40px; } }

@media (max-width: 767px) {
  :root {
    --font-size-display: 40px; --line-height-display: 48px;
    --font-size-h2: 28px;      --line-height-h2: 36px;
    --font-size-h3: 24px;      --line-height-h3: 32px;
    --font-size-h4: 20px;      --line-height-h4: 28px;
    --line-height-body: 24px;
    --grid-margin: 16px;
    --section-padding-y: 64px;
    --section-gap: 40px;
    --header-h: 65px;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* overflow-x: clip não cria contêiner de rolagem → não quebra o position: sticky */
.page { position: relative; overflow-x: clip; padding-top: var(--header-h); }

.t-primary { color: var(--color-text-primary); }
.t-secondary { color: var(--color-text-secondary); }
.t-brand { color: var(--color-text-brand); }
.t-accent { color: var(--color-text-accent); }

.dotted {
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-bg-brand);
  text-decoration-thickness: 10%;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;
}

.h2 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-h2);
  text-align: center;
  text-wrap: balance;
  max-width: var(--container);
  width: 100%;
}
.h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--tracking-h4);
  text-wrap: balance;
}

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
  padding: var(--section-padding-y) var(--grid-margin);
  overflow: clip;
}

.br-mobile { display: none; }
@media (max-width: 767px) { .br-mobile { display: inline; } }

/* Borda com gradiente (stroke "inside" do Figma): o pseudo desenha só o anel.
   O elemento reserva o espaço com padding; --gb-w = espessura, --gb = gradiente. */
.g-border, .badge { position: relative; }
.g-border::before, .badge::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: var(--gb-w, 1px);
  border-radius: inherit;
  background: var(--gb, var(--border-glass));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.g-border--brand { --gb-w: 2px; --gb: var(--border-brand-gradient); }

/* ---------- Badge (componente Figma "Badge", 258:89) ----------
   Vidro: fill gradiente + stroke gradiente 1px (inside, incluído no layout)
   + drop shadow 0 8 20 / 20% + background blur 16.8 (= blur CSS 8.4px).
   Tamanhos (padding do Figma + 1px do stroke):
     SM  8×14 · 12/14  → 32px de altura
     MD  9×16 · 14/16  → 36px  (padrão)
     LG 12×20 · 14/16  → 42px */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 17px; /* MD */
  border-radius: var(--radius-full);
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(8.4px);
  backdrop-filter: blur(8.4px);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-primary);
  white-space: nowrap;
}
.badge--sm { padding: 9px 15px; font-size: 12px; line-height: 14px; }
.badge--lg { padding: 13px 21px; }
.badge--num { width: 42px; height: 42px; padding-inline: 0; } /* LG, largura fixa */
/* mobile: no Figma as badges de texto usam SM; números seguem LG e "Opção 2" segue MD (badge--md-mobile) */
@media (max-width: 767px) {
  .badge:not(.badge--lg):not(.badge--md-mobile) { padding: 9px 15px; font-size: 12px; line-height: 14px; }
  .badge--wrap { width: 100%; white-space: normal; }
}

/* ---------- Botões ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  overflow: hidden;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--font-size-button);
  line-height: var(--line-height-button);
  text-align: center;
  white-space: nowrap;
  isolation: isolate;
  transition: color .2s ease-out, border-color .2s ease-out, text-shadow .2s ease-out, transform .2s ease-out;
}
/* hover (Figma › Buttons › State=Hover, smart animate 200ms ease-out):
   cor sólida por cima do gradiente via ::before (gradiente não interpola) */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-hover-bg, transparent);
  opacity: 0;
  transition: opacity .2s ease-out;
}
.btn:hover::before { opacity: 1; }
.btn:hover { border-color: var(--btn-hover-bg); }
.btn--brand:hover, .btn--light:hover { color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-border-brand); outline-offset: 3px; }

.btn--brand {
  --btn-hover-bg: var(--color-bg-brand);
  color: var(--color-text-primary);
  border-color: var(--color-border-brand-strong);
  background: linear-gradient(to bottom, var(--color-bg-brand), var(--color-bg-brand-subtle));
}
.btn--green {
  --btn-hover-bg: var(--success-border);
  color: #fff;
  border-color: var(--success-border);
  background: linear-gradient(to bottom, var(--success-start), var(--success-end));
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  box-shadow: inset 0 -4px 2px rgba(25,126,69,.64);
  animation: cta-pulse 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
/* pulso: anel verde que expande e some + leve variação de brilho/cor */
@keyframes cta-pulse {
  0%   { box-shadow: inset 0 -4px 2px rgba(25,126,69,.64), 0 0 0 0 rgba(50,199,113,.55); filter: brightness(1) saturate(1); }
  45%  { filter: brightness(1.14) saturate(1.15); }
  70%  { box-shadow: inset 0 -4px 2px rgba(25,126,69,.64), 0 0 0 14px rgba(50,199,113,0); }
  100% { box-shadow: inset 0 -4px 2px rgba(25,126,69,.64), 0 0 0 0 rgba(50,199,113,0); filter: brightness(1) saturate(1); }
}
.btn--green:hover { animation: none; box-shadow: none; }
.btn--light {
  --btn-hover-bg: var(--color-bg-brand);
  color: var(--color-text-inverse);
  background: var(--color-bg-inverse);
  border-color: var(--color-border-brand);
  padding: 12px 24px;
}
@media (max-width: 767px) {
  .btn--light { padding: 8px 16px; }
  .btn--brand, .btn--green { width: 100%; white-space: normal; }
}

/* ---------- Trust row ---------- */
.trust { display: flex; flex-wrap: wrap; align-items: center; color: var(--color-text-secondary); }
.trust li { display: flex; align-items: center; white-space: nowrap; }
.trust img { width: 16px; height: 16px; flex-shrink: 0; }
.trust--b1 { width: 100%; justify-content: space-between; gap: 8px; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.trust--b1 li { gap: 4px; }
.trust--sm { gap: 8px 16px; font-size: var(--font-size-caption); line-height: var(--line-height-caption); }
.trust--sm li { gap: 6px; }
@media (max-width: 767px) {
  .trust--b1, .trust--sm { justify-content: center; }
}

/* ---------- Dots / pílula indicadora ---------- */
.dots { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.dot {
  --dot: 8px;
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--dot);
  height: var(--dot);
  padding: 0;
  border-radius: var(--radius-full);
  background: var(--color-dot);
  overflow: hidden;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.dot.is-active { width: 40px; }
.dot__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--color-bg-inverse);
}
@media (max-width: 767px) { .dot { --dot: 6px; } }

/* ---------- Header ---------- */
/* fixo no topo, sempre visível; o blur mantém a leitura sobre qualquer seção */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-default);
  background: url("assets/images/nav-bg.png") center / cover no-repeat;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px 0;
}
.header__logo img { width: 131.204px; height: 39.99px; }
@media (max-width: 1279px) { .header__inner { padding-inline: 40px; max-width: none; } }
@media (max-width: 767px) {
  .header { background-image: url("assets/images/nav-bg-mobile.png"); }
  .header__inner { padding: 12px var(--grid-margin); }
  .header__logo img { width: 104.963px; height: 31.992px; }
}

/* ---------- Hero (Headline + VSL) ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 40px var(--grid-margin);
}
.hero__bg {
  position: absolute;
  left: -7.08%;
  right: -7.08%;
  top: calc(50% - 45.5px);
  transform: translateY(-50%);
  aspect-ratio: 1200 / 800;
  pointer-events: none;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(13,12,16,0), var(--color-bg-primary));
}
.hero__texts { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: var(--container); width: 100%; }
.hero__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--tracking-h2);
  text-align: center;
}
.hero__title { text-wrap: balance; }
.hero__line { display: block; text-wrap: balance; }
/* subtítulo da Headline 2 (Body/Large no desktop, Body/Small no mobile) */
.hero__sub { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); color: #fff; text-align: center; text-wrap: balance; }
@media (max-width: 767px) { .hero__sub { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); } }
.vsl {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--container);
  aspect-ratio: 1920 / 1080;
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
}
.vsl__play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  border: 2px solid var(--color-border-strong);
}
.vsl__play img { width: 36px; height: 36px; }
/* tablet: a seção fica mais alta que a foto centralizada → ancora a foto no topo (atrás do header) */
@media (min-width: 768px) and (max-width: 1279px) {
  .hero__bg { top: calc(-1 * var(--header-h)); transform: none; }
}
@media (max-width: 767px) {
  .hero__bg { left: -65.64%; right: -65.64%; top: calc(-1 * var(--header-h)); transform: none; }
  .hero__money { color: var(--color-text-brand); }
}

/* ---------- Bloco 1 ---------- */
.b1__card {
  display: flex;
  width: 100%;
  max-width: var(--container);
  padding: 2px; /* espaço do stroke de 2px (borda gradiente via .g-border--brand) */
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 40px rgba(123,31,234,.16);
}
.b1__benefits, .b1__offer { position: relative; flex: 1 1 0; min-width: 0; padding: 48px; }
.b1__benefits::after, .b1__offer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 4px 34px rgba(123,31,234,.08);
}
.b1__benefits {
  display: flex;
  flex-direction: column;
  gap: 48px;
  background: var(--color-bg-surface);
  box-shadow: 0 24px 48px rgba(0,0,0,.3);
}
.b1__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--tracking-h3);
  text-wrap: balance;
}
.b1__list { display: flex; flex-direction: column; gap: 16px; }
.b1__list li { display: flex; align-items: center; gap: 12px; }
.b1__list img { width: 20px; height: 20px; flex-shrink: 0; }

.b1__offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--color-bg-primary);
  text-align: center;
}
.price { display: flex; flex-direction: column; gap: 4px; width: 100%; font-family: var(--font-heading); font-weight: 600; }
.price__from { color: var(--color-text-secondary); font-size: var(--font-size-caption); line-height: var(--line-height-caption); letter-spacing: var(--tracking-label); }
.price__main { font-size: var(--font-size-h2); line-height: var(--line-height-h2); letter-spacing: var(--tracking-h2); text-wrap: balance; }
.price__cash { font-size: var(--font-size-h4); line-height: var(--line-height-h4); letter-spacing: var(--tracking-h4); }
.b1__includes { color: var(--color-text-secondary); }
.b1__includes { max-width: 502px; } /* VSL 2: duas linhas na caixa de 502px do Figma */
/* VSL 1: no Figma o texto cabe numa linha só no desktop (vaza 8px de cada lado do bloco) */
@media (min-width: 1280px) { .b1__includes--oneline { max-width: none; white-space: nowrap; margin-inline: -8px; } }
.b1__access { width: 100%; }

@media (max-width: 1023px) {
  .b1__card { flex-direction: column; }
  .b1__benefits, .b1__offer { padding: 32px 16px; }
  .b1__benefits { gap: 20px; }
  .b1__offer { gap: 32px; justify-content: flex-start; }
  .trust--b1 { justify-content: center; }
}

/* ---------- Bloco 2 · sticky horizontal scroll ---------- */
.b2 { position: relative; background: var(--color-bg-secondary); }
.b2__sticky {
  position: sticky;
  top: var(--header-h); /* trava logo abaixo do header fixo */
  height: calc(100vh - var(--header-h));
  height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--section-gap);
  padding: 0 var(--grid-margin);
  overflow: hidden;
}
.b2__viewport { width: 100%; max-width: var(--container); }
.b2__track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
  width: 480px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  text-align: center;
}
.step__content { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.step__content p { color: var(--color-text-secondary); }

/* ilustrações: caixa do Figma + imagem com sangria (sombra/brilho) */
.ilu { position: relative; height: 200px; flex-shrink: 0; }
.ilu img { position: absolute; max-width: none; }
.ilu--app       { width: 140.351px; } .ilu--app img       { top: 0;     left: -12%;    width: 112%;    height: 112.63%; }
.ilu--analistas { width: 149.734px; } .ilu--analistas img { top: -0.5%; left: -8.01%;  width: 116.02%; height: 106.27%; }
.ilu--sinal     { width: 182.549px; } .ilu--sinal img     { top: 0;     left: -6.57%;  width: 106.57%; height: 109%; }
.ilu--saque     { width: 185.523px; } .ilu--saque img     { top: 0;     left: 0;       width: 106.47%; height: 109%; }

/* telas baixas: compacta o espaçamento para caber em 100dvh */
@media (min-width: 768px) and (max-height: 860px) {
  .b2__sticky { gap: 32px; }
  .step { gap: 32px; }
}
@media (max-width: 767px) {
  .step { width: 300px; padding: 16px; }
}
@media (max-width: 767px) and (max-height: 760px) {
  .b2__sticky { gap: 24px; }
  .step { gap: 24px; }
}

/* ---------- Bloco 3 ---------- */
.b3__brand { color: var(--color-text-brand); }
.b3__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: var(--container);
  text-align: center;
}
.item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}
.item__text { display: flex; flex-direction: column; gap: 8px; }
.item__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--font-size-button); line-height: var(--line-height-button); }
.item__text p { color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.item__value { font-family: var(--font-heading); font-weight: 700; font-size: 16px; line-height: 24px; color: var(--color-text-brand); }
/* no desktop o bônus fica na esquerda da 2ª linha */
.item--bonus { order: 3; }
.item--aula { order: 4; }

.b3__cta {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 48px;
  width: 100%;
  max-width: var(--container);
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
.b3__price { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; font-family: var(--font-heading); font-weight: 600; text-wrap: balance; }
.b3__total { color: var(--color-text-secondary); font-size: var(--font-size-h4); line-height: var(--line-height-h4); letter-spacing: var(--tracking-h4); }
.b3__today { display: flex; flex-direction: column; gap: 12px; }
.b3__installments { font-size: var(--font-size-h2); line-height: var(--line-height-h2); letter-spacing: var(--tracking-h2); }
.b3__cash { font-size: var(--font-size-h4); line-height: var(--line-height-h4); letter-spacing: var(--tracking-h4); }
.b3__action { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.b3__access { text-align: right; width: 100%; }

@media (max-width: 1023px) {
  .b3__cta { flex-direction: column; align-items: center; gap: 24px; padding: 24px 16px; border-radius: 20px; text-align: center; }
  .b3__price { flex: none; width: 100%; gap: 8px; }
  .b3__today { gap: 8px; }
  .b3__installments .t-accent { display: block; }
  .b3__action { align-items: center; gap: 24px; width: 100%; }
  .b3__access { text-align: center; }
  .trust--sm { justify-content: center; }
}
@media (max-width: 767px) {
  .b3__items { grid-template-columns: 1fr; }
  .item { padding: 16px; }
  .item--bonus, .item--aula { order: 0; }
}

/* ---------- Bloco 4 · depoimentos ---------- */
.b4 { background: var(--color-bg-secondary); }
.b4__line { display: block; }
.b4__carousel { width: 100%; max-width: var(--container); }
.b4__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.b4__card {
  aspect-ratio: 1080 / 1920;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-inverse);
}
.b4__dots { display: none; }
@media (min-width: 768px) { .b4__card.is-clone { display: none; } }

@media (max-width: 767px) {
  .b4__carousel { display: flex; flex-direction: column; align-items: center; gap: 24px; }
  .b4__viewport { width: 100%; overflow: visible; }
  .b4__grid {
    display: flex;
    gap: 24px;
    width: max-content;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .b4__grid.no-anim { transition: none; }
  .b4__card { width: 300px; height: 533.333px; flex-shrink: 0; border: 0; border-radius: 20px; }
  .b4__dots { display: flex; }
  .b4__dots .dot.is-active .dot__fill { animation: pill-fill var(--interval, 5000ms) linear forwards; }
  .b4__carousel.is-paused .dot.is-active .dot__fill { animation-play-state: paused; }
}
@keyframes pill-fill { from { width: 0; } to { width: 100%; } }

/* ---------- Bloco 5 ---------- */
.b5 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 720px;
  padding: var(--section-padding-y) var(--grid-margin) 64px;
  overflow: clip;
}
.b5__bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* object-fit: cover mantém a proporção da foto em qualquer largura (corta, nunca estica) */
.b5__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  opacity: .4;
}
.b5__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--color-bg-secondary) 0%, rgba(28,15,45,.64) 16.142%, rgba(32,11,58,.2) 32.165%, var(--color-bg-primary) 100%);
}
.b5__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 24px;
  width: 100%;
  max-width: var(--container);
  padding: 41px; /* 40 + 1px do stroke */
  border-radius: var(--radius-lg);
  background: var(--glass-card-fill);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.b5__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.b5__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  letter-spacing: var(--tracking-h3);
  text-wrap: balance;
}

@media (max-width: 1023px) {
  .b5__card { flex-direction: column; align-items: stretch; padding: 33px 17px; }
  .b5__text { flex: none; align-items: stretch; }
  .b5__title { text-align: center; }
  .b5__card .btn { white-space: normal; }
  .b5__card .badge--wrap { width: 100%; white-space: normal; }
}
@media (max-width: 767px) {
  /* Figma mobile: foto ocupa os 56,57% de cima da seção, centralizada e cortada nas laterais */
  .b5__bg img { bottom: auto; height: 56.57%; }
}

/* ---------- Bloco 6 · garantia ---------- */
.b6__container { display: flex; align-items: center; justify-content: center; gap: 64px; width: 100%; max-width: var(--container); }
.selo { position: relative; flex-shrink: 0; width: 229.189px; height: 320px; }
.selo img { position: absolute; top: -3%; left: -8.38%; width: 116.76%; height: 103.5%; max-width: none; }
.b6__texts { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; }
.b6__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.b6__head .h2 { text-align: left; }
.b6__brand { color: var(--color-text-brand); }
/* badge longa (VSL 2) quebra linha quando não cabe na coluna */
.b6__head .badge { max-width: 100%; white-space: normal; text-align: left; }
@media (max-width: 1279px) {
  .b6__container { gap: 40px; }
  .b6__head .badge { white-space: normal; text-align: left; }
}
.b6__lead { font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-h4); line-height: var(--line-height-h4); letter-spacing: var(--tracking-h4); text-wrap: balance; }
.b6__body { color: var(--color-text-secondary); }

@media (max-width: 1023px) {
  .b6__container { flex-direction: column; gap: var(--section-gap); }
  .selo { width: 143.243px; height: 200px; }
  .b6__texts { flex: none; width: 100%; gap: var(--section-gap); text-align: center; align-items: stretch; }
  .b6__head { align-items: stretch; }
  .b6__head .h2 { text-align: center; }
  .b6__head .badge { text-align: center; }
}

/* ---------- Bloco 7 · FAQ ---------- */
.b7 { background: var(--color-bg-secondary); }
.b7__title { text-align: left; }
.faq { width: 100%; max-width: var(--container); }
.faq__item { border-bottom: 1px solid var(--color-border-default); transition: border-color .3s ease; }
.faq__item.is-open { border-color: var(--color-border-strong); }
.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 24px 0;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--tracking-h4);
  color: var(--color-text-secondary);
  text-wrap: balance;
  transition: color .3s ease, padding .3s ease;
}
.faq__q > span:first-child { flex: 1 1 0; min-width: 0; }
.faq__item.is-open .faq__q { color: var(--color-text-primary); padding-bottom: 12px; }
.faq__q:focus-visible { outline: 2px solid var(--color-border-brand); outline-offset: 4px; border-radius: 4px; }
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface) url("assets/icons/icon-plus.svg") center / 16px 16px no-repeat;
  transition: background-color .3s ease;
}
.faq__item.is-open .faq__icon { background-color: var(--color-bg-brand); background-image: url("assets/icons/icon-minus.svg"); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.4,0,.2,1); }
.faq__a > div { overflow: hidden; }
.faq__a p { padding-bottom: 24px; color: var(--color-text-secondary); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }

/* ---------- Bloco 8 ---------- */
.b8__cards { display: flex; align-items: center; justify-content: center; gap: 40px; width: 100%; max-width: var(--container); }
.choice {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 2px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
}
.choice p { color: var(--color-text-secondary); }
.choice--best {
  border: 0;
  padding: 22px; /* 20 + 2px do stroke (borda gradiente via .g-border--brand) */
  background: var(--color-bg-surface);
  filter: drop-shadow(0 24px 20px rgba(123,31,234,.16));
}
.choice--best::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 4px 34px rgba(123,31,234,.08); }
.choice--best p { color: var(--color-text-primary); }

.b8__decision {
  width: 100%;
  max-width: var(--container);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  letter-spacing: var(--tracking-display);
  text-align: center;
  text-wrap: balance;
  color: transparent;
  background: url("assets/images/decisao-texture.png") center / cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
}
.b8__cta { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: var(--container); padding: 0 48px; text-align: center; }
.b8__cta p { color: var(--color-text-secondary); }

@media (max-width: 767px) {
  .b8__cards { flex-direction: column; gap: 24px; }
  .choice { flex: none; width: 100%; padding: 20px 16px; }
  .choice--best { padding: 22px 18px; }
  .b8__decision { background-image: url("assets/images/decisao-texture-mobile.png"); }
  .b8__cta { padding: 0; }
}

/* ---------- Footer ---------- */
.footer { display: flex; justify-content: center; padding: 40px var(--grid-margin); }
/* brilho: faixa clara recortada no formato do logo (mask), passando a cada ~6s */
.footer__logo { position: relative; display: block; width: 100%; max-width: 1200px; }
.footer__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.08) 47%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.08) 53%, transparent 58%) no-repeat;
  background-size: 250% 100%;
  background-position: 150% 0;
  -webkit-mask: url("assets/brand/footer-logo-mask.png") center / 100% 100% no-repeat;
  mask: url("assets/brand/footer-logo-mask.png") center / 100% 100% no-repeat;
  animation: footer-shine 6s ease-in-out infinite;
}
@keyframes footer-shine {
  0%, 55% { background-position: 150% 0; }
  100%    { background-position: -50% 0; }
}
.footer img { width: 100%; max-width: 1200px; height: auto; aspect-ratio: 1200 / 279.873; }
@media (max-width: 767px) {
  .footer__logo { max-width: 350px; }
  .footer img { aspect-ratio: 350 / 81.6297; }
  .footer__logo::after { -webkit-mask-image: url("assets/brand/footer-logo-mobile-mask.png"); mask-image: url("assets/brand/footer-logo-mobile-mask.png"); }
}

/* ---------- Entrada de conteúdo (sutil) ----------
   Animação (e não transition) para não sobrescrever as transitions de hover/FAQ. */
.js-reveal [data-reveal]:not(.is-in),
.js-reveal [data-reveal-group] > :not(.is-in) { opacity: 0; }
.js-reveal [data-reveal].is-in,
.js-reveal [data-reveal-group] > .is-in {
  animation: reveal-in .7s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms) both;
}
@keyframes reveal-in {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__a, .dot, .b4__grid { transition-duration: .01ms !important; }
  .btn--green, .footer__logo::after { animation: none; }
}