/* =============================================================================
   Brain Content — landing "Memória Viva"
   Fundo branco, texto preto, verde só como acento (<10% da tela).
   Movimento: CSS scroll-driven (animation-timeline) — sem biblioteca.
   Fallback: navegador sem suporte mostra o estado final; JS só adiciona reveal.
   ========================================================================== */

:root{
  color-scheme: light;

  --papel:#FFFFFF;
  --papel-2:#F4F6F5;
  --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,.18);
  --sombra:0 1px 2px rgba(10,12,11,.04), 0 10px 30px -14px rgba(10,12,11,.16);

  --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:44px; --e6:72px;
  --raio:18px;
  --largura:min(100% - 2.5rem, 62rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
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;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* --------------------------------- tipografia ---------------------------- */
h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.022em; line-height:1.12; }
h1{ font-size:clamp(2rem,8.2vw,3.4rem); }
h2{ font-size:clamp(1.65rem,6.4vw,2.6rem); }
h3{ font-size:1.05rem; letter-spacing:-.01em; }
/* O DESTAQUE DA CASA: a palavra-chave troca de fonte (serifada em itálico) */
h1 em,h2 em,p em{
  font-family:var(--serif); font-style:italic; font-weight:400;
  letter-spacing:-.01em; font-size:1.09em; line-height:1;
}
.rotulo{
  margin:0 0 var(--e2); font-size:.75rem; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--verde-texto);
}
.texto{ margin:var(--e3) 0 0; color:var(--tinta-media); font-size:1.05rem; max-width:34em; }
.fecho-min{ margin:var(--e4) 0 0; color:var(--tinta-fraca); font-size:.95rem; }
.pular{
  position:absolute; left:-9999px; top:0; background:var(--tinta); color:#fff;
  padding:12px 18px; border-radius:0 0 12px 0; z-index:60;
}
.pular:focus{ left:0; }
:focus-visible{ outline:2px solid var(--verde-texto); outline-offset:3px; border-radius:6px; }

/* --------------------------------- estrutura ----------------------------- */
.secao{ padding:var(--e6) 0; border-top:1px solid var(--linha); }
.faixa{ width:var(--largura); margin-inline:auto; }
.secao:nth-of-type(even){ background:var(--papel-2); }

/* barra de progresso da leitura */
.progresso{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:50; pointer-events:none;
  background:transparent;
}
.progresso i{
  display:block; height:100%; background:var(--verde); transform-origin:0 50%;
  transform:scaleX(0);
}

/* ============================ MOVIMENTO — BASE ============================
   Regra: nada nasce escondido no HTML. O estado inicial só é aplicado dentro
   de @supports, e só quando o navegador sabe animar pelo scroll.            */
@supports (animation-timeline: view()){
  .sobe{
    animation:sobe linear both;
    animation-timeline:view();
    animation-range:entry 2% cover 26%;
  }
  .progresso i{ animation:crescer linear both; animation-timeline:scroll(root); }
}
@keyframes sobe{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
@keyframes crescer{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* fallback por JS para Safari/Firefox sem scroll-driven */
html.js-reveal .sobe{ opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
html.js-reveal .sobe.visivel{ opacity:1; transform:none; }

/* =================================== HERO ================================= */
.hero{ position:relative; overflow:hidden; padding:var(--e5) 0 var(--e6); }
.capa{ width:var(--largura); margin-inline:auto; position:relative; z-index:2; text-align:center; }
.logo{ height:40px; width:auto; margin:0 auto var(--e5); }
.sobrancelha{
  margin:0 0 var(--e3); font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--verde-texto);
}
.hero h1{ margin:0 auto; max-width:16ch; }
.entrada{
  margin:var(--e4) auto 0; max-width:40ch; color:var(--tinta-media); font-size:1.06rem;
}
.entrada strong{ color:var(--tinta); font-weight:600; }

/* campo de fragmentos: caos que converge durante o primeiro scroll */
.campo{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.campo .teia{ position:absolute; inset:0; width:100%; height:100%; color:var(--linha-forte); opacity:.5; }
.frag{
  position:absolute; font-size:.72rem; font-weight:500; color:var(--tinta-fraca);
  background:var(--papel); border:1px solid var(--linha); border-radius:999px;
  padding:5px 11px; white-space:nowrap; box-shadow:var(--sombra);
}
.ponto{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--linha-forte);
}
.f1{ left:-3%;  top:19%; } .f2{ right:-4%; top:13%; } .f3{ left:-6%;  top:52%; }
.f4{ right:-5%; top:44%; }  .f5{ left:-2%; bottom:13%; } .f6{ right:-3%; bottom:17%; }
.f7{ left:38%; top:2%; }    .f8{ right:30%; bottom:3%; }
.p1{ left:14%; top:30%; }   .p2{ right:12%; top:25%; } .p3{ left:30%; bottom:26%; }
.p4{ right:28%; bottom:10%; } .p5{ left:3%; top:72%; } .p6{ right:4%; top:66%; }
/* no celular a coluna de texto é a tela inteira: só as bordas ficam com fragmento */
@media (max-width:52rem){
  .f7,.f8{ display:none; }
  .frag{ font-size:.68rem; opacity:.75; }
}

@supports (animation-timeline: scroll()){
  .frag,.ponto{ animation:convergir linear both; animation-timeline:scroll(root); animation-range:0 92vh; }
  .f1{ --dx:34%;  --dy:60px; } .f2{ --dx:-40%; --dy:70px; } .f3{ --dx:28%;  --dy:-30px; }
  .f4{ --dx:-30%; --dy:-46px; } .f5{ --dx:22%; --dy:-70px; } .f6{ --dx:-26%; --dy:-80px; }
  .f7{ --dx:-6%;  --dy:52px; } .f8{ --dx:-18%; --dy:-40px; }
  .p1{ --dx:60%; --dy:20px; } .p2{ --dx:-60%; --dy:26px; } .p3{ --dx:40%; --dy:-20px; }
  .p4{ --dx:-46%; --dy:-16px; } .p5{ --dx:70%; --dy:-30px; } .p6{ --dx:-70%; --dy:-24px; }
  .campo .teia{ animation:acender-teia linear both; animation-timeline:scroll(root); animation-range:0 92vh; }
  /* o verde só aparece quando a informação ganha sentido: no fim da convergência */
  .frag{ animation-name:convergir, virar-verde; }
}
@keyframes convergir{
  from{ transform:translate(0,0) rotate(var(--r,-3deg)); opacity:.85 }
  to  { transform:translate(var(--dx,0),var(--dy,0)) rotate(0deg); opacity:.28 }
}
@keyframes virar-verde{
  0%,72%{ border-color:var(--linha); color:var(--tinta-fraca) }
  100%  { border-color:rgba(0,193,110,.55); color:var(--verde-texto) }
}
@keyframes acender-teia{ from{ opacity:0; } to{ opacity:.85; } }

/* vídeo */
.video{ margin:var(--e5) 0 0; }
.video .moldura{
  position:relative; aspect-ratio:16/9; border-radius:var(--raio); overflow:hidden;
  background:var(--papel-2); border:1px solid var(--linha); box-shadow:var(--sombra);
  display:grid; place-content:center; gap:var(--e2); justify-items:center;
}
.video[data-formato="9:16"] .moldura{ aspect-ratio:9/16; max-width:22rem; margin-inline:auto; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.play{
  width:64px; height:64px; border-radius:50%; border:none; cursor:pointer;
  background:var(--verde); color:var(--tinta); display:grid; place-content:center;
  box-shadow:0 8px 24px -10px rgba(0,193,110,.9); transition:transform .2s ease;
}
.play:hover{ transform:scale(1.06); }
.legenda-video{ margin:0; font-size:.9rem; color:var(--tinta-media); font-weight:500; }
.video figcaption{ margin:var(--e2) 0 0; font-size:.8rem; color:var(--tinta-fraca); }
.video .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* botões */
.botao{
  display:block; width:100%; max-width:26rem; margin:var(--e5) auto 0;
  padding:17px 24px; border-radius:16px; text-align:center; text-decoration:none;
  background:var(--verde); color:var(--tinta); font-weight:650; font-size:1.05rem;
  box-shadow:0 10px 28px -14px rgba(0,193,110,.95); transition:transform .18s ease, box-shadow .18s ease;
}
.botao:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -14px rgba(0,193,110,.95); }
.botao:active{ transform:translateY(0); }
.botao.secundario{
  background:transparent; color:var(--tinta); border:1.5px solid var(--tinta);
  box-shadow:none; font-weight:600;
}
.botao.grande{ font-size:1.12rem; padding:20px 24px; }
.seguranca{
  margin:var(--e3) 0 0; font-size:.85rem; color:var(--tinta-fraca); text-align:center;
}
.seguranca span{ color:var(--verde); font-weight:700; }

/* ================================ 1. CAOS ================================= */
.caos .fecho{
  margin:var(--e5) 0 0; font-size:clamp(1.15rem,4.6vw,1.6rem); font-weight:500;
  line-height:1.32; max-width:22ch;
}
.caos .fecho em{ color:var(--verde-texto); }
.pilha{
  position:relative; height:210px; margin:var(--e5) 0 0;
  display:grid; place-items:center;
}
.salvo{
  position:absolute; padding:9px 14px; border-radius:12px; font-size:.8rem;
  background:var(--papel); border:1px solid var(--linha); color:var(--tinta-fraca);
  box-shadow:var(--sombra); white-space:nowrap;
}
@supports (animation-timeline: view()){
  .salvo{ animation:espalhar linear both; animation-timeline:view(); animation-range:entry 10% cover 46%; }
}
.s1{ --dx:-118px; --dy:-72px; --r:-9deg }  .s2{ --dx:96px;  --dy:-60px; --r:7deg }
.s3{ --dx:-140px; --dy:8px;   --r:5deg }   .s4{ --dx:126px; --dy:22px;  --r:-6deg }
.s5{ --dx:-72px;  --dy:70px;  --r:8deg }   .s6{ --dx:74px;  --dy:78px;  --r:-4deg }
.s7{ --dx:6px;    --dy:-96px; --r:3deg }   .s8{ --dx:-30px; --dy:34px;  --r:-11deg }
.s9{ --dx:44px;   --dy:-14px; --r:10deg }
@keyframes espalhar{
  from{ transform:translate(0,0) rotate(0); opacity:.95 }
  to  { transform:translate(var(--dx),var(--dy)) rotate(var(--r)); opacity:.55 }
}

/* ============================== 2. ORIGENS ================================ */
.dois{ display:grid; gap:var(--e4); margin:var(--e5) 0 0; }
.fluxo{
  background:var(--papel); border:1px solid var(--linha); border-radius:var(--raio);
  padding:var(--e4); box-shadow:var(--sombra);
}
.fluxo header{ display:flex; align-items:center; gap:var(--e2); margin-bottom:var(--e3); }
.selo{
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; border:1px solid var(--tinta); color:var(--tinta);
}
.fluxo.ideia .selo{ border-color:var(--verde); color:var(--verde-texto); background:rgba(0,193,110,.08); }
.trilha{ width:4px; height:34px; color:var(--linha-forte); }
.fluxo.ideia .trilha{ color:var(--verde); }
.fluxo p{ margin:0; color:var(--tinta-media); font-size:1rem; }
.fluxo .nota{
  margin:var(--e3) 0 0; padding-top:var(--e3); border-top:1px dashed var(--linha-forte);
  font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--tinta);
}
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:var(--e3) 0 0; padding:0; }
.chips li{
  font-size:.76rem; padding:5px 10px; border-radius:999px;
  background:var(--papel-2); border:1px solid var(--linha); color:var(--tinta-fraca);
}
@supports (animation-timeline: view()){
  .chips li{ animation:sobe linear both; animation-timeline:view(); animation-range:entry 5% entry 70%; }
  .chips li:nth-child(n+4){ animation-range:entry 12% entry 82%; }
  .chips li:nth-child(n+8){ animation-range:entry 20% entry 95%; }
}

/* ============================ 3. COMO FUNCIONA ============================ */
.etapas{ list-style:none; margin:var(--e5) 0 0; padding:0 0 0 34px; position:relative; }
.etapas::before{
  content:""; position:absolute; left:11px; top:6px; bottom:6px; width:2px;
  background:var(--linha-forte); z-index:0;
}
.etapas::after{
  content:""; position:absolute; left:11px; top:6px; width:2px; height:calc(100% - 12px);
  background:var(--verde); transform-origin:50% 0; transform:scaleY(0); z-index:0;
}
@supports (animation-timeline: view()){
  .etapas::after{ animation:desenhar-linha linear both; animation-timeline:view(); animation-range:entry 20% cover 78%; }
}
@keyframes desenhar-linha{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
.etapa{ position:relative; padding-bottom:var(--e5); }
.etapa:last-child{ padding-bottom:0; }
.marco{
  position:absolute; left:-34px; top:0; width:26px; height:26px; border-radius:50%;
  background:var(--papel); border:2px solid var(--linha-forte);
  display:grid; place-items:center; font-size:.72rem; font-weight:700; color:var(--tinta-fraca);
}
.marco b{ display:block; line-height:1; transform:translateY(.5px); }
.marco{ z-index:2; }
@supports (animation-timeline: view()){
  .marco{ animation:acender-marco linear both; animation-timeline:view(); animation-range:entry 30% entry 90%; }
  .etapa h3,.etapa p{ animation:sobe linear both; animation-timeline:view(); animation-range:entry 12% cover 34%; }
}
@keyframes acender-marco{
  to{ border-color:var(--verde); background:var(--verde); color:var(--tinta); }
}
.etapa h3{ margin:0 0 6px; }
.etapa p{ margin:0; color:var(--tinta-media); font-size:1rem; max-width:38em; }

/* ============================== 4. BIBLIOTECA ============================= */
.tela{
  margin:var(--e5) 0 0; padding:var(--e3); border-radius:22px;
  background:var(--papel); border:1px solid var(--linha); box-shadow:var(--sombra);
}
.busca{
  display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:13px;
  background:var(--papel-2); border:1px solid var(--linha); color:var(--tinta-fraca);
  font-size:.92rem; margin-bottom:var(--e3);
}
.busca svg{ flex:none; }
.busca span{ color:var(--tinta); font-weight:500; }
.grade{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.cartao{
  border:1px solid var(--linha); border-radius:14px; padding:13px; background:var(--papel);
  min-height:104px; position:relative;
}
.cartao.propria{ border-left:3px solid var(--verde); background:rgba(0,193,110,.035); }
.cartao .tag{
  font-size:.62rem; 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 6px; font-size:.86rem; font-weight:600; line-height:1.25; }
.cartao .anot{ margin:0; font-size:.76rem; color:var(--verde-texto); line-height:1.35; }
.cartao .marca{
  position:absolute; right:10px; bottom:9px; font-size:.62rem; padding:3px 7px;
  border-radius:6px; background:rgba(0,193,110,.16); color:var(--verde-texto); font-weight:600;
}
@supports (animation-timeline: view()){
  .cartao{ animation:organizar linear both; animation-timeline:view(); animation-range:entry 6% cover 40%; }
  .c1{ --dx:-26px; --dy:34px; --r:-7deg } .c2{ --dx:30px;  --dy:44px; --r:6deg }
  .c3{ --dx:-38px; --dy:26px; --r:4deg }  .c4{ --dx:36px;  --dy:30px; --r:-5deg }
  .c5{ --dx:-20px; --dy:40px; --r:8deg }  .c6{ --dx:24px;  --dy:36px; --r:-3deg }
}
@keyframes organizar{
  from{ transform:translate(var(--dx),var(--dy)) rotate(var(--r)); opacity:0 }
  to  { transform:none; opacity:1 }
}

/* ============================== 5. CÉREBROS =============================== */
.alternador{ margin:var(--e5) 0 0; }
.alternador input{ position:absolute; opacity:0; width:1px; height:1px; }
.alternador label{
  display:inline-block; padding:10px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--linha-forte); font-size:.85rem; font-weight:500; margin:0 8px 12px 0;
  background:var(--papel); transition:background .2s ease, border-color .2s ease;
}
#cerebroRef:checked   ~ label[for="cerebroRef"],
#cerebroIdeia:checked ~ label[for="cerebroIdeia"]{
  background:var(--verde); border-color:var(--verde); color:var(--tinta); font-weight:600;
}
.alternador input:focus-visible + label{ outline:2px solid var(--verde-texto); outline-offset:3px; }
.grafo{ position:relative; margin-top:var(--e2); }
.mapa{
  width:100%; max-width:34rem; margin-inline:auto; color:var(--linha-forte);
  transition:opacity .35s ease;
}
.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; }
.mapa .nos circle{ fill:var(--tinta); }
.mapa .nos .nucleo{ fill:var(--verde); }
.mapa .rotulos text{ font-size:9px; fill:var(--tinta-fraca); font-family:var(--sans); letter-spacing:.06em; text-transform:uppercase; }
@supports (animation-timeline: view()){
  .mapa .arestas path{
    stroke-dasharray:260; stroke-dashoffset:260;
    animation:tracar linear both; animation-timeline:view(); animation-range:entry 18% cover 62%;
  }
  .mapa .nos circle{ animation:brotar linear both; animation-timeline:view(); animation-range:entry 24% cover 56%; }
}
@keyframes tracar{ to{ stroke-dashoffset:0 } }
@keyframes brotar{ from{ transform:scale(.2); opacity:0 } to{ transform:scale(1); opacity:1 } }
.mapa .nos circle{ transform-box:fill-box; transform-origin:center; }
.legenda-grafo{ margin:var(--e2) 0 0; font-size:.8rem; color:var(--tinta-fraca); text-align:center; }
.lg.ide{ display:none; }
#cerebroIdeia:checked ~ .legenda-grafo .lg.ref{ display:none; }
#cerebroIdeia:checked ~ .legenda-grafo .lg.ide{ display:inline; }

/* ================================ 6. DNA ================================== */
.ciclo{ position:relative; margin:var(--e5) auto 0; max-width:19rem; padding:0 .5rem; }
.anel{ width:100%; }
.anel circle{ fill:none; stroke-width:2; }
.anel .trilho{ stroke:var(--linha-forte); stroke-dasharray:6 8; }
.anel .linha-viva{
  stroke:var(--verde); stroke-linecap:round; stroke-dasharray:742; stroke-dashoffset:742;
  transform:rotate(-90deg); transform-origin:center;
}
@supports (animation-timeline: view()){
  .anel .linha-viva{ animation:tracar-anel linear both; animation-timeline:view(); animation-range:entry 15% cover 70%; }
}
@keyframes tracar-anel{ to{ stroke-dashoffset:371 } }  /* metade do anel = as 3 etapas que já funcionam */
.etapas-ciclo{ list-style:none; margin:0; padding:0; position:absolute; inset:0; }
.etapas-ciclo li{
  position:absolute; transform:translate(-50%,-50%); white-space:nowrap;
  font-size:.74rem; text-align:center;
}
.etapas-ciclo li b{ font-weight:600; }
.etapas-ciclo li::before{
  content:""; display:block; width:9px; height:9px; border-radius:50%; margin:0 auto 5px;
  background:var(--verde);
}
.etapas-ciclo .hoje b{ color:var(--tinta); }
.etapas-ciclo .futuro b{ color:var(--tinta-fraca); }
.etapas-ciclo .futuro::before{ background:var(--papel); border:1.5px dashed var(--tinta-fraca); }
/* as seis etapas em volta do anel: 0°, 60°, 120°, 180°, 240°, 300° */
.etapas-ciclo li:nth-child(1){ left:50%;   top:11%; }
.etapas-ciclo li:nth-child(2){ left:83%;   top:30.5%; }
.etapas-ciclo li:nth-child(3){ left:83%;   top:69.5%; }
.etapas-ciclo li:nth-child(4){ left:50%;   top:89%; }
.etapas-ciclo li:nth-child(5){ left:17%;   top:69.5%; }
.etapas-ciclo li:nth-child(6){ left:17%;   top:30.5%; }
.legenda-ciclo{
  margin:var(--e3) 0 0; text-align:center; font-size:.78rem; color:var(--tinta-fraca);
}
.legenda-ciclo b{ color:var(--verde-texto); font-weight:600; }
.duas-colunas{ display:grid; gap:var(--e4); margin:var(--e5) 0 0; }
.coluna h3{ margin:0 0 var(--e2); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.coluna h3.disponivel{ color:var(--verde-texto); }
.coluna h3.evoluindo{ color:var(--tinta-fraca); }
.lista{ margin:0; padding-left:1.1em; color:var(--tinta-media); font-size:.98rem; }
.lista li{ margin-bottom:6px; }
.lista.tracejada li{ color:var(--tinta-fraca); }

/* ========================= 7 e 8. ROADMAP ================================= */
.badge{
  display:inline-block; padding:5px 11px; border-radius:999px; font-size:.68rem;
  font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  border:1px dashed var(--verde); color:var(--verde-texto); background:rgba(0,193,110,.06);
}
.equacao{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:var(--e5) 0 0;
}
.equacao span{
  padding:8px 13px; border-radius:11px; background:var(--papel);
  border:1px solid var(--linha); font-size:.85rem; box-shadow:var(--sombra);
}
.equacao i{ font-style:normal; color:var(--tinta-fraca); font-weight:600; }
.equacao .seta{ color:var(--verde-texto); font-size:1.1rem; }
.equacao .saida{ border-color:var(--verde); color:var(--verde-texto); font-weight:600; background:rgba(0,193,110,.07); }
.aviso-roadmap{ margin:var(--e4) 0 0; font-size:.9rem; color:var(--tinta-fraca); }
.funcoes{ list-style:none; margin:var(--e5) 0 0; padding:0; display:grid; gap:12px; }
.funcoes li{
  padding:15px 17px; border-radius:14px; background:var(--papel);
  border:1px solid var(--linha); border-left:3px solid var(--linha-forte);
}
.funcoes b{ display:block; font-size:.95rem; margin-bottom:3px; }
.funcoes span{ font-size:.88rem; color:var(--tinta-fraca); }

/* ============================= 9. PRIVACIDADE ============================= */
.privacidade{ background:var(--papel-2); }
.confianca{ list-style:none; margin:var(--e5) 0 0; padding:0; display:grid; gap:11px; }
.confianca li{
  position:relative; padding:13px 16px 13px 42px; border-radius:13px;
  background:var(--papel); border:1px solid var(--linha); font-size:.94rem;
}
.confianca li::before{
  content:""; position:absolute; left:16px; top:50%; width:12px; height:7px;
  border-left:2px solid var(--verde); border-bottom:2px solid var(--verde);
  transform:translateY(-70%) rotate(-45deg);
}

/* ============================== 10. AGÊNCIAS ============================== */
.espacos{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; margin:var(--e5) 0 0; }
.espaco{
  padding:26px 14px; border-radius:14px; text-align:center; font-size:.85rem; font-weight:500;
  background:var(--papel); border:1px dashed var(--linha-forte); color:var(--tinta-media);
}
.agencias .botao{ margin-top:var(--e5); }

/* =============================== 11. PLANOS =============================== */
.planos{ display:grid; gap:var(--e3); margin:var(--e5) 0 0; }
.plano{
  padding:var(--e4); border-radius:var(--raio); background:var(--papel);
  border:1px solid var(--linha); box-shadow:var(--sombra);
}
.plano.destaque{ border:1.5px solid var(--verde); }
.plano h3{ font-size:1.15rem; }
.plano .para{ margin:6px 0 var(--e3); font-size:.88rem; color:var(--tinta-fraca); }
.plano ul{ margin:0; padding-left:1.05em; font-size:.93rem; color:var(--tinta-media); }
.plano li{ margin-bottom:5px; }
.plano li.fut{ color:var(--tinta-fraca); }
.plano li.fut i{ font-style:normal; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--verde-texto); border:1px dashed var(--verde); border-radius:6px; padding:1px 5px; margin-left:4px; }
.plano .preco{
  margin:var(--e3) 0 0; padding-top:var(--e3); border-top:1px solid var(--linha);
  font-size:.82rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--verde-texto);
}

/* ================================ 12. FAQ ================================= */
.faq details{
  border-bottom:1px solid var(--linha); padding:var(--e3) 0;
}
.faq details:first-of-type{ border-top:1px solid var(--linha); margin-top:var(--e5); }
.faq summary{
  cursor:pointer; font-weight:550; font-size:1.02rem; list-style:none;
  display:flex; justify-content:space-between; gap:var(--e3); align-items:flex-start;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; color:var(--verde-texto); font-size:1.3rem; line-height:1; flex:none;
  transition:transform .25s ease;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:var(--e2) 0 0; color:var(--tinta-media); font-size:.98rem; max-width:44em; }
@media (prefers-reduced-motion: no-preference){
  .faq details[open] p{ animation:abrir .3s ease both; }
}
@keyframes abrir{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }

/* =============================== 13. FINAL ================================ */
.final{ text-align:center; padding:var(--e6) 0 calc(var(--e6) + 10px); }
.final h2{ max-width:18ch; margin-inline:auto; }
.final .texto{ margin-inline:auto; text-align:center; }
.final em{ color:var(--verde-texto); }

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

/* ============================== RESPONSIVO ================================ */
@media (min-width:52rem){
  body{ font-size:18px; }
  /* no desktop a coluna de texto é estreita: os fragmentos voltam para dentro da tela */
  .f1{ left:7%;  top:22%; } .f2{ right:8%;  top:15%; } .f3{ left:4%;  top:54%; }
  .f4{ right:5%; top:46%; } .f5{ left:11%; bottom:16%; } .f6{ right:10%; bottom:20%; }
  .p1{ left:18%; top:33%; } .p2{ right:17%; top:28%; } .p5{ left:9%; top:74%; } .p6{ right:9%; top:68%; }
  .secao{ padding:calc(var(--e6) + 26px) 0; }
  .dois,.duas-colunas{ grid-template-columns:1fr 1fr; }
  .planos{ grid-template-columns:repeat(3,1fr); align-items:start; }
  .grade{ grid-template-columns:repeat(3,1fr); }
  .espacos{ grid-template-columns:repeat(4,1fr); }
  .funcoes{ grid-template-columns:repeat(2,1fr); }
  .confianca{ grid-template-columns:1fr 1fr; }
  .logo{ height:46px; }
  .video .moldura{ max-width:46rem; margin-inline:auto; }
  .botao{ width:auto; display:inline-block; min-width:19rem; }
  .caos .fecho,.hero h1{ max-width:22ch; }
  .etapas{ padding-left:44px; }
  .marco{ left:-44px; }
}

/* ============================ MENOS MOVIMENTO ============================= */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation:none !important; transition-duration:.001ms !important;
  }
  /* estados finais organizados — o significado não depende do movimento */
  .sobe{ opacity:1 !important; transform:none !important; }
  .cartao,.salvo,.frag,.ponto{ transform:none !important; opacity:1 !important; }
  .mapa .arestas path{ stroke-dashoffset:0 !important; }
  .anel .linha-viva{ stroke-dashoffset:371 !important; }
  .etapas::after{ transform:scaleY(1) !important; }
  .marco{ border-color:var(--verde) !important; background:var(--verde) !important; color:var(--tinta) !important; }
  .progresso i{ transform:scaleX(0) !important; }
  .salvo{ position:relative; }
  .pilha{ height:auto; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
}