/* =============================================================================
   Brain Content — landing v3. Mobile-first.
   Ritmo: claro → escuro → cinza, alternando. Verde só como acento (<10% da tela).
   Movimento: GSAP + ScrollTrigger e um motor de grafo em canvas. Sem pin, nunca.
   Sem JS a página é linear e completa.
   ========================================================================== */

:root{
  color-scheme: light;
  --papel:#FFFFFF; --papel-2:#F4F6F5; --preto:#0A0C0B;
  --tinta:#0A0C0B; --tinta-media:#434946; --tinta-fraca:#6B736F;
  --verde:#00C16E; --verde-texto:#00794A;
  --linha:rgba(10,12,11,.10); --linha-forte:rgba(10,12,11,.20);
  --sombra:0 1px 2px rgba(10,12,11,.04), 0 14px 34px -18px rgba(10,12,11,.22);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;

  --e1:6px; --e2:12px; --e3:18px; --e4:28px;
  --e5:clamp(36px, 6vw, 56px);
  --e6:clamp(64px,11vw,104px);
  --e7:clamp(88px,16vw,152px);          /* respiro entre dobras */
  --raio:18px;
  --largura:min(100% - 2.4rem, 62rem);
  --largura-texto:min(100%, 38rem);     /* prosa nunca passa de ~65 caracteres */
}
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:64px;
  overflow-x:hidden; max-width:100%;
}
/* clip contém o transbordo sem virar contêiner de rolagem (hidden no html quebra sticky) */
@supports (overflow: clip){ html, body{ overflow-x:clip; } }
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; max-width:100%;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* --------- temas por dobra: trocam só os tokens --------- */
.dobra-clara{ background:var(--papel); }
.dobra-cinza{ background:var(--papel-2); }
.dobra-escura{
  --papel:#0A0C0B; --papel-2:#141816;
  --tinta:#FFFFFF; --tinta-media:#B9C0BC; --tinta-fraca:#828B86;
  --verde-texto:#3BE08F;
  --linha:rgba(255,255,255,.14); --linha-forte:rgba(255,255,255,.28);
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.9);
  background:#0A0C0B; color:#fff;
}

/* --------------------------------- texto -------------------------------- */
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.026em; line-height:1.08; text-wrap:balance; }
h1{ font-size:clamp(1.5rem,6.7vw,3rem); }
h2{ font-size:clamp(1.78rem,7.2vw,2.9rem); }
h3{ font-size:1.06rem; letter-spacing:-.012em; }
h1 em,h2 em,h3 em,p em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:1.1em; line-height:.95; letter-spacing:-.005em;
}
.cabeca{ max-width:var(--largura-texto); margin-bottom:var(--e6); }
.rotulo{
  margin:0 0 var(--e3); font-size:.72rem; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--verde-texto);
}
.mini-rotulo{
  margin:0 0 var(--e3); font-size:.68rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tinta-fraca);
}
.texto{ margin:var(--e4) 0 0; color:var(--tinta-media); font-size:1.05rem; max-width:var(--largura-texto); }
.texto b{ color:var(--tinta); font-weight:600; }
.texto.centro{ margin-inline:auto; text-align:center; }
.pular{
  position:fixed; top:-120px; left:10px; z-index:70; background:var(--preto); color:#fff;
  padding:12px 18px; border-radius:0 0 10px 10px; transition:top .2s ease;
}
.pular:focus{ top:0; }
:focus-visible{ outline:2px solid var(--verde); outline-offset:3px; border-radius:6px; }

.dobra{ padding:var(--e7) 0; scroll-margin-top:64px; position:relative; }
.faixa{ width:var(--largura); margin-inline:auto; position:relative; z-index:1; }

/* reveal padrão — CSS puro, ativado por um IntersectionObserver só */
.sobe,.regra,.prova,.passo .corpo{ opacity:1; }
html.js .sobe,html.js .regra,html.js .prova,html.js .passo .corpo{
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
html.js .visivel{ opacity:1 !important; transform:none !important; }

/* barra de progresso e barra do topo */
.progresso{ position:fixed; inset:0 0 auto 0; height:3px; z-index:60; pointer-events:none; }
.progresso i{ display:block; height:100%; width:100%; background:var(--verde); transform:scaleX(0); transform-origin:0 50%; }
.barra{
  position:fixed; top:0; left:0; right:0; z-index:55; display:flex; align-items:center;
  justify-content:space-between; gap:var(--e3); padding:10px 18px;
  background:rgba(255,255,255,.88); backdrop-filter:saturate(150%) blur(12px);
  border-bottom:1px solid rgba(10,12,11,.1); transform:translateY(-104%);
}
.barra img{ height:26px; width:auto; }
.mini-cta{
  background:var(--verde); color:var(--preto); font-weight:650; font-size:.85rem;
  padding:9px 15px; border-radius:11px; text-decoration:none; white-space:nowrap;
}

/* canvas do grafo (os dois usos) */
.grafo-tela{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* =================================== 1. HERO ============================== */
.hero{ padding:26px 0 var(--e6); text-align:center; position:relative; overflow:hidden; }
.fundo-grafo{
  position:absolute; inset:-6% -10% 0; z-index:0; opacity:.4; pointer-events:none;
  -webkit-mask-image:radial-gradient(128% 76% at 50% 44%, #000 26%, transparent 80%);
          mask-image:radial-gradient(128% 76% at 50% 44%, #000 26%, transparent 80%);
}
.marca{ height:31px; width:auto; margin:0 auto var(--e3); }
.sobrancelha{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 var(--e3);
  font-size:.66rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  color:var(--verde-texto); border:1px solid rgba(0,193,110,.35); border-radius:999px;
  padding:7px 15px; background:rgba(255,255,255,.7); backdrop-filter:blur(6px);
}
.sobrancelha i{ width:6px; height:6px; border-radius:50%; background:var(--verde); flex:none; }
.hero h1{ max-width:23ch; margin-inline:auto; text-wrap:balance; }
.entrada{ margin:var(--e3) auto 0; max-width:40ch; color:var(--tinta-media); font-size:.92rem; line-height:1.5; }

/* o vídeo é o herói: ocupa a largura toda que couber */
.video{ position:relative; z-index:2; width:min(100%, 30rem); margin:var(--e3) auto 0; }
.video .moldura{
  position:relative; aspect-ratio:16/9; border-radius:18px; overflow:hidden;
  background:var(--papel-2); border:1px solid var(--linha);
  box-shadow:0 30px 70px -34px rgba(10,12,11,.6), 0 2px 6px rgba(10,12,11,.06);
  display:grid; place-content:center; gap:10px; justify-items:center;
}
.video[data-formato="9:16"] .moldura{ aspect-ratio:9/16; }
.video[data-formato="9:16"]{ width:min(100%, 19rem); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.play{
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer; color:var(--preto);
  background:var(--verde); display:grid; place-content:center;
  box-shadow:0 12px 30px -10px rgba(0,193,110,.95);
}
.legenda-video{ margin:0; font-size:.82rem; color:var(--tinta-media); font-weight:500; }

.fontes{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px 10px;
  margin:var(--e3) 0 0; font-size:.74rem; color:var(--tinta-fraca);
}
.fontes > span:not(.fontes-icones){ white-space:nowrap; }
/* os ícones nunca quebram linha: ficam sempre lado a lado */
.fontes-icones{ display:inline-flex; align-items:center; gap:12px; flex:none; }
.hero .seguranca{ margin-top:10px; }
.fontes svg{ width:19px; height:19px; color:var(--tinta-media); opacity:.85; }

/* botões */
.botao{
  display:block; width:100%; max-width:24rem; margin:var(--e3) auto 0; padding:16px 24px;
  border-radius:15px; text-align:center; text-decoration:none; background:var(--verde);
  color:var(--preto); font-weight:650; font-size:1.05rem;
  position:relative; isolation:isolate;
  box-shadow:0 0 0 0 rgba(0,193,110,.5), 0 12px 30px -14px rgba(0,193,110,.95);
  transition:transform .18s ease, box-shadow .3s ease;
}
/* halo de luz em volta: respira devagar e acende no toque */
.botao::after{
  content:""; position:absolute; inset:-6px; border-radius:20px; z-index:-1;
  background:radial-gradient(60% 120% at 50% 50%, rgba(0,193,110,.55), transparent 72%);
  opacity:.5; filter:blur(9px);
}
@media (prefers-reduced-motion: no-preference){
  .botao::after{ animation:respirar-luz 3.4s ease-in-out infinite; }
}
@keyframes respirar-luz{ 0%,100%{ opacity:.38; transform:scale(.98) } 50%{ opacity:.72; transform:scale(1.03) } }
.botao:hover{ transform:translateY(-2px); box-shadow:0 0 0 4px rgba(0,193,110,.18), 0 16px 34px -14px rgba(0,193,110,1); }
.mini-cta{ box-shadow:0 0 0 0 rgba(0,193,110,.4), 0 6px 18px -8px rgba(0,193,110,.9); }
.botao.grande{ font-size:1.12rem; padding:21px 24px; }
.seguranca{ margin:var(--e3) 0 0; font-size:.82rem; color:var(--tinta-fraca); text-align:center; }
.seguranca span{ color:var(--verde); font-weight:700; }

/* faixa de tags entre o hero e o problema */
.faixa-correndo{
  background:var(--papel); border-top:1px solid var(--linha); border-bottom:1px solid var(--linha);
  overflow:hidden; padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.trilha-faixa{
  display:flex; align-items:center; gap:18px; width:max-content;
  animation:correr-faixa 90s linear infinite;
}
.trilha-faixa span{ font-size:.8rem; font-weight:500; color:var(--tinta-media); white-space:nowrap; }
.trilha-faixa i{ width:5px; height:5px; border-radius:50%; background:var(--verde); flex:none; opacity:.7; }
@keyframes correr-faixa{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }
@media (prefers-reduced-motion: reduce){ .trilha-faixa{ animation:none; } }

/* ================================ 2. PROBLEMA ============================= */
.dois-lados{ display:grid; gap:var(--e7); }

/* --- o celular --- */
.palco-fone{ perspective:1600px; display:flex; flex-direction:column; align-items:center; gap:var(--e4); }
.fone{
  position:relative; width:min(218px, 58vw); aspect-ratio:300/610; border-radius:42px;
  background:#2A322E; padding:10px; box-shadow:0 40px 80px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.07);
  transform:rotateY(-7deg) rotateX(2deg); transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.fone:hover{ transform:rotateY(-3deg); }
@media (max-width:940px){ .fone,.fone:hover{ transform:none; } }
.fone::after{
  content:""; position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:34%; height:20px; background:#2A322E; border-radius:0 0 14px 14px; z-index:6;
}
.tela-fone{ position:relative; height:100%; border-radius:33px; overflow:hidden; background:#0E1210; }
.topo-fone{
  height:30px; display:flex; align-items:flex-end; justify-content:space-between;
  padding:0 16px 3px; font-size:10px; color:rgba(255,255,255,.5); font-weight:600;
}
/* sem JS: as duas telas aparecem em sequência, legíveis.
   com JS: viram camadas sobrepostas — e o visibility:hidden é o mecanismo que
   reinicia as animações internas a cada troca de cena. */
.cena-f{ position:relative; padding:0 0 var(--e4); }
html.js .cena-f{
  position:absolute; inset:30px 0 0; padding:0; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
html.js .cena-f.ativa{ opacity:1; visibility:visible; transform:none; }
html:not(.js) .fone{ aspect-ratio:auto; height:auto; padding-bottom:18px; }
html:not(.js) .tela-fone{ height:auto; }
html:not(.js) .folha{ position:relative; transform:none; border-radius:14px; margin-top:10px; }
html:not(.js) .aviso{ position:relative; left:auto; bottom:auto; transform:none; opacity:1;
  display:inline-flex; margin:12px 0 0; }
html:not(.js) .campo-bc .digitando{ width:auto; }
html:not(.js) .pontos-fone{ display:none; }
html:not(.js) .salvar-bc{ margin-bottom:0; }

/* cena 0 — Reels do Instagram */
.reels{ position:absolute; inset:0; opacity:0; }
.cena-f.ativa .reels{ animation:f-sobe .4s ease .25s forwards; }
.reel-fundo{
  position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(165deg,#2b3733 0%,#151b19 55%,#0d1211 100%);
}
.reel-fundo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), transparent 26%, transparent 56%, rgba(0,0,0,.62));
}
.reel-play{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.14); position:relative; }
.reel-play::after{
  content:""; position:absolute; left:16px; top:12px; border-left:13px solid rgba(255,255,255,.85);
  border-top:8px solid transparent; border-bottom:8px solid transparent;
}
.reel-topo{
  position:absolute; left:14px; right:14px; top:10px; display:flex; align-items:center;
  justify-content:space-between; color:#fff; font-size:14px; font-weight:650; z-index:2;
}
.reel-topo .cam{ width:17px; height:13px; border:1.6px solid #fff; border-radius:3px; display:block; }
.reel-acoes{
  position:absolute; right:11px; bottom:78px; display:flex; flex-direction:column; gap:15px;
  align-items:center; z-index:2;
}
.reel-acoes .ac{ display:grid; justify-items:center; gap:3px; }
.reel-acoes b{ font-size:8.5px; color:rgba(255,255,255,.85); font-weight:600; }
.reel-acoes i{ display:block; width:21px; height:21px; }
.ic-coracao{ background:rgba(255,255,255,.92);
  clip-path:polygon(50% 100%, 8% 58%, 2% 36%, 12% 16%, 32% 14%, 50% 30%, 68% 14%, 88% 16%, 98% 36%, 92% 58%); }
.ic-balao{ border:2px solid rgba(255,255,255,.92); border-radius:50% 50% 50% 5px; }
.ic-aviao{ background:rgba(255,255,255,.92); clip-path:polygon(0 44%, 100% 0, 56% 100%, 43% 60%); }
.ic-tres{ background:radial-gradient(circle at 50% 16%, rgba(255,255,255,.92) 1.7px, transparent 2.1px),
                     radial-gradient(circle at 50% 50%, rgba(255,255,255,.92) 1.7px, transparent 2.1px),
                     radial-gradient(circle at 50% 84%, rgba(255,255,255,.92) 1.7px, transparent 2.1px); }
.reel-acoes .destaque{ position:relative; }
.cena-f.ativa .reel-acoes .destaque::before{
  content:""; position:absolute; inset:-9px -9px 6px; border-radius:50%; border:2px solid var(--verde);
  opacity:0; animation:f-anel 1.1s ease .9s;
}
.reel-pe{ position:absolute; left:14px; right:62px; bottom:16px; z-index:2; color:#fff; }
.reel-pe b{ font-size:12px; font-weight:650; }
.reel-pe p{ margin:4px 0 0; font-size:10.5px; color:rgba(255,255,255,.75); line-height:1.35; }
@keyframes f-anel{ 0%{opacity:0;transform:scale(.6)} 40%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:scale(1.35)} }

/* folha de compartilhar (sobe de baixo, como no Android) */
.folha{
  position:absolute; left:0; right:0; bottom:0; z-index:4; padding:15px 14px 20px;
  background:#1B211E; border-radius:20px 20px 0 0; transform:translateY(104%);
  border-top:1px solid rgba(255,255,255,.09); box-shadow:0 -18px 40px rgba(0,0,0,.55);
}
.cena-f.ativa .folha{ animation:f-folha 1.6s cubic-bezier(.2,.7,.2,1) 1.3s forwards; }
.folha-tit{ margin:0 0 12px; font-size:11px; color:rgba(255,255,255,.55); font-weight:600; }
.folha-alvos{ display:flex; gap:12px; padding-bottom:15px; }
.folha-alvos .alvo{ width:46px; height:46px; border-radius:14px; background:rgba(255,255,255,.09);
  display:grid; place-items:center; position:relative; }
.folha-alvos .alvo svg{ width:21px; height:21px; color:rgba(255,255,255,.7); }
.folha-alvos .alvo i{ position:absolute; bottom:-15px; font-style:normal; font-size:8px; font-weight:600;
  color:var(--verde); letter-spacing:.02em; }
.folha-alvos .alvo-bc{ background:#fff; }
.cena-f.ativa .alvo-bc{ animation:f-pop .5s cubic-bezier(.2,1.5,.4,1) 2.2s; }
.toque{
  position:absolute; right:20px; bottom:124px; width:16px; height:16px; border-radius:50%;
  background:rgba(255,255,255,.9); opacity:0; pointer-events:none; z-index:3;
}
.cena-f.ativa .toque{ animation:f-toque .8s ease .95s; }

/* cena 1 — Brain Content */
.app-bc{ padding:14px 13px; opacity:0; height:100%; display:flex; flex-direction:column; }
.cena-f.ativa .app-bc{ animation:f-sobe .38s ease .3s forwards; }
.abas-bc{ display:flex; gap:6px; margin-bottom:14px; }
.abas-bc span{
  flex:1; text-align:center; font-size:10px; font-weight:600; padding:8px 0; border-radius:9px;
  background:rgba(255,255,255,.07); color:rgba(255,255,255,.5);
}
.abas-bc .on{ background:var(--verde); color:#0A0C0B; }
.campo-bc{
  min-height:78px; border-radius:12px; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); padding:11px; display:flex; align-items:flex-start;
  font-size:11.5px; color:#fff; line-height:1.45;
}
.campo-bc .digitando{ white-space:nowrap; overflow:hidden; width:0; }
.cena-f.ativa .campo-bc .digitando{ animation:f-digita 1.5s steps(30,end) .8s forwards; }
.campo-bc .cursor{ width:2px; height:1.05em; background:var(--verde); flex:none; margin-left:1px; }
.cena-f.ativa .campo-bc .cursor{ animation:f-pisca .9s step-end infinite; }
.chips-bc{ display:flex; gap:6px; margin:12px 0; flex-wrap:wrap; }
.chips-bc span{ font-size:9.5px; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.5); }
.chips-bc .on{ background:rgba(0,193,110,.18); color:#7CF3BC; }
.salvar-bc{
  display:block; margin-top:auto; margin-bottom:74px; text-align:center; padding:11px; border-radius:11px; background:var(--verde);
  color:#0A0C0B; font-size:12px; font-weight:650;
}
.cena-f.ativa .salvar-bc{ animation:f-aperta .32s ease 2.45s; }

/* aviso (o toast) */
.aviso{
  position:absolute; left:50%; bottom:64px; transform:translateX(-50%) translateY(14px);
  display:flex; align-items:center; gap:7px; background:var(--verde); color:#0A0C0B;
  border-radius:999px; padding:7px 14px; font-size:12px; font-weight:650; opacity:0;
  box-shadow:0 8px 22px rgba(0,193,110,.4); z-index:8;
}
.aviso svg{ width:14px; height:14px; }
.cena-f.ativa .aviso{ animation:f-aviso 1.6s ease 2.95s forwards; }
.cena-f:last-child.ativa .aviso{ animation-delay:2.75s; }

@keyframes f-sobe{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes f-folha{ 0%{transform:translateY(102%)} 24%{transform:translateY(0)} 84%{transform:translateY(0)} 100%{transform:translateY(102%)} }
@keyframes f-pop{ 0%{transform:scale(1)} 45%{transform:scale(1.14)} 100%{transform:scale(1)} }
@keyframes f-toque{ 0%{opacity:0;transform:scale(.4)} 30%{opacity:.9;transform:scale(1)} 100%{opacity:0;transform:scale(1.9)} }
@keyframes f-digita{ from{width:0} to{width:100%} }
@keyframes f-pisca{ 50%{opacity:0} }
@keyframes f-aperta{ 50%{transform:scale(.96)} }
@keyframes f-aviso{
  0%{opacity:0;transform:translateX(-50%) translateY(14px)}
  12%{opacity:1;transform:translateX(-50%) translateY(0)}
  80%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(14px)}
}

.pontos-fone{ display:flex; gap:10px; width:min(100%, 22rem); }
.ponto{
  flex:1; text-align:left; background:transparent; border:0; padding:0; cursor:pointer;
  font-family:var(--sans); color:var(--tinta-fraca);
}
.ponto b{ display:block; font-size:.76rem; font-weight:600; margin-bottom:7px; }
.ponto.ativo b{ color:var(--tinta); }
.ponto i{ display:block; height:2px; background:var(--linha-forte); border-radius:2px; position:relative; overflow:hidden; }
.ponto.ativo i::after{
  content:""; position:absolute; inset:0; width:0; background:var(--verde);
  animation:f-barra 4400ms linear forwards;
}
@keyframes f-barra{ from{width:0} to{width:100%} }

/* --- a lista do que se perde --- */
.lista-perdidos{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.lista-perdidos li{
  display:grid; grid-template-columns:26px 1fr; gap:12px; align-items:center;
  padding:14px 16px; border-radius:14px; background:var(--papel-2); border:1px solid var(--linha);
}
.lista-perdidos svg{ width:20px; height:20px; grid-row:span 2; color:var(--tinta-fraca); align-self:center; }
.lista-perdidos b{ font-size:.92rem; font-weight:600; }
.lista-perdidos span{ font-size:.8rem; color:var(--tinta-fraca); }
.fecho-destaque{
  margin:var(--e7) auto 0; max-width:26ch; text-align:center; text-wrap:balance;
  font-size:clamp(1.2rem,5.2vw,1.85rem); font-weight:500; line-height:1.3;
  padding:var(--e5) var(--e4); border-radius:22px;
  background:rgba(255,255,255,.04); border:1px solid var(--linha);
}
.fecho-destaque em{ color:var(--verde-texto); }
.problema .fecho{
  margin:var(--e6) 0 0; font-size:clamp(1.25rem,5.4vw,1.9rem); font-weight:500;
  line-height:1.3; max-width:20ch;
}
.problema .fecho em{ color:var(--verde-texto); }

/* ============================ 3. COMO FUNCIONA ============================ */
.passos-v{ position:relative; list-style:none; margin:0; padding:0; }
.trilha{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:0; pointer-events:none; }
.passo{ display:grid; grid-template-columns:46px 1fr; gap:var(--e4); padding-bottom:var(--e7); }
.passo:last-child{ padding-bottom:0; }
.marca-passo{
  position:relative; z-index:1; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; background:var(--papel-2);
  border:1.5px solid var(--linha-forte); font-family:var(--serif); font-size:1.4rem;
  color:var(--tinta-fraca); align-self:start;
  transition:border-color .35s ease, color .35s ease, box-shadow .35s ease, background .35s ease;
}
.marca-passo b{ line-height:1; font-weight:400; }
.marca-passo.aceso{
  border-color:var(--verde); color:var(--verde-texto); background:var(--papel);
  box-shadow:0 0 0 7px rgba(0,193,110,.1);
}
.passo .corpo{ padding-top:6px; }
.passo h3{ font-size:1.14rem; margin-bottom:9px; }
.passo p{ margin:0; color:var(--tinta-media); font-size:1rem; max-width:34em; }
.passo p b{ color:var(--tinta); font-weight:600; }
.ferramentas{ display:flex; gap:12px; margin-top:var(--e3); }
.ferramentas svg{ width:20px; height:20px; color:var(--tinta-fraca); }

.trilha-base  { fill:none; stroke:var(--linha-forte); stroke-width:1.6; stroke-linecap:round; }
.trilha-halo  { fill:none; stroke:var(--verde); stroke-width:9; stroke-linecap:round; opacity:.13; }
.trilha-viva  { fill:none; stroke:var(--verde); stroke-width:2.2; stroke-linecap:round; }
.trilha-cometa{ fill:none; stroke-linecap:round; animation:cometa 2.8s linear infinite; }
/* dois traços no mesmo tempo: halo verde por baixo, núcleo branco por cima —
   é o que faz o pulso aparecer tanto sobre o trilho cinza quanto sobre a linha verde */
#cometa1{ stroke:var(--verde); stroke-width:8; opacity:.34; }
#cometa2{ stroke:#FFFFFF; stroke-width:2.6; }
@keyframes cometa{ from{ stroke-dashoffset:var(--L) } to{ stroke-dashoffset:0 } }

/* ========================= 4. BIBLIOTECA E CÉREBRO ======================== */
.grade{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin-top:var(--e5); }
.cartao{
  border:1px solid var(--linha); border-radius:14px; padding:13px; background:var(--papel-2);
  min-height:104px;
}
.cartao.propria{ border-left:3px solid var(--verde); }
.cartao .tag{ font-size:.6rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-fraca); }
.cartao .tag.verde{ color:var(--verde-texto); }
.cartao h4{ margin:6px 0; font-size:.85rem; font-weight:600; line-height:1.25; }
.cartao .anot{ margin:0; font-size:.75rem; color:var(--verde-texto); line-height:1.35; }
.ponte-cerebro{ margin:var(--e6) 0 var(--e3); font-size:.82rem; color:var(--tinta-fraca); }

.alternador{ margin:0; }
.alternador input{ position:absolute; opacity:0; width:1px; height:1px; }
.alternador label{
  display:inline-block; padding:9px 17px; border-radius:999px; cursor:pointer; margin:0 8px 16px 0;
  border:1px solid var(--linha-forte); font-size:.82rem; font-weight:500; color:var(--tinta);
}
#cerebroRef:checked ~ label[for="cerebroRef"],
#cerebroIdeia:checked ~ label[for="cerebroIdeia"]{ background:var(--verde); border-color:var(--verde); color:var(--preto); font-weight:650; }
.alternador input:focus-visible + label{ outline:2px solid var(--verde); outline-offset:3px; }

.grafo{ position:relative; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
html.js .grafo{ cursor:grab; }
html.js .grafo.girando{ cursor:grabbing; }
html.js .grafo.girando .mapa{ animation:none; }         /* enquanto arrasta, o pulso pausa */
.mapa{ --giro:0deg; }
html.js .grafo .mapa > g,
html.js .grafo .mapa > circle{ rotate:var(--giro); transform-origin:200px 200px; transform-box:view-box; }
/* o grupo gira para reposicionar; cada nome se endireita de volta e continua legível */
html.js .grafo .mapa .rotulos text{
  rotate:calc(var(--giro) * -1); transform-box:fill-box; transform-origin:center;
}
.dica-grafo{
  margin:var(--e2) 0 0; font-size:.74rem; color:var(--tinta-fraca); display:flex;
  align-items:center; justify-content:center; gap:7px;
}
.dica-grafo i{ width:14px; height:14px; border:1.5px solid currentColor; border-radius:50%; flex:none; position:relative; }
.dica-grafo i::after{ content:""; position:absolute; inset:3px; border-radius:50%; background:currentColor; }
html:not(.js) .dica-grafo{ display:none; }

/* categoria em foco: ela e os filhos ganham brilho, o resto recua */
.mapa .cats circle{ cursor:pointer; transition:r .25s ease, fill .25s ease; }
.grafo.focado .mapa .a2 path,
.grafo.focado .mapa .a3 path,
.grafo.focado .mapa .subs circle,
.grafo.focado .mapa .folhas circle{ opacity:.18; transition:opacity .3s ease; }
.grafo.focado .mapa .destacado{ opacity:1 !important; }
.mapa .cats circle.ativo{ fill:var(--verde); r:8.6; }
.mapa{ width:100%; max-width:32rem; margin-inline:auto; transition:opacity .45s ease;
  overflow:visible; transform-origin:50% 50%; }
.mapa-ideia{ position:absolute; inset:0; margin:auto; opacity:0; pointer-events:none; }
#cerebroIdeia:checked ~ .grafo .mapa-ref{ opacity:0; }
#cerebroIdeia:checked ~ .grafo .mapa-ideia{ opacity:1; }

/* paleta do Cérebro do app: núcleo verde, anéis em branco decrescente, afinidade em verde */
.mapa .a1 path{ stroke:rgba(255,255,255,.34); stroke-width:1.2; fill:none; }
.mapa .a2 path{ stroke:rgba(255,255,255,.2);  stroke-width:.95; fill:none; }
.mapa .a2 path.forte{ stroke:var(--verde); stroke-width:1.5; }
.mapa .a3 path{ stroke:rgba(255,255,255,.085); stroke-width:.65; fill:none; }
.mapa .afin path{ stroke:rgba(0,193,110,.5); stroke-width:1.1; fill:none; }
.mapa .cats circle{ fill:#fff; }
.mapa .subs circle{ fill:rgba(255,255,255,.75); }
.mapa .folhas circle{ fill:rgba(255,255,255,.44); }
.mapa .nucleo{ fill:var(--verde); }
.mapa .rotulos text{
  font-size:8.6px; fill:rgba(255,255,255,.82); font-family:var(--sans);
  letter-spacing:.06em; text-transform:uppercase; font-weight:600;
  /* contorno escuro por baixo: nenhum nó vizinho engole o nome — truque do Cérebro do app */
  paint-order:stroke fill; stroke:#0A0C0B; stroke-width:3.4px; stroke-linejoin:round;
}
/* o cérebro se monta do núcleo para fora — por grupo, não por elemento: leve e fluido.
   Sem JS nada disso liga, e o mapa aparece pronto. */
html.js .grafo .mapa > g,
html.js .grafo .mapa > circle{
  opacity:0; transform:scale(.55); transform-origin:200px 200px; transform-box:view-box;
  transition:opacity .75s ease, transform 1s cubic-bezier(.18,.72,.24,1);
}
html.js .grafo.montado .mapa > g,
html.js .grafo.montado .mapa > circle{ opacity:1; transform:none; }
html.js .grafo.montado .mapa > .nucleo{ transition-delay:0s; }
html.js .grafo.montado .mapa > .a1     { transition-delay:.12s; }
html.js .grafo.montado .mapa > .cats   { transition-delay:.2s; }
html.js .grafo.montado .mapa > .rotulos{ transition-delay:.3s; }
html.js .grafo.montado .mapa > .a2     { transition-delay:.38s; }
html.js .grafo.montado .mapa > .subs   { transition-delay:.46s; }
html.js .grafo.montado .mapa > .a3     { transition-delay:.6s; }
html.js .grafo.montado .mapa > .folhas { transition-delay:.68s; }
html.js .grafo.montado .mapa > .afin   { transition-delay:.9s; transition-duration:1.1s; }

/* depois de montado, respira: giro muito lento, no compositor */
@media (prefers-reduced-motion: no-preference){
  .grafo.montado .mapa{ animation:girar-mapa 300s linear infinite; }
}
@keyframes girar-mapa{ from{ rotate:0deg } to{ rotate:360deg } }

/* --- o cérebro vivo: respira, pulsa e acende, sem gastar bateria à toa --- */
.mapa .pulsos path{
  fill:none; stroke:#7CF3BC; stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:9 999; stroke-dashoffset:0; opacity:0;
}
.mapa .afin path{ stroke:rgba(0,193,110,.45); }

@media (prefers-reduced-motion: no-preference){
  /* o mapa inteiro respira e gira devagar: as ligações nunca se desencaixam */
  /* sem giro automático: o mapa PULSA. Quem gira é o visitante, arrastando. */
  .grafo.montado .mapa{ animation:respirar-mapa 6.5s ease-in-out infinite; }
  /* sinal correndo do núcleo para cada categoria, um de cada vez */
  .grafo.montado .mapa .pulsos path{ animation:correr-pulso 7s linear infinite; animation-delay:var(--d,0s); }
  /* algumas referências acendem sozinhas, como se estivessem sendo lidas agora */
  .grafo.montado .mapa .folhas .acesa{ animation:acender-folha 6.5s ease-in-out infinite; animation-delay:var(--d,0s); }
  /* as ligações que passaram na regra ficam pulsando de leve */
  .grafo.montado .mapa .afin path{ animation:pulsar-afin 5.5s ease-in-out infinite; }
  .grafo.montado .mapa .afin path:nth-child(even){ animation-delay:-2.7s; }
}
@keyframes respirar-mapa{ 0%,100%{ scale:1 } 50%{ scale:1.028 } }
@keyframes correr-pulso{
  0%   { stroke-dashoffset:70; opacity:0 }
  6%   { opacity:1 }
  26%  { stroke-dashoffset:-9; opacity:.95 }
  32%  { opacity:0 }
  100% { stroke-dashoffset:-9; opacity:0 }
}
@keyframes acender-folha{
  0%,100%{ fill:rgba(255,255,255,.44); r:2.3 }
  46%    { fill:#7CF3BC; r:3.4 }
  62%    { fill:rgba(255,255,255,.44); r:2.3 }
}
@keyframes pulsar-afin{ 0%,100%{ opacity:.42 } 50%{ opacity:1 } }

.legenda-grafo{ margin:var(--e3) 0 0; font-size:.8rem; color:var(--tinta-fraca); max-width:var(--largura-texto); }
.lg.ide{ display:none; }
#cerebroIdeia:checked ~ .legenda-grafo .lg.ref{ display:none; }
#cerebroIdeia:checked ~ .legenda-grafo .lg.ide{ display:inline; }

/* ============================== 5. DIFERENCIAL ============================ */
.provas{ display:grid; gap:var(--e4); }
.prova{
  padding:var(--e5) var(--e4); border-radius:var(--raio); background:var(--papel-2);
  border:1px solid var(--linha); position:relative;
}
.prova::before{
  content:""; position:absolute; left:var(--e4); top:0; width:34px; height:3px;
  background:var(--verde); border-radius:0 0 3px 3px;
}
.prova h3{ font-size:1.16rem; margin-bottom:10px; max-width:22ch; }
.prova p{ margin:0; color:var(--tinta-media); font-size:.99rem; }
.prova p b{ color:var(--tinta); font-weight:600; }
.frase-forte{
  margin:var(--e7) auto 0; text-align:center; max-width:24ch; position:relative;
  font-size:clamp(1.3rem,5.6vw,2rem); font-weight:500; line-height:1.28;
  padding:var(--e6) var(--e4); border-radius:26px; text-wrap:balance;
  background:var(--papel-2); border:1px solid var(--linha); max-width:none;
}
.frase-forte::before{
  content:""; position:absolute; left:50%; top:0; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%; background:var(--verde);
  box-shadow:0 8px 22px -8px rgba(0,193,110,.9);
  -webkit-mask:radial-gradient(circle at 50% 50%, #000 30%, transparent 31%);
}
.frase-forte > span{ display:block; max-width:22ch; margin-inline:auto; }
.frase-forte em{ color:var(--verde-texto); }

/* ============================== 6. CASOS DE USO =========================== */
.casos{ overflow:hidden; }
/* rolagem horizontal de verdade: o dedo arrasta; o JS empurra devagar quando ninguém mexe */
.esteira-casos{
  margin-top:var(--e2); overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.esteira-casos::-webkit-scrollbar{ display:none; }
.esteira-casos:active{ cursor:grabbing; }
.trilha-casos{
  list-style:none; margin:0; padding:4px 18px; display:flex; gap:14px; width:max-content;
}
.caso{
  flex:0 0 min(17rem, 76vw); padding:var(--e4); border-radius:var(--raio);
  background:var(--papel); border:1px solid var(--linha); box-shadow:var(--sombra);
}
.caso b{ display:block; font-size:1.02rem; font-weight:600; margin-bottom:9px; }
.caso p{ margin:0; font-size:.9rem; color:var(--tinta-media); }

/* ================================ 7. CIÊNCIA ============================== */
.regras{ display:grid; gap:var(--e4); }
.regra{ display:grid; grid-template-columns:auto 1fr; gap:var(--e3) var(--e4); align-items:start; }
.regra .nun{
  font-family:var(--serif); font-size:1.7rem; color:var(--verde-texto); line-height:1;
  grid-row:span 2; padding-top:2px;
}
.regra h3{ font-size:1.08rem; margin-bottom:7px; }
.regra p{ margin:0; grid-column:2; color:var(--tinta-media); font-size:.98rem; max-width:34em; }
.seu{
  margin-top:var(--e7); padding:var(--e6) var(--e5); border-radius:24px;
  background:var(--papel-2); border:1px solid var(--linha); text-align:center;
}
.seu h3{ font-size:clamp(1.4rem,6vw,2.1rem); max-width:18ch; margin-inline:auto; text-wrap:balance; }
.seu h3 em{ color:var(--verde-texto); }
.seu p{ margin:var(--e4) auto 0; max-width:44ch; color:var(--tinta-media); font-size:1rem; }

/* =============================== 8. FINAL + FAQ =========================== */
.final{ text-align:center; overflow:hidden; }
.final .fundo-grafo{
  position:absolute; inset:0; z-index:0; opacity:.5;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 42%, #000 22%, transparent 76%);
          mask-image:radial-gradient(120% 70% at 50% 42%, #000 22%, transparent 76%);
}
.final h2{ max-width:19ch; margin-inline:auto; text-wrap:balance; }
.final em{ color:var(--verde-texto); }
.halo{
  position:absolute; left:50%; top:22%; width:min(86vw,30rem); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(0,193,110,.2), transparent 66%); pointer-events:none; z-index:0;
}
.faq{ margin-top:var(--e7); text-align:left; max-width:44rem; margin-inline:auto; }
.titulo-faq{ margin:0 0 var(--e3); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--verde-texto); }
details{ border-top:1px solid var(--linha); padding:var(--e3) 0; }
details:last-of-type{ border-bottom:1px solid var(--linha); }
summary{ cursor:pointer; font-weight:550; font-size:1rem; list-style:none; display:flex; justify-content:space-between; gap:var(--e3); }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; color:var(--verde-texto); font-size:1.3rem; line-height:1; flex:none; transition:transform .25s ease; }
details[open] summary::after{ transform:rotate(45deg); }
details p{ margin:var(--e2) 0 0; color:var(--tinta-media); font-size:.96rem; max-width:44em; }

.rodape{
  background:var(--papel); border-top:1px solid var(--linha); text-align:center;
  color:var(--tinta-fraca); font-size:.83rem;
  padding:var(--e5) 0 calc(var(--e5) + env(safe-area-inset-bottom,0px));
}
.rodape img{ margin:0 auto var(--e2); opacity:.7; }
.rodape p{ margin:0 auto; max-width:34rem; padding-inline:1.25rem; }
.rodape a{ color:var(--verde-texto); }

/* ============================== RESPONSIVO ================================ */
@media (min-width:52rem){
  body{ font-size:18px; }
  .dois-lados{ grid-template-columns:1fr 1fr; align-items:center; gap:var(--e6); }
  .provas{ grid-template-columns:1fr 1fr; }
  .regras{ grid-template-columns:1fr 1fr; gap:var(--e6) var(--e5); }
  .grade{ grid-template-columns:repeat(4,1fr); }
  .video{ width:min(100%, 44rem); }
  .video[data-formato="9:16"]{ width:min(100%, 22rem); }
  .botao{ width:auto; display:inline-block; min-width:18rem; }
  .passo{ grid-template-columns:56px 1fr; }
  .marca-passo{ width:56px; height:56px; font-size:1.6rem; }
  .fone{ width:232px; }
}

/* ============================ MENOS MOVIMENTO ============================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.001ms !important; }
  html.js .sobe,html.js .regra,html.js .prova,html.js .passo .corpo{ opacity:1 !important; transform:none !important; }
  .cena-f{ position:relative; inset:auto; opacity:1 !important; visibility:visible !important; transform:none !important; }
  .cena-f .folha{ position:relative; transform:none; border-radius:14px; margin-top:10px; }
  .cena-f .aviso{ position:relative; left:auto; top:auto; transform:none; opacity:1; display:inline-flex; margin:10px 0 0; }
  .cena-f .campo-bc .digitando{ width:auto; }
  .fone{ aspect-ratio:auto; height:auto; padding-bottom:20px; }
  .tela-fone{ height:auto; }
  .pontos-fone,.progresso{ display:none; }
  .trilha-viva{ stroke-dashoffset:0 !important; }
  .marca-passo{ border-color:var(--verde); color:var(--verde-texto); }
}