/* =========================================================
   Paula Peclat · Educação Tecnológica — site.css
   Identidade: logo 3D arredondado, fundo preto, blocos de cor
   ========================================================= */

/* ---------- fontes locais (sem rastreamento de terceiros) ---------- */
@font-face{font-family:"Fredoka";src:url("../fonts/fredoka.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Atkinson";src:url("../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url("../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"AtkMono";src:url("../fonts/atkinson-hyperlegible-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

/* ---------- tokens (cores tiradas do logo) ---------- */
:root{
  color-scheme:dark;
  --bg:#030306; --bg-2:#0A0A12; --card:#101019; --card-2:#161622; --line:#262636;
  --ink:#F6F2EA; --ink-2:#BDB8CF; --ink-3:#8A86A3;
  --yellow:#FCB602; --orange:#FF9A1F; --purple:#8040E2; --violet:#A26BFF;
  --pink:#F4579C; --cyan:#22B8EA; --blue:#1A8CFF; --lime:#78BD29; --teal:#26C79C;
  --display:"Fredoka",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"AtkMono",ui-monospace,"SFMono-Regular",monospace;
  --r:24px; --r-s:16px;
  --pad:clamp(16px,4.5vw,48px);
  --accent:var(--yellow); --accent-ink:#1A1206;
}
body[data-page="escolas"]{--accent:var(--cyan);--accent-ink:#04202B;--c:var(--cyan)}
body[data-page="empresas"]{--accent:var(--lime);--accent-ink:#132006;--c:var(--lime)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px;hanging-punctuation:first last}
body{min-height:100dvh;background:var(--bg);color:var(--ink);font:400 clamp(1rem,.96rem + .2vw,1.125rem)/1.62 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:10px}
::selection{background:var(--purple);color:#fff}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--yellow);color:#000;padding:10px 16px;border-radius:12px;font-weight:700;transition:top .2s}
.skip:focus{top:12px}
.wrap{width:min(1240px,100% - 2*var(--pad));margin-inline:auto}
section{padding-block:clamp(48px,7vw,96px);position:relative}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(2rem,1.3rem + 3.4vw,3.6rem)}
h3{font-size:clamp(1.2rem,1.1rem + .4vw,1.45rem)}
p{text-wrap:pretty}
.lead{font-size:clamp(1.05rem,1rem + .45vw,1.28rem);color:var(--ink-2);max-width:62ch}
.y{color:var(--yellow)}.p{color:var(--violet)}.k{color:var(--pink)}.c{color:var(--cyan)}.g{color:var(--lime)}.o{color:var(--orange)}.b{color:var(--blue)}

/* rótulo no estilo "EDUCAÇÃO TECNOLÓGICA" */
.eyebrow{display:inline-flex;align-items:center;gap:.7em;font:500 clamp(.72rem,.68rem + .15vw,.82rem)/1.3 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow::before{content:"</>";letter-spacing:0;color:var(--accent);font-weight:700}

/* linha do logo: azul · roxo · amarelo · rosa · verde */
.logo-line{display:flex;align-items:center;gap:8px;width:min(340px,100%);margin:18px 0}
.logo-line i{height:4px;border-radius:4px;flex:1}
.logo-line i:nth-child(1){background:var(--blue)}
.logo-line i:nth-child(3){background:var(--yellow);flex:2.4}
.logo-line i:nth-child(5){background:var(--lime)}
.logo-line i:nth-child(2),.logo-line i:nth-child(4){flex:none;width:6px;height:6px;border-radius:50%}
.logo-line i:nth-child(2){background:var(--purple)}
.logo-line i:nth-child(4){background:var(--pink)}
.center .logo-line{margin-inline:auto}

/* palavra "Peclat" multicolorida, como no logo */
.peclat span:nth-child(1){color:var(--violet)}
.peclat span:nth-child(2){color:var(--cyan)}
.peclat span:nth-child(3){color:var(--lime)}
.peclat span:nth-child(4){color:var(--yellow)}
.peclat span:nth-child(5){color:var(--pink)}
.peclat span:nth-child(6){color:var(--blue)}

/* volume "massinha" do logo */
.clay{box-shadow:inset 0 3px 0 rgb(255 255 255 / .38),inset 0 -6px 0 rgb(0 0 0 / .22),0 14px 34px -14px var(--glow,rgb(0 0 0 / .8))}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.85em 1.45em;border-radius:999px;border:0;font:600 1.05rem/1 var(--display);letter-spacing:.01em;text-decoration:none;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s;touch-action:manipulation}
.btn-main{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 3px 0 rgb(255 255 255 / .45),inset 0 -5px 0 rgb(0 0 0 / .18),0 7px 0 color-mix(in oklab,var(--accent) 50%,#000),0 18px 40px -12px color-mix(in oklab,var(--accent) 70%,transparent)}
.btn-main:active{transform:translateY(5px);box-shadow:inset 0 3px 0 rgb(255 255 255 / .45),0 2px 0 color-mix(in oklab,var(--accent) 50%,#000)}
.btn-ghost{background:rgb(255 255 255 / .03);border:2px solid var(--line);color:var(--ink)}
@media (hover:hover){
  .btn-main:hover{transform:translateY(-2px)}
  .btn-ghost:hover{border-color:var(--ink-3);background:rgb(255 255 255 / .06)}
}

/* ---------- cabeçalho ---------- */
.top{position:sticky;top:0;z-index:50;padding-top:env(safe-area-inset-top);background:rgb(3 3 6 / .78);border-bottom:1px solid rgb(255 255 255 / .06)}
@supports (backdrop-filter:blur(1px)){.top{background:rgb(3 3 6 / .62);backdrop-filter:blur(16px) saturate(150%)}}
.top .wrap{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);min-height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{width:42px;height:42px;border-radius:12px}
.brand b{font:700 1.28rem/1 var(--display);letter-spacing:-.01em;white-space:nowrap}
.brand b .dot{color:var(--pink)}
.brand small{display:block;font:500 .58rem/1 var(--mono);letter-spacing:.24em;color:var(--ink-3);margin-top:5px;text-transform:uppercase}
.nav{display:flex;gap:clamp(12px,1.6vw,26px);margin-left:auto}
.nav a{text-decoration:none;color:var(--ink-2);font-weight:600;font-size:.95rem;padding:8px 2px;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:3px;border-radius:3px;background:var(--accent);transform:scaleX(0);transition:transform .2s}
@media (hover:hover){.nav a:hover{color:var(--ink)}.nav a:hover::after{transform:scaleX(1)}}
.top .btn{flex:none;min-height:44px;padding:.7em 1.15em;font-size:.98rem}
.menu-btn{display:none;width:46px;height:46px;border-radius:14px;border:2px solid var(--line);background:transparent;place-items:center}
.menu-btn span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;box-shadow:0 -6px 0 var(--ink),0 6px 0 var(--ink)}
@media (max-width:1080px){
  .nav{position:fixed;inset:calc(70px + env(safe-area-inset-top)) 0 auto 0;flex-direction:column;gap:0;padding:8px var(--pad) 20px;background:var(--bg);border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .25s;visibility:hidden}
  .nav.open{transform:none;visibility:visible}
  .nav a{padding:14px 0;font-size:1.1rem;border-bottom:1px solid var(--line)}
  .menu-btn{display:grid;margin-left:auto}
  .top .btn{display:none}
  .hud{margin-left:auto}
  .menu-btn{margin-left:0}
}
@media (max-width:360px){.brand small{display:none}.brand b{font-size:1.1rem}}

/* ---------- navegação: página atual ---------- */
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- HUD de missões ---------- */
.hud{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px 6px 8px;border-radius:16px;border:1.5px solid var(--line);background:var(--bg-2);font:600 .9rem/1 var(--display);white-space:nowrap}
.hud .lvl{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--yellow);color:#1A1206;font-size:.95rem;box-shadow:inset 0 2px 0 rgb(255 255 255 / .45),inset 0 -3px 0 rgb(0 0 0 / .18)}
.hud .bar{width:64px;height:8px;border-radius:8px;background:var(--line);overflow:hidden}
.hud .bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--yellow));transition:width .6s}
@media (max-width:520px){.hud .bar,.hud .xp-n{display:none}}
body[data-hud="off"] .hud{display:none}

dialog.quests{margin:auto;width:min(480px,100% - 32px);max-height:min(640px,90dvh);border:1px solid var(--line);border-radius:28px;background:var(--card);color:var(--ink);padding:clamp(20px,4vw,30px)}
dialog.quests::backdrop{background:rgb(0 0 0 / .65);backdrop-filter:blur(4px)}
.quests header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.quests h2{font-size:1.7rem}
.quests .close{width:44px;height:44px;flex:none;border-radius:14px;border:1.5px solid var(--line);background:transparent;font:700 1.2rem var(--display)}
.quests .rank{color:var(--ink-2);margin-bottom:12px}
.quests .big-bar{height:12px;border-radius:12px;background:var(--line);overflow:hidden;margin-bottom:18px}
.quests .big-bar i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--yellow))}
.quests ol{list-style:none;padding:0;display:grid;gap:8px}
.quests li{display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--bg-2)}
.quests li .chk{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;border:2px dashed var(--line);font:700 1rem var(--display)}
.quests li.done .chk{border:0;background:var(--lime);color:#132006;box-shadow:inset 0 2px 0 rgb(255 255 255 / .4),inset 0 -3px 0 rgb(0 0 0 / .18)}
.quests li.done b{text-decoration:line-through;text-decoration-color:var(--ink-3);color:var(--ink-2)}
.quests li a{font-weight:700;color:var(--yellow);text-decoration:none;font-size:.9rem}
.quests li small{display:block;color:var(--ink-3);font-size:.82rem}
.quests .xpv{font:600 .9rem var(--mono);color:var(--yellow)}
.quests .note{margin-top:14px;font-size:.82rem;color:var(--ink-3)}

.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:120;translate:-50% 0;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:18px;background:var(--card-2);border:1.5px solid var(--yellow);box-shadow:0 20px 50px -10px #000;font:600 1rem var(--display);max-width:calc(100% - 32px)}
.toast .lvl{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--yellow);color:#1A1206}
.toast[hidden]{display:none}
@media (prefers-reduced-motion:no-preference){.toast:not([hidden]){animation:pop .35s cubic-bezier(.2,1.4,.4,1)}@keyframes pop{from{translate:-50% 30px;opacity:0}}}

/* ---------- portas da home (seleção de fase) ---------- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px;margin-top:clamp(28px,4vw,44px)}
.door{position:relative;display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,30px);border-radius:30px;border:1.5px solid var(--line);background:linear-gradient(180deg,color-mix(in oklab,var(--c) 14%,var(--card)),var(--card) 60%);text-decoration:none;transition:transform .2s,border-color .2s;min-height:240px}
.door .tok{width:64px;height:64px;border-radius:20px;background:var(--c);--glow:var(--c);display:grid;place-items:center;color:#fff;font:700 1.1rem var(--mono);position:relative}
.door .tok.face::before,.door .tok.face::after{content:"";position:absolute;top:42%;width:15%;aspect-ratio:1;border-radius:50%;background:#fff}
.door .tok.face::before{left:28%}.door .tok.face::after{right:28%}
.door .tok.tri{background:none;box-shadow:none}
.door .tok.tri::before{content:"";width:100%;height:100%;background:var(--c);border-radius:12px;clip-path:polygon(18% 8%,96% 52%,18% 96%)}
.door .lvl-tag{position:absolute;top:22px;right:24px;font:500 .72rem var(--mono);letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase}
.door h2{font-size:clamp(1.6rem,1.3rem + 1vw,2rem)}
.door p{color:var(--ink-2)}
.door .go{margin-top:auto;font:600 1.05rem var(--display);color:var(--c)}
@media (hover:hover){.door:hover{transform:translateY(-5px);border-color:var(--c)}}

/* ---------- trilha da página (fase atual do funil) ---------- */
.phase{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px;font:500 .78rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.phase a,.phase span{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.phase i{width:22px;height:22px;border-radius:7px;border:2px solid var(--line);display:inline-grid;place-items:center;font-style:normal;font-size:.7rem}
.phase .on{color:var(--ink)}
.phase .on i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.phase .ok i{background:var(--lime);border-color:var(--lime);color:#132006}
.phase .sep{width:18px;height:2px;background:var(--line);border-radius:2px}

/* ---------- faixa "próxima fase" ---------- */
.next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:clamp(22px,3vw,32px);border-radius:30px;border:1.5px solid var(--accent);background:radial-gradient(500px 200px at 0% 0%,color-mix(in oklab,var(--accent) 22%,transparent),transparent 70%),var(--card)}
.next .eyebrow{margin-bottom:6px}
.next h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem)}
.next.locked{border-style:dashed;border-color:var(--line)}

/* ---------- quiz da jornada ---------- */
.quiz{background:var(--card);border:1px solid var(--line);border-radius:30px;padding:clamp(20px,3.4vw,38px)}
.quiz-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font:500 .8rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.quiz-bar{height:10px;border-radius:10px;background:var(--line);overflow:hidden;margin-bottom:clamp(22px,3vw,30px)}
.quiz-bar i{display:block;height:100%;width:var(--p,25%);background:linear-gradient(90deg,var(--blue),var(--violet),var(--pink),var(--yellow));transition:width .4s}
.q-step h2{font-size:clamp(1.6rem,1.3rem + 1.4vw,2.3rem);margin-bottom:18px}
.q-step[hidden]{display:none}
.big-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:10px}
.big-opts label{position:relative}
.big-opts input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.big-opts span{display:flex;flex-direction:column;gap:4px;min-height:72px;justify-content:center;padding:14px 16px;border-radius:18px;border:1.5px solid var(--line);background:var(--bg-2);font:600 1.08rem var(--display);transition:all .15s}
.big-opts span small{font:400 .86rem var(--body);color:var(--ink-3)}
.big-opts input:checked+span{border-color:var(--yellow);background:color-mix(in oklab,var(--yellow) 14%,var(--bg-2));box-shadow:0 0 0 3px color-mix(in oklab,var(--yellow) 30%,transparent)}
.big-opts input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.ages{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px}
.ages span{min-height:64px;align-items:center;font-size:1.4rem}
.q-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:clamp(22px,3vw,30px)}
.q-nav .btn[disabled]{opacity:.4;pointer-events:none}
.reco{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,3vw,32px);align-items:start}
@media (max-width:820px){.reco{grid-template-columns:1fr}}
.reco .unlock{display:inline-flex;align-items:center;gap:8px;font:600 .9rem var(--display);color:var(--lime);margin-bottom:8px}
.reco h2{font-size:clamp(1.8rem,1.4rem + 1.8vw,2.6rem);margin-bottom:10px}
.reco .plan{gap:12px}
.reco .redo{background:none;border:0;color:var(--ink-2);text-decoration:underline;font:inherit;min-height:44px}

/* ---------- hero ---------- */
.hero{padding-top:clamp(28px,6vw,72px);padding-bottom:clamp(48px,7vw,96px);overflow:clip}
.hero.short h1{font-size:clamp(2.2rem,1.4rem + 3.6vw,4rem)}
.glow{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(520px 420px at 8% 4%,rgb(128 64 226 / .38),transparent 70%),
  radial-gradient(460px 380px at 96% 40%,color-mix(in oklab,var(--accent) 26%,transparent),transparent 70%),
  radial-gradient(420px 300px at 45% 105%,rgb(244 87 156 / .22),transparent 70%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.45rem,1.4rem + 5vw,5.2rem);font-weight:700;margin:16px 0 4px}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
@media (max-width:480px){.hero .actions .btn{flex:1 1 100%}}
.chips-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.pill{font:500 .82rem/1.2 var(--mono);padding:.6em 1em;border-radius:999px;border:1.5px solid var(--c,var(--line));color:var(--c,var(--ink-2));background:color-mix(in oklab,var(--c,#000) 8%,transparent)}

/* formas flutuantes do logo */
.stage{position:relative;padding:clamp(18px,4vw,40px)}
.shape{position:absolute;z-index:2;pointer-events:none;border-radius:22%;display:grid;place-items:center;--glow:var(--sc)}
.shape.code{width:clamp(48px,7vw,74px);aspect-ratio:1;background:var(--pink);--sc:rgb(244 87 156 / .7);top:-4px;left:-6px;rotate:-14deg;color:#fff;font:700 clamp(.85rem,1.4vw,1.15rem)/1 var(--mono)}
.shape.face{width:clamp(40px,5.6vw,58px);aspect-ratio:1;background:var(--cyan);--sc:rgb(34 184 234 / .7);bottom:12%;left:-14px;rotate:10deg}
.shape.face::before,.shape.face::after,.bot::before,.bot::after{content:"";position:absolute;top:44%;width:15%;aspect-ratio:1;border-radius:50%;background:#fff}
.shape.face::before,.bot::before{left:28%}.shape.face::after,.bot::after{right:28%}
.shape.tri{width:clamp(44px,6vw,64px);aspect-ratio:1;background:var(--teal);border-radius:12px;clip-path:polygon(18% 8%,96% 52%,18% 96%);top:6%;right:-8px;rotate:8deg}
.shape.ball{width:clamp(22px,3vw,34px);aspect-ratio:1;border-radius:50%;background:var(--blue);--sc:rgb(26 140 255 / .7);top:-14px;right:22%}
.shape.ball2{width:clamp(20px,2.6vw,30px);aspect-ratio:1;border-radius:50%;background:var(--purple);--sc:rgb(128 64 226 / .8);bottom:-8px;right:12%}
.shape.star{width:20px;aspect-ratio:1;background:var(--orange);clip-path:polygon(50% 0,63% 36%,100% 38%,70% 60%,80% 98%,50% 76%,20% 98%,30% 60%,0 38%,37% 36%);top:-18px;left:38%}
@media (prefers-reduced-motion:no-preference){
  .shape{animation:float 6s ease-in-out infinite}
  .shape:nth-child(2n){animation-duration:7.5s;animation-delay:-2s}
  .shape:nth-child(3n){animation-duration:5.2s;animation-delay:-1s}
  @keyframes float{50%{translate:0 -10px}}
}

/* ---------- mini jogo ---------- */
.game{position:relative;background:linear-gradient(180deg,var(--card-2),var(--card));border:1px solid var(--line);border-radius:30px;padding:clamp(16px,2.6vw,24px);box-shadow:0 40px 80px -40px #000,0 0 0 1px rgb(255 255 255 / .02) inset}
.game-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:14px}
.game-head b{font:600 1.3rem/1 var(--display)}
.game-head span{font:500 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.board{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:clamp(4px,1vw,7px);aspect-ratio:1;margin-bottom:14px}
.cell{border-radius:12px;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;transition:background .2s}
.cell.wall{background:var(--purple);border-color:transparent;box-shadow:inset 0 3px 0 rgb(255 255 255 / .35),inset 0 -5px 0 rgb(0 0 0 / .25),0 6px 16px -6px rgb(128 64 226 / .8)}
.cell.trail{background:color-mix(in oklab,var(--purple) 32%,var(--bg-2));border-color:color-mix(in oklab,var(--purple) 50%,var(--line))}
.bot{position:relative;width:72%;aspect-ratio:1;border-radius:24%;background:var(--cyan);box-shadow:inset 0 3px 0 rgb(255 255 255 / .45),inset 0 -5px 0 rgb(0 0 0 / .2),0 6px 18px -4px rgb(34 184 234 / .8)}
.goal{width:72%;aspect-ratio:1;background:var(--yellow);clip-path:polygon(50% 0,63% 36%,100% 38%,70% 60%,80% 98%,50% 76%,20% 98%,30% 60%,0 38%,37% 36%);filter:drop-shadow(0 0 10px rgb(252 182 2 / .7))}
.cmds{display:grid;grid-template-columns:repeat(4,1fr) 1.2fr 1.8fr;gap:6px}
@media (max-width:400px){.cmds{grid-template-columns:repeat(4,1fr)}.cmds .clr,.cmds .run{grid-column:span 2}}
.cmds button{min-height:46px;white-space:nowrap;padding:0 4px;border-radius:14px;border:1px solid var(--line);background:var(--bg-2);font:700 1.15rem/1 var(--display)}
.cmds .clr,.cmds .run{font-size:clamp(.82rem,.75rem + .3vw,1rem)}
.cmds .run{background:var(--lime);color:#132006;border:0;box-shadow:inset 0 3px 0 rgb(255 255 255 / .4),inset 0 -4px 0 rgb(0 0 0 / .18)}
@media (hover:hover){.cmds button:not(.run):hover{border-color:var(--ink-3)}}
.seq{min-height:44px;margin:12px 0 8px;display:flex;flex-wrap:wrap;gap:5px;font:500 .9rem var(--mono);color:var(--ink-2);padding:8px;border-radius:14px;border:1.5px dashed var(--line)}
.seq em{font-style:normal;background:var(--card-2);border-radius:7px;padding:2px 8px}
.seq:empty::before{content:"monte sua sequência de comandos";color:var(--ink-3)}
.game-msg{font-size:.93rem;color:var(--ink-2);min-height:3em}
.game-msg a{color:var(--yellow);font-weight:700}

/* ---------- método ---------- */
.sec-head{display:grid;gap:14px;margin-bottom:clamp(32px,5vw,56px);max-width:860px}
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px}
.pillar{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,30px);overflow:hidden;container-type:inline-size}
.pillar .ico{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;margin-bottom:18px;background:var(--c);--glow:var(--c);color:#0b0b10;font:700 1.25rem/1 var(--mono)}
.pillar h3{margin-bottom:10px}
.pillar p{color:var(--ink-2);font-size:.98rem}
.pillar .n{position:absolute;top:18px;right:20px;font:500 .78rem var(--mono);color:var(--ink-3)}

/* ---------- trilha (do GitHub) ---------- */
#jornada{background:linear-gradient(180deg,#071425,#05070D 60%,var(--bg));border-block:1px solid var(--line);overflow:clip}
.trail-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(32px,5vw,52px)}
.trail-top h2{text-transform:uppercase;letter-spacing:.02em}
.trail-top .sub{color:var(--ink-2);margin-top:8px}
.xp{font:600 1rem/1 var(--display);padding:.75em 1.2em;border-radius:999px;border:2px solid rgb(255 255 255 / .55);background:rgb(26 140 255 / .18);white-space:nowrap}
.rocket{font-size:2.4rem;display:inline-block;rotate:-10deg}
@media (prefers-reduced-motion:no-preference){.rocket{animation:float 4s ease-in-out infinite}}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;counter-reset:s}
.step{position:relative;padding:22px;border-radius:var(--r-s);border:1px solid var(--line);background:rgb(16 16 25 / .8)}
.step::before{counter-increment:s;content:"0" counter(s);display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:14px;font:700 1.1rem var(--display);background:var(--c);color:#0b0b10;box-shadow:inset 0 3px 0 rgb(255 255 255 / .4),inset 0 -4px 0 rgb(0 0 0 / .2)}
.step h3{font-size:1.15rem;margin-bottom:6px}
.step p{font-size:.94rem;color:var(--ink-2)}

/* calendário estilo gráfico de contribuições */
.yeargrid{margin-top:clamp(36px,5vw,56px);border-radius:var(--r);border:1px solid var(--line);background:#0B0D13;padding:clamp(18px,3vw,28px);overflow-x:auto;overscroll-behavior-x:contain}
.yeargrid h3{margin-bottom:16px}
.months{display:grid;grid-template-columns:repeat(12,minmax(64px,1fr));gap:6px;min-width:780px}
.month{display:grid;gap:5px}
.month b{font:500 .72rem var(--mono);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.month i{height:22px;border-radius:6px;background:#191B24}
.month i[data-e]{background:var(--c);box-shadow:0 0 14px -2px var(--c)}
.legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:16px;font-size:.88rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend span::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--c)}
.tools{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px}
.tools span{font:500 .84rem var(--mono);padding:.45em .85em;border-radius:8px;color:#fff;background:var(--c)}

/* ---------- planos ---------- */
.ctrl{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:30px}
.seg{display:inline-flex;padding:5px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line)}
.seg button{min-height:42px;border:0;background:none;padding:.5em 1.05em;border-radius:999px;font:600 .95rem/1 var(--display);color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3vw,32px)}
.plan .tile{width:52px;height:52px;border-radius:16px;background:var(--c);--glow:var(--c)}
.plan.featured{border:2px solid var(--yellow);background:linear-gradient(180deg,rgb(252 182 2 / .1),var(--card) 45%)}
.badge{position:absolute;top:-14px;left:24px;background:var(--yellow);color:#1A1206;font:700 .74rem/1 var(--mono);letter-spacing:.1em;padding:.55em .9em;border-radius:999px;text-transform:uppercase}
.plan .who{font-size:.94rem;color:var(--ink-2)}
.price{font:700 clamp(2.4rem,2rem + 1.8vw,3.1rem)/1 var(--display);display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price small{font:600 .9rem var(--body);color:var(--ink-3)}
.per{font-size:.86rem;color:var(--ink-3);margin-top:4px}
.plan ul{list-style:none;padding:0;display:grid;gap:9px;font-size:.97rem}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:7px;background:var(--c);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.plan li.off{color:var(--ink-3)}
.plan li.off::before{background:var(--line)}
.plan .btn{margin-top:auto}
.fine{margin-top:22px;font-size:.9rem;color:var(--ink-3)}

/* ---------- monte a jornada ---------- */
.builder{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:20px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3vw,34px)}
fieldset{border:0;padding:0;margin:0 0 24px;min-width:0}
legend{font:600 1.08rem var(--display);margin-bottom:12px}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opts label{position:relative}
.opts input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.opts span{display:inline-flex;align-items:center;min-height:44px;padding:.5em 1em;border-radius:14px;border:1.5px solid var(--line);font-weight:600;font-size:.95rem;transition:all .15s}
.opts input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.opts input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
input[type=range]{width:100%;height:44px;accent-color:var(--yellow)}
.age{font:700 1.7rem var(--display);color:var(--yellow)}
.result h3{font-size:clamp(1.5rem,1.3rem + 1vw,1.9rem);margin:10px 0 12px}
.result p{color:var(--ink-2)}
.track{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.track span{font:500 .86rem var(--mono);padding:.4em .8em;border-radius:9px;background:var(--bg-2);border:1px solid var(--line)}
.total{font:700 2.5rem/1 var(--display)}
.total small{font:600 .9rem var(--body);color:var(--ink-3)}
.result .btn{width:100%}

/* ---------- escolas / empresas ---------- */
#escolas{--c:var(--cyan)}
#empresas{--c:var(--lime);background:var(--bg-2);border-block:1px solid var(--line)}
.ctx-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-bottom:28px}
.ctx{padding:22px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--card)}
.ctx b{display:block;font:600 1.12rem var(--display);margin-bottom:6px;color:var(--c)}
.ctx p{font-size:.94rem;color:var(--ink-2)}
.offers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}
.offer{display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,28px)}
.offer .tag{font:500 .74rem var(--mono);color:var(--c);letter-spacing:.14em;text-transform:uppercase}
.offer p{color:var(--ink-2);font-size:.97rem}
.offer .from{margin-top:auto;padding-top:14px;border-top:1.5px dashed var(--line);font-size:.92rem;color:var(--ink-3)}
.offer .from b{color:var(--ink);font:600 1.2rem var(--display)}
.lead-form{margin-top:30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;padding:clamp(20px,3vw,32px);border-radius:28px;border:1px solid var(--line);background:var(--card)}
.lead-form h3,.lead-form .full{grid-column:1/-1}
.lead-form label{display:grid;gap:6px;font-size:.9rem;font-weight:700;color:var(--ink-2)}
.lead-form input,.lead-form select{width:100%;min-height:48px;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:.7em .9em;font-size:1rem}
.lead-form input:focus,.lead-form select:focus{border-color:var(--c);outline:none;box-shadow:0 0 0 4px color-mix(in oklab,var(--c) 22%,transparent)}
.lead-form .consent{display:flex;gap:12px;align-items:flex-start;font-weight:400}
.lead-form .consent input{width:22px;min-height:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--c)}
.lead-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lead-form .btn{background:var(--c);color:#0b0b10}
.form-ok{display:none;padding:16px;border-radius:14px;background:color-mix(in oklab,var(--c) 16%,transparent)}

/* ---------- sobre ---------- */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
@media (max-width:860px){.about{grid-template-columns:1fr}}
.portrait{position:relative;aspect-ratio:4/5;border-radius:34px;overflow:hidden;border:1px solid var(--line);background:#000;display:grid;place-items:center;max-width:520px}
.portrait img{width:78%;height:auto}
.portrait img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.creds{display:grid;gap:10px;margin:22px 0}
.creds div{display:flex;gap:12px;color:var(--ink-2)}
.creds div::before{content:"";flex:none;width:10px;height:10px;margin-top:.55em;border-radius:3px;background:var(--c,var(--yellow))}
.topics{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 24px}
.topics span{font-size:.88rem;font-weight:700;padding:.35em .7em;border-radius:6px;background:var(--c);color:#fff}
.socials{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- vitrine + APedê (do GitHub) ---------- */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:18px}
.card-link{display:flex;flex-direction:column;gap:12px;padding:clamp(24px,3vw,34px);border-radius:30px;border:1px solid var(--line);background:var(--card);text-decoration:none;transition:transform .2s,border-color .2s}
@media (hover:hover){a.card-link:hover{transform:translateY(-4px);border-color:var(--ink-3)}}
.card-link .k{font:500 .76rem var(--mono);color:var(--ink-3);letter-spacing:.18em;text-transform:uppercase}
.card-link p{color:var(--ink-2)}
.apede{position:relative;overflow:hidden;background:radial-gradient(500px 260px at 80% 0%,rgb(128 64 226 / .35),transparent 70%),#0B0814}
.apede .k{color:var(--ink-2)}
.apede .k::before{content:"</> ";color:var(--ink-3)}
.blocks{display:flex;gap:clamp(6px,1.4vw,12px);margin:10px 0 6px}
.blocks span{display:grid;place-items:center;width:clamp(42px,8vw,62px);aspect-ratio:1;border-radius:14px;background:var(--c);--glow:var(--c);font:700 clamp(1.2rem,2.6vw,1.8rem)/1 var(--display);color:#fff;text-shadow:0 2px 0 rgb(0 0 0 / .25)}
@media (prefers-reduced-motion:no-preference){.blocks span{animation:float 4s ease-in-out infinite}.blocks span:nth-child(2){animation-delay:-.6s}.blocks span:nth-child(3){animation-delay:-1.2s}.blocks span:nth-child(4){animation-delay:-1.8s}.blocks span:nth-child(5){animation-delay:-2.4s}}
.bubble{position:absolute;top:22px;right:22px;background:#F6F2EA;color:#111;font:600 .9rem var(--display);padding:.55em 1em;border-radius:16px;rotate:3deg}
.bubble::after{content:"";position:absolute;left:20px;bottom:-8px;border:8px solid transparent;border-top-color:#F6F2EA;border-bottom:0}
@media (max-width:520px){.bubble{position:static;width:max-content;rotate:0deg;margin-bottom:6px}}
.apede a{color:var(--violet);font-weight:700;text-decoration:none}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:900px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:0 20px}
.faq summary{list-style:none;cursor:pointer;min-height:56px;padding:16px 0;font:600 1.08rem/1.3 var(--display);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font:700 1.3rem/1 var(--display);transition:rotate .2s}
.faq details[open] summary::after{rotate:45deg}
.faq details p{padding:0 0 18px;color:var(--ink-2)}

/* ---------- CTA final + rodapé ---------- */
.final{text-align:center;border-radius:40px;padding:clamp(40px,7vw,88px) var(--pad);border:1px solid var(--line);background:
  radial-gradient(600px 300px at 15% 0%,rgb(128 64 226 / .45),transparent 70%),
  radial-gradient(600px 300px at 90% 100%,color-mix(in oklab,var(--accent) 34%,transparent),transparent 70%),var(--card)}
.final .lead{margin:0 auto 30px}
footer{margin-top:clamp(56px,8vw,96px);padding:48px 0 calc(110px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--ink-3);font-size:.9rem}
footer .wrap{display:grid;grid-template-columns:auto 1fr;gap:24px 40px;align-items:center}
@media (max-width:640px){footer .wrap{grid-template-columns:1fr}}
footer img{width:140px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:10px}
footer a{color:var(--ink-2)}

/* botão flutuante de WhatsApp */
.wa{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;width:60px;height:60px;border-radius:20px;background:#25D366;display:grid;place-items:center;box-shadow:inset 0 3px 0 rgb(255 255 255 / .4),inset 0 -5px 0 rgb(0 0 0 / .18),0 12px 30px -8px rgb(37 211 102 / .7);transition:transform .2s}
@media (hover:hover){.wa:hover{transform:translateY(-3px)}}
.wa svg{width:30px;height:30px;fill:#fff}

/* revelação ao rolar (CSS puro) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
    @keyframes rise{from{opacity:0;translate:0 36px;scale:.98}}
  }
}

/* telas muito grandes (TV, 4K) */
@media (min-width:2000px){:root{font-size:118%}.wrap{width:min(1480px,100% - 2*var(--pad))}}
/* celular deitado */
@media (max-height:500px) and (orientation:landscape){.top{position:static}.hero h1{font-size:clamp(2rem,4.4vw,3rem)}}

/* acessibilidade */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media (forced-colors:active){.btn,.aud button,.seg button,.opts span{border:2px solid ButtonText}.shape,.glow{display:none}}
@media (prefers-contrast:more){:root{--ink-2:#E2DEF0;--ink-3:#C2BED6;--line:#55556E}}

/* impressão */
@media print{
  .top,.wa,.game,.stage .shape,.glow,.aud,.aud-label,#monte,.lead-form,.ctrl{display:none!important}
  body{background:#fff;color:#000}
  section{padding:18px 0}
  .plan,.offer,.pillar,.ctx,.panel{border:1px solid #999;background:#fff;break-inside:avoid}
  .lead,.plan .who,.offer p,.pillar p{color:#222}
}


@media (max-width:1080px){body[data-hud="off"] .menu-btn{margin-left:auto}}

.q-step h2:focus{outline:none}

/* =========================================================
   CAMADA DE JOGO · personagem, mundo, abas, conquistas
   ========================================================= */

/* ---------- personagem (do GitHub) ---------- */
.char{display:block;width:100%;height:auto;overflow:visible}
.char g{transform-box:fill-box}
.char .c-legL,.char .c-legR,.char .c-armL,.char .c-armR{transform-origin:50% 0%}
.char .c-head{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){
  .walking .c-legL{animation:leg .5s ease-in-out infinite alternate}
  .walking .c-legR{animation:leg .5s ease-in-out infinite alternate-reverse}
  .walking .c-armL{animation:arm .5s ease-in-out infinite alternate-reverse}
  .walking .c-armR{animation:arm .5s ease-in-out infinite alternate}
  .walking .c-body{animation:bob .25s ease-in-out infinite alternate}
  .idle .c-body{animation:breathe 2.4s ease-in-out infinite}
  .idle .c-armR{animation:hammer 2.4s ease-in-out infinite}
  .cheer .c-body{animation:jump .55s cubic-bezier(.3,1.6,.5,1) 3}
  .cheer .c-armL{animation:wave .28s ease-in-out 6 alternate}
  @keyframes leg{from{rotate:-16deg}to{rotate:16deg}}
  @keyframes arm{from{rotate:-14deg}to{rotate:14deg}}
  @keyframes bob{to{translate:0 -1.6px}}
  @keyframes breathe{50%{translate:0 -1.4px}}
  @keyframes hammer{0%,70%,100%{rotate:0deg}80%{rotate:-28deg}90%{rotate:6deg}}
  @keyframes jump{50%{translate:0 -16px}}
  @keyframes wave{from{rotate:0deg}to{rotate:150deg}}
}

/* ---------- mundo da home: blocos caem, o construtor atravessa ---------- */
.world{position:relative;height:clamp(230px,30vw,320px);border-radius:28px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(360px 180px at 75% 0%,rgb(128 64 226 / .35),transparent 70%),linear-gradient(180deg,#1A0F2E,#0B0714)}
.world::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgb(255 255 255 / .5) 1px,transparent 1.5px);background-size:46px 46px;opacity:.12}
.w-tag{position:absolute;top:16px;left:18px;font:500 .72rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.w-ground{position:absolute;left:18px;right:18px;bottom:30px;border-bottom:2px dashed rgb(255 255 255 / .22)}
.w-blocks{position:absolute;left:0;right:0;bottom:32px;display:flex;justify-content:center;gap:clamp(6px,1.2vw,10px)}
.w-blocks span{display:grid;place-items:center;width:clamp(40px,5.4vw,58px);aspect-ratio:1;border-radius:14px;background:var(--c);color:#fff;font:700 clamp(1.1rem,2vw,1.6rem)/1 var(--display);text-shadow:0 2px 0 rgb(0 0 0 / .25);
  box-shadow:inset 0 3px 0 rgb(255 255 255 / .38),inset 0 -6px 0 rgb(0 0 0 / .22),0 10px 24px -10px var(--c)}
.walker{position:absolute;bottom:26px;left:4%;width:clamp(62px,8vw,86px);z-index:3}
.walker .char{transform-origin:50% 100%}
.walker .say{position:absolute;bottom:100%;left:50%;translate:-50% -6px;white-space:nowrap;background:var(--ink);color:#111;font:600 .82rem var(--display);padding:.4em .8em;border-radius:12px}
.walker .say::after{content:"";position:absolute;left:50%;bottom:-6px;translate:-50% 0;border:6px solid transparent;border-top-color:var(--ink);border-bottom:0}
@media (prefers-reduced-motion:no-preference){
  .w-blocks span{animation:drop 8s cubic-bezier(.3,1.25,.55,1) infinite;animation-delay:calc(var(--i) * .35s)}
  @keyframes drop{0%{translate:0 -340px;opacity:0}6%{opacity:1}14%,82%{translate:0 0;opacity:1}90%,100%{translate:0 0;opacity:0}}
  .walker{animation:patrol 8s linear infinite}
  .walker .char{animation:face 8s steps(1) infinite}
  .walker .say{animation:say 8s steps(1) infinite}
  @keyframes patrol{0%{left:4%}45%{left:calc(96% - 86px)}50%{left:calc(96% - 86px)}95%{left:4%}100%{left:4%}}
  @keyframes face{0%{scale:1 1}48%{scale:-1 1}97%{scale:1 1}}
  @keyframes say{0%,40%{opacity:0}42%,62%{opacity:1}64%,100%{opacity:0}}
}
.pick{font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);margin-top:clamp(36px,5vw,56px);display:flex;align-items:center;gap:12px}
.pick::before{content:"▶";color:var(--yellow);font-size:.8em}
@media (prefers-reduced-motion:no-preference){.pick::before{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}}

/* portas: flutuam e pulam no hover */
.door::after{content:"PRESS START";position:absolute;right:24px;bottom:26px;font:500 .72rem var(--mono);letter-spacing:.2em;color:var(--c);opacity:0;transition:opacity .2s}
@media (hover:hover){.door:hover::after{opacity:1;animation:blink .8s steps(1) infinite}}
@media (prefers-reduced-motion:no-preference){
  .door .tok{animation:float 3.6s ease-in-out infinite}
  .door:nth-child(2) .tok{animation-delay:-1.2s}.door:nth-child(3) .tok{animation-delay:-2.4s}
  .doors .door{animation:enter .6s cubic-bezier(.2,1.3,.4,1) both}
  .doors .door:nth-child(2){animation-delay:.1s}.doors .door:nth-child(3){animation-delay:.2s}
  @keyframes enter{from{translate:0 40px;opacity:0;scale:.96}}
}

/* ---------- guia: personagem que fala ---------- */
.guide-row{display:flex;align-items:flex-end;gap:14px;margin-bottom:22px;max-width:760px}
.guide{flex:none;width:clamp(56px,7vw,74px)}
.say-box{position:relative;flex:1;min-width:0;background:var(--card-2);border:1.5px solid var(--line);border-radius:18px 18px 18px 4px;padding:14px 18px;font:500 1rem/1.45 var(--display);color:var(--ink);margin-bottom:24px}
.say-box::before{content:"";position:absolute;left:-9px;bottom:10px;border:8px solid transparent;border-right-color:var(--line);border-left:0}
.say-box .cursor{display:inline-block;width:.55em;height:1em;background:var(--yellow);vertical-align:-2px;margin-left:2px}
@media (prefers-reduced-motion:no-preference){.say-box .cursor{animation:blink .7s steps(1) infinite}}
.in-quiz{margin-bottom:16px}

/* ---------- mapa de fases (trilha do funil) ---------- */
.phase{padding-top:6px}
.phase i{width:30px;height:30px;border-radius:10px;font:700 .8rem var(--display)}
.phase .on i{box-shadow:inset 0 2px 0 rgb(255 255 255 / .45),inset 0 -3px 0 rgb(0 0 0 / .2),0 0 0 4px color-mix(in oklab,var(--accent) 25%,transparent)}
.phase .ok i{box-shadow:inset 0 2px 0 rgb(255 255 255 / .4),inset 0 -3px 0 rgb(0 0 0 / .18)}
.phase .ok i::before{content:"✓"}
.phase .ok i{font-size:0}.phase .ok i::before{font-size:.85rem}
.phase .sep{width:26px;height:0;border-top:2px dashed var(--line);background:none}
.phase .ok + .sep{border-top-color:var(--lime)}
@media (prefers-reduced-motion:no-preference){.phase .on i{animation:pulse 1.6s ease-in-out infinite}@keyframes pulse{50%{scale:1.12}}}

/* cadeado da fase bloqueada */
.next{position:relative}
.lock{flex:none;width:44px;height:44px;border-radius:14px;background:var(--card-2);border:1.5px solid var(--line);position:relative}
.lock::before{content:"";position:absolute;left:12px;top:7px;width:16px;height:14px;border:3px solid var(--ink-3);border-bottom:0;border-radius:10px 10px 0 0}
.lock::after{content:"";position:absolute;left:9px;top:19px;width:22px;height:16px;border-radius:5px;background:var(--ink-3)}
.next:not(.locked) .lock{background:var(--lime);border-color:var(--lime)}
.next:not(.locked) .lock::before{border-color:#132006;translate:6px -4px;rotate:20deg}
.next:not(.locked) .lock::after{background:#132006}
@media (prefers-reduced-motion:no-preference){.next.unlocked{animation:unlocked .7s cubic-bezier(.2,1.4,.4,1)}@keyframes unlocked{30%{scale:1.04}}}

/* ---------- abas ---------- */
.tablist{display:flex;flex-wrap:wrap;gap:6px;padding:5px;border-radius:16px;background:var(--bg-2);border:1px solid var(--line);width:100%}
.tablist [role=tab]{flex:1 1 auto;min-height:42px;border:0;border-radius:12px;background:none;padding:.5em .9em;font:600 .92rem/1 var(--display);color:var(--ink-2);transition:background .15s,color .15s,translate .15s}
.tablist [role=tab][aria-selected=true]{background:var(--ink);color:var(--bg);box-shadow:inset 0 -3px 0 rgb(0 0 0 / .15)}
@media (hover:hover){.tablist [role=tab]:not([aria-selected=true]):hover{color:var(--ink);translate:0 -1px}}
[role=tab][data-chest]::before{content:"";display:inline-block;width:14px;height:11px;margin-right:7px;vertical-align:-1px;border-radius:3px;background:var(--yellow);box-shadow:inset 0 4px 0 #E98504}
[role=tab][data-chest][aria-selected=true]::before{background:var(--orange)}
[role=tabpanel]{min-height:0}
@media (prefers-reduced-motion:no-preference){
  [role=tabpanel]:not([hidden]){animation:tabin .3s ease-out}
  @keyframes tabin{from{opacity:0;translate:0 8px}}
  .chest:not([hidden]){animation:chest .55s cubic-bezier(.2,1.5,.4,1)}
  @keyframes chest{0%{opacity:0;scale:.9;filter:brightness(2)}60%{scale:1.03}}
}
.chest{position:relative;padding:16px;border-radius:16px;background:radial-gradient(260px 120px at 50% 0%,rgb(252 182 2 / .16),transparent 70%),var(--bg-2);border:1px dashed color-mix(in oklab,var(--yellow) 45%,var(--line))}
.chest .ctrl{margin-bottom:16px}
.how{color:var(--ink-2)}
.modes-list{background:none;border:0;padding:0;gap:12px;display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:18px}
@media (max-width:560px){.modes-list{grid-template-columns:1fr}}
.modes-list [role=tab]{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;min-height:76px;padding:12px 16px;border-radius:20px;border:1.5px solid var(--line);background:var(--card);color:var(--ink)}
.modes-list [role=tab] .tile{grid-row:span 2;width:44px;height:44px;border-radius:14px;background:var(--c)}
.modes-list [role=tab] b{font:600 1.15rem var(--display)}
.modes-list [role=tab] small{font:500 .74rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.modes-list [role=tab][aria-selected=true]{background:color-mix(in oklab,var(--c) 14%,var(--card));color:var(--ink);border-color:var(--c);box-shadow:0 0 0 3px color-mix(in oklab,var(--c) 25%,transparent)}
.modes .plan{max-width:720px}
.offer .tablist{margin-top:6px}
.offer .chest .from{border:0;padding:0;margin:0}

/* ---------- conquistas ---------- */
.q-guide{display:flex;align-items:flex-end;gap:12px;margin-bottom:12px}
.q-char{flex:none;width:52px}
.q-guide .rank{margin:0;background:var(--bg-2);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:10px 14px;font-size:.95rem}
.q-sub{font-size:1rem;margin:18px 0 10px;color:var(--ink-2)}
.badges{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.bdg{display:grid;justify-items:center;gap:6px;text-align:center;font:600 .7rem/1.15 var(--display);color:var(--ink-3)}
.badge-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--line);color:var(--ink-3);font:700 1.15rem var(--display)}
.bdg.got{color:var(--ink)}
.bdg.got .badge-ico,.toast .badge-ico{background:var(--c,var(--yellow));color:#111;box-shadow:inset 0 3px 0 rgb(255 255 255 / .4),inset 0 -4px 0 rgb(0 0 0 / .2),0 8px 18px -8px var(--c,var(--yellow))}
.toast{border-color:var(--c,var(--yellow))}
.toast small{display:block;font:500 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.toast b{font-weight:600}
@media (prefers-reduced-motion:no-preference){.toast:not([hidden]) .badge-ico{animation:spin .6s cubic-bezier(.2,1.4,.4,1)}@keyframes spin{from{rotate:-180deg;scale:.3}}}

/* moedas e nível subindo */
.coin{position:fixed;z-index:130;width:14px;height:14px;border-radius:50%;background:var(--yellow);box-shadow:inset -2px -2px 0 #E98504,0 0 10px rgb(252 182 2 / .7);pointer-events:none;animation:coin .9s cubic-bezier(.2,.8,.4,1) forwards}
@keyframes coin{to{translate:var(--dx) var(--dy);opacity:0;scale:.6}}
@media (prefers-reduced-motion:no-preference){.hud.bump .lvl{animation:bump .5s cubic-bezier(.2,1.6,.4,1)}@keyframes bump{40%{scale:1.4;rotate:-8deg}}}

/* faixa de abertura de fase */
.level-banner{position:fixed;inset:0;z-index:140;display:grid;place-items:center;pointer-events:none}
.level-banner div{display:grid;justify-items:center;gap:6px;padding:20px 40px;border-radius:24px;background:rgb(3 3 6 / .9);border:2px solid var(--accent);box-shadow:0 30px 80px -20px #000;animation:banner 1.5s cubic-bezier(.2,1.2,.4,1) forwards}
.level-banner small{font:500 .78rem var(--mono);letter-spacing:.24em;color:var(--ink-3);text-transform:uppercase}
.level-banner b{font:700 clamp(1.8rem,5vw,3rem)/1 var(--display);color:var(--accent)}
@keyframes banner{0%{scale:.6;opacity:0}18%{scale:1.04;opacity:1}28%{scale:1}78%{opacity:1;scale:1}100%{opacity:0;scale:1.08}}

/* brilho que passa nos botões principais */
.btn-main{position:relative;overflow:hidden}
.btn-main::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgb(255 255 255 / .55),transparent);skew:-18deg;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.btn-main::after{animation:shine 4.5s ease-in-out infinite}@keyframes shine{0%,70%{left:-60%}100%{left:130%}}}

/* opções do quiz: aperto de botão de jogo */
.big-opts span{box-shadow:inset 0 -4px 0 rgb(0 0 0 / .25)}
.big-opts input:active+span{translate:0 3px;box-shadow:inset 0 -1px 0 rgb(0 0 0 / .25)}
@media (prefers-reduced-motion:no-preference){.q-step:not([hidden]){animation:stepin .35s ease-out}@keyframes stepin{from{opacity:0;translate:24px 0}}}
.big-opts input,.opts input{z-index:2}.big-opts span{position:relative;z-index:1}

/* notificação no canto, como em jogo */
.toast{left:auto;right:max(16px,env(safe-area-inset-right,0px));top:calc(84px + env(safe-area-inset-top,0px));bottom:auto;translate:none;max-width:min(380px,calc(100% - 32px))}
@media (prefers-reduced-motion:no-preference){.toast:not([hidden]){animation:slidein .45s cubic-bezier(.2,1.3,.4,1)}@keyframes slidein{from{translate:120% 0;opacity:0}}}
/* modos + guia ao lado */
.modes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);gap:18px;align-items:start}
.modes > .modes-list{grid-column:1/-1}
.modes > [role=tabpanel]{grid-column:1;grid-row:2}
.mode-guide{grid-column:2;grid-row:2;display:grid;justify-items:start;gap:10px;position:sticky;top:96px}
.mode-guide .guide{width:84px}
.mode-guide .say-box{border-radius:18px 18px 18px 4px;margin:0}
.mode-guide .say-box::before{display:none}
.modes .plan{max-width:none}
@media (max-width:860px){.modes{grid-template-columns:1fr}.mode-guide{grid-column:1;grid-row:auto;position:static;grid-template-columns:auto 1fr;align-items:end}}
/* celular: mapa de fases compacto, só a fase atual com nome */
@media (max-width:560px){
  .phase{gap:6px;flex-wrap:nowrap}
  .phase > a:not(.on),.phase > span:not(.on):not(.sep){font-size:0;gap:0}
  .phase > :not(.on) i{font-size:.8rem}
  .phase .ok i::before{font-size:.85rem}
  .phase .sep{width:12px;flex:none}
}

/* =========================================================
   REFINO · fundo 3D e superfícies translúcidas
   ========================================================= */
#bg3d{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
#bg3d.on{opacity:.85}
:root{--card:rgb(16 16 25 / .9);--card-2:rgb(22 22 34 / .94);--bg-2:rgb(10 10 18 / .88)}
#empresas{background:rgb(10 10 18 / .72)}
#jornada{background:linear-gradient(180deg,rgb(7 20 37 / .8),rgb(5 7 13 / .6) 60%,transparent)}
.hero .glow{opacity:.75}

/* cabeçalho com linha do logo embaixo */
.top{border-bottom:0}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--blue) 0 18%,transparent 18% 19%,var(--purple) 19% 20%,transparent 20% 21%,var(--yellow) 21% 62%,transparent 62% 63%,var(--pink) 63% 64%,transparent 64% 65%,var(--lime) 65% 100%);opacity:.55}
.top{position:sticky}

/* títulos com sombra de "bloco" sutil */
.hero h1{text-shadow:0 4px 0 rgb(0 0 0 / .35)}
.sec-head h2,.next h2{text-shadow:0 3px 0 rgb(0 0 0 / .3)}

/* cartões ganham borda superior colorida ao focar/passar */
.offer,.pillar,.step,.plan{transition:transform .2s,border-color .2s,box-shadow .2s}
@media (hover:hover){
  .offer:hover,.pillar:hover,.step:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--c,var(--accent)) 55%,var(--line));box-shadow:0 16px 40px -20px color-mix(in oklab,var(--c,var(--accent)) 60%,transparent)}
}
.offer:focus-within{border-color:var(--c)}

/* página de privacidade */
.legal{display:grid;gap:12px;margin-top:28px;color:var(--ink-2)}
.legal h2{font-size:1.35rem;color:var(--ink);margin-top:18px}
.legal p{max-width:70ch}

@media (forced-colors:active){#bg3d{display:none}}
@media print{#bg3d,.world,.guide,.guide-row{display:none!important}}
@media (max-width:760px){#bg3d.on{opacity:.32}}

/* =========================================================
   SISTEMA EDITORIAL · grades bento, abertura em sequência,
   escala tipográfica, destaques e microinterações
   ========================================================= */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-pop:cubic-bezier(.34,1.56,.64,1)}

/* escala tipográfica com contraste forte */
.display{font-size:clamp(2.6rem,1.2rem + 6vw,6rem);font-weight:700;line-height:.98;letter-spacing:-.02em;margin:16px 0 6px}
.hero.short .display{font-size:clamp(2.3rem,1.3rem + 4.4vw,4.6rem)}
.display .ln{display:block;overflow:clip;padding-bottom:.06em}
.display .ln > span{display:inline-block}

/* abertura prioritária: título → linha → texto → ações → cena */
@media (prefers-reduced-motion:no-preference){
  .cue{animation:rise-in .9s var(--ease-out) both;animation-delay:calc(var(--s,0) * 110ms + 120ms)}
  .display .ln > .cue{animation-name:line-up}
  @keyframes rise-in{from{opacity:0;translate:0 24px;filter:blur(6px)}}
  @keyframes line-up{from{translate:0 105%}}
  .logo-line.draw i{transform-origin:left;animation:draw .7s var(--ease-out) both;animation-delay:calc(var(--k) * 70ms + 620ms)}
  .logo-line.draw i:nth-child(1){--k:0}.logo-line.draw i:nth-child(2){--k:1}.logo-line.draw i:nth-child(3){--k:2}.logo-line.draw i:nth-child(4){--k:3}.logo-line.draw i:nth-child(5){--k:4}
  @keyframes draw{from{scale:0 1;opacity:0}}
}

/* hero dividido: título dominante à esquerda, apoio à direita, alinhados pela base */
.hero-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end}
.hero-split .lead{margin-bottom:22px}
@media (max-width:920px){.hero-split{grid-template-columns:1fr}}

/* ---------- grade bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:clamp(12px,1.4vw,18px);margin-top:clamp(28px,4vw,48px)}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-width:0;padding:clamp(20px,2.4vw,30px);border-radius:28px;border:1px solid var(--line);background:var(--card);text-decoration:none;color:var(--ink)}
.tile h3{font-size:clamp(1.25rem,1.1rem + .5vw,1.6rem)}
.tile p{color:var(--ink-2);font-size:.98rem}
.tile .ico{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--c);color:#0b0b10;font:700 1.2rem/1 var(--mono);--glow:var(--c);flex:none}
.tile .lvl-tag{position:static;font:500 .72rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--c,var(--ink-3))}
.tile::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in oklab,var(--c,var(--accent)) 18%,transparent),transparent 60%);opacity:0;transition:opacity .3s}
@media (hover:hover){.spot:hover::before{opacity:1}}
.tile .go{margin-top:auto;font:600 1.02rem var(--display);color:var(--c)}

/* home: porta das famílias domina (7 col × 2 linhas) */
.home-bento .hero-door{grid-column:span 7;grid-row:span 2;min-height:420px;flex-direction:column;background:radial-gradient(600px 360px at 85% 100%,rgb(252 182 2 / .22),transparent 70%),linear-gradient(160deg,rgb(30 22 6 / .92),var(--card) 55%);border-color:color-mix(in oklab,var(--yellow) 45%,var(--line))}
.home-bento .hero-door .door-body{display:flex;flex-direction:column;gap:12px;flex:1;min-width:0;padding-right:clamp(0px,12vw,150px)}
.home-bento .hero-door h2{font-size:clamp(2rem,1.4rem + 2.2vw,3.2rem)}
.home-bento .hero-door p{font-size:1.05rem;max-width:38ch}
.door-char{position:absolute;right:clamp(16px,3vw,36px);bottom:0;width:clamp(110px,14vw,170px);z-index:-1;opacity:.95}
.door-char .char{transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){.door-char .c-armR{animation:hammer 2.4s ease-in-out infinite}.door-char .c-body{animation:breathe 2.4s ease-in-out infinite}}
.mini-steps{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px}
.mini-steps li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:12px;background:rgb(255 255 255 / .05);border:1px solid var(--line);font:600 .88rem var(--display)}
.mini-steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--yellow);color:#1A1206;font-size:.78rem}
.home-bento .door:not(.hero-door){grid-column:span 5;min-height:200px}
.home-bento .door:not(.hero-door) h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.home-bento .door .tok{width:56px;height:56px}
.home-bento .door::after{bottom:auto;top:24px}
.home-bento .stat{grid-column:span 3;justify-content:flex-end;min-height:170px}
.home-bento .profile{grid-column:span 3}
.stat .num{font:700 clamp(2.6rem,2rem + 2vw,3.6rem)/1 var(--display);color:var(--c);letter-spacing:-.02em;text-shadow:0 4px 0 rgb(0 0 0 / .35)}
.stat span{color:var(--ink-2);font-size:.92rem;max-width:24ch}
.profile{flex-direction:column;justify-content:space-between}
.profile img{width:64px;height:64px;border-radius:18px}
.profile b{display:block;font:600 1.3rem var(--display)}
.profile small{color:var(--ink-3);font-size:.88rem}
@media (max-width:1000px){
  .home-bento .hero-door{grid-column:span 12;grid-row:auto}
  .home-bento .door:not(.hero-door){grid-column:span 6}
  .home-bento .stat,.home-bento .profile{grid-column:span 6}
}
@media (max-width:620px){
  .home-bento .door:not(.hero-door),.home-bento .stat,.home-bento .profile{grid-column:span 12}
  .home-bento .stat{grid-column:span 6;min-height:150px}
  .home-bento .hero-door{min-height:0;padding-bottom:150px}
  .door-char{width:110px}
}

/* cartas com inclinação 3D ao passar o mouse */
.tilt{transform-style:preserve-3d;transition:transform .35s var(--ease-out),border-color .2s}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.tilt:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}}

/* faixa rolante de ferramentas */
.ticker{position:relative;overflow:hidden;border-block:1px solid var(--line);background:rgb(10 10 18 / .7);padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;align-items:center;gap:22px;width:max-content;font:600 clamp(1rem,.9rem + .5vw,1.35rem) var(--display);color:var(--ink-2);white-space:nowrap}
.ticker-track i{width:12px;height:12px;border-radius:4px;flex:none;background:var(--yellow)}
.ticker-track i:nth-of-type(5n+2){background:var(--pink)}.ticker-track i:nth-of-type(5n+3){background:var(--cyan)}.ticker-track i:nth-of-type(5n+4){background:var(--violet)}.ticker-track i:nth-of-type(5n){background:var(--lime)}
@media (prefers-reduced-motion:no-preference){.ticker-track{animation:ticker 38s linear infinite}@keyframes ticker{to{translate:-50% 0}}.ticker:hover .ticker-track{animation-play-state:paused}}

/* famílias: método em bento (Criar em destaque) */
.method-bento .feature{grid-column:span 6;grid-row:span 2;background:radial-gradient(500px 300px at 100% 100%,rgb(252 182 2 / .2),transparent 70%),var(--card)}
.method-bento .feature h3{font-size:clamp(2rem,1.5rem + 2vw,3rem)}
.method-bento .feature p{font-size:1.06rem;max-width:40ch}
.method-bento > .tile:not(.feature):not(.wide){grid-column:span 3}
.method-bento .wide{grid-column:span 6;flex-direction:row;align-items:center;gap:18px}
.feature-blocks{display:flex;gap:10px;margin-top:auto}
.feature-blocks span{display:grid;place-items:center;width:clamp(44px,5vw,60px);aspect-ratio:1;border-radius:16px;background:var(--c);color:#fff;font:700 clamp(1.2rem,2vw,1.7rem)/1 var(--display);box-shadow:inset 0 3px 0 rgb(255 255 255 / .38),inset 0 -6px 0 rgb(0 0 0 / .22),0 10px 24px -10px var(--c)}
@media (prefers-reduced-motion:no-preference){.feature-blocks span{animation:float 4s ease-in-out infinite}.feature-blocks span:nth-child(2){animation-delay:-.7s}.feature-blocks span:nth-child(3){animation-delay:-1.4s}.feature-blocks span:nth-child(4){animation-delay:-2.1s}}
@media (max-width:900px){.method-bento .feature,.method-bento .wide{grid-column:span 12}.method-bento > .tile:not(.feature):not(.wide){grid-column:span 6}}
@media (max-width:520px){.method-bento > .tile:not(.feature):not(.wide){grid-column:span 12}.method-bento .wide{flex-direction:column;align-items:flex-start}}

/* trilha de níveis conectada */
.level-path{position:relative;counter-reset:s}
@media (min-width:900px){
  .level-path{grid-template-columns:repeat(5,1fr)}
  .level-path::before{content:"";position:absolute;left:44px;right:44px;top:45px;height:0;border-top:3px dashed rgb(255 255 255 / .16);z-index:-1}
  .level-path .step:nth-child(odd){translate:0 22px}
}

/* escolas: contexto com número grande */
.ctx-bento .big-num{grid-column:span 6;grid-row:span 2;justify-content:flex-end}
.ctx-bento > .tile:not(.big-num){grid-column:span 6}
.big-num .num{font:700 clamp(3rem,2rem + 4vw,5.4rem)/.95 var(--display);color:var(--c);letter-spacing:-.03em;text-shadow:0 5px 0 rgb(0 0 0 / .35)}
.big-num .num span{color:var(--ink-3);margin:0 .15em;font-weight:500}
@media (max-width:820px){.ctx-bento .big-num,.ctx-bento > .tile:not(.big-num){grid-column:span 12;grid-row:auto}}

/* ofertas: primeira em destaque, larga */
.bento-offers{grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:auto}
.bento-offers .offer{grid-column:span 2}
.bento-offers .offer:nth-child(4n+1),.bento-offers .offer:nth-child(4n){grid-column:span 4;background:radial-gradient(520px 300px at 100% 0%,color-mix(in oklab,var(--c) 16%,transparent),transparent 70%),var(--card);border-color:color-mix(in oklab,var(--c) 40%,var(--line))}
.bento-offers .offer:nth-child(4n+1) h3,.bento-offers .offer:nth-child(4n) h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.2rem)}
@media (max-width:900px){.bento-offers .offer,.bento-offers .offer:nth-child(4n+1),.bento-offers .offer:nth-child(4n){grid-column:span 6}}

/* sobre: credenciais em grade */
.cred-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.cred-grid div{padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--card)}

/* revelação ao rolar com escalonamento por posição */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .bento > *,.steps > *,.offers > *,.plans > *,.faq > details,.cred-grid > *{animation:tile-in linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .bento > :nth-child(2),.steps > :nth-child(2),.offers > :nth-child(2){animation-range:entry 6% entry 76%}
    .bento > :nth-child(3),.steps > :nth-child(3),.offers > :nth-child(3){animation-range:entry 12% entry 82%}
    .bento > :nth-child(4),.steps > :nth-child(4),.offers > :nth-child(4){animation-range:entry 18% entry 88%}
    .bento > :nth-child(n+5),.steps > :nth-child(n+5){animation-range:entry 22% entry 92%}
    @keyframes tile-in{from{opacity:0;translate:0 40px;scale:.97}}
    .sec-head{animation:rise-in linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  }
}

/* cabeçalho de seção com régua do logo */
.sec-head h2{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.9rem)}
.pick{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)}

/* foco visível com a cor da página */
.tile:focus-visible,.door:focus-visible{outline:3px solid var(--c,var(--accent));outline-offset:4px}

.stat .num{order:1;margin-top:auto}.stat span{order:2}
.stat small{order:0;font:500 .72rem var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
@media (max-width:620px){.home-bento .profile{grid-column:span 6}.home-bento .profile img{width:48px;height:48px}.stat span{font-size:.86rem}}
.home-bento .stat{justify-content:flex-start}.stat .num{margin-top:auto}

/* =========================================================
   MODO CALMO · menos informação ao mesmo tempo
   Regras: um foco por tela, cor só onde guia, movimento só
   na abertura ou quando a pessoa interage.
   ========================================================= */

/* 1. respiro: mais espaço entre blocos e texto mais estreito */
section{padding-block:clamp(64px,9vw,128px)}
.hero{padding-bottom:clamp(56px,8vw,112px)}
.bento{gap:clamp(14px,1.8vw,24px)}
.lead{max-width:52ch;color:var(--ink-2)}
.tile p,.offer p,.step p{max-width:46ch}

/* 2. fundo: 3D só na abertura, some ao rolar; brilhos e granulado mais discretos */
#bg3d.on{opacity:calc(.8 * var(--bgfade,1))}
@media (max-width:760px){#bg3d.on{opacity:calc(.3 * var(--bgfade,1))}}
body::before{opacity:.035}
.hero .glow{opacity:.5}
.glow{background:radial-gradient(520px 420px at 8% 4%,rgb(128 64 226 / .28),transparent 70%),radial-gradient(460px 380px at 96% 40%,color-mix(in oklab,var(--accent) 16%,transparent),transparent 70%)}

/* 3. cor com disciplina: cartões neutros, a cor fica no ícone e no link */
.tile,.offer,.step,.plan:not(.featured),.ctx{background:var(--card);border-color:var(--line)}
.home-bento .hero-door{background:linear-gradient(160deg,rgb(28 21 8 / .9),var(--card) 60%);border-color:color-mix(in oklab,var(--yellow) 30%,var(--line))}
.bento-offers .offer:nth-child(4n+1),.bento-offers .offer:nth-child(4n){background:var(--card);border-color:var(--line)}
.method-bento .feature{background:var(--card)}
.tile .lvl-tag{color:var(--ink-3)}
.hero h1,.sec-head h2,.next h2{text-shadow:none}
.stat .num,.big-num .num{text-shadow:none}

/* 4. movimento: nada pisca ou flutua sozinho fora da abertura */
.pick::before,.door .tok,.feature-blocks span,.blocks span,.rocket,.phase .on i,.door-char .c-armR,.door-char .c-body{animation:none!important}
.btn-main::after{animation:none!important;left:-60%}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.btn-main:hover::after{transition:left .7s ease;left:130%}}
.ticker{padding:12px 0;background:transparent;border-color:rgb(255 255 255 / .05)}
.ticker-track{font-size:clamp(.9rem,.85rem + .3vw,1.1rem);color:var(--ink-3)}
.ticker-track i{width:6px;height:6px;border-radius:50%;background:var(--ink-3)!important;opacity:.6}
@media (prefers-reduced-motion:no-preference){.ticker-track{animation-duration:70s}}
.doors .door{animation:none}

/* 5. revelação progressiva: HUD só depois da 1ª conquista; WhatsApp depois da abertura */
body[data-xp="0"] .hud,body:not([data-xp]) .hud{display:none}
.wa{opacity:0;translate:0 16px;pointer-events:none;transition:opacity .35s,translate .35s var(--ease-out)}
body.past-hero .wa,body:not([data-page="home"]):not([data-page="familias"]) .wa{opacity:1;translate:0 0;pointer-events:auto}

/* 6. hierarquia: um título dominante por tela, o resto recua */
.eyebrow{color:var(--ink-3);letter-spacing:.16em}
.eyebrow::before{opacity:.8}
.pick{font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);color:var(--ink-2);margin-top:0}
.pick::before{content:none}
.sec-head{gap:10px}
.sec-head h2{font-size:clamp(1.9rem,1.2rem + 2.8vw,3.2rem)}

/* home: abertura enxuta e portas com menos texto */
.home-bento{grid-auto-rows:minmax(120px,auto)}
.home-bento .hero-door{min-height:360px}
.home-bento .door:not(.hero-door){min-height:170px}
.home-bento .door .lvl-tag{font-size:.68rem}
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:clamp(24px,3vw,36px);color:var(--ink-3);font-size:.92rem}
.proof i{width:4px;height:4px;border-radius:50%;background:var(--ink-3);opacity:.6}
.proof a{color:var(--ink-2);font-weight:700;text-decoration:none}
.proof a:hover{color:var(--ink)}
@media (max-width:620px){.proof i{display:none}.proof{flex-direction:column;align-items:flex-start;gap:6px}}

/* cena do construtor menor e mais limpa */
.world{height:clamp(220px,26vw,290px);background:linear-gradient(180deg,#140C24,#0A0712);border-color:rgb(255 255 255 / .06)}
.world::before{opacity:.06}
.w-tag{opacity:.6}

/* famílias: mapa de fases mais leve */
.phase{opacity:.9;margin-bottom:28px}
/* título da home: duas palavras, escala máxima */
.hero h1.display-xl{font-size:clamp(3.2rem,1.4rem + 8.2vw,8.4rem);line-height:.92}
.peclat span:nth-child(7){color:var(--violet)}

/* =========================================================
   SISTEMA DE DESIGN · camada final de tokens
   Escala tipográfica modular (1.25 no celular → 1.333 no desktop),
   grade de 8 px, raios e ritmo vertical consistentes.
   ========================================================= */
:root{
  /* tipo: passos fluidos entre 360 px e 1440 px de largura */
  --step--1:clamp(.83rem,.8rem + .1vw,.89rem);
  --step-0:clamp(1rem,.96rem + .17vw,1.125rem);
  --step-1:clamp(1.2rem,1.13rem + .33vw,1.5rem);
  --step-2:clamp(1.44rem,1.31rem + .6vw,2rem);
  --step-3:clamp(1.73rem,1.5rem + 1vw,2.66rem);
  --step-4:clamp(2.07rem,1.7rem + 1.65vw,3.55rem);
  --step-5:clamp(2.49rem,1.9rem + 2.6vw,4.2rem);
  /* espaço: grade de 8 px */
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:48px;--s-6:64px;--s-7:96px;
  /* raios: 3 níveis, do contêiner ao detalhe */
  --r-lg:24px;--r-md:16px;--r-sm:12px;
}

/* tipografia */
body{font-size:var(--step-0)}
.hero h1,.hero h1.display,.hero h1.display-xl,.hero.short .display,.display{font-size:var(--step-5);line-height:1.02;letter-spacing:-.015em;margin:var(--s-2) 0 var(--s-1)}
.hero.short .display,.hero-split .display{font-size:var(--step-4);line-height:1.05}
.sec-head h2,.next h2,.door h2,.home-bento .hero-door h2{font-size:var(--step-3);line-height:1.1}
.home-bento .door:not(.hero-door) h2,.method-bento .feature h3,.bento-offers .offer:nth-child(4n+1) h3,.bento-offers .offer:nth-child(4n) h3,.q-step h2,.reco h2{font-size:var(--step-2);line-height:1.15}
.tile h3,.offer h3,.step h3,.plan h3,h3{font-size:var(--step-1);line-height:1.2}
.lead{font-size:var(--step-1);line-height:1.5;max-width:46ch}
.tile p,.offer p,.step p,.plan .who,.how{font-size:var(--step-0);line-height:1.6}
.eyebrow,.tile .lvl-tag,.offer .tag,.quiz-top,.phase{font-size:var(--step--1);letter-spacing:.12em}
.stat .num,.big-num .num{font-size:var(--step-5)}
.price,.total{font-size:var(--step-4)}

/* ritmo vertical do herói: 16 · 24 · 24 · 32 */
.hero .logo-line{margin:var(--s-3) 0}
.hero .lead{margin:0 0 var(--s-4)}
.hero .actions{margin-top:0;gap:var(--s-2)}
.hero{padding-top:clamp(var(--s-5),7vw,var(--s-7));padding-bottom:clamp(var(--s-6),8vw,var(--s-7))}
.hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(var(--s-4),5vw,var(--s-7))}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr}}

/* seções e grades na grade de 8 px */
section{padding-block:clamp(var(--s-6),8vw,112px)}
.sec-head{margin-bottom:var(--s-5);gap:var(--s-2)}
.bento,.offers,.plans,.pillars,.steps,.ctx-grid{gap:var(--s-3)}
@media (max-width:620px){.bento,.offers,.plans{gap:var(--s-2)}}
.tile,.offer,.step,.pillar,.ctx,.panel,.quiz,.plan,.lead-form,.next,.final,.world,.game,.map,.yeargrid,.card-link{border-radius:var(--r-lg)}
.tile,.offer,.plan,.panel{padding:clamp(var(--s-3),2.4vw,var(--s-4))}
.tablist,.seg,.say-box,.big-opts span,.opts span,.lead-form input,.lead-form select,.chest,.faq details{border-radius:var(--r-md)}
.tablist [role=tab],.seg button,.cell,.mini-steps li{border-radius:var(--r-sm)}
.tile .ico,.door .tok,.plan .tile{border-radius:var(--r-md)}

/* botões: altura única 48 px e alvo de toque confortável */
.btn{min-height:48px;padding:0 var(--s-3);font-size:var(--step-0);letter-spacing:0}
.top .btn{min-height:44px;padding:0 20px}
.tablist [role=tab],.seg button,.aud button{min-height:44px}

/* foco acessível e consistente */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn:focus-visible{outline-offset:4px}

/* largura de leitura confortável */
.legal p,.faq details p,.reco .lead{max-width:62ch}

/* home: cena do construtor proporcional ao título menor */
.world{height:clamp(200px,22vw,270px)}
.door-char{width:clamp(96px,11vw,140px)}
.home-bento .hero-door{min-height:320px}
/* páginas internas: um degrau abaixo da home */
.hero .hero-split h1.display,.hero.short h1{font-size:var(--step-4);line-height:1.05}
/* hero dividido: título e apoio começam na mesma linha de topo */
.hero-split{align-items:start}
.hero-split > :last-child{padding-top:calc(var(--step--1) * 1.6 + var(--s-2))}
@media (max-width:920px){.hero-split > :last-child{padding-top:0}}

/* =========================================================
   TUTORIAL · um passo por tela para quem tem pouco tempo
   ========================================================= */
.tour-wrap{padding-top:clamp(var(--s-4),5vw,var(--s-6))}
.tour{max-width:980px;margin-inline:auto}
.tour-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-3);align-items:end;margin-bottom:var(--s-4)}
@media (max-width:760px){.tour-head{grid-template-columns:1fr}}
.tour-guide{display:flex;align-items:flex-end;gap:var(--s-2)}
.tour-guide .guide{width:56px;flex:none}
.tour-guide .say-box{margin:0;font-size:var(--step-0)}
.tour-count{font:500 var(--step--1) var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:var(--s-1)}
.tour-bar{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-1)}
.tour-bar button{display:grid;gap:6px;width:100%;min-height:44px;padding:0;border:0;background:none;text-align:left;color:var(--ink-3);font:600 var(--step--1) var(--display)}
.tour-bar i{display:block;height:6px;border-radius:6px;background:var(--line);transition:background .3s}
.tour-bar .done i{background:var(--lime)}
.tour-bar .on i{background:var(--yellow)}
.tour-bar .on button{color:var(--ink)}
@media (max-width:520px){.tour-bar span{display:none}.tour-bar button{min-height:24px}}

.t-step{display:grid;gap:var(--s-3);padding:clamp(var(--s-4),4vw,var(--s-6));border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card);min-height:clamp(340px,46vh,460px);align-content:start}
.tour:not(.is-tour) .t-step + .t-step{margin-top:var(--s-3)}
.t-title{font-size:var(--step-3);line-height:1.12;max-width:24ch}
#passo-1 .t-title{font-size:var(--step-4);max-width:20ch}
@media (prefers-reduced-motion:no-preference){
  .is-tour .t-step:not([hidden]){animation:stepin .45s var(--ease-out)}
  .is-tour .t-step[data-dir="back"]:not([hidden]){animation-name:stepback}
  @keyframes stepback{from{opacity:0;translate:-24px 0}}
}
.t-title:focus{outline:none}

.t-facts,.t-modes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin-top:auto}
@media (max-width:760px){.t-facts,.t-modes{grid-template-columns:1fr}}
.t-facts li,.t-modes li{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2);border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--line)}
.t-facts span,.t-modes span{display:grid;color:var(--ink-3);font-size:var(--step--1);line-height:1.4}
.t-facts span b,.t-modes span b{color:var(--ink);font:600 var(--step-0) var(--display)}
.t-ico{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--r-sm);background:var(--c);color:#111;font:700 .95rem var(--display)}

.t-flow{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);counter-reset:f}
@media (max-width:760px){.t-flow{grid-template-columns:1fr}}
.t-flow li{position:relative;display:grid;gap:6px;padding:var(--s-3);border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--line)}
.t-flow b{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);background:var(--c);color:#111;font:700 1rem var(--display);margin-bottom:6px}
.t-flow p{color:var(--ink-2);font-size:var(--step--1);line-height:1.5}
@media (min-width:761px){.t-flow li:not(:last-child)::after{content:"→";position:absolute;right:-14px;top:50%;translate:0 -50%;color:var(--ink-3);font:600 1rem var(--display);z-index:1}}

.t-more{border-top:1px dashed var(--line);padding-top:var(--s-2)}
.t-more summary{cursor:pointer;color:var(--ink-2);font-weight:700;min-height:44px;display:flex;align-items:center;list-style:none}
.t-more summary::before{content:"+";display:inline-grid;place-items:center;width:24px;height:24px;margin-right:10px;border-radius:8px;background:var(--line);color:var(--ink)}
.t-more[open] summary::before{content:"–"}
.t-more summary::-webkit-details-marker{display:none}
.t-skills{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--s-1);margin-top:var(--s-1)}
.t-skills li{display:grid;gap:2px;padding:12px 14px;border-left:3px solid var(--c);background:var(--bg-2);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-3);font-size:var(--step--1)}
.t-skills b{color:var(--ink);font:600 var(--step-0) var(--display)}

.t-game{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:var(--s-4);align-items:start}
@media (max-width:820px){.t-game{grid-template-columns:1fr}}
.t-game .lead{font-size:var(--step-0);margin-top:var(--s-1)}
.t-game-guide{margin-top:var(--s-3)}
.t-game .game{box-shadow:none}
.opt{font:500 .7rem var(--mono);letter-spacing:.1em;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-left:6px}
#passo-4 .actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-1)}

.tour-nav{display:flex;justify-content:space-between;gap:var(--s-2);margin-top:var(--s-3)}
.tour-nav [hidden]{display:none}
.tour-nav #tour-next{margin-left:auto;min-width:200px}
.tour:not(.is-tour) .tour-nav,.tour:not(.is-tour) .tour-bar{display:none}
@media (max-width:520px){.tour-nav{position:sticky;bottom:max(12px,env(safe-area-inset-bottom));z-index:20;padding:8px;border-radius:var(--r-lg);background:rgb(10 10 18 / .92);border:1px solid var(--line)}.tour-nav .btn{flex:1;min-width:0}.tour-nav #tour-next{min-width:0}}
body[data-page="familias"] .wa{display:none}

/* jornada: comparação recolhida */
.compare{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);padding:0 clamp(var(--s-3),2.4vw,var(--s-4))}
.compare > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);min-height:88px}
.compare > summary::-webkit-details-marker{display:none}
.compare > summary > span{display:grid;gap:4px}
.compare > summary b{font:600 var(--step-1) var(--display)}
.compare > summary i{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-sm);background:var(--line);font:700 1.3rem/1 var(--display);font-style:normal;transition:rotate .2s}
.compare[open] > summary i{rotate:45deg}
.compare[open]{padding-bottom:clamp(var(--s-3),2.4vw,var(--s-4))}
@media (max-width:520px){#passo-1 .t-title{font-size:var(--step-3)}.t-step{min-height:0}.tour{padding-bottom:var(--s-2)}}

/* tutorial de escolas: ofertas compactas e formulário dentro do passo */
.t-offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2)}
@media (max-width:760px){.t-offers{grid-template-columns:1fr}}
.t-offers .offer{background:var(--bg-2);padding:var(--s-3)}
.t-offers .offer h3{font-size:var(--step-1)}
.t-step .lead-form{margin-top:0;padding:0;border:0;background:none}
.t-ico{font-size:.72rem;letter-spacing:.02em}
body[data-page="escolas"] .tour-bar .on i{background:var(--cyan)}

/* =========================================================
   SOBRE · leitura em camadas: quem é → trajetória → ano → projetos
   ========================================================= */
.about-v2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(var(--s-4),5vw,var(--s-7));align-items:center}
@media (max-width:860px){.about-v2{grid-template-columns:1fr}.about-v2 .portrait{max-width:360px}}
.about-v2 .portrait{position:relative;border-radius:var(--r-lg);border-color:var(--line);background:radial-gradient(300px 300px at 50% 40%,rgb(128 64 226 / .25),transparent 70%),#05050a}
.portrait-tag{position:absolute;left:var(--s-2);bottom:var(--s-2);display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgb(10 10 18 / .85);border:1px solid var(--line);font:600 var(--step--1) var(--display)}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgb(120 189 41 / .2)}
.about-main{display:grid;gap:var(--s-2)}
.about-name{font-size:var(--step-5);line-height:1}
.about-role{font:500 var(--step-0) var(--mono);color:var(--ink-3);letter-spacing:.04em}
.about-main .lead{margin:var(--s-1) 0}
.about-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin:var(--s-1) 0 var(--s-2)}
.about-stats div{padding:var(--s-2);border-radius:var(--r-md);border:1px solid var(--line);background:var(--card)}
.about-stats dt{font-size:var(--step--1);color:var(--ink-3)}
.about-stats dd{margin:4px 0 0;font:700 var(--step-2) var(--display)}
@media (max-width:420px){.about-stats{grid-template-columns:1fr 1fr}.about-stats div:last-child{grid-column:span 2}}
.about-main .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.social-icons{display:flex;gap:var(--s-1)}
.social-icons a{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-sm);border:1px solid var(--line);color:var(--ink-2);transition:color .2s,border-color .2s,translate .2s}
.social-icons svg{width:20px;height:20px;fill:currentColor}
@media (hover:hover){.social-icons a:hover{color:var(--ink);border-color:var(--ink-3);translate:0 -2px}}

.timeline{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-2);position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:15px;border-top:2px dashed var(--line)}
.timeline li{position:relative;display:grid;gap:var(--s-2);padding-top:var(--s-5)}
.timeline li::before{content:"";position:absolute;top:6px;left:0;width:20px;height:20px;border-radius:7px;background:var(--c);box-shadow:inset 0 2px 0 rgb(255 255 255 / .4),inset 0 -3px 0 rgb(0 0 0 / .2)}
.timeline time{font:500 var(--step--1) var(--mono);letter-spacing:.08em;color:var(--c)}
.timeline h3{font-size:var(--step-1);margin-bottom:4px}
.timeline p{color:var(--ink-2);font-size:var(--step--1);line-height:1.5}
@media (max-width:900px){
  .timeline{grid-template-columns:1fr;gap:var(--s-3);padding-left:var(--s-4)}
  .timeline::before{left:9px;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--line)}
  .timeline li{padding-top:0;grid-template-columns:96px 1fr}
  .timeline li::before{left:calc(-1 * var(--s-4));top:2px}
}
@media (max-width:420px){.timeline li{grid-template-columns:1fr;gap:4px}}
.about-more{margin-top:var(--s-4)}
.about-year .yeargrid{margin-top:0}
.about-year .tools span{background:var(--card);border:1px solid var(--line);color:var(--ink-2)}
.timeline li{align-content:start}
/* foto da Profe no Sobre */
.about-v2 .portrait{aspect-ratio:4/5;padding:0;place-items:stretch}
.about-v2 .portrait img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.about-v2 .portrait::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgb(3 3 6 / .75));pointer-events:none}
.portrait-tag{z-index:2}
.about-v2 .portrait img.portrait-mark{position:absolute;top:var(--s-2);right:var(--s-2);z-index:2;width:56px;height:56px;border-radius:16px;box-shadow:0 8px 24px -8px #000}

/* ---------- aviso de cookies ---------- */
.cookie{position:fixed;z-index:130;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));margin-inline:auto;max-width:720px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;padding:18px 20px;border-radius:20px;background:var(--card-2);border:2px solid var(--line);color:var(--ink);box-shadow:0 24px 60px -20px rgb(0 0 0 / .8)}
.cookie p{flex:1 1 320px;margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-2)}
.cookie a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cookie-act{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{min-height:44px;padding:0 1.3em;font-size:1rem}