/* ==========================================================================
   Arquiteto ND — página de vendas (marca pessoal · Avatar A · low ticket 1)
   Mesma família visual da isca (landing-pages/treinamento-negocio-digital):
   tokens, Sora + Inter, borda 1px, raio 20px, CTA em pílula azul→ciano.
   A marca pessoal não tem logo: só o nome "Gabriel Guzzo" escrito.

   PALETA COMPLETA (regra do fundador, 12/10): as seções alternam escuro,
   claro (.secao--clara), painel (.secao--painel), índigo (.secao--indigo,
   o mecanismo) e azul vívido (.final). Duas vizinhas nunca têm o mesmo
   fundo. Dentro de uma seção clara as variáveis de cor são redefinidas,
   então os componentes se adaptam sozinhos.

   COMPOSIÇÃO: bloco com visual = duas colunas no desktop; bloco só de texto
   = centralizado numa coluna de leitura; no celular, tudo empilha.

   EFEITOS: todos são acabamento. Nenhum esconde texto sem JS, nenhum segura
   o clique, e com prefers-reduced-motion tudo fica parado e visível.
   ========================================================================== */

:root {
  --noite: #0B0F19;
  --fundo: #0B0F19;
  --painel: #131826;
  --painel-2: #171D2E;
  --tinta: #F5F9FF;
  --nevoa: #A8B3C7;
  --nevoa-2: #C9D2E1;
  --eletrico: #1E8FFF;
  --ciano: #7FD6FF;
  --violeta: #9D7BFF;
  --violeta-claro: #CDBEFF;
  --violeta-texto: #CDBEFF;
  --vivido: #0027D4;
  --indigo: #110F27;
  --linha: rgba(255, 255, 255, 0.10);
  --linha-forte: rgba(255, 255, 255, 0.16);
  --raio: 20px;
  --gradiente: linear-gradient(120deg, var(--eletrico), var(--ciano));
  --gradiente-vivo: linear-gradient(120deg, var(--vivido), var(--eletrico) 75%, #46A8FF);
  --ease: cubic-bezier(.65, 0, .25, 1);
  --sai: cubic-bezier(.22, 1, .36, 1);

  --container: 1120px;
  --respiro: 20px;
  --leitura: 42rem;
  --secao: 84px;
  --gap-titulo: 18px;
  --gap-bloco: 40px;
  --gap-cta: 34px;
  --barra-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--noite);
  color: var(--tinta);
  font: 400 1rem/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Sora', system-ui, sans-serif;
  color: var(--tinta);
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-weight: 800;
  font-size: clamp(1.7rem, 1.15rem + 2.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
}
h3 { font-weight: 700; line-height: 1.25; }

p { margin: 0 0 1em; color: var(--nevoa); }
p:last-child { margin-bottom: 0; }
strong { color: var(--tinta); font-weight: 600; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
blockquote { margin: 0; }
s { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ciano); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg use { color: inherit; }
.ic {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.app svg, .marcos__icone svg, .licoes__icone svg, .grupo__icone svg, .credenciais__icone svg,
.nucleo__no svg, .capitulo__tag svg, .versus__icone svg, .faixa-bonus__icone svg, .metodo__simples-icone svg,
.estante__lupa svg, .mini-cel__caixa svg, .btn__seta, .faixa-bonus__seta {
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------- eixo */
.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--respiro));
  margin-inline: auto;
  padding-inline: var(--respiro);
}
.centro { text-align: center; }
.centro > h2 { max-width: 19em; margin-inline: auto; margin-bottom: var(--gap-titulo); }
.centro > p { max-width: var(--leitura); margin-inline: auto; font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.7; }

.secao { position: relative; padding: var(--secao) 0; }

/* sobretítulo: pílula pequena em caixa alta */
.sobretitulo {
  display: block;
  width: fit-content;
  margin: 0 auto 14px !important;
  padding: .45em 1em;
  border-radius: 999px;
  background: rgba(157, 123, 255, .12);
  border: 1px solid rgba(157, 123, 255, .3);
  color: var(--violeta-texto) !important;
  font: 700 .72rem/1.4 'Inter', sans-serif !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.destaque-cor {
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------- botão-padrão
   Mesmo tamanho em toda a página (a largura não depende do texto), seta num
   círculo à direita, como no modelo. A cor muda só com o fundo da seção. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn--padrao {
  width: min(100%, 400px);
  min-height: 62px;
  padding: 12px 62px 12px 30px;
  background: var(--gradiente);
  color: #04122B;
  font: 700 1.04rem/1.25 'Inter', system-ui, sans-serif;
  box-shadow: 0 14px 36px -12px rgba(30, 143, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.btn--padrao > span { flex: 1; }
.btn__seta {
  position: absolute;
  right: 9px;
  top: 50%;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 12px;
  border-radius: 50%;
  background: #04122B;
  color: var(--ciano);
  stroke-width: 2.4;
  transition: transform .25s var(--sai);
}
.btn--padrao:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 20px 44px -12px rgba(30, 143, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .6); }
.btn--padrao:hover .btn__seta { transform: translate(2px, -2px); }
.btn--padrao:active { transform: translateY(0); }

/* no claro e no cartão branco: azul vívido com texto branco */
.secao--clara .btn--padrao,
.cartao .btn--padrao {
  background: var(--gradiente-vivo);
  color: #fff;
  box-shadow: 0 16px 36px -14px rgba(0, 39, 212, .75), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.secao--clara .btn--padrao .btn__seta,
.cartao .btn--padrao .btn__seta { background: #fff; color: var(--vivido); }
.secao--clara .btn--padrao:hover,
.cartao .btn--padrao:hover { box-shadow: 0 20px 44px -14px rgba(0, 39, 212, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }

/* no azul vívido: branco */
.btn--branco { background: #fff !important; color: var(--vivido) !important; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55) !important; }
.btn--branco .btn__seta { background: var(--vivido); color: #fff; }

.cta { display: flex; flex-direction: column; align-items: center; margin-top: var(--gap-cta); }
.cta--esq { align-items: center; }
.microprova {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  text-wrap: balance;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0 !important;
  color: var(--nevoa) !important;
  font-size: .86rem !important;
  font-weight: 500;
  line-height: 1.4 !important;
}
.microprova .ic { width: 15px; height: 15px; color: var(--ciano); }
.microprova--claro { color: rgba(255, 255, 255, .9) !important; }
.microprova--claro .ic { color: #fff; }

/* --------------------------------------------------------------- cabeçalho: só o nome */
.cabeca {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--linha);
}
.cabeca__dentro { display: flex; align-items: center; justify-content: center; height: 60px; }
.nome {
  color: var(--tinta);
  font: 700 1.06rem/1 'Sora', sans-serif;
  letter-spacing: -0.01em;
  text-decoration: none;
}

/* --------------------------------------------------------------- DOBRA 01 · topo */
.topo {
  position: relative;
  padding: 36px 0 var(--secao);
  overflow: hidden;
  isolation: isolate;
}
.topo__luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42rem 30rem at 86% 18%, rgba(30, 143, 255, .22), transparent 70%),
    radial-gradient(30rem 24rem at 0% 100%, rgba(157, 123, 255, .12), transparent 70%),
    repeating-linear-gradient(90deg, rgba(127, 214, 255, .025) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(180deg, rgba(127, 214, 255, .025) 0 1px, transparent 1px 56px);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
  mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.topo__grade { display: grid; gap: 40px; }

.produto { margin: 0 0 16px; }
.produto span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta);
  font: 800 1rem/1 'Sora', sans-serif;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.produto span::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--gradiente);
}

.selo {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 18px;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--violeta);
  color: var(--violeta-claro);
  font: 600 .7rem/1.5 'Inter', sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

h1 {
  font-weight: 800;
  font-size: clamp(1.95rem, 1.25rem + 2.4vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
}
.topo__sub {
  margin: 20px 0 0;
  max-width: 36em;
  font-size: clamp(1.03rem, .97rem + .3vw, 1.15rem);
  line-height: 1.65;
}

.compra {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  max-width: 400px;
}
.compra__ancora {
  margin: 0 0 6px;
  color: var(--nevoa-2);
  font-size: .95rem;
  line-height: 1.5;
}
.preco {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 18px;
}
.preco__valor {
  color: var(--tinta);
  font: 800 2.3rem/1 'Sora', sans-serif;
  letter-spacing: -0.03em;
}
.preco__sep { color: var(--nevoa); font-weight: 700; }
.preco__modo { color: var(--nevoa-2); font-weight: 600; font-size: 1rem; }

.selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 16px;
}
.selos li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--nevoa-2);
  font-size: .84rem;
  font-weight: 500;
}
.selos .ic { width: 16px; height: 16px; color: var(--ciano); }

.topo__visual { position: relative; width: min(100%, 440px); margin-inline: auto; }

/* ---- o time ao redor do "Você" (SVG) ---- */
.time { position: relative; margin: 0; }
.time::before {
  content: "";
  position: absolute;
  inset: 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 143, 255, .22), transparent);
  filter: blur(12px);
}
.time__svg { display: block; width: 100%; height: auto; overflow: visible; }
.time__orbita-fixa { fill: none; stroke: rgba(127, 214, 255, .10); stroke-width: 1; stroke-dasharray: 2 6; }
.time__fio { stroke: rgba(168, 179, 199, .28); stroke-width: 1.5; }
.time__pulso {
  stroke: var(--ciano);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 200;
  stroke-dashoffset: 9;
  opacity: 0;
  animation: time-pulso 3.3s var(--d, 0s) ease-in infinite;
}
.time__no {
  fill: #121A2E;
  stroke: rgba(127, 214, 255, .32);
  stroke-width: 1.5;
  animation: time-acende 3.3s var(--d, 0s) infinite;
}
.time__icone { color: #DCEBFF; }
.time__rotulo { fill: var(--nevoa-2); font: 600 14px 'Inter', system-ui, sans-serif; }
.time__aura { transform-origin: 260px 260px; animation: time-aura 3.3s ease-in-out infinite; }
.time__anel { fill: rgba(17, 15, 39, .55); stroke: rgba(157, 123, 255, .35); stroke-width: 1.5; }
.time__anel-tracos { fill: none; stroke: var(--violeta); stroke-width: 2; stroke-dasharray: 3 11; stroke-linecap: round; opacity: .8; }
.time__satelite { fill: var(--violeta-claro); }
.time__giro { transform-origin: 260px 260px; animation: girar 26s linear infinite; }
.time__orq { fill: var(--violeta-claro); font: 700 11.5px 'Sora', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.time__voce { filter: drop-shadow(0 10px 26px rgba(30, 143, 255, .55)); }
.time__voce-icone { color: #fff; }
.time__voce-icone, .time__icone { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.time__svg--estreito .time__rotulo { display: none; }
.time__voce-rotulo { fill: #fff; font: 800 13px 'Sora', system-ui, sans-serif; text-anchor: middle; }

@keyframes time-pulso {
  0% { stroke-dashoffset: 9; opacity: 1; }
  40% { stroke-dashoffset: -66; opacity: 1; }
  41%, 100% { stroke-dashoffset: -66; opacity: 0; }
}
@keyframes time-acende {
  0%, 36% { stroke: rgba(127, 214, 255, .32); fill: #121A2E; }
  42%, 66% { stroke: var(--ciano); fill: #16294C; }
  100% { stroke: rgba(127, 214, 255, .32); fill: #121A2E; }
}
@keyframes time-aura { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes girar { to { transform: rotate(360deg); } }

.pausado, .pausado * { animation-play-state: paused !important; }

/* --------------------------------------------------------------- variações de fundo */
.secao--clara {
  --tinta: #0B0F19;
  --nevoa: #4A556B;
  --nevoa-2: #2C3547;
  --linha: rgba(11, 15, 25, .10);
  --linha-forte: rgba(11, 15, 25, .16);
  --painel: #FFFFFF;
  --fundo: #F3F6FC;
  --violeta-texto: #5B3FD9;
  background:
    radial-gradient(48rem 22rem at 50% 0%, rgba(30, 143, 255, .07), transparent 70%),
    var(--fundo);
  color: var(--tinta);
}
.secao--clara .sobretitulo { background: rgba(91, 63, 217, .08); border-color: rgba(91, 63, 217, .2); }
.secao--clara .destaque-cor { background: linear-gradient(120deg, var(--vivido), #5B3FD9); -webkit-background-clip: text; background-clip: text; }
.secao--clara :focus-visible { outline-color: var(--vivido); }
.secao--clara .microprova .ic { color: var(--vivido); }

.secao--painel { --fundo: #121726; --painel: #171D2E; background: var(--fundo); }

.secao--indigo {
  --fundo: var(--indigo);
  background:
    radial-gradient(50rem 30rem at 50% 55%, rgba(157, 123, 255, .14), transparent 70%),
    linear-gradient(180deg, var(--noite), var(--indigo) 18%, var(--indigo) 86%, #0F0D22);
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.etiqueta-empresa {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--linha);
  color: var(--nevoa);
  font-size: .86rem;
  line-height: 1.45;
}
.etiqueta-empresa .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--nevoa-2); }

/* --------------------------------------------------------------- DOBRA 02a · a equipe */
.equipe {
  --tile: 66px;
  max-width: 900px;
  margin: var(--gap-bloco) auto 0;
}
.equipe__linha {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 10px;
}
.equipe__linha > li { display: flex; justify-content: center; }

.agente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 100%;
  max-width: 120px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--nevoa-2);
  font: 600 .8rem/1.25 'Inter', sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.agente__nome { min-height: 2.5em; display: flex; align-items: flex-start; justify-content: center; text-align: center; }
.agente__funcao { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.js) .agente__funcao { position: static; width: auto; height: auto; clip: auto; white-space: normal; color: var(--nevoa); font-weight: 400; font-size: .74rem; }

.app {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  border-radius: 30%;
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -10px 18px -10px rgba(0, 0, 0, .35);
  transition: transform .3s var(--sai), box-shadow .3s ease;
}
.app::after {
  /* o reflexo de ícone de app */
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  border-radius: 30% 30% 45% 45% / 30% 30% 20% 20%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), transparent);
  pointer-events: none;
}
.app svg { width: 46%; height: 46%; stroke-width: 1.8; }
.app--a { background: linear-gradient(140deg, #3FA2FF, #0027D4); }
.app--b { background: linear-gradient(140deg, #B89BFF, #5B3FD9); }
.app--c { background: linear-gradient(140deg, #8FE0FF, #1E8FFF); }
.app--d { background: linear-gradient(140deg, #34416E, #151B30); color: var(--ciano); }
.app--e { background: linear-gradient(140deg, #6A5BFF, #0027D4); }
.app--vazio {
  background: transparent;
  box-shadow: none;
  border: 1.5px dashed rgba(205, 190, 255, .45);
  color: var(--violeta-claro);
}
.app--vazio::after { display: none; }
.agente-proximo { opacity: .8; }
.agente-proximo .app { animation: respira 3.2s ease-in-out infinite; }
@keyframes respira { 0%, 100% { transform: scale(.94); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }

.agente:hover .app,
.agente:focus-visible .app,
.agente.is-ativo .app {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 0 0 3px rgba(127, 214, 255, .55), 0 18px 40px -12px rgba(30, 143, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.agente.is-ativo { color: var(--tinta); }
.agente:focus-visible { outline: none; }

/* elos verticais entre as linhas e o núcleo, com um sinal correndo */
.equipe__elo {
  position: relative;
  width: 2px;
  height: 34px;
  margin: 6px auto;
  background: linear-gradient(180deg, rgba(127, 214, 255, .1), rgba(127, 214, 255, .55), rgba(127, 214, 255, .1));
}
.equipe__elo span {
  position: absolute;
  left: -3px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px var(--ciano);
  animation: elo 1.8s linear infinite;
}
.equipe__elo:last-of-type span { animation-direction: reverse; }
@keyframes elo { from { transform: translateY(-4px); opacity: 0; } 20%, 80% { opacity: 1; } to { transform: translateY(30px); opacity: 0; } }

.nucleo {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 18px 16px;
  border: 1px solid rgba(157, 123, 255, .35);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(30, 24, 70, .9), rgba(17, 15, 39, .95));
  box-shadow: 0 0 0 6px rgba(157, 123, 255, .06), 0 30px 70px -30px rgba(157, 123, 255, .6);
}
.nucleo__dupla { display: flex; align-items: center; justify-content: center; gap: 10px; }
.nucleo__no {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  font: 700 .9rem/1 'Sora', sans-serif;
  color: #fff;
}
.nucleo__no svg { width: 30px; height: 30px; padding: 6px; border-radius: 50%; }
.nucleo__no--voce { background: linear-gradient(120deg, #1E8FFF, #0027D4); }
.nucleo__no--voce svg { background: rgba(255, 255, 255, .18); }
.nucleo__no--orq { background: rgba(157, 123, 255, .16); border: 1px solid rgba(157, 123, 255, .5); color: var(--violeta-claro); }
.nucleo__no--orq svg { background: rgba(157, 123, 255, .2); }
.nucleo__fio { position: relative; flex: 0 1 60px; height: 2px; background: linear-gradient(90deg, #1E8FFF, var(--violeta)); }
.nucleo__fio i {
  position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px #fff;
  animation: fio-h 1.6s ease-in-out infinite alternate;
}
@keyframes fio-h { to { left: calc(100% - 8px); } }

.visor {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: start;
  min-height: 4.6em;
  margin: 14px 0 0 !important;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(4, 7, 14, .55);
  border: 1px solid rgba(127, 214, 255, .18);
  text-align: left;
}
.visor__ponto {
  grid-row: span 2;
  width: 9px; height: 9px; margin-top: 6px; border-radius: 50%;
  background: #34E39A;
  box-shadow: 0 0 0 4px rgba(52, 227, 154, .15), 0 0 10px #34E39A;
}
.visor__nome { color: var(--ciano); font: 700 .92rem/1.35 'Sora', sans-serif; }
.visor__funcao { color: var(--nevoa-2); font-size: .95rem; line-height: 1.45; }
.visor.is-troca .visor__nome, .visor.is-troca .visor__funcao { animation: troca .45s var(--sai); }
@keyframes troca { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.centro > .metodo__cresce,
.centro > .metodo__audita,
.centro > .metodo__simples { max-width: 40rem; }
.centro > .metodo__cresce {
  margin-top: var(--gap-bloco);
  color: var(--nevoa-2);
}
.metodo__cresce .ic { display: inline-block; vertical-align: -3px; color: var(--ciano); width: 20px; height: 20px; }
.centro > .metodo__audita { margin-top: 18px; color: var(--nevoa-2); }
.metodo__audita strong { color: #fff; font-family: 'Sora', sans-serif; font-weight: 700; }
.centro > .metodo__simples {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  padding: 16px 20px;
  border-radius: 18px;
  border: 1px solid rgba(127, 214, 255, .35);
  background: linear-gradient(120deg, rgba(30, 143, 255, .14), rgba(157, 123, 255, .10));
  text-align: left;
  color: var(--nevoa-2);
  font-size: 1rem;
}
.metodo__simples strong { color: #fff; }
.metodo__simples-icone {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 14px;
  background: var(--gradiente); color: #04122B;
}
.metodo__simples-icone svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------- DOBRA 02b · pra quem é */
.faixas {
  display: grid;
  gap: 12px;
  margin: var(--gap-bloco) 0 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.faixa { display: flex; width: max-content; }
.faixa__lista { display: flex; gap: 12px; padding-right: 12px; }
.faixa__lista li {
  flex: none;
  padding: .6em 1.1em;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--linha);
  box-shadow: 0 8px 20px -14px rgba(11, 15, 25, .35);
  color: var(--nevoa-2);
  font-weight: 500;
  font-size: .95rem;
  white-space: nowrap;
}
.faixa__lista li::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin: 0 9px 1px 0;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--vivido), var(--violeta));
}
/* movimento: só com JS liberado e movimento permitido */
.faixas.is-movendo .faixa { animation: desliza var(--dur, 70s) linear infinite; }
.faixas.is-movendo .faixa--volta { animation-direction: reverse; }
@keyframes desliza { to { transform: translateX(calc(-100% / 3)); } }
/* parado: as etiquetas quebram em linhas, centralizadas, e a cópia some */
.faixas:not(.is-movendo) { -webkit-mask-image: none; mask-image: none; padding-inline: var(--respiro); max-width: 1000px; margin-inline: auto; }
.faixas:not(.is-movendo) .faixa { width: auto; justify-content: center; }
.faixas:not(.is-movendo) .faixa__lista { flex-wrap: wrap; justify-content: center; padding: 0; }
.faixas:not(.is-movendo) .faixa__lista--copia { display: none; }

/* os dois perfis: o do Bruno é o principal (mais peso), o da empresa é secundário */
.perfis { display: grid; gap: 14px; max-width: 1000px; margin: var(--gap-bloco) auto 0; text-align: left; }
.perfil { position: relative; padding: 24px 22px; border-radius: var(--raio); }
.perfil h3 { margin: 14px 0 10px; font-size: 1.15rem; }
.perfil p { margin: 0; font-size: .98rem; line-height: 1.65; }
.perfil__icone { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; }
.perfil__icone svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.perfil--principal {
  background: linear-gradient(150deg, #0A33E0, #0027D4 50%, #1E5BFF);
  box-shadow: 0 30px 60px -30px rgba(0, 39, 212, .8);
}
.perfil--principal h3 { color: #fff; font-size: 1.32rem; }
.perfil--principal p { color: rgba(255, 255, 255, .9); font-size: 1.05rem; }
.perfil--principal .perfil__icone { background: #fff; color: var(--vivido); }
.perfil--empresa { background: #fff; border: 1px solid var(--linha); }
.perfil--empresa .perfil__icone { background: #E9ECF3; color: #4A556B; }
.perfil--empresa p { color: var(--nevoa); }

.centro > .pra-quem__nao {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--gap-bloco);
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px solid var(--linha);
  background: #fff;
  text-align: left;
  color: var(--nevoa);
  font-size: 1rem;
}
.pra-quem__nao .ic { flex: none; width: 26px; height: 26px; padding: 5px; margin-top: 1px; border-radius: 50%; background: #E9ECF3; color: #4A556B; stroke-width: 2.6; }

/* --------------------------------------------------------------- DOBRA 03a · os 4 pilares */
.pilares__grade { display: grid; gap: 32px; }
.pilares__texto h2, .garantia__texto h2 { margin-bottom: var(--gap-titulo); font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.35rem); }
.pilares__texto > p { font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.7; }

.grade-aulas {
  display: grid;
  gap: 18px;
  padding: 20px;
  border-radius: 24px;
  border: 1px solid var(--linha);
  background: linear-gradient(170deg, #1A2136, #141A2B);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .9);
}
.pilar h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: .98rem;
  line-height: 1.3;
}
.pilar__num {
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--cor-pilar);
  color: #fff;
  font: 800 .82rem/1 'Sora', sans-serif;
}
.pilar--1 { --cor-pilar: linear-gradient(140deg, #3FA2FF, #0027D4); --chip: rgba(30, 143, 255, .14); --chip-borda: rgba(30, 143, 255, .38); }
.pilar--2 { --cor-pilar: linear-gradient(140deg, #B89BFF, #5B3FD9); --chip: rgba(157, 123, 255, .14); --chip-borda: rgba(157, 123, 255, .4); }
.pilar--3 { --cor-pilar: linear-gradient(140deg, #8FE0FF, #1E8FFF); --chip: rgba(127, 214, 255, .12); --chip-borda: rgba(127, 214, 255, .38); }
.pilar--4 { --cor-pilar: linear-gradient(140deg, #6A5BFF, #0027D4); --chip: rgba(106, 91, 255, .15); --chip-borda: rgba(106, 91, 255, .42); }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips li {
  padding: .42em .8em;
  border-radius: 9px;
  background: var(--chip);
  border: 1px solid var(--chip-borda);
  color: var(--tinta);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.35;
}

.faixa-bonus {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--gap-bloco);
  padding: 16px 18px;
  border-radius: 18px;
  text-decoration: none;
  border: 1.5px solid transparent;
  background:
    linear-gradient(120deg, #1B1640, #121A33) padding-box,
    linear-gradient(120deg, var(--violeta), var(--eletrico), var(--ciano)) border-box;
  color: var(--tinta);
  font: 600 1rem/1.4 'Sora', sans-serif;
  transition: transform .25s var(--sai), box-shadow .25s ease;
}
.faixa-bonus:hover { transform: translateY(-2px); box-shadow: 0 20px 44px -20px rgba(157, 123, 255, .7); }
.faixa-bonus__icone {
  flex: none;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(140deg, #B89BFF, #5B3FD9);
  color: #fff;
}
.faixa-bonus__icone svg { width: 22px; height: 22px; stroke-width: 2.6; }
.faixa-bonus__texto { flex: 1; }
.faixa-bonus__seta { flex: none; width: 22px; height: 22px; color: var(--ciano); stroke-width: 2.2; transform: rotate(90deg); }

/* --------------------------------------------------------------- DOBRA 03b · o plano */
.trilha { position: relative; max-width: 1040px; margin: var(--gap-bloco) auto 0; }
.trilha__linha { display: none; }
.etapas { display: grid; gap: 14px; text-align: left; counter-reset: etapa; }
.etapas { position: relative; }
.etapas::before {
  /* no celular, a trilha corre na vertical, ligando os marcos */
  content: "";
  position: absolute;
  left: 39px; top: 40px; bottom: 40px;
  width: 2px;
  background: linear-gradient(180deg, var(--vivido), var(--violeta));
  opacity: .25;
}
.etapa {
  position: relative;
  padding: 22px 20px 22px 76px;
  border-radius: var(--raio);
  background: #fff;
  border: 1px solid var(--linha);
  box-shadow: 0 22px 50px -34px rgba(11, 15, 25, .4);
}
.etapa__marco {
  position: absolute;
  left: 20px;
  top: 20px;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #E8EDF8;
  color: #4A556B;
  font: 800 1rem/1 'Sora', sans-serif;
  transition: background .5s ease, color .5s ease, box-shadow .5s ease;
}
.etapa.is-alcancada .etapa__marco,
html:not(.js) .etapa__marco {
  background: var(--gradiente-vivo);
  color: #fff;
  box-shadow: 0 0 0 6px rgba(30, 143, 255, .14), 0 10px 22px -8px rgba(0, 39, 212, .7);
}
.etapa__rotulo { margin: 0 0 4px !important; color: #5B3FD9 !important; font: 700 .74rem/1.3 'Inter', sans-serif !important; letter-spacing: .12em; text-transform: uppercase; }
.etapa h3 { margin-bottom: 12px; font-size: 1.2rem; }
.etapa__pronto { margin: 0 0 4px !important; color: var(--tinta) !important; font: 600 .82rem/1.4 'Sora', sans-serif !important; }
.etapa p:last-child { color: var(--nevoa); font-size: .96rem; line-height: 1.55; }

.centro > .plano__nota {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: var(--gap-bloco);
  text-align: left;
  color: var(--nevoa-2);
}
.plano__nota .ic { margin-top: .2em; width: 22px; height: 22px; color: var(--vivido); }

/* --------------------------------------------------------------- DOBRA 04 · avatar */
.avatar {
  background:
    radial-gradient(46rem 26rem at 50% 0%, rgba(30, 143, 255, .10), transparent 70%),
    var(--noite);
}
.centro > .ponte {
  max-width: 26em;
  margin-bottom: 0;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 2.9rem);
  line-height: 1.15;
}
.ponte > span { display: block; }
.ponte__cor {
  margin-top: .15em;
  background: var(--gradiente);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.divisor {
  width: 64px;
  height: 3px;
  margin: 56px auto 48px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--violeta), var(--eletrico));
}
.leitura { max-width: var(--leitura); margin: 26px auto 0; text-align: left; }
.leitura p { font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.75; }
.leitura .leitura__desejo {
  padding: 20px 22px;
  border-left: 3px solid var(--ciano);
  border-radius: 0 16px 16px 0;
  background: rgba(30, 143, 255, .07);
  color: var(--nevoa-2);
}
.leitura .leitura__virada { color: var(--nevoa-2); }
.leitura__virada strong { color: var(--ciano); font-family: 'Sora', sans-serif; }

.caixa-empresa {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 34rem;
  margin: 30px auto 0;
  padding: 16px 18px;
  border-radius: 16px;
  background: #121726;
  border: 1px solid var(--linha);
}
.caixa-empresa__icone { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .06); color: var(--nevoa-2); }
.caixa-empresa__icone svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.leitura .caixa-empresa p { margin: 0; color: var(--nevoa); font-size: .95rem; line-height: 1.6; }
.caixa-empresa strong { color: var(--nevoa-2); }

.centro > .avatar__comparar { margin-top: 72px; }
.versus { display: grid; gap: 14px; max-width: 980px; margin: var(--gap-bloco) auto 0; text-align: left; }
.versus__card { padding: 26px 22px; border-radius: var(--raio); }
.versus__card h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 1.2rem; }
.versus__icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; }
.versus__icone svg { width: 22px; height: 22px; stroke-width: 2.6; }
.versus__card li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 11px 0;
  border-top: 1px solid var(--linha);
  line-height: 1.5;
}
.versus__card li .ic { margin-top: .15em; width: 20px; height: 20px; padding: 3px; border-radius: 50%; stroke-width: 3; }
.versus__card--sem {
  background: #10141F;
  border: 1px solid rgba(255, 255, 255, .07);
  color: var(--nevoa);
}
.versus__card--sem h3 { color: var(--nevoa-2); }
.versus__card--sem .versus__icone { background: rgba(255, 255, 255, .06); color: #8D97AB; }
.versus__card--sem li .ic { background: rgba(255, 255, 255, .07); color: #8D97AB; }
.versus__card--com {
  background: linear-gradient(150deg, #0A33E0, #0027D4 45%, #1E5BFF);
  border: 1px solid rgba(127, 214, 255, .45);
  color: rgba(255, 255, 255, .92);
  box-shadow: 0 30px 70px -30px rgba(0, 39, 212, .9);
}
.versus__card--com h3 { color: #fff; }
.versus__card--com .versus__icone { background: #fff; color: var(--vivido); }
.versus__card--com li { border-top-color: rgba(255, 255, 255, .16); }
.versus__card--com li .ic { background: #fff; color: var(--vivido); }

/* --------------------------------------------------------------- DOBRA 05 · depoimentos (escondida) */
.depo__grade { display: grid; gap: 16px; margin-top: var(--gap-bloco); text-align: left; }
.depo { padding: 24px; border-radius: var(--raio); background: var(--painel); border: 1px solid var(--linha); }
.depo__foto { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.depo__frase { margin: 14px 0; color: var(--tinta); font-size: 1rem; line-height: 1.6; }
.depo__quem { display: flex; flex-direction: column; font-size: .9rem; }

/* --------------------------------------------------------------- DOBRA 06 · bônus */
.bonus__grade { display: grid; gap: 18px; max-width: 1040px; margin: var(--gap-bloco) auto 0; text-align: left; }
.bonus-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 22px 26px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid var(--linha);
  box-shadow: 0 30px 60px -40px rgba(11, 15, 25, .5);
  overflow: hidden;
}
.bonus-card__visual {
  position: relative;
  height: 170px;
  margin: 0 -22px 22px;
  overflow: hidden;
  background:
    radial-gradient(70% 90% at 50% 100%, rgba(157, 123, 255, .45), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 28px),
    linear-gradient(160deg, #18143A, #0E1430);
}
.bonus-card__selo {
  width: fit-content;
  margin: 0 0 10px !important;
  padding: .4em .9em;
  border-radius: 999px;
  background: linear-gradient(120deg, #5B3FD9, var(--vivido));
  color: #fff !important;
  font: 700 .72rem/1.3 'Inter', sans-serif !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bonus-card h3 { margin-bottom: 14px; font-size: 1.35rem; }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; color: var(--nevoa-2); line-height: 1.5; }
.lista-check .ic { margin-top: .2em; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: rgba(0, 39, 212, .1); color: var(--vivido); stroke-width: 3; }
.bonus-card .lista-check { margin-bottom: 18px; }
.bonus-card__valor {
  margin: auto 0 0 !important;
  padding-top: 16px;
  border-top: 1px dashed var(--linha-forte);
  color: var(--nevoa) !important;
  font-size: 1rem;
}
.bonus-card__valor s { color: #8A93A6; }
.bonus-card__valor strong { color: var(--vivido); font-family: 'Sora', sans-serif; font-weight: 700; }
.bonus-card .cta { margin-top: 22px; }

/* visual do bônus 1: dois celulares com stories */
.mini-cel {
  position: absolute;
  left: 50%;
  top: 26px;
  width: 96px;
  height: 172px;
  margin-left: -48px;
  padding: 8px 7px;
  border-radius: 18px;
  background: #0B0F19;
  border: 2px solid rgba(255, 255, 255, .25);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8);
  z-index: 2;
}
.mini-cel--tras { margin-left: 4px; top: 40px; transform: rotate(9deg); opacity: .55; z-index: 1; }
.mini-cel__barras { display: flex; gap: 3px; margin-bottom: 7px; }
.mini-cel__barras i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.mini-cel__barras .cheia { background: #fff; }
.mini-cel__barras .meia { background: linear-gradient(90deg, #fff 55%, rgba(255, 255, 255, .25) 55%); }
.mini-cel__tela {
  position: relative;
  height: 140px;
  border-radius: 11px;
  background: linear-gradient(170deg, #5B3FD9, #1E8FFF);
  padding: 14px 9px;
}
.mini-cel--tras .mini-cel__tela { height: 150px; background: linear-gradient(170deg, #1E8FFF, #0027D4); }
.mini-cel__linha { display: block; height: 6px; margin-bottom: 6px; border-radius: 3px; background: rgba(255, 255, 255, .85); }
.mini-cel__linha.l2 { width: 75%; background: rgba(255, 255, 255, .6); }
.mini-cel__linha.l3 { width: 55%; background: rgba(255, 255, 255, .6); }
.mini-cel__caixa {
  position: absolute;
  left: 9px; right: 9px; bottom: 12px;
  display: grid; place-items: center;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .95);
  color: #5B3FD9;
}
.mini-cel__caixa svg { width: 16px; height: 16px; }

/* visual do bônus 2: a estante de modelos */
.estante {
  position: absolute;
  left: 50%;
  bottom: 26px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  transform: translateX(-50%);
  padding: 0 14px 8px;
  border-bottom: 3px solid rgba(255, 255, 255, .35);
}
.livro { display: block; width: 22px; border-radius: 4px 4px 2px 2px; box-shadow: inset -4px 0 0 rgba(0, 0, 0, .18); }
.livro.l1 { height: 96px; background: linear-gradient(#3FA2FF, #0027D4); }
.livro.l2 { height: 112px; background: linear-gradient(#B89BFF, #5B3FD9); }
.livro.l3 { height: 84px; background: linear-gradient(#8FE0FF, #1E8FFF); }
.livro.l4 { height: 120px; width: 26px; background: linear-gradient(#6A5BFF, #0027D4); }
.livro.l5 { height: 90px; background: linear-gradient(#34416E, #151B30); }
.livro.l6 { height: 104px; background: linear-gradient(#3FA2FF, #0027D4); }
.livro.l7 { height: 78px; background: linear-gradient(#B89BFF, #5B3FD9); transform: rotate(12deg); transform-origin: bottom left; margin-left: 4px; }
.estante__lupa {
  position: absolute;
  right: calc(50% - 128px);
  top: 22px;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 16px;
  background: #fff;
  color: var(--vivido);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .6);
}
.estante__lupa svg { width: 28px; height: 28px; }

/* --------------------------------------------------------------- DOBRA 07 · a oferta */
.oferta {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(40rem 26rem at 50% 30%, rgba(30, 143, 255, .22), transparent 70%),
    radial-gradient(30rem 22rem at 15% 90%, rgba(157, 123, 255, .16), transparent 70%),
    var(--noite);
}
.oferta__luz {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(90deg, rgba(127, 214, 255, .035) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(180deg, rgba(127, 214, 255, .035) 0 1px, transparent 1px 56px);
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
  mask-image: radial-gradient(closest-side, #000, transparent);
}

@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.cartao {
  --tinta: #0B0F19;
  --nevoa: #4A556B;
  --nevoa-2: #2C3547;
  --linha: rgba(11, 15, 25, .09);
  --linha-forte: rgba(11, 15, 25, .16);
  position: relative;
  max-width: 600px;
  margin: 0 auto;
  border-radius: 26px;
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    conic-gradient(from var(--giro), rgba(127, 214, 255, .5), var(--violeta), var(--ciano), var(--eletrico), rgba(127, 214, 255, .5)) border-box;
  box-shadow: 0 0 0 8px rgba(30, 143, 255, .07), 0 40px 100px -30px rgba(30, 143, 255, .75), 0 0 90px -30px rgba(157, 123, 255, .6);
  animation: giro 7s linear infinite;
  scroll-margin-top: 24px;
  transition: transform .35s var(--sai);
}
@keyframes giro { to { --giro: 360deg; } }
.cartao.is-destaque { animation: giro 7s linear infinite, chama 1.1s var(--sai); }
@keyframes chama { 0% { transform: scale(1); } 35% { transform: scale(1.018); } 100% { transform: scale(1); } }

.cartao__cabeca {
  position: relative;
  overflow: hidden;
  padding: 22px 26px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(115deg, #0027D4, #1E8FFF 60%, #7FD6FF);
}
.cartao__cabeca::after {
  /* o brilho que passa devagar */
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  animation: brilho 5.5s ease-in-out infinite;
}
@keyframes brilho { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.cartao__cabeca p {
  margin: 0;
  color: #fff;
  font: 800 1.02rem/1.3 'Sora', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: center;
}
.cartao__corpo { padding: 8px 22px 28px; }
.grupo { padding: 18px 0; border-bottom: 1px solid var(--linha); }
.grupo h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 1.05rem; }
.grupo__icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(0, 39, 212, .08); color: var(--vivido); }
.grupo__icone svg { width: 19px; height: 19px; }
.grupo .lista-check li { padding: 5px 0; font-size: .97rem; }
.grupo--bonus .lista-check li > span { flex: 1; }
.grupo--bonus s { margin-left: 6px; color: #8A93A6; font-size: .92em; white-space: nowrap; }
.mini-apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding-left: 30px; }
.mini-apps .app { --tile: 28px; width: 28px; height: 28px; border-radius: 9px; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); }
.mini-apps .app svg { width: 58%; height: 58%; }
.mini-apps .app--vazio { border-color: rgba(91, 63, 217, .5); color: #5B3FD9; }

.cartao__fecho { padding-top: 22px; text-align: center; }
.cartao__ancora { max-width: 30rem; margin: 0 auto 18px !important; color: var(--nevoa) !important; font-size: .98rem; line-height: 1.6; }
.preco--cartao { justify-content: center; margin-bottom: 20px; }
.preco--cartao .preco__valor { font-size: clamp(2.6rem, 2rem + 2.4vw, 3.4rem); color: var(--vivido); }
.cartao .btn--padrao { width: 100%; max-width: 400px; }
.cartao__seguro {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 14px 0 0 !important;
  color: var(--nevoa) !important;
  font-size: .86rem;
  font-weight: 500;
}
.cartao__seguro .ic { width: 15px; height: 15px; color: var(--vivido); }

/* --------------------------------------------------------------- DOBRA 08 · garantia */
.garantia__grade { display: grid; gap: 28px; justify-items: center; }
.garantia__selo { width: min(70vw, 240px); }
.garantia__selo svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 40px rgba(0, 39, 212, .35)); }
.selo__raios { fill: none; stroke: rgba(0, 39, 212, .25); stroke-width: 2; stroke-dasharray: 2 6; }
.selo__anel { fill: #fff; font: 700 13px 'Sora', sans-serif; letter-spacing: .22em; }
.selo__num { fill: #fff; font: 800 76px/1 'Sora', sans-serif; text-anchor: middle; }
.selo__dias { fill: #fff; font: 800 19px 'Sora', sans-serif; letter-spacing: .3em; text-anchor: middle; }
.garantia__texto h2 { margin-bottom: var(--gap-titulo); }
.garantia__texto p { font-size: clamp(1.02rem, .98rem + .2vw, 1.12rem); line-height: 1.7; }
.garantia__texto strong { color: var(--vivido); font-family: 'Sora', sans-serif; font-weight: 700; }

/* --------------------------------------------------------------- DOBRA 09 · a história */
.historia--1 { background: radial-gradient(44rem 26rem at 80% 30%, rgba(30, 143, 255, .10), transparent 70%), var(--noite); }
.historia__abre { margin-bottom: 52px; }
.historia__abre h2 { max-width: 20em; }

.capitulo { display: grid; gap: 32px; align-items: center; }
.capitulo__selo { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px !important; }
.capitulo__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .38em .85em .38em .6em;
  border-radius: 999px;
  background: rgba(127, 214, 255, .10);
  border: 1px solid rgba(127, 214, 255, .3);
  color: var(--ciano);
  font: 700 .7rem/1.3 'Inter', sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.capitulo__tag svg { width: 14px; height: 14px; }
.capitulo__num { color: var(--nevoa); font: 600 .82rem/1 'Sora', sans-serif; }
.secao--clara .capitulo__tag { background: rgba(0, 39, 212, .07); border-color: rgba(0, 39, 212, .2); color: var(--vivido); }
.capitulo h3 { margin-bottom: 18px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
.capitulo__texto > p { font-size: 1.04rem; line-height: 1.72; }
.caixa-destaque {
  margin-top: 20px;
  padding: 18px 20px;
  border-left: 3px solid var(--ciano);
  border-radius: 0 14px 14px 0;
  background: rgba(30, 143, 255, .08);
  color: var(--tinta);
  font: 600 1.05rem/1.5 'Sora', sans-serif;
}
.secao--clara .caixa-destaque { border-left-color: var(--vivido); background: rgba(0, 39, 212, .06); }

.capitulo__visual { position: relative; }
.quadro {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #0B1122;
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, .9);
}
.secao--clara .quadro { box-shadow: 0 30px 70px -34px rgba(11, 15, 25, .55); }
.quadro__arte { display: block; width: 100%; height: auto; }
.quadro__arte use { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arte-txt { fill: #DCEBFF; font: 700 12px 'Inter', sans-serif; text-anchor: middle; }
.arte-cursor { animation: pisca 1.1s steps(2) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.arte-pulso { animation: anda 3.6s var(--ease) infinite; }
@keyframes anda { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(340px); opacity: 0; } }
.arte-barra { transform-origin: 34px 280px; animation: enche 3.6s var(--ease) infinite; }
@keyframes enche { 0% { transform: scaleX(0); } 80%, 100% { transform: scaleX(1); } }

.marcos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.marcos li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  border-radius: 12px;
  background: var(--painel);
  border: 1px solid var(--linha);
  box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .7);
  color: var(--tinta);
  font: 600 .84rem/1.3 'Sora', sans-serif;
}
.secao--clara .marcos li { box-shadow: 0 14px 30px -20px rgba(11, 15, 25, .45); }
.marcos__icone { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(140deg, #B89BFF, #5B3FD9); color: #fff; flex: none; }
.marcos__icone svg { width: 16px; height: 16px; }

.licoes {
  margin-top: 12px;
  border-radius: 16px;
  background: var(--painel);
  border: 1px solid var(--linha);
}
.secao--painel .licoes, .secao--painel .marcos li { background: #1A2136; }
.licoes li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; }
.licoes li + li { border-top: 1px solid var(--linha); }
.licoes__icone { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(127, 214, 255, .12); color: var(--ciano); }
.secao--clara .licoes__icone { background: rgba(0, 39, 212, .08); color: var(--vivido); }
.licoes__icone svg { width: 18px; height: 18px; }
.licoes p { margin: 0; color: var(--nevoa); font-size: .9rem; line-height: 1.45; }
.licoes strong { display: block; color: var(--tinta); font: 700 .95rem/1.35 'Sora', sans-serif; }

/* foto + credenciais */
.autor__grade { display: grid; gap: 28px; align-items: center; }
.retrato {
  position: relative;
  width: min(100%, 360px);
  margin: 0 auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--raio);
  overflow: hidden;
  background: #0B0F19;
  box-shadow: 0 30px 70px -34px rgba(11, 15, 25, .6);
}
.retrato img { width: 100%; height: 100%; object-fit: cover; }
.retrato::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(0deg, rgba(11, 15, 25, .9), transparent); }
.retrato figcaption { position: absolute; z-index: 1; left: 0; right: 0; bottom: 18px; text-align: center; }
.retrato figcaption strong { color: #F5F9FF; font: 700 1.1rem/1.2 'Sora', sans-serif; }
.credenciais { display: grid; gap: 12px; }
.credenciais li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--linha);
  box-shadow: 0 20px 40px -32px rgba(11, 15, 25, .5);
  color: var(--tinta);
  font: 600 1rem/1.4 'Sora', sans-serif;
}
.credenciais__icone { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--gradiente-vivo); color: #fff; }
.credenciais__icone svg { width: 22px; height: 22px; }

/* --------------------------------------------------------------- FAQ */
.faq__lista { max-width: 780px; margin: var(--gap-bloco) auto 0; text-align: left; display: grid; gap: 10px; }
.faq details {
  border-radius: 16px;
  background: #171D2E;
  border: 1px solid var(--linha);
  transition: border-color .25s ease, background .25s ease;
}
.faq details[open] { border-color: rgba(127, 214, 255, .35); background: #1A2136; }
.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  color: var(--tinta);
  font: 600 1.02rem/1.4 'Sora', sans-serif;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "";
  flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background:
    linear-gradient(#04122B, #04122B) center / 12px 2px no-repeat,
    linear-gradient(#04122B, #04122B) center / 2px 12px no-repeat,
    var(--gradiente);
  transition: transform .3s var(--sai);
}
.faq details[open] summary::before {
  transform: rotate(180deg);
  background:
    linear-gradient(#04122B, #04122B) center / 12px 2px no-repeat,
    var(--gradiente);
}
.faq__resposta { overflow: hidden; }
.faq__resposta p { margin: 0; padding: 0 20px 20px 62px; color: var(--nevoa-2); line-height: 1.65; }

/* --------------------------------------------------------------- DOBRA 10 · CTA final + P.S. */
.final {
  position: relative;
  padding: var(--secao) 0;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 16px),
    radial-gradient(60rem 30rem at 50% 0%, rgba(127, 214, 255, .28), transparent 65%),
    var(--vivido);
  color: #fff;
}
.final h2 { color: #fff; }
.final p { color: rgba(255, 255, 255, .9); }
.ps { padding: 40px 0; background: var(--noite); border-bottom: 1px solid var(--linha); }
.ps p { max-width: 46rem; margin: 0 auto; text-align: center; font-size: .98rem; color: var(--nevoa-2); }
.ps strong { color: var(--ciano); font-family: 'Sora', sans-serif; }

.rodape { padding: 32px 0 calc(32px + var(--barra-h)); }
.rodape__dentro { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.rodape p { margin: 0; font-size: .85rem; }
.rodape a { color: var(--nevoa-2); text-underline-offset: 2px; }

/* --------------------------------------------------------------- barra fixa */
.barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 15, 25, .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--linha-forte);
  transform: translateY(110%);
  transition: transform .35s var(--ease);
}
.barra.is-on { transform: none; }
.barra__dentro { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.barra__dentro { padding-inline: 16px; }
.barra__texto { display: flex; flex-direction: column; margin: 0; color: var(--ciano); font: 800 1.05rem/1.2 'Sora', sans-serif; white-space: nowrap; }
.barra__texto strong { color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .02em; }
.barra__sep { display: none; }
.btn--barra {
  min-height: 48px;
  padding: 8px 50px 8px 18px;
  background: var(--gradiente);
  color: #04122B;
  font: 700 .95rem/1.2 'Inter', sans-serif;
  box-shadow: 0 10px 26px -12px rgba(30, 143, 255, .8);
  white-space: nowrap;
}
.btn--barra .btn__seta { width: 36px; height: 36px; margin-top: -18px; right: 6px; padding: 10px; }

/* --------------------------------------------------------------- revelação ao rolar
   Só esconde quando o JS confirmou que vai revelar (classe .revela-on no <html>). */
.revela-on [data-revela] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--sai), transform .6s var(--sai);
  transition-delay: var(--atraso, 0ms);
}
.revela-on [data-revela].is-vis { opacity: 1; transform: none; }

.revela-on .equipe .agente { opacity: 0; transform: translateY(12px) scale(.92); transition: opacity .5s var(--sai), transform .5s var(--sai); transition-delay: calc(var(--n, 0) * 55ms); }
.revela-on .equipe.is-vis .agente { opacity: 1; transform: none; }

/* ======================================================================
   A partir de 560px
   ====================================================================== */
@media (min-width: 560px) {
  .selo {
    display: inline-block;
    padding: .55em 1em;
    border: 1px solid rgba(157, 123, 255, .45);
    border-radius: 999px;
    background: rgba(157, 123, 255, .08);
    letter-spacing: .12em;
  }
  .equipe__linha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grade-aulas { padding: 26px; }
}

/* ======================================================================
   A partir de 760px (tablet)
   ====================================================================== */
@media (min-width: 760px) {
  :root { --respiro: 32px; --secao: 104px; --gap-bloco: 50px; }

  .equipe { --tile: 70px; }
  .equipe__linha { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .agente { font-size: .82rem; }

  /* a linha que liga cada ícone ao barramento, e o barramento ao núcleo */
  .equipe__linha { position: relative; }
  .equipe__linha--cima { padding-bottom: 18px; }
  .equipe__linha--baixo { padding-top: 18px; }
  .equipe__linha::after {
    content: "";
    position: absolute;
    left: calc(100% / 12);
    right: calc(100% / 12);
    height: 2px;
    background: linear-gradient(90deg, rgba(127, 214, 255, .1), rgba(127, 214, 255, .5) 50%, rgba(127, 214, 255, .1));
  }
  .equipe__linha--cima::after { bottom: 0; }
  .equipe__linha--baixo::after { top: 0; }
  .equipe__linha > li { position: relative; }
  .equipe__linha--cima > li::after,
  .equipe__linha--baixo > li::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    height: 18px;
    background: rgba(127, 214, 255, .35);
  }
  .equipe__linha--cima > li::after { bottom: -18px; }
  .equipe__linha--baixo > li::after { top: -18px; }
  .equipe__elo { margin: 0 auto; height: 30px; }

  .faixas { gap: 14px; }

  .pilares__grade { grid-template-columns: minmax(0, 1fr); }
  .versus { grid-template-columns: 1fr 1fr; gap: 18px; }
  .perfis { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px; align-items: stretch; }
  .perfil { padding: 30px 28px; }
  .perfil--principal { padding: 34px 32px; }
  .versus__card { padding: 30px 28px; }
  .bonus__grade { grid-template-columns: 1fr 1fr; }
  .bonus-card { padding: 0 28px 30px; }
  .bonus-card__visual { margin: 0 -28px 24px; }
  .etapas { grid-template-columns: 1fr 1fr; gap: 16px; }
  .etapas::before { display: none; }

  .garantia__grade { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; justify-items: stretch; }
  .garantia__selo { width: 100%; max-width: 260px; justify-self: center; }

  .credenciais { grid-template-columns: 1fr 1fr; }
  .credenciais li { flex-direction: column; align-items: flex-start; }

  .barra__dentro { padding-inline: var(--respiro); }
  .barra__texto { flex-direction: row; align-items: baseline; gap: 6px; color: var(--nevoa-2); font-size: 1.02rem; font-weight: 600; }
  .barra__texto strong { font-size: inherit; letter-spacing: -0.01em; }
  .barra__sep { display: inline; }
  .btn--barra { padding-inline: 24px 56px; }
  .depo__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ======================================================================
   A partir de 1024px (desktop)
   ====================================================================== */
@media (min-width: 1024px) {
  .topo { padding-top: 52px; }
  .topo__grade {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 56px;
    align-items: center;
  }
  .topo__visual { width: 100%; max-width: 480px; justify-self: end; }
  .compra { max-width: 460px; }
  .compra .btn--padrao { width: 400px; }

  .pilares__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
  .pilares__texto .cta { align-items: flex-start; }
  .pilares__texto .microprova { margin-left: 0 !important; }

  /* a trilha horizontal que se desenha ao rolar */
  .trilha__linha {
    display: block;
    position: absolute;
    left: 12.5%;
    right: 12.5%;
    top: 40px;
    height: 4px;
    border-radius: 4px;
    background: #DDE4F2;
  }
  .trilha__progresso {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vivido), var(--eletrico), var(--violeta));
    transform-origin: left center;
    transform: scaleX(var(--progresso, 1));
  }
  .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .etapa { padding: 84px 22px 26px; text-align: center; background: transparent; border: 0; box-shadow: none; }
  .etapa::before {
    /* o cartão começa abaixo do marco */
    content: "";
    position: absolute;
    inset: 66px 0 0 0;
    z-index: -1;
    border-radius: var(--raio);
    background: #fff;
    border: 1px solid var(--linha);
    box-shadow: 0 22px 50px -34px rgba(11, 15, 25, .4);
  }
  .etapa { isolation: isolate; }
  .etapa__marco { left: 50%; top: 20px; width: 44px; height: 44px; margin-left: -22px; }
  .etapa__rotulo { margin-top: 14px !important; }

  .capitulo { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
  .capitulo--inverso .capitulo__texto { order: 2; }
  .capitulo__visual { padding-right: 34px; }
  .capitulo--inverso .capitulo__visual { padding-right: 0; padding-left: 34px; }
  /* os chips de marco flutuam na borda do painel, como no modelo */
  .capitulo__visual .marcos {
    position: absolute;
    right: 0;
    top: 22px;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    z-index: 2;
  }
  .capitulo--inverso .capitulo__visual .marcos { right: auto; left: 0; align-items: flex-start; }
  .marcos li { max-width: 230px; animation: flutua 6s ease-in-out infinite; }
  .marcos li:nth-child(2) { animation-delay: -2s; }
  .marcos li:nth-child(3) { animation-delay: -4s; }
  .licoes { margin-top: 14px; }

  .autor__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  .retrato { width: 100%; max-width: 420px; }
}
@keyframes flutua { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (min-width: 1200px) {
  .credenciais li { padding: 22px; }
}

/* ======================================================================
   Movimento reduzido: nada se move sozinho, nada fica escondido
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .time__pulso, .equipe__elo span, .nucleo__fio i, .arte-pulso, .cartao__cabeca::after { display: none; }
  .cartao { animation: none !important; }
  .arte-barra { transform: none; }
}

@media print {
  .barra, .btn { display: none !important; }
}

/* ======================================================================
   Ajustes da conferência (prints de 13/10)
   ====================================================================== */
/* topo mais compacto: o botão precisa aparecer na primeira tela em 1440×900 */
.produto { margin-bottom: 12px; }
.selo { margin-bottom: 14px; }
.topo__sub { margin-top: 16px; }
.compra { margin-top: 22px; padding-top: 18px; max-width: 520px; }
.compra__ancora { margin-bottom: 2px; }
.preco { margin-bottom: 14px; }
@media (min-width: 1024px) {
  .topo { padding-top: 40px; }
  h1 { font-size: clamp(2.2rem, 1.3rem + 1.9vw, 2.7rem); }
}
/* os dois perfis: o principal centraliza o texto na altura do vizinho */
.perfil--principal { display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 760px) {
  .perfis { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .perfil--principal p { font-size: 1.1rem; }
}
/* capítulo 3: os chips sobem um pouco para não encostar na trilha */
@media (min-width: 1024px) {
  .historia--3 .capitulo__visual .marcos { top: 8px; }
  .capitulo__visual .marcos { gap: 6px; }
}

/* botão-padrão com o MESMO tamanho em todo contêiner (conferência: cartões estreitos encolhiam o botão) */
@media (max-width: 559px) {
  .btn--padrao,
  .cartao .btn--padrao,
  .compra .btn--padrao { width: calc(100vw - 80px); max-width: 400px; padding: 12px 56px 12px 20px; font-size: 1rem; }
  .bonus-card { padding: 0 18px 24px; }
  .bonus-card__visual { margin: 0 -18px 22px; }
  .cartao__corpo { padding: 8px 18px 26px; }
  /* topo do celular mais enxuto: o botão entra na primeira tela */
  .cabeca__dentro { height: 52px; }
  .topo { padding-top: 22px; }
  h1 { font-size: 1.85rem; }
  .topo__sub { font-size: 1rem; line-height: 1.6; }
  .etiqueta-empresa { margin-top: 12px; }
  .compra { margin-top: 18px; padding-top: 14px; }
  .preco__valor { font-size: 2rem; }
}
@media (min-width: 560px) {
  .btn--padrao, .cartao .btn--padrao { width: 400px; max-width: none; }
}
/* dois bônus lado a lado e o painel dos pilares em duas colunas só quando cabem o botão de 400px */
@media (min-width: 760px) and (max-width: 1023px) {
  .bonus__grade { grid-template-columns: 1fr; max-width: 640px; }
}
@media (min-width: 1024px) {
  .pilares__grade { grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: 48px; }
}
@media (max-width: 559px) {
  .btn--padrao, .cartao .btn--padrao, .compra .btn--padrao { padding: 12px 54px 12px 16px; font-size: clamp(.88rem, 3.9vw, 1rem); white-space: nowrap; }
}
/* pilares: o botão acompanha o texto, alinhado à esquerda */
.pilares__texto .cta { align-items: flex-start; }
.pilares__texto .microprova { justify-content: flex-start; }
/* capítulos empilhados (abaixo de 1024): o painel não passa de 580px */
@media (max-width: 1023px) {
  .capitulo__visual { width: 100%; max-width: 580px; margin-inline: auto; }
}

/* ======================================================================
   Revisão do fundador (13/10, 2ª rodada)
   ====================================================================== */

/* ---- DOBRA 03a · os pilares em bullets de desejo ---- */
.pilar--1 { --marca: #8CC4FF; }
.pilar--2 { --marca: #CDBEFF; }
.pilar--3 { --marca: #9FE4FF; }
.pilar--4 { --marca: #B3A8FF; }
.desejos { display: grid; gap: 4px; }
.desejos li {
  position: relative;
  padding: 7px 0 7px 32px;
  color: var(--nevoa-2);
  font-size: .97rem;
  line-height: 1.5;
}
.desejos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(7px + .1em);
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--chip);
  box-shadow: inset 0 0 0 1px var(--chip-borda);
}
.desejos li::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: calc(7px + .1em + 5px);
  width: 5px;
  height: 9px;
  border: solid var(--marca);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pilar + .pilar { padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .07); }
.pilar h3 { margin-bottom: 8px; font-size: 1.02rem; }
@media (min-width: 1024px) {
  .pilares__grade { align-items: start; }
  .pilares__texto { position: sticky; top: 48px; padding-top: 28px; }
  .grade-aulas { padding: 30px 30px 26px; }
}

/* ---- faixas de perfis: 3 cópias, para o laço nunca abrir buraco com poucas etiquetas ---- */
.faixas:not(.is-movendo) .faixa__lista--copia { display: none; }
/* 13/10: no celular, etiqueta comprida estourava a tela no modo parado. Agora a lista ocupa a largura
   e a etiqueta quebra a linha dentro dela, sem passar da borda. */
.faixas:not(.is-movendo) .faixa__lista { flex: 1 1 100%; min-width: 0; }
.faixas:not(.is-movendo) .faixa__lista li { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 559px) {
  .faixa__lista li { font-size: .88rem; padding: .55em 1em; }
}

/* ---- DOBRA 06 · artes novas dos bônus ---- */
.bonus-card__intro { margin: -4px 0 12px !important; color: var(--nevoa) !important; font-size: 1rem; line-height: 1.6; }
.bonus-card__visual--os { display: flex; align-items: center; justify-content: center; gap: 22px; }
.mini-janela {
  width: 230px;
  border-radius: 12px;
  background: #0B0F19;
  border: 1px solid rgba(127, 214, 255, .4);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .8), 0 0 40px -10px rgba(30, 143, 255, .5);
  overflow: hidden;
}
.mini-janela__barra { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; background: #161E33; }
.mini-janela__barra i { width: 7px; height: 7px; border-radius: 50%; background: #FF6B6B; }
.mini-janela__barra i:nth-child(2) { background: #FFC857; }
.mini-janela__barra i:nth-child(3) { background: #4ADE80; }
.mini-janela__barra span { margin-left: auto; margin-right: auto; padding-right: 26px; color: #A8B3C7; font: 600 .66rem/1 'Inter', sans-serif; }
.arvore { padding: 10px 12px 12px; }
.arvore li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 0 3px 22px;
  color: #C9D2E1;
  font: 500 .8rem/1.3 'Inter', sans-serif;
}
.arvore li::before { content: ""; position: absolute; left: 8px; top: -4px; width: 9px; height: 15px; border: solid rgba(127, 214, 255, .3); border-width: 0 0 1.5px 1.5px; border-radius: 0 0 0 4px; }
.arvore .arvore__raiz { padding-left: 0; color: #fff; font-weight: 700; }
.arvore .arvore__raiz::before { display: none; }
.arvore svg { width: 15px; height: 15px; fill: rgba(127, 214, 255, .15); stroke: #7FD6FF; stroke-width: 1.6; stroke-linejoin: round; }
.arvore__raiz svg { fill: #D97757; stroke: #E58A68; }
.mini-time { display: grid; gap: 8px; }
.mini-time .app { --tile: 32px; width: 32px; height: 32px; border-radius: 10px; }
.mini-time .app svg { width: 55%; height: 55%; }

.bonus-card__visual--guia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.mini-trilha { position: relative; display: flex; justify-content: space-between; width: 250px; }
.mini-trilha__linha { position: absolute; left: 16px; right: 16px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: rgba(255, 255, 255, .15); }
.mini-trilha__linha i { position: absolute; inset: 0 34% 0 0; border-radius: inherit; background: linear-gradient(90deg, #1E8FFF, #9D7BFF); }
.mini-trilha__marco {
  position: relative;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #1A2240;
  border: 1.5px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .6);
  font: 800 .85rem/1 'Sora', sans-serif;
}
.mini-trilha__marco svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.mini-trilha__marco.is-feito { background: linear-gradient(140deg, #1E8FFF, #0027D4); border-color: transparent; }
.mini-trilha__marco.is-agora { background: #fff; border-color: #fff; color: #5B3FD9; box-shadow: 0 0 0 6px rgba(157, 123, 255, .3); animation: respira 2.6s ease-in-out infinite; }
.mini-lista { display: grid; gap: 7px; width: 250px; padding: 12px 14px; border-radius: 12px; background: rgba(11, 15, 25, .7); border: 1px solid rgba(255, 255, 255, .1); }
.mini-lista span { display: flex; align-items: center; gap: 9px; }
.mini-lista svg { width: 14px; height: 14px; padding: 2px; border-radius: 50%; background: #1E8FFF; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.mini-lista i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #CDBEFF; }
.mini-lista b { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .22); }
.mini-lista b.curta { flex: 0 0 60%; }
.mini-lista .is-agora b { background: linear-gradient(90deg, rgba(205, 190, 255, .7), rgba(205, 190, 255, .15)); }



/* ======================================================================
   DOBRA 01 · a imagem do topo = a mesma da isca (copiada sem redesenhar)
   ====================================================================== */
/* --------------------------------------------------------------- visual do topo: o Claude conectado ao time de agentes
   Modelado das referências do fundador (hub com agentes em volta). SVG único: escala igual no celular.
   Um sinal sai do centro para cada agente, um depois do outro; o agente acende quando o sinal chega. */

.rede {
  position: relative;
  margin: 0;
}
.rede::before {
  /* a luz por trás do conjunto */
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(30, 143, 255, .22), transparent);
  filter: blur(10px);
}
.rede__svg { display: block; width: 100%; height: auto; overflow: visible; }

.rede__fio { stroke: rgba(168, 179, 199, .30); stroke-width: 1.5; }
.rede__pulso {
  stroke: var(--ciano);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 10 420;
  stroke-dashoffset: 10;
  filter: drop-shadow(0 0 4px rgba(127, 214, 255, .9));
  animation: rede-pulso 3.3s var(--d, 0s) ease-in infinite;
}

.rede__no {
  fill: #121A2E;
  stroke: rgba(127, 214, 255, .30);
  stroke-width: 1.5;
  animation: rede-acende 3.3s var(--d, 0s) infinite;
}
.rede__olho { fill: var(--ciano); }
.rede__rotulo {
  fill: var(--nevoa-2);
  font: 600 12.5px 'Inter', system-ui, sans-serif;
  text-anchor: middle;
}

.rede__aura { animation: rede-aura 3.3s ease-in-out infinite; transform-origin: 200px 205px; }
.rede__centro { filter: drop-shadow(0 10px 26px rgba(217, 119, 87, .55)); }
.rede__selo rect { fill: #0D1222; stroke: rgba(217, 119, 87, .55); stroke-width: 1; }
.rede__selo text { fill: #F2B49C; font: 700 11.5px 'Sora', system-ui, sans-serif; text-anchor: middle; }

@keyframes rede-pulso {
  0% { stroke-dashoffset: 10; opacity: 1; }
  45% { stroke-dashoffset: -150; opacity: 1; }
  46%, 100% { stroke-dashoffset: -150; opacity: 0; }
}
@keyframes rede-acende {
  0%, 38% { stroke: rgba(127, 214, 255, .30); fill: #121A2E; }
  46%, 70% { stroke: var(--ciano); fill: #15284A; }
  100% { stroke: rgba(127, 214, 255, .30); fill: #121A2E; }
}
@keyframes rede-aura { 0%, 100% { transform: scale(.94); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .rede__pulso { display: none; }
  .rede__no, .rede__aura { animation: none !important; }
}

/* ---- encaixe nesta página: a imagem da isca + a pilha de notificações, conectadas ----
   13/10, revisão do fundador ("as duas imagens não se conversam"). Diagnóstico e correção:
   1. a rede volta a ser a protagonista (tamanho da isca); 2. as notificações saem de perto dos nós
   e ficam num espaço vazio; 3. uma linha sai do agente "Vendas" até a "Proposta enviada", com o
   mesmo pulso da rede; 4. os cartões falam a língua dos nós (vidro escuro, anel ciano, ícone de linha);
   5. "Pix recebido" numa linha só, em cascata de notificação de celular.
   Tudo em em: o tamanho vem do font-size do .notifs (fixo empilhado; proporcional à largura ao lado). */

.topo__visual { width: min(100%, 420px); max-width: none; }
.rede { width: 100%; max-width: 400px; margin-inline: auto; }

.notifs {
  position: relative;
  display: grid;
  gap: .5em;
  width: min(100%, 17.5em);
  margin: 2.4em auto 0;
  font-size: 16px;
}
/* empilhado: a ligação desce do agente "Vendas" até a pilha */
.notifs::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1.5px;
  height: 2em;
  background: linear-gradient(180deg, rgba(168, 179, 199, .30), rgba(127, 214, 255, .7));
}

.notif {
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .55em .9em .55em .55em;
  border-radius: .95em;
  background: rgba(18, 26, 46, .78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(127, 214, 255, .26);
  box-shadow:
    0 .9em 2em -.8em rgba(0, 0, 0, .75),
    0 0 1.6em -.5em rgba(30, 143, 255, .35),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  transform-origin: 50% 0;
}
.notif__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: #15284A;
  border: 1.5px solid var(--ciano);
  color: var(--ciano);
  box-shadow: 0 0 .9em -.2em rgba(127, 214, 255, .55);
}
.notif__icone svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notif__titulo { flex: 1; color: #F5F9FF; font: 600 .9em/1.2 'Inter', system-ui, sans-serif; white-space: nowrap; }
.notif__hora { color: var(--nevoa); font-size: .74em; font-weight: 500; white-space: nowrap; }

/* a proposta: mesmo cartão, anel violeta */
.notif--proposta { border-color: rgba(184, 155, 255, .34); }
.notif--proposta .notif__icone { background: #241B4A; border-color: #B89BFF; color: #CDB8FF; box-shadow: 0 0 .9em -.2em rgba(184, 155, 255, .55); }

/* cascata de notificação: a mais nova inteira; as antigas um pouco menores e mais apagadas */
.notif:nth-child(3) { transform: scale(.97); opacity: .9; }
.notif:nth-child(4) { transform: scale(.94); opacity: .76; }

/* entrada em sequência (só com JS e movimento permitido; sem isso, já aparecem paradas) */
.notifs-anima .notif { opacity: 0; translate: 0 -.6em; filter: blur(4px); }
.notifs-anima .notifs.is-on .notif { animation: notif-chega .6s var(--sai) var(--atraso, 0ms) forwards; }
.notifs-anima .notifs.is-on .notif:nth-child(3) { --fim: .9; }
.notifs-anima .notifs.is-on .notif:nth-child(4) { --fim: .76; }
@keyframes notif-chega { to { opacity: var(--fim, 1); translate: 0 0; filter: none; } }

/* a proposta acende quando o pulso que vem de "Vendas" chega (mesmo ciclo de 3,3 s da rede) */
.notifs-anima .notifs.is-on .notif--proposta {
  animation: notif-chega .6s var(--sai) var(--atraso, 0ms) forwards, proposta-acende 3.3s 3.15s infinite;
}
@keyframes proposta-acende {
  0%, 100% { border-color: rgba(184, 155, 255, .34); }
  8%, 30% { border-color: rgba(205, 184, 255, .95); box-shadow: 0 .9em 2em -.8em rgba(0, 0, 0, .75), 0 0 2em -.2em rgba(184, 155, 255, .6); }
}

/* a linha de ligação "Vendas → Proposta enviada" (só na composição lado a lado) */
.liga { display: none; }
.liga__fio { fill: none; stroke: rgba(127, 214, 255, .5); stroke-width: .38; stroke-dasharray: 1 .9; }
.liga__pulso {
  fill: none;
  stroke: var(--ciano);
  stroke-width: .6;
  stroke-linecap: round;
  stroke-dasharray: 14 200;
  stroke-dashoffset: 14;
  filter: drop-shadow(0 0 .8px rgba(127, 214, 255, .9));
  animation: liga-pulso 3.3s 2.95s ease-in infinite;
}
@keyframes liga-pulso {
  0% { stroke-dashoffset: 14; opacity: 1; }
  12% { stroke-dashoffset: -100; opacity: 1; }
  13%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

/* desktop largo: lado a lado. A rede no alto, à esquerda; a pilha no espaço vazio embaixo à direita,
   longe de "Funil" e de "Vendas", ligada a "Vendas" pela linha. Medidas em % da largura do conjunto
   (a rede ocupa 74,6%; as coordenadas saem da posição dos nós no SVG da isca). */
@media (min-width: 1200px) {
  .topo__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .topo__visual {
    container-type: inline-size;
    position: relative;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 100 / 126;
    justify-self: end;
  }
  .rede { position: absolute; left: 12.7%; top: 0; width: 74.6%; max-width: none; margin: 0; } /* centralizada no bloco */
  .liga { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .notifs {
    position: absolute;
    left: 58%;
    top: 68.25%; /* 86 de 126 unidades (abaixo do rótulo "Vendas"): as unidades do SVG são % da largura */
    width: 42%;
    margin: 0;
    font-size: 2.75cqw;
    z-index: 2;
  }
  .notifs::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .notifs-anima .notif { opacity: 1; translate: none; filter: none; }
  .notif:nth-child(3) { opacity: .9; }
  .notif:nth-child(4) { opacity: .76; }
  .liga__pulso { display: none; }
  .notifs-anima .notifs.is-on .notif--proposta { animation: none; }
}