/* Bússola das Cores – home da editora */
:root{
  --noite:#0D0B1A; --noite2:#16122B; --noite3:#221B3F;
  --papel:#FBF6EC; --claro:#F4EFE6; --apagado:#ABA4BF; --linha:rgba(255,255,255,.12);
  --vermelho:#FF5A5F; --laranja:#FF9F1C; --amarelo:#FFD23F; --verde:#3DDC97; --azul:#2EC4F1; --anil:#5B5FEF; --violeta:#B15CFF;
  --arco:linear-gradient(90deg,#FF5A5F,#FF9F1C,#FFD23F,#3DDC97,#2EC4F1,#5B5FEF,#B15CFF);
  --serif:Fraunces,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noite);color:var(--claro);font-family:var(--sans);font-size:18px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.02;margin:0 0 .4em;letter-spacing:-.015em;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.pular{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:10px 16px;border-radius:999px;z-index:300}
.pular:focus{left:12px}
.grad{background:var(--arco);-webkit-background-clip:text;background-clip:text;color:transparent}
.rotulo{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--apagado)}
.rotulo::before{content:"";width:28px;height:2px;background:var(--arco)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border-radius:999px;font-weight:800;font-size:15px;letter-spacing:.02em;text-decoration:none;border:1.5px solid rgba(255,255,255,.5);color:#fff;background:transparent;font-family:var(--sans);cursor:pointer;
  transition:transform 160ms var(--ease-out),background-color 150ms ease,border-color 150ms ease,color 150ms ease}
.btn:active{transform:scale(.97)}
.btn[aria-disabled=true]{opacity:.5;cursor:default;border-style:dashed}
.btn[aria-disabled=true]:active{transform:none}
.btn-arco{border:0;background:#fff;color:var(--noite);position:relative;isolation:isolate}
.btn-arco::after{content:"";position:absolute;inset:-2px;border-radius:999px;background:var(--arco);z-index:-1;filter:blur(10px);opacity:.7;transition:opacity 200ms ease}
a:focus-visible,button:focus-visible{outline:2px solid var(--amarelo);outline-offset:3px;border-radius:999px}
@media (hover:hover) and (pointer:fine){
  .btn:not([aria-disabled=true]):hover{border-color:#fff;background:rgba(255,255,255,.06)}
  .btn-arco:hover{background:#fff}
  .btn-arco:hover::after{opacity:.95}
}

/* ---------- carregamento ---------- */
.carregando{position:fixed;inset:0;z-index:200;background:var(--noite);display:flex;flex-direction:column;justify-content:flex-end;padding:0 5vw 6vh;transition:transform .9s cubic-bezier(.7,0,.2,1)}
.carregando.fim{transform:translateY(-100%)}
.carregando-num{font-family:var(--serif);font-size:clamp(90px,18vw,240px);line-height:.9;background:var(--arco);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:300}
.carregando-barra{height:2px;background:rgba(255,255,255,.12);margin-top:3vh}
.carregando-barra i{display:block;height:100%;width:0;background:var(--arco);transition:width .2s linear}
.sem-movimento .carregando{display:none}

/* ---------- topo ---------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:100;transition:background-color .35s ease,backdrop-filter .35s ease}
.topo.solido{background:rgba(13,11,26,.72);backdrop-filter:blur(14px)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:72px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-family:var(--serif);font-size:22px;white-space:nowrap}
.marca svg{width:36px;height:36px;flex:none}
.menu{display:flex;align-items:center;gap:2px}
.menu a{text-decoration:none;font-weight:600;font-size:15px;padding:10px 14px;border-radius:999px;color:var(--claro);white-space:nowrap;transition:background-color 150ms ease,transform 160ms var(--ease-out)}
.menu a:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.menu a:not(.btn):hover{background:rgba(255,255,255,.08)}}
.menu a.btn{min-height:44px;padding:8px 20px;margin-left:6px}
.menu .so-celular{display:none}
.menu-botao{display:none;appearance:none;background:transparent;border:1.5px solid rgba(255,255,255,.5);color:#fff;border-radius:999px;min-height:44px;padding:8px 16px;font:800 14px var(--sans);align-items:center;gap:10px;cursor:pointer;transition:transform 160ms var(--ease-out),border-color 150ms ease}
.menu-botao:active{transform:scale(.97)}
.menu-botao i{position:relative;width:16px;height:2px;background:currentColor;border-radius:2px;transition:background-color 150ms ease}
.menu-botao i::before,.menu-botao i::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform 200ms var(--ease-out)}
.menu-botao i::before{top:-5px}.menu-botao i::after{top:5px}
.aberto .menu-botao i{background:transparent}
.aberto .menu-botao i::before{transform:translateY(5px) rotate(45deg)}
.aberto .menu-botao i::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:820px){
  .marca{font-size:19px}.marca svg{width:30px;height:30px}.topo .wrap{min-height:62px;padding:0 16px}
  .menu-botao{display:inline-flex}
  .menu{position:absolute;top:62px;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:4px;padding:12px;border-radius:20px;background:rgba(22,18,43,.97);border:1px solid var(--linha);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
    opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;pointer-events:none;visibility:hidden;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 0s 180ms}
  .aberto .menu{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out),visibility 0s}
  .menu a{font-size:17px;padding:14px 16px;min-height:48px}
  .menu .so-celular{display:block}
  .menu a.btn{margin:6px 0 0}
  .topo.aberto{background:rgba(13,11,26,.92);backdrop-filter:blur(14px)}
}

/* ---------- 1. hero ---------- */
.hero{position:relative;height:165vh}
.hero .palco{position:sticky;top:0;height:100vh;height:100svh;min-height:620px;display:flex;align-items:center;overflow:hidden;padding:96px 0 90px}
.manchas{position:absolute;inset:0;z-index:0;pointer-events:none}
.manchas i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:vaga 18s ease-in-out infinite alternate}
.manchas i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:-10vw;background:#5B5FEF}
.manchas i:nth-child(2){width:34vw;height:34vw;right:-8vw;top:6vh;background:#FF5A5F;animation-duration:22s}
.manchas i:nth-child(3){width:30vw;height:30vw;left:30vw;bottom:-14vw;background:#FF9F1C;opacity:.4;animation-duration:26s}
.manchas i:nth-child(4){width:22vw;height:22vw;right:22vw;bottom:8vh;background:#3DDC97;opacity:.35;animation-duration:20s}
@keyframes vaga{to{transform:translate3d(6vw,4vh,0) scale(1.15)}}
.hero-grade{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(56px,8vw,124px);font-weight:300;margin:.18em 0 .22em}
.hero h1 em{font-style:italic;font-weight:400}
.hero .sub{font-size:clamp(18px,1.7vw,22px);color:var(--claro);opacity:.86;max-width:30em}
.hero .acoes{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.novo{display:inline-flex;align-items:center;gap:14px;margin-top:28px;padding:10px 18px 10px 10px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--linha);text-decoration:none;color:var(--claro);backdrop-filter:blur(6px);transition:transform 160ms var(--ease-out),border-color 150ms ease,background-color 150ms ease}
.novo:active{transform:scale(.98)}
.novo img{width:64px;height:auto;border-radius:6px;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.novo span{display:flex;flex-direction:column;line-height:1.3}
.novo small{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo)}
.novo b{font-family:var(--serif);font-weight:400;font-size:19px}
.novo i{font-style:normal;font-size:14px;font-weight:700;opacity:.8}
.novo i::after{content:" →";display:inline-block;transition:transform 200ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.novo:hover{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.1)}.novo:hover i::after{transform:translateX(4px)}}
.roda{position:relative;width:min(600px,44vw);aspect-ratio:1;justify-self:center}
.roda-gira{position:absolute;inset:0;animation:gira 90s linear infinite}
.roda-gira img{position:absolute;inset:0}
.roda .cor{-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 6%,transparent 13%);mask-image:radial-gradient(circle at 50% 50%,#000 6%,transparent 13%)}
.dica-rolar{position:absolute;left:50%;bottom:-46px;transform:translateX(-50%);font:600 14px var(--sans);color:var(--apagado);white-space:nowrap;letter-spacing:.04em}
.dica-rolar::after{content:" ↓";display:inline-block;animation:pulo 1.6s var(--ease-out) infinite}
@keyframes pulo{50%{transform:translateY(4px)}}
.roda img{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 0 80px -10px rgba(255,90,95,.35),0 40px 140px -10px rgba(91,95,239,.55)}
.roda::before{content:"";position:absolute;inset:-5%;border-radius:50%;border:1px dashed rgba(255,255,255,.22)}
.roda::after{content:"";position:absolute;inset:-11%;border-radius:50%;border:1px solid rgba(255,255,255,.08)}
@keyframes gira{to{transform:rotate(360deg)}}
.faixa{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);overflow:hidden;white-space:nowrap;padding:16px 0;background:rgba(13,11,26,.4);backdrop-filter:blur(6px)}
.faixa div{display:inline-block;animation:desliza 40s linear infinite}
.faixa span{font-family:var(--serif);font-style:italic;font-size:24px;margin:0 22px;color:var(--claro)}
.faixa b{display:inline-block;width:10px;height:10px;border-radius:50%;margin:0 4px;vertical-align:middle}
@keyframes desliza{to{transform:translateX(-50%)}}
@media (max-width:860px){
  .hero{height:150vh}
  .hero .palco{padding:78px 0 70px;align-items:flex-start;min-height:0}
  .dica-rolar{display:none}
  .hero-grade{grid-template-columns:1fr;gap:28px;text-align:left}
  .roda{width:min(66vw,38svh);order:-1;margin-top:4px}
  .novo{display:none}
  .hero h1{font-size:clamp(48px,14vw,72px)}
  .faixa span{font-size:19px;margin:0 14px}
}

/* ---------- 2. manifesto ---------- */
.manifesto{position:relative;height:180vh}
.manifesto .fixo{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.manifesto .wrap{position:relative;z-index:1}
.lapis-camada{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55}
.lapis{position:absolute;left:0;top:0;width:18px;height:min(26vh,210px);will-change:transform;
  background:linear-gradient(to bottom,#F08DAA 0 7%,#C9C2D6 7% 12%,var(--c) 12% 80%,#E9C9A0 80% 95%,var(--c) 95%);
  clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}
@media (max-width:860px){.lapis{width:12px;height:16vh}.lapis-camada{opacity:.4}}
.manifesto p{font-family:var(--serif);font-weight:300;font-size:clamp(34px,4.6vw,72px);line-height:1.12;margin:0;max-width:min(13em,calc(75vw - 360px))}
@media (max-width:860px){.manifesto p{max-width:none}}
.manifesto .pal{color:rgba(244,239,230,.25);transition:color .35s ease}
.manifesto .pal.acesa{color:var(--claro)}
.manifesto .pal.chave.acesa{background:var(--arco);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}

/* ---------- 3. jornada dos materiais ---------- */
.jornada{position:relative;height:580vh}
.palco-folha{position:relative;z-index:1;justify-self:center;width:100%;max-width:720px;display:grid;place-items:center}
.capa-alvo{position:absolute;left:50%;top:50%;width:62%;opacity:0;transform:translate(-50%,-50%);border-radius:6px;box-shadow:0 40px 80px -30px rgba(0,0,0,.85);pointer-events:none}
.folha-papel.pousando{box-shadow:0 18px 40px -10px rgba(0,0,0,.6)}
.trilho-mat.some{opacity:0;pointer-events:none}
.trilho-mat{transition:opacity 300ms ease}
.etapa.encaixe .btn{margin-top:18px}
.etapa.ativa{pointer-events:auto}
.pular-secao{position:absolute;right:24px;bottom:22px;z-index:3;font-size:14px;font-weight:700;color:var(--apagado);text-decoration:none;padding:10px 14px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center;gap:6px;transition:color 150ms ease,background-color 150ms ease}
@media (hover:hover) and (pointer:fine){.pular-secao:hover{color:#fff;background:rgba(255,255,255,.08)}}
.jornada .fixo{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:40px;max-width:1240px;margin:0 auto;padding:84px 24px 30px}
.jornada-fundo{position:absolute;inset:0;background:var(--noite);transition:background .8s ease;pointer-events:none}
.jornada-fundo::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 70% 50%,rgba(255,210,63,.18),transparent 70%),linear-gradient(120deg,rgba(255,90,95,.35),rgba(255,159,28,.3),rgba(255,210,63,.25),rgba(61,220,151,.25),rgba(46,196,241,.3),rgba(91,95,239,.35),rgba(177,92,255,.4));opacity:var(--final,0);transition:opacity .6s ease}
.jornada-texto{position:relative;z-index:1}
.etapas{position:relative;min-height:330px}
.etapa{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;pointer-events:none}
.etapa.ativa{opacity:1;transform:none}
.etapa .n{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--apagado)}
.etapa h2{font-size:clamp(46px,6vw,92px);font-weight:300;margin:.1em 0 .25em}
.etapa p{font-size:19px;color:var(--claro);opacity:.85;max-width:24em}
.etapa .dica{display:inline-block;margin-top:6px;font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--amarelo)}
.trilho-mat{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.trilho-mat button{appearance:none;border:1px solid var(--linha);background:rgba(255,255,255,.04);color:var(--claro);border-radius:999px;padding:8px 14px;font:600 14px var(--sans);display:flex;align-items:center;gap:8px;cursor:pointer;min-height:44px;transition:transform 160ms var(--ease-out),background-color 200ms ease,border-color 200ms ease}
.trilho-mat button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.trilho-mat button:hover{border-color:rgba(255,255,255,.4)}}
.trilho-mat button i{width:10px;height:10px;border-radius:50%;background:var(--c);opacity:.35;transition:opacity .3s}
.trilho-mat button.feito i,.trilho-mat button.agora i{opacity:1}
.trilho-mat button.agora{border-color:#fff;background:rgba(255,255,255,.1)}
.folha-papel{position:relative;z-index:2;width:100%;aspect-ratio:5/4;border-radius:10px;background:var(--papel);box-shadow:0 50px 100px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);overflow:hidden;transform:rotate(-1.5deg);will-change:transform}
.folha-papel canvas{width:100%;height:100%;display:block}
.folha-papel .marca-agua{position:absolute;right:14px;bottom:10px;font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(43,37,64,.35)}
@media (max-width:860px){
  .jornada .fixo{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:14px;padding-top:74px}
  .palco-folha{order:-1;max-width:min(92vw,46svh * 1.25)}
  .etapas{min-height:250px}
  .etapa h2{font-size:clamp(38px,11vw,56px)}
  .etapa p{font-size:16px}
  .trilho-mat{margin-top:6px;gap:6px}
  .trilho-mat button{padding:6px 12px;font-size:13px;min-height:44px}
  .pular-secao{right:12px;bottom:10px;font-size:13px}
}

/* ---------- 3. o método: números, paleta e cor ---------- */
.metodo{position:relative;height:300vh;background:linear-gradient(180deg,var(--noite),var(--noite3) 30%,var(--noite3) 70%,var(--noite))}
.metodo .fixo{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:48px;max-width:1240px;margin:0 auto;padding:84px 24px 40px}
.passos-m{position:relative;min-height:260px;margin-top:10px}
.pm{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(20px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.pm.ativa{opacity:1;transform:none}
.pm .n{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--apagado)}
.pm h2{font-size:clamp(40px,4.8vw,76px);font-weight:300;margin:.12em 0 .3em}
.pm p{font-size:19px;opacity:.86;max-width:25em}
.paleta-m{margin-top:16px;opacity:0;transform:translateX(-24px);transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out)}
.paleta-m.on{opacity:1;transform:none}
.paleta-m small{display:block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--apagado);margin-bottom:10px}
.paleta-m ul{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.paleta-m li{display:flex;flex-direction:column;align-items:center;gap:6px;width:66px;opacity:0;transform:translateY(10px);transition:opacity 400ms var(--ease-out) var(--d),transform 400ms var(--ease-out) var(--d)}
.paleta-m.on li{opacity:1;transform:none}
.paleta-m li i{width:44px;height:44px;border-radius:50%;background:var(--c);display:flex;align-items:center;justify-content:center;font:800 15px var(--sans);font-style:normal;color:#1a1a1a;border:2px solid rgba(255,255,255,.25);transition:transform 200ms var(--ease-out),box-shadow 200ms ease}
.paleta-m li span{font-size:12px;color:var(--apagado);text-align:center;line-height:1.2}
.paleta-m li.agora i{transform:scale(1.18);box-shadow:0 0 0 3px #fff,0 0 24px var(--c)}
.paleta-m li.feito i{border-color:#fff}
.folha-m{justify-self:center;width:100%;max-width:600px;aspect-ratio:1;background:var(--papel);border-radius:14px;padding:3%;box-shadow:0 50px 100px -40px rgba(0,0,0,.8);transform:rotate(1.2deg)}
.folha-m svg{width:100%;height:100%;display:block}
.folha-m [class^="r"]{transition:fill 500ms var(--ease-out)}
.folha-m .nm{opacity:0;transition:opacity 300ms ease}
.folha-m .nm.on{opacity:1}
.cheio-1 .r1{fill:var(--c1)}.cheio-2 .r2{fill:var(--c2)}.cheio-3 .r3{fill:var(--c3)}.cheio-4 .r4{fill:var(--c4)}.cheio-5 .r5{fill:var(--c5)}.cheio-6 .r6{fill:var(--c6)}
.cheio-1 .t1,.cheio-2 .t2,.cheio-3 .t3,.cheio-4 .t4,.cheio-5 .t5,.cheio-6 .t6{opacity:0}
@media (max-width:860px){
  .metodo .fixo{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:12px;padding-top:72px}
  .folha-m{order:-1;max-width:min(80vw,40svh);transform:none}
  .passos-m{min-height:190px}
  .pm h2{font-size:clamp(30px,8.6vw,42px)}
  .pm p{font-size:16px}
  .paleta-m{margin-top:0}
  .paleta-m li{width:46px}.paleta-m li i{width:36px;height:36px;font-size:13px}.paleta-m li span{display:none}
}

/* ---------- 5. livros ---------- */
.livros{padding:14vh 0}
.livros h2{font-size:clamp(44px,6vw,96px);font-weight:300}
.estante{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;margin-top:6vh}
.livro{position:relative;border-radius:24px;overflow:hidden;color:#fff;background:var(--noite2);border:1px solid var(--linha);display:flex;flex-direction:column;transition:transform 250ms var(--ease-out),border-color 150ms ease}
.livro.destaque{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center}
.livro .arte{display:block;aspect-ratio:1;overflow:hidden;background:#1d1838}
.livro .arte img{width:100%;height:100%;object-fit:cover;transition:transform 400ms var(--ease-out)}
.livro .info{padding:30px 36px 36px}
.livro .info small{font:800 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--apagado)}
.livro h3{font-size:clamp(34px,3.6vw,56px);font-weight:400;margin:.25em 0 .25em}
.livro h3 a{text-decoration:none}
.livro p{opacity:.85;font-size:17px;max-width:30em}
.livro .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
@media (hover:hover) and (pointer:fine){.livro:hover{border-color:rgba(255,255,255,.3)}.livro:hover .arte img{transform:scale(1.03)}}
.proximos{margin-top:56px;border-top:1px solid var(--linha);padding-top:28px}
.proximos h3{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--apagado);margin:0 0 16px}
.proximos ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.proximos li{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--linha);border-radius:16px}
.proximos li i{flex:none;width:40px;height:40px;border-radius:50%}
.proximos li span{display:flex;flex-direction:column;line-height:1.25;flex:1}
.proximos li b{font-family:var(--serif);font-weight:400;font-size:20px}
.proximos li small{font-size:14px;color:var(--apagado)}
.proximos li em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--amarelo)}
@media (max-width:760px){.livro.destaque{grid-template-columns:1fr}.livro .info{padding:24px 22px 28px}}

/* ---------- 6. comunidade ---------- */
.comunidade{position:relative;padding:18vh 0;text-align:center;overflow:hidden}
.comunidade .manchas i{opacity:.3}
.comunidade .wrap{position:relative;z-index:1}
.comunidade h2{font-size:clamp(40px,5.4vw,84px);font-weight:300}
.hashtag{font-family:var(--serif);font-style:italic;font-size:clamp(40px,8.6vw,140px);line-height:1;margin:.25em 0 .35em;word-break:break-word}
.comunidade .acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.aviso{display:inline-block;margin-top:40px;max-width:40em;padding:16px 22px;border:1px dashed rgba(255,255,255,.35);border-radius:16px;font-size:15px;opacity:.9;text-align:left}
.aviso strong{color:var(--amarelo)}
.mural{position:relative;z-index:1;margin:56px 0 10px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mural-trilho{display:flex;gap:18px;width:max-content;animation:mural 70s linear infinite}
.mural:hover .mural-trilho,.mural:focus-within .mural-trilho{animation-play-state:paused}
.mural img{width:230px;height:auto;border-radius:16px;background:#fff;box-shadow:0 20px 40px -20px rgba(0,0,0,.7);transform:rotate(-1.5deg)}
.mural img:nth-child(even){transform:rotate(1.8deg) translateY(14px)}
@keyframes mural{to{transform:translateX(calc(-50% - 9px))}}
.legenda-mural{position:relative;z-index:1;text-align:center;font-size:14px;color:var(--apagado);margin:8px 0 0}
@media (max-width:760px){.mural img{width:160px}}
/* ---------- 8. chamada final ---------- */
.final-ed{padding:16vh 0 18vh;text-align:center;background:radial-gradient(60% 70% at 50% 100%,rgba(177,92,255,.22),transparent 70%)}
.final-ed h2{font-size:clamp(44px,7vw,112px);font-weight:300}
.final-ed p{font-size:20px;opacity:.85}
.final-ed .acoes{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}

/* ---------- rodapé ---------- */
.rodape{border-top:1px solid var(--linha);padding:48px 0 40px;font-size:15px;color:var(--apagado)}
.rodape .linha1{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.rodape .linha1 nav{display:flex;gap:18px;flex-wrap:wrap}
.rodape a{text-decoration:none;transition:color 150ms ease}
.rodape .linha1 nav a{padding:10px 0;display:inline-block}
@media (hover:hover) and (pointer:fine){.rodape a:hover{color:#fff}}
.rodape .arco-linha{height:3px;background:var(--arco);border-radius:3px;margin:28px 0}

/* ---------- surgir ---------- */
.js .surge{opacity:0;transform:translateY(34px);transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out)}
.js .surge.visivel{opacity:1;transform:none}

/* ---------- movimento reduzido ---------- */
.sem-movimento .manchas i,.sem-movimento .roda img,.sem-movimento .faixa div{animation:none}
.sem-movimento .manifesto{height:auto;padding:16vh 0}
.sem-movimento .manifesto .fixo{position:relative;height:auto}
.sem-movimento .manifesto .pal{color:var(--claro)}
.sem-movimento .surge{opacity:1 !important;transform:none !important;transition:none}
.sem-movimento .btn:active,.sem-movimento .trilho-mat button:active,.sem-movimento .novo:active{transform:none}
.sem-movimento .pular-secao{display:none}
.sem-movimento .carta-giro{transform:none !important}
.sem-movimento .verso{position:relative;transform:none;margin-top:16px}
.sem-movimento .carta-giro{aspect-ratio:auto}
.sem-movimento .frente{display:none}
.sem-movimento .etapas{min-height:0}
.sem-movimento .etapa{position:relative;opacity:1;transform:none;margin-bottom:28px;pointer-events:auto}
/* ---------- sem JavaScript (buscadores, leitores e navegadores sem script) ---------- */
html:not(.js) .manifesto .pal{color:var(--claro)}
html:not(.js) .etapas{min-height:0}
html:not(.js) .etapa{position:relative;opacity:1;transform:none;margin-bottom:28px}
html:not(.js) .carregando{display:none}
html:not(.js) .menu-botao{display:none}

.sem-movimento .hero .palco,.sem-movimento .metodo .fixo,.sem-movimento .manifesto .fixo{position:relative;height:auto;min-height:0}
.sem-movimento .hero .palco{padding:110px 0 120px}
.sem-movimento .dica-rolar,.sem-movimento .roda-gira{animation:none}
.sem-movimento .dica-rolar{display:none}
.sem-movimento .metodo{padding:12vh 0}
.sem-movimento .passos-m{min-height:0}
.sem-movimento .pm{position:relative;opacity:1;transform:none;margin-bottom:24px}
.sem-movimento .lapis-camada{display:none}
.sem-movimento .mural{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
.sem-movimento .mural-trilho{animation:none}
.sem-movimento .capa-alvo{display:none}
.sem-movimento .etapa.encaixe{display:block}
html:not(.js) .hero,html:not(.js) .metodo{height:auto}
html:not(.js) .hero .palco,html:not(.js) .metodo .fixo{position:relative;height:auto}
html:not(.js) .roda .cor{-webkit-mask-image:none;mask-image:none}
html:not(.js) .pm{position:relative;opacity:1;transform:none;margin-bottom:24px}
html:not(.js) .passos-m{min-height:0}
html:not(.js) .paleta-m{opacity:1;transform:none}html:not(.js) .paleta-m li{opacity:1;transform:none}
html:not(.js) .folha-m .nm{opacity:1}
html:not(.js) .lapis-camada{display:none}
.link-galeria{display:inline-flex;align-items:center;gap:8px;margin-top:18px;min-height:44px;font-size:15px;font-weight:700;color:var(--claro);opacity:.85;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3);transition:opacity 150ms ease}
.link-galeria span{text-decoration:none;color:var(--amarelo)}
@media (hover:hover) and (pointer:fine){.link-galeria:hover{opacity:1;text-decoration-color:#fff}}
@media (max-width:1100px) and (min-width:821px){.menu a{padding:10px 10px;font-size:14px}}