/* Site da Débora Chabes — tema lousa: verde-lousa escuro, texto cor de giz, Trilha e Etiquetas em giz amarelo. Celular primeiro. */
:root{
  --bg:#142e27; --bg2:#1b3a32; --line:#2b4b42; --fg:#f6f1e4; --mute:#c3c0ae; --dim:#8a978c;
  --accent:#f4d872;
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Geist","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:max(18px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
.is-scrambling{color:var(--mute);font-variant-ligatures:none}
.langs a{transition:color .25s,border-color .25s}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
html,body{margin:0;background:var(--bg);color:var(--fg)}
body{font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* fundo vivo */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.6s ease}
html.ready #field{opacity:1}
.stage.no-gl #field{display:none}
.stage.no-gl::before{content:"";position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 32% at 28% 32%,rgba(255,250,240,.11),transparent 70%),
    radial-gradient(38% 30% at 72% 58%,rgba(255,250,240,.09),transparent 70%),
    radial-gradient(50% 40% at 50% 85%,rgba(255,250,240,.06),transparent 70%),
    radial-gradient(120% 80% at 50% 20%,#1b1917 0%,var(--bg) 70%);
  animation:fogdrift 26s ease-in-out infinite alternate}
@keyframes fogdrift{from{transform:translate(-4%,-2%) scale(1)}to{transform:translate(4%,3%) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.stage.no-gl::before{animation:none}}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.045;
  background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px)}

/* topo */
.top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:14px var(--gutter);padding-top:calc(14px + env(safe-area-inset-top,0px));
  font-size:12.5px;color:var(--mute);letter-spacing:.02em;
  background:linear-gradient(to bottom,rgba(20,46,39,.92) 0%,rgba(20,46,39,.75) 60%,rgba(20,46,39,0) 100%);
  padding-bottom:22px;pointer-events:none}
.top a{pointer-events:auto}
.top .brand{color:var(--fg);text-decoration:none;display:flex;align-items:center;gap:8px}
.top .brand i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:breathe 3s ease-in-out infinite}
.langs a{text-decoration:none;color:var(--dim);padding:4px 6px;border-bottom:1px solid transparent}
.langs a[aria-current]{color:var(--fg);border-bottom-color:var(--fg)}

/* abertura */
.hero{position:relative;z-index:2;min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:96px var(--gutter) 64px}
.hero .in{max-width:640px}
.hero .kicker{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 14px;
  animation:rise .9s .1s both}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,11vw,76px);line-height:1;letter-spacing:-.01em;margin:0;text-wrap:balance}
.hero h1 .w{display:inline-block;animation:letter .8s both}
.hero h1 .w:nth-child(2){animation-delay:.12s}
.hero .tag{font-family:var(--serif);font-size:clamp(17px,4.4vw,21px);color:var(--mute);margin:18px auto 0;max-width:34ch;text-wrap:balance;
  animation:rise .9s .45s both}
.hero .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:26px 0 0;padding:0;list-style:none;
  font-size:12.5px;color:var(--dim);letter-spacing:.04em;animation:rise .9s .65s both}
.hero .logos li::before{content:"·";margin-right:18px;color:var(--line)}
.hero .logos li:first-child::before{content:none;margin:0}
.hero .cta{display:inline-block;margin-top:34px;padding:12px 20px;border:1px solid var(--line);border-radius:999px;
  color:var(--fg);text-decoration:none;font-size:14px;background:rgba(20,46,39,.5);
  animation:rise .9s .85s both;transition:border-color .2s,transform .2s}
.hero .cta:hover{border-color:var(--mute);transform:translateY(-1px)}
.hero .cta::after{content:" ▾";color:var(--dim)}

/* seções */
main{position:relative;z-index:2}
.wrap{max-width:720px;margin:0 auto;padding:0 var(--gutter)}
section{padding:40px 0}
.eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

/* números */
.nums{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:600px){.nums{grid-template-columns:repeat(4,1fr)}}
.num{background:rgba(27,58,50,.86);border:1px solid var(--line);border-radius:14px;padding:16px 14px;min-width:0;}
.num b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(26px,7vw,34px);line-height:1.05;font-variant-numeric:tabular-nums}
.num span{display:block;font-size:12px;color:var(--dim);margin-top:4px;line-height:1.3}
.num.live b::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:8px;vertical-align:middle;animation:breathe 2.4s ease-in-out infinite}

/* projetos */
.cards{display:grid;gap:12px}
.card{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center;text-align:left;width:100%;
  background:rgba(27,58,50,.86);border:1px solid var(--line);border-radius:16px;padding:18px 16px;min-width:0;
  ;transition:border-color .5s ease,transform .6s cubic-bezier(.2,.7,.2,1),background-color .5s ease}
.card:hover,.card:focus-visible{border-color:var(--mute);transform:translateY(-3px);background:rgba(26,48,42,.85);outline:none}
.card .arrow{transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s}
.card:hover .arrow{transform:translate(2px,-2px) rotate(8deg);border-color:var(--mute)}
.card .tag{grid-column:1/-1;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.card h3{grid-column:1;font-family:var(--serif);font-weight:400;font-size:clamp(22px,6vw,28px);line-height:1.1;margin:0;text-wrap:balance}
.card .arrow{grid-column:2;grid-row:2/4;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--mute);font-size:16px}
.card p{grid-column:1;margin:0;color:var(--mute);font-size:14px;max-width:46ch}
.card .stat{grid-column:1/-1;font-size:12.5px;color:var(--dim);font-variant-numeric:tabular-nums}
.card .stat b{color:var(--fg);font-weight:500}

/* projetos como capítulos */
.projects .wrap,.projects{max-width:980px}
.chapters{display:grid;gap:18px}
.chapter{display:grid;grid-template-columns:1fr;gap:18px;align-items:center;
  background:rgba(27,58,50,.86);border:1px solid var(--line);border-radius:22px;padding:22px 20px;min-width:0;
  position:relative;overflow:hidden}
.chapter::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 85% 20%,rgba(244,216,114,.08),transparent 70%);pointer-events:none}
.chapter-mark{position:relative;width:88px;height:88px;flex:none;display:grid;place-items:center;
  transform:translate(var(--mx,0),var(--my,0));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.chapter-mark svg{width:72px;height:72px;fill:none;stroke:var(--fg);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.chapter-mark svg .dot{fill:var(--accent);stroke:none;filter:drop-shadow(0 0 8px rgba(244,216,114,.7))}
.chapter-n{position:absolute;left:0;top:-6px;font-family:var(--serif);font-size:13px;color:var(--dim);letter-spacing:.08em}
.chapter-body{min-width:0}
.chapter .tag{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.chapter h3{font-family:var(--serif);font-weight:400;font-size:clamp(30px,7.5vw,46px);line-height:1.02;letter-spacing:-.01em;margin:0 0 10px;text-wrap:balance}
.chapter .line{font-family:var(--serif);font-size:clamp(17px,4.2vw,21px);line-height:1.35;color:var(--fg);margin:0 0 10px;max-width:34ch;text-wrap:balance}
.chapter .lead{font-family:var(--sans);font-size:14.5px;color:var(--mute);margin:0 0 16px;max-width:58ch;line-height:1.6}
.chapter-actions{display:flex;flex-wrap:wrap;gap:10px}
.btn-open,.btn-more{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;font-size:14px;text-decoration:none;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),background-color .3s,border-color .3s}
.btn-open{background:var(--fg);color:var(--bg);font-weight:500}
.btn-more{border:1px solid var(--line);color:var(--fg);background:transparent}
.btn-open:hover,.btn-more:hover{transform:translateY(-2px)}
.btn-more:hover{border-color:var(--mute)}
@media(min-width:760px){
  .chapter{grid-template-columns:200px 1fr;gap:28px;padding:30px 30px 30px 26px}
  .chapter:nth-child(even){grid-template-columns:1fr 200px}
  .chapter:nth-child(even) .chapter-mark{order:2;justify-self:end}
  .chapter-mark{width:180px;height:180px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.04),transparent)}
  .chapter-mark svg{width:112px;height:112px}
  .chapter-n{left:12px;top:10px}
}
@media(max-width:759px){
  .chapter{grid-template-columns:1fr;gap:10px;padding:20px 18px}
  .chapter-mark{width:60px;height:60px;justify-self:start}
  .chapter-mark svg{width:52px;height:52px}
  .chapter-n{display:none}
  .chapter h3{font-size:clamp(28px,8.5vw,38px)}
  .chapter .lead{font-size:14px}
  .btn-open,.btn-more{padding:12px 16px;font-size:14.5px}
}
.chapters .reveal:nth-child(n){transition-delay:0s}

/* marcas animadas ao entrar na tela */
.chapter-mark svg path,.chapter-mark svg rect,.chapter-mark svg circle:not(.dot){stroke-dasharray:420;stroke-dashoffset:420}
.chapter.play .chapter-mark svg path,.chapter.play .chapter-mark svg rect,.chapter.play .chapter-mark svg circle:not(.dot){animation:draw 2.4s cubic-bezier(.3,.6,.2,1) forwards}
.chapter.play .chapter-mark svg :nth-child(2){animation-delay:.35s}
.chapter.play .chapter-mark svg :nth-child(3){animation-delay:.7s}
.chapter.play .chapter-mark svg :nth-child(4){animation-delay:1.05s}
.chapter-mark svg .dot{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0}
.chapter.play .chapter-mark svg .dot{animation:pop .7s cubic-bezier(.2,.9,.3,1.4) 2.2s forwards,breathe 2.6s ease-in-out 3s infinite}
.chapter-mark svg{transform-box:fill-box;transform-origin:center}
.chapter[data-id="precogames"].play .chapter-mark svg{animation:rise-in 1.8s cubic-bezier(.2,.7,.2,1) both}
.chapter[data-id="noticiadegame"].play .chapter-mark svg{animation:rise-in 1.8s cubic-bezier(.2,.7,.2,1) both}
.chapter[data-id="noticiadegame"].play .chapter-mark svg path:nth-child(2){animation:draw 2s .5s forwards,pulse 2.4s ease-in-out 3s infinite}
.chapter[data-id="festival"].play .chapter-mark svg{animation:rise-in 1.8s cubic-bezier(.2,.7,.2,1) both}
.chapter[data-id="conferencia"].play .chapter-mark svg path:nth-child(3){transform-box:fill-box;transform-origin:0% 100%;animation:draw 1.8s .6s forwards,needle 3.2s ease-in-out 2.8s infinite}
.chapter[data-id="jogoantigo"].play .chapter-mark svg{animation:rise-in 1.8s cubic-bezier(.2,.7,.2,1) both}
.chapter[data-id="meuretro"].play .chapter-mark svg{animation:rise-in 1.8s cubic-bezier(.2,.7,.2,1) both}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes rise-in{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:.92}}
@keyframes spin-in{from{transform:rotate(-14deg) scale(.9);opacity:0}to{transform:none;opacity:.92}}
@keyframes star-in{from{transform:rotate(-40deg) scale(.6);opacity:0}60%{transform:rotate(6deg) scale(1.04);opacity:.92}to{transform:none;opacity:.92}}
@keyframes swing{from{transform:rotate(-10deg);opacity:0}50%{transform:rotate(4deg);opacity:.92}to{transform:none;opacity:.92}}
@keyframes needle{0%,100%{transform:rotate(0)}50%{transform:rotate(-18deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.chapter-mark svg *{animation:none!important;stroke-dashoffset:0!important;transform:none!important;opacity:1!important}}

/* compartilhar */
.share-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.btn-share{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;color:var(--fg);background:rgba(20,46,39,.5);transition:border-color .3s,transform .4s cubic-bezier(.2,.7,.2,1)}
.btn-share:hover{border-color:var(--mute);transform:translateY(-2px)}
.btn-share svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero .share-row{animation:rise 1.3s 1s both cubic-bezier(.2,.7,.2,1)}

/* por dentro: fatos do ecossistema */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:700px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:rgba(27,58,50,.86);border:1px solid var(--line);border-radius:14px;padding:16px 14px;min-width:0;}
.fact b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(24px,6vw,30px);line-height:1.05;letter-spacing:-.01em}
.fact span{display:block;font-size:12.5px;color:var(--mute);margin-top:6px;line-height:1.35}

/* o que eu faço */
.pillars{display:grid;gap:12px}
@media(min-width:700px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{background:rgba(27,58,50,.86);border:1px solid var(--line);border-radius:16px;padding:18px 16px;min-width:0;}
.pillar h3{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.15;margin:0 0 8px;text-wrap:balance}
.pillar h3::before{content:"";display:block;width:22px;height:2px;background:var(--accent);margin-bottom:12px;opacity:.9}
.pillar p{margin:0;color:var(--mute);font-size:14px}

/* painel */
.panel{position:fixed;z-index:20;inset:auto 0 0 0;max-height:92svh;background:var(--bg2);border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
  overflow:auto;padding:18px var(--gutter) calc(28px + env(safe-area-inset-bottom,0px))}
.panel[aria-hidden="false"]{transform:none}
@media(min-width:900px){
  .panel{inset:0 0 0 auto;width:min(520px,100%);max-height:none;border-radius:0;border-top:0;border-left:1px solid var(--line);transform:translateX(105%);padding-top:28px}
}
.panel .handle{width:40px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 14px}
@media(min-width:900px){.panel .handle{display:none}}
.panel .close{position:absolute;top:14px;right:var(--gutter);font-size:12.5px;color:var(--mute);padding:6px 8px}
.panel .tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:8px 0 10px}
.panel h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,8vw,40px);line-height:1.05;margin:0 0 12px;text-wrap:balance;max-width:14ch}
.panel p{color:var(--mute);margin:10px 0;max-width:52ch;font-size:15px}
.panel .stat{font-size:13px;color:var(--dim);margin-top:6px}
.panel .stat b{color:var(--fg);font-weight:500}
.panel .visit{display:inline-block;margin-top:20px;padding:12px 18px;border-radius:999px;background:var(--fg);color:var(--bg);text-decoration:none;font-weight:500;font-size:14px}
.panel .visit[hidden]{display:none}
.scrim{position:fixed;inset:0;z-index:15;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.on{opacity:1;pointer-events:auto}

/* sobre */
.about p{color:var(--mute);max-width:58ch;font-size:15.5px}
.about p:first-of-type{font-family:var(--serif);font-size:18px;color:var(--fg)}
.contact{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.contact a,.contact button{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;
  font-size:13.5px;color:var(--fg);text-decoration:none;background:rgba(27,58,50,.75)}
.contact .dim{color:var(--dim);font-size:12px}

footer{position:relative;z-index:2;padding:30px var(--gutter) calc(30px + env(safe-area-inset-bottom,0px));text-align:center;color:var(--dim);font-size:12px}
footer .lang-note{margin-top:6px}

/* animações (CSS puro, como a Pandora) */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes letter{from{opacity:0;transform:translateY(26px) scale(.985);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes breathe{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.hero .kicker,.hero .tag,.hero .logos,.hero .cta{animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-duration:1.3s}
.hero h1 .w{animation-duration:1.2s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
#field{transition-duration:2.4s}
html.seen .hero *{animation-duration:.01s!important;animation-delay:0s!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#field{opacity:1}}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.cards .reveal:nth-child(2){transition-delay:.06s}.cards .reveal:nth-child(3){transition-delay:.12s}.cards .reveal:nth-child(4){transition-delay:.18s}.cards .reveal:nth-child(5){transition-delay:.24s}
.reveal.in,html.seen .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* tipografia: quebras de linha e viúvas */
p,.card p,.fact span,.pillar p,.panel p{text-wrap:pretty;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:anywhere}
h1,h2,h3,.hero .tag,.card h3,.pillar h3,.fact b,.panel h2{text-wrap:balance;hyphens:manual}
.hero .tag{max-width:30ch}
.card p{max-width:44ch}
.eyebrow{text-wrap:nowrap}
.eyebrow::after{transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.2,1) .1s}
.eyebrow.in::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.eyebrow::after{transform:none}}

/* rolagem: entrada com leve subida e desfoque; escalonamento em grades */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in,html.seen .reveal{opacity:1;transform:none}
.facts .reveal:nth-child(2),.pillars .reveal:nth-child(2){transition-delay:.07s}
.facts .reveal:nth-child(3),.pillars .reveal:nth-child(3){transition-delay:.14s}
.facts .reveal:nth-child(4){transition-delay:.21s}
.facts .reveal:nth-child(5){transition-delay:.28s}
.facts .reveal:nth-child(6){transition-delay:.35s}
.facts .reveal:nth-child(7){transition-delay:.42s}
.facts .reveal:nth-child(8){transition-delay:.49s}
.nums .num{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.nums .num.in,html.seen .nums .num{opacity:1;transform:none}
.nums .num:nth-child(2){transition-delay:.08s}.nums .num:nth-child(3){transition-delay:.16s}.nums .num:nth-child(4){transition-delay:.24s}
.about .text p{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease}
.about .text p.in,html.seen .about .text p{opacity:1;transform:none}
.about .text p:nth-child(2){transition-delay:.12s}.about .text p:nth-child(3){transition-delay:.24s}

/* abertura: desaparece suavemente ao rolar (controlado pelo JS via --hero-p) */
.hero .in{transform:translateY(calc(var(--hero-p,0) * -40px)) scale(calc(1 - var(--hero-p,0) * .04));opacity:calc(1 - var(--hero-p,0) * 1.15);will-change:transform,opacity}

/* hover: inclinação leve que segue o mouse (só com ponteiro fino) */
@media (hover:hover) and (pointer:fine){
  .card,.pillar,.fact{transform-style:preserve-3d}
  .card.is-tilt{transition:border-color .5s ease,background-color .5s ease,transform .12s ease-out}
  .card.is-tilt:hover{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){.hero .in{transform:none;opacity:1}.reveal,.nums .num,.about .text p{opacity:1;transform:none;filter:none}}

/* chegada: menos texto no celular, entrada mais lenta */
@media(max-width:600px){.hero .logos li:nth-child(n+4){display:none}.hero .logos{margin-top:18px}}
html:not(.seen) .hero h1 .w{animation-duration:1.8s}
html:not(.seen) .hero .tag{animation-delay:.9s;animation-duration:1.8s}
html:not(.seen) .hero .logos{animation-delay:1.5s}
html:not(.seen) .hero .cta{animation-delay:1.9s}
html:not(.seen) .hero .share-row{animation-delay:2.2s}
.hero h1 .w.is-scrambling,.hero .tag.is-scrambling{color:var(--fg)}

/* capítulo inteiro clicável; itens entram em etapas */
.chapter{cursor:pointer}
.chapter:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.chapter .tag,.chapter h3,.chapter .line,.chapter .lead,.chapter-actions{opacity:0;transform:translateY(12px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.chapter.in .tag{opacity:1;transform:none;transition-delay:.1s}
.chapter.in h3{opacity:1;transform:none;transition-delay:.35s}
.chapter.in .line{opacity:1;transform:none;transition-delay:.7s}
.chapter.in .lead{opacity:1;transform:none;transition-delay:1.1s}
.chapter.in .chapter-actions{opacity:1;transform:none;transition-delay:1.5s}
.chapter:hover .btn-more{border-color:var(--mute);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.chapter .tag,.chapter h3,.chapter .line,.chapter .lead,.chapter-actions{opacity:1;transform:none}}
/* painel: × para fechar, chamada em destaque */
.panel .close{font-size:26px;line-height:1;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;padding:0;color:var(--fg)}
.panel .close:hover{border-color:var(--mute)}
.panel .lead{font-family:var(--serif);font-size:19px;line-height:1.35;color:var(--fg);margin:0 0 12px;max-width:34ch}

/* celular: sem as linhas de TV; a névoa faz o trabalho */
@media (max-width:700px), (pointer:coarse){
  .grain{display:none}
}

/* sem o destaque azul do toque no celular */
*{-webkit-tap-highlight-color:transparent}
.chapter,.btn-more,.btn-share,.cta,.langs a,.contact a,.contact button{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}

/* ===== cena do projeto ===== */
body.scene-open{overflow:hidden}
.scene{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-left,0px));
  background:rgba(8,20,16,.78);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .45s ease}
.scene[aria-hidden="false"]{opacity:1;pointer-events:auto}
.scene-close{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:rgba(27,58,50,.85);color:var(--fg);font-size:28px;line-height:1;display:grid;place-items:center}
.scene-inner{width:min(1080px,100%);max-height:calc(100svh - 32px);display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;
  transform:translateY(18px) scale(.98);transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.scene[aria-hidden="false"] .scene-inner{transform:none}
.scene-art{min-width:0}
.diagram{width:100%;height:auto;display:block;overflow:visible}
.diagram .edge{fill:none;stroke:var(--mute);stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:700;stroke-dashoffset:700}
.scene[aria-hidden="false"] .diagram .edge{animation:draw 1.6s cubic-bezier(.3,.6,.2,1) forwards;animation-delay:calc(.35s + var(--i) * .11s)}
.diagram .flow{fill:var(--accent);opacity:0;filter:drop-shadow(0 0 4px rgba(244,216,114,.8))}
.scene[aria-hidden="false"] .diagram .flow{animation:flowin .6s ease forwards;animation-delay:calc(1.4s + var(--i) * .11s)}
.diagram .node{opacity:0;transform-box:fill-box;transform-origin:center}
.scene[aria-hidden="false"] .diagram .node{animation:nodein .7s cubic-bezier(.2,.9,.3,1.3) forwards;animation-delay:calc(.15s + var(--i) * .13s)}
.diagram .node rect{fill:rgba(27,58,50,.92);stroke:var(--line);stroke-width:1.2}
.diagram .node text{fill:var(--fg);font-family:var(--sans);font-size:11.5px;letter-spacing:.01em}
.diagram .hub rect{fill:var(--fg);stroke:none}
.diagram .hub text{fill:var(--bg);font-family:var(--serif);font-size:19px}
.scene[aria-hidden="false"] .diagram .hub{animation-delay:0s}
.diagram .feed{fill:var(--accent);font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;opacity:0;animation:fade .8s 1.8s forwards}
@keyframes nodein{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes flowin{to{opacity:.95}}
@keyframes fade{to{opacity:1}}
.scene-text{min-width:0;max-height:calc(100svh - 32px);overflow:auto;padding:6px 4px 6px 0;-webkit-overflow-scrolling:touch}
.scene-text .tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.scene-text h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,5vw,46px);line-height:1.02;margin:0 0 12px;min-height:1em;text-wrap:balance}
.scene-text .lead{font-family:var(--serif);font-size:clamp(17px,2.2vw,21px);line-height:1.35;color:var(--fg);margin:0 0 14px;min-height:1.3em;max-width:34ch}
.scene-text .body p{color:var(--mute);font-size:14.5px;line-height:1.6;margin:0 0 10px;max-width:56ch;min-height:1.6em}
.scene-text .typing::after{content:"▍";color:var(--accent);animation:breathe .9s steps(2) infinite}
.scene-text .visit{display:inline-block;margin-top:12px;padding:12px 18px;border-radius:999px;background:var(--fg);color:var(--bg);text-decoration:none;font-weight:500;font-size:14px;opacity:0;transform:translateY(8px);transition:opacity .6s,transform .6s}
.scene-text .visit.in{opacity:1;transform:none}
.scene-text .visit[hidden]{display:none}
.scene-text .hint{font-size:11.5px;color:var(--dim);margin:16px 0 0}
@media(max-width:860px){
  .scene{padding:0;align-items:end}
  .scene-inner{grid-template-columns:1fr;gap:10px;max-height:100svh;height:100svh;align-content:start;padding:calc(64px + env(safe-area-inset-top,0px)) 16px 16px;transform:translateY(40px)}
  .scene-art{height:min(44svh,360px)}
  .diagram{height:100%;width:100%}
  .diagram .node text{font-size:13px}
  .diagram .hub text{font-size:21px}
  .scene-text{max-height:none;flex:1;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .scene-text h2{font-size:clamp(28px,8vw,36px)}
}
@media (prefers-reduced-motion:reduce){.diagram .edge{stroke-dashoffset:0;animation:none}.diagram .node,.diagram .flow,.diagram .feed{opacity:1;animation:none}}

/* peças tocáveis */
.diagram .node{cursor:pointer}
.diagram .node rect{transition:stroke .3s,fill .3s}
.diagram .node:hover rect,.diagram .node.on rect{stroke:var(--accent)}
.diagram .node.on:not(.hub) rect{fill:rgba(244,216,114,.12)}
.diagram.has-on .edge{stroke-opacity:.18;transition:stroke-opacity .3s}
.diagram.has-on .edge.on{stroke:var(--accent);stroke-opacity:.9;stroke-width:1.6}
.diagram.has-on .flow{opacity:.15!important}
.diagram.has-on .flow.on{opacity:1!important}
.diagram.has-on .node:not(.on):not(.hub){opacity:.55!important}
.scene-caption{font-family:var(--serif);font-size:15.5px;line-height:1.4;color:var(--fg);text-align:center;margin:8px auto 0;max-width:40ch;min-height:2.8em}
/* mapa do ecossistema na página */
.eco-wrap{max-width:720px;margin:0 auto}
.diagram.eco .edge{stroke-dasharray:700;stroke-dashoffset:700}
.diagram.eco.play .edge{animation:draw 1.8s cubic-bezier(.3,.6,.2,1) forwards;animation-delay:calc(.3s + var(--i) * .12s)}
.diagram.eco .node{opacity:0}
.diagram.eco.play .node{animation:nodein .8s cubic-bezier(.2,.9,.3,1.3) forwards;animation-delay:calc(.1s + var(--i) * .15s)}
.diagram.eco .flow{opacity:0}
.diagram.eco.play .flow{animation:flowin .6s ease forwards;animation-delay:calc(1.6s + var(--i) * .12s)}
.diagram.eco .node text{font-size:13px}
.diagram.eco .hub text{font-family:var(--sans);font-size:17px;letter-spacing:.02em}
.diagram.eco .node:focus-visible rect{stroke:var(--accent)}
.eco-hint{text-align:center;font-size:12px;color:var(--dim);margin:6px 0 0}
@media(max-width:600px){.diagram.eco .node text{font-size:14.5px}.diagram.eco .hub text{font-size:19px}}
@media (prefers-reduced-motion:reduce){.diagram.eco .edge{stroke-dashoffset:0;animation:none}.diagram.eco .node,.diagram.eco .flow{opacity:1;animation:none}}

/* chegada: Fale comigo + compartilhar discreto + indicador de rolar */
.hero-actions{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:30px;animation:rise 1.3s .85s both cubic-bezier(.2,.7,.2,1)}
.btn-talk{padding:13px 22px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:500;font-size:14.5px;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.btn-talk:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(244,216,114,.12)}
.btn-share-mini{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;background:transparent}
.btn-share-mini .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hero .share-row{display:none}
.hero .cta.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:40px;padding:0;border:0;background:none;backdrop-filter:none;color:var(--dim);font-size:11px;letter-spacing:.22em;text-transform:uppercase;animation:rise 1.3s 1.3s both cubic-bezier(.2,.7,.2,1)}
.hero .cta.scroll-cue::after{content:none}
.hero .cta.scroll-cue:hover{transform:none;color:var(--mute)}
.scroll-line{position:relative;width:1px;height:56px;background:linear-gradient(to bottom,var(--line),transparent);overflow:hidden;display:block}
.scroll-line i{position:absolute;left:-1px;top:-14px;width:3px;height:14px;border-radius:2px;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:cue 2.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cue{0%{top:-14px;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:60px;opacity:0}}

/* princípios: um por vez */
.principle{position:relative;background:rgba(27,58,50,.86);border:1px solid var(--line);border-radius:22px;padding:28px 24px 22px;min-height:230px;cursor:pointer;overflow:hidden}
.principle::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 15% 10%,rgba(244,216,114,.08),transparent 70%);pointer-events:none}
.principle-n{font-family:var(--serif);font-size:13px;color:var(--dim);letter-spacing:.08em;margin-bottom:10px}
.principle-title{font-family:var(--serif);font-weight:400;font-size:clamp(30px,6.5vw,48px);line-height:1.02;margin:0 0 12px;min-height:1.05em;text-wrap:balance;letter-spacing:-.01em}
.principle-text{font-size:15.5px;line-height:1.55;color:var(--mute);margin:0;max-width:52ch;min-height:3.1em}
.principle-dots{display:flex;gap:6px;margin-top:18px}
.principle-dots i{width:18px;height:2px;border-radius:2px;background:var(--line);transition:background .4s,width .4s}
.principle-dots i.on{background:var(--accent);width:34px}
.principle-hint{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:12px 0 0}
.principle:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(min-width:760px){.principle{padding:36px 36px 28px}}

/* folha de contato */
.sheet{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-left,0px));background:rgba(8,20,16,.7);backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity .35s}
.sheet[aria-hidden="false"]{opacity:1;pointer-events:auto}
.sheet-card{position:relative;width:min(440px,100%);background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:28px 22px 20px;transform:translateY(16px);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.sheet[aria-hidden="false"] .sheet-card{transform:none}
.sheet-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);font-size:26px;line-height:1;display:grid;place-items:center;color:var(--fg)}
.sheet-card h2{font-family:var(--serif);font-weight:400;font-size:30px;margin:0 0 6px}
.sheet-text{color:var(--mute);font-size:14px;margin:0 0 18px;max-width:34ch}
.sheet-link{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--line);border-radius:14px;color:var(--fg);text-decoration:none;margin-bottom:10px;font-size:15px;transition:border-color .3s}
.sheet-link:hover{border-color:var(--mute)}
.sheet-link .k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);min-width:74px}
.sheet-link .v{flex:1;min-width:0;overflow-wrap:anywhere}
.sheet-link .lab{font-size:12px}
@media(max-width:600px){.sheet{align-items:end;padding:0}.sheet-card{width:100%;border-radius:22px 22px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}}

/* indicador de rolar: linha fina com ponto de luz descendo (versão limpa) */
.scroll-line{width:1px;height:54px;background:rgba(255,255,255,.14);overflow:visible;border-radius:1px}
.scroll-line i{left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 2px rgba(244,216,114,.55);animation:cue2 2.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes cue2{0%{transform:translateY(-6px);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(52px);opacity:0}}

/* história em passos */
.story{position:relative;padding-left:36px;--p:0}
.story-track{position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.12)}
.story-fill{position:absolute;left:0;top:0;width:1px;height:calc(var(--p) * 100%);background:linear-gradient(to bottom,rgba(244,216,114,.2),var(--accent))}
.story-dot{position:absolute;left:-4px;top:calc(var(--p) * 100%);width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px 3px rgba(244,216,114,.5)}
.story-steps{display:grid;gap:clamp(44px,9vh,84px)}
.story-step{position:relative;opacity:.28;transform:translateX(8px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);min-width:0}
.story-step::before{content:"";position:absolute;left:-32px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--line);transition:background .5s,box-shadow .5s}
.story-step.in{opacity:1;transform:none}
.story-step.in::before{background:var(--accent);box-shadow:0 0 8px rgba(244,216,114,.6)}
.story-step h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,6vw,44px);line-height:1.05;margin:0 0 8px;letter-spacing:-.01em;text-wrap:balance;min-height:1.05em;max-width:18ch}
.story-step p{font-size:15px;line-height:1.5;color:var(--mute);margin:0;max-width:48ch;min-height:1.5em}
.about .text[hidden]{display:none}
@media(min-width:760px){.story{padding-left:48px}.story-track{left:12px}.story-step::before{left:-42px}}
@media (prefers-reduced-motion:reduce){.story-step{opacity:1;transform:none}}

/* passos da história: a linha de baixo em sans, discreta (vence .about p:first-of-type) */
.about .story-step p,.about .story-step p:first-of-type{font-family:var(--sans);font-size:15px;color:var(--mute)}

.story-cta{margin-top:clamp(28px,6vh,48px)}
.story-cta .btn-talk{font-size:15.5px;padding:14px 26px}

/* digitação: cursor só enquanto escreve */
.typing::after{content:"▍";color:var(--accent);margin-left:1px;animation:breathe .9s steps(2) infinite}
.hero h1 .w.typing::after{content:""}
.scene .diagram,.diagram.eco{will-change:auto}
.hero .in{will-change:transform,opacity}

/* indicador de rolar: ponto desce continuamente; a linha esmaece as pontas (sem piscar) */
.scroll-line{position:relative;display:block;width:1px;height:56px;background:rgba(255,255,255,.14);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.scroll-line i{position:absolute;left:-2px;top:-6px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px 2px rgba(244,216,114,.5);
  animation:cue3 2.6s cubic-bezier(.45,0,.55,1) infinite;will-change:transform}
@keyframes cue3{from{transform:translateY(0)}to{transform:translateY(68px)}}
@media (prefers-reduced-motion:reduce){.scroll-line i{animation:none;top:24px}}

/* a bolinha do rolar e o ponto da marca continuam com o tempo certo mesmo em visita repetida */
html.seen .hero .scroll-line i{animation-duration:2.6s!important;animation-delay:0s!important}
html.seen .top .brand i{animation-duration:3s!important}

/* fundo liso: sem linhas de TV em lugar nenhum */
.grain{display:none}
/* história: linha tracejada que vira desenho */
.story{padding-left:0}
.story-track{display:none}
.story-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.story-dash{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:7 7;stroke-linecap:round;opacity:.85}
.story-dot2{fill:var(--accent);filter:drop-shadow(0 0 8px rgba(244,216,114,.8))}
.story-icon path{fill:none;stroke:var(--fg);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.92;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1)}
.story-icon{transform-box:fill-box}
.story-steps{display:grid;gap:clamp(64px,13vh,120px)}
.story-step{margin-left:16%;max-width:30ch}
.story-step:nth-child(even){margin-left:50%}
.story-step::before{content:none}
@media(max-width:700px){.story-step{margin-left:22%;max-width:none}.story-step:nth-child(even){margin-left:40%}.story-steps{gap:clamp(64px,12vh,96px)}}
@media(prefers-reduced-motion:reduce){.story-icon path{transition:none}}

.story-step{margin-left:18%}
.story-step:nth-child(even){margin-left:52%}
.story-icon.drawn path{animation:iconglow 1.6s ease-out .6s both}
@keyframes iconglow{0%{filter:drop-shadow(0 0 0 rgba(244,216,114,0))}35%{filter:drop-shadow(0 0 10px rgba(244,216,114,.9))}100%{filter:drop-shadow(0 0 0 rgba(244,216,114,0))}}
@media(max-width:700px){.story-step{margin-left:30%}.story-step:nth-child(even){margin-left:42%}}

/* cena: palavras aparecendo de cima para baixo */
.scene-text .rw{opacity:0;animation:rw .32s ease-out both}
@keyframes rw{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.scene-text .rw{animation:none;opacity:1}}

/* setas da cena */
.scene-nav{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.snav{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font:500 14px var(--sans);cursor:pointer;transition:border-color .25s,background .25s,transform .25s}
.snav:hover{border-color:var(--mute);transform:translateY(-1px)}
.snav.next{margin-left:auto;background:var(--fg);color:var(--bg);border-color:var(--fg)}
.snav.next.is-last{background:var(--accent);border-color:var(--accent);color:#14301f}
.snav[disabled]{opacity:.3;pointer-events:none}
.snav .ar{font-size:16px;line-height:1}
.snav-count{font-size:12px;color:var(--dim);letter-spacing:.08em;font-variant-numeric:tabular-nums}
.scene-inner{transition:opacity .16s ease,transform .16s ease}
.scene-inner.swap-next{opacity:0;transform:translateX(-18px)}
.scene-inner.swap-prev{opacity:0;transform:translateX(18px)}
@media(max-width:700px){
  .scene-nav{position:sticky;bottom:0;margin-top:18px;padding:12px 0 calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 70%,transparent);border-top:0}
  .snav{padding:11px 14px;font-size:13.5px}
  .snav.next.is-last .t{max-width:40vw;white-space:normal;line-height:1.15;text-align:left}
}
/* celular: a legenda fica dentro do quadro do desenho; contagem numa linha */
.snav-count{white-space:nowrap;flex:none}
@media(max-width:700px){
  .scene-art{display:flex;flex-direction:column;min-height:0}
  .scene-art .diagram{flex:1;min-height:0;height:auto}
  .scene-caption{flex:none;min-height:2.6em;margin:2px auto 0;font-size:14px}
}

.scene-text .hint:empty{display:none}

/* "Abrir o site": já nasce no lugar, sem empurrar nada */
.scene-nav .visit{display:inline-block;margin:0 auto;padding:0;background:none;color:var(--fg);opacity:1;transform:none;transition:none;font:500 14px var(--sans);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--dim)}
.scene-nav .visit:hover{text-decoration-color:var(--accent)}
.scene-nav .visit[hidden]{display:none}
.snav.next{margin-left:0}
.scene-nav{justify-content:space-between}
@media(max-width:700px){
  .scene-nav{flex-wrap:wrap;row-gap:12px}
  .scene-nav .visit{flex-basis:100%;order:-1;margin:0;text-align:left;font-size:14px;color:var(--mute)}
}

/* celular: a caixa de texto da cena ocupa só a linha dela (antes centralizava e vazava sobre o desenho) */
@media(max-width:700px){
  .scene-inner{grid-template-rows:min(44svh,360px) minmax(0,1fr);align-items:stretch}
  .scene-art{height:auto}
  .scene-text{max-height:none;height:auto;min-height:0;overflow:auto}
}
/* mapa de habilidades: a frase da habilidade tocada */
.eco-hint{min-height:2.8em;max-width:46ch;margin-left:auto;margin-right:auto;text-align:center;font-family:var(--serif);font-size:15.5px;line-height:1.4;color:var(--fg)}
.diagram.eco .node{cursor:pointer}
/* fim da página: tudo centrado */
.story-cta{text-align:center}
#contact-title{justify-content:center}
#contact-title::after{display:none}
.contact{justify-content:center}
footer{text-align:center}

.eco-wrap{margin-bottom:34px}

/* ---- capacidades primeiro (prévia) ---- */
.hero .reach{font-family:var(--sans);font-size:13.5px;color:var(--dim);margin:14px auto 0;max-width:42ch;text-wrap:balance}
.hero .reach::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:10px;vertical-align:middle;box-shadow:0 0 10px var(--accent)}
.chapter.play .chapter-mark svg{animation:rise-in 1.8s cubic-bezier(.2,.7,.2,1) both}
.proj-strip{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:560px){.proj-strip{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.proj-strip{grid-template-columns:repeat(3,1fr)}}
.proj{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(27,58,50,.86);color:var(--fg);cursor:pointer;min-width:0;transition:border-color .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.proj:hover,.proj:focus-visible{border-color:var(--mute);transform:translateY(-2px);outline:none}
.proj svg{width:40px;height:40px;fill:none;stroke:var(--fg);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.proj svg .dot{fill:var(--accent);stroke:none}
.proj span{min-width:0}
.proj b{display:block;font:400 17px/1.15 var(--serif);text-wrap:balance}
.proj small{display:block;font-size:11px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin-top:4px;line-height:1.35}
#projetos{margin-top:40px;margin-bottom:56px}
@media(min-width:900px){#projetos{margin-top:56px;margin-bottom:72px}}
.proof{margin-top:18px}
.proof[hidden]{display:none}
.proof-k{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.proof-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font:500 13px var(--sans);cursor:pointer;transition:border-color .25s,transform .25s}
.chip:hover{border-color:var(--accent);transform:translateY(-1px)}
.chip::after{content:" →";color:var(--dim)}

/* ---- rodada 2: leitura, botões, ícones vivos ---- */
p,.chapter .lead,.chapter .line,.scene .body p,.scene .lead,.story-steps p,.eco-hint,.scene-caption{hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;text-wrap:pretty}
.chapter h3{max-width:15ch}
.chapter .line{max-width:40ch;line-height:1.42}
.chapter .lead{max-width:62ch;line-height:1.65}
.scene .lead{max-width:40ch;line-height:1.4}
.scene .body p{max-width:62ch;line-height:1.65}
.hero .logos{display:none}
.btn-talk{background:transparent;color:var(--fg);border:1px solid var(--line);padding:11px 20px;font-weight:500;letter-spacing:.01em;display:inline-flex;align-items:center;gap:10px;box-shadow:none}
.btn-talk::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:breathe 3s ease-in-out infinite}
.btn-talk:hover{border-color:var(--mute);box-shadow:none;transform:translateY(-1px)}
.story-cta .btn-talk{font-size:15px;padding:12px 24px}
.top{gap:12px}
.top .brand{margin-right:auto}
.top .btn-share{padding:7px 12px;font-size:12.5px;background:rgba(20,46,39,.55);border-color:var(--line)}
.top .btn-share svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:600px){.top .btn-share .t{display:none}.top .btn-share{padding:7px 9px}}
/* marca inclina e brinca com o mouse */
@media (hover:hover) and (pointer:fine){
  .chapter:hover .chapter-mark{transform:translate(var(--mx,0),var(--my,0)) perspective(520px) rotateY(calc(var(--tx,0)*14deg)) rotateX(calc(var(--ty,0)*-14deg));transition:transform .15s linear}
  .chapter:hover .chapter-mark svg{opacity:1}
  .chapter:hover .chapter-mark svg .dot{animation:breathe .9s ease-in-out infinite!important}
}
.chapter-mark svg .gear{stroke-dasharray:1200;stroke-dashoffset:1200;transform-box:fill-box;transform-origin:center}
.chapter-mark svg .gear.hub{stroke-dasharray:420;stroke-dashoffset:420}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes swing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes rock{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes search{0%{transform:translate(0,0)}25%{transform:translate(8px,-6px)}50%{transform:translate(12px,6px)}75%{transform:translate(-4px,8px)}100%{transform:translate(0,0)}}
@keyframes pulse2{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes redraw{0%{stroke-dashoffset:420}60%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.chapter[data-id="automacao"].play .chapter-mark svg .gear.g1{animation:draw 2.4s cubic-bezier(.3,.6,.2,1) forwards,spin 18s linear 1s infinite}
.chapter[data-id="automacao"].play .chapter-mark svg .gear.g2{animation:draw 2.4s .35s cubic-bezier(.3,.6,.2,1) forwards,spinr 14s linear 1s infinite}
.chapter[data-id="automacao"].play .chapter-mark svg .gear.g3{animation:draw 2.4s .7s cubic-bezier(.3,.6,.2,1) forwards,spin 10s linear 1s infinite}
.chapter[data-id="automacao"]:hover .chapter-mark svg .gear.g1{animation:draw .01s forwards,spin 2.6s linear infinite}
.chapter[data-id="automacao"]:hover .chapter-mark svg .gear.g2{animation:draw .01s forwards,spinr 2s linear infinite}
.chapter[data-id="automacao"]:hover .chapter-mark svg .gear.g3{animation:draw .01s forwards,spin 1.4s linear infinite}
.chapter[data-id="sistemas"] .chapter-mark svg .lamp{stroke:var(--accent)}
.chapter[data-id="sistemas"]:hover .chapter-mark svg .lamp{animation:draw .01s forwards,blink .9s ease-in-out infinite}
.chapter[data-id="sistemas"]:hover .chapter-mark svg .l2{animation-delay:0s,.3s}
.chapter[data-id="sistemas"]:hover .chapter-mark svg .l3{animation-delay:0s,.6s}
.chapter[data-id="dados"]:hover .chapter-mark svg .chart{animation:redraw 1.6s ease-out infinite}
.chapter[data-id="dados"]:hover .chapter-mark svg .dot{animation:bob 1.6s ease-in-out infinite!important;transform-box:fill-box;transform-origin:center}
.chapter[data-id="marca"] .chapter-mark svg .palette,.chapter[data-id="marca"] .chapter-mark svg .brush{transform-box:fill-box;transform-origin:center}
.chapter[data-id="marca"]:hover .chapter-mark svg .palette{animation:draw .01s forwards,swing 1.8s ease-in-out infinite}
.chapter[data-id="marca"]:hover .chapter-mark svg .brush{animation:draw .01s forwards,bob 1.1s ease-in-out infinite}
.chapter[data-id="alcance"] .chapter-mark svg .lens{transform-box:fill-box;transform-origin:center}
.chapter[data-id="alcance"]:hover .chapter-mark svg .lens{animation:search 2.4s ease-in-out infinite}
.chapter[data-id="gente"] .chapter-mark svg .p1,.chapter[data-id="gente"] .chapter-mark svg .p2{transform-box:fill-box;transform-origin:center bottom}
.chapter[data-id="gente"]:hover .chapter-mark svg .p1{animation:bob 1s ease-in-out infinite}
.chapter[data-id="gente"]:hover .chapter-mark svg .p2{animation:bob 1s ease-in-out .5s infinite}
.chapter[data-id="base"] .chapter-mark svg .shield{transform-box:fill-box;transform-origin:center}
.chapter[data-id="base"]:hover .chapter-mark svg .shield{animation:draw .01s forwards,pulse2 1.4s ease-in-out infinite}
.chapter[data-id="base"]:hover .chapter-mark svg .check{animation:redraw 1.4s ease-out infinite}
.chapter[data-id="vendas"] .chapter-mark svg .cart{transform-box:fill-box;transform-origin:center bottom}
.chapter[data-id="vendas"]:hover .chapter-mark svg .cart{animation:rock 1.2s ease-in-out infinite}
.chapter[data-id="vendas"] .chapter-mark svg .up{transform-box:fill-box;transform-origin:center}
.chapter[data-id="vendas"]:hover .chapter-mark svg .up{animation:draw .01s forwards,bob .9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.chapter-mark svg *{animation:none!important}}
.diagram .edge{stroke-opacity:.42}

/* ---- rodada 3 ---- */
.caps-for{font-family:var(--serif);color:var(--mute);font-size:16.5px;line-height:1.5;max-width:54ch;margin:-6px 0 22px;text-wrap:pretty}
.chapter .pieces{font-size:13px;color:var(--dim);line-height:1.75;max-width:60ch;margin:0 0 16px;letter-spacing:.01em}
.chapter .tag,.scene .tag,.proj small,.eyebrow{color:#97a399}
.snav-count{display:flex;gap:7px;align-items:center;padding:6px 0}
.sdot{width:7px;height:7px;border-radius:50%;background:var(--line);border:0;padding:0;cursor:pointer;transition:background .25s,transform .25s}
.sdot:hover{background:var(--mute)}
.sdot.on{background:var(--accent);transform:scale(1.35);box-shadow:0 0 8px rgba(244,216,114,.6)}
.back-cap{flex-basis:100%;order:-1;background:none;border:0;color:var(--dim);font:500 13px var(--sans);text-align:left;padding:0 0 8px;cursor:pointer;transition:color .25s}
.back-cap:hover{color:var(--fg)}
.back-cap[hidden]{display:none}
.ask-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.ask-picked{font-size:13px;color:var(--mute);width:100%;min-height:1em}
.btn-wa{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:var(--accent);color:#14301f;font:500 14.5px var(--sans);text-decoration:none;transition:transform .3s,box-shadow .3s}
.btn-wa svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(244,216,114,.25)}
.ask-alt{color:var(--dim);font-size:13px;text-decoration:underline;text-underline-offset:4px}
.ask-alt:hover{color:var(--fg)}
.diagram.ask .node:not(.hub) rect{stroke-dasharray:4 4}
.diagram.ask .node.pick rect{stroke:var(--accent);stroke-dasharray:none;fill:rgba(244,216,114,.16)}
.diagram.ask .edge{stroke-opacity:.18}
.diagram.ask .edge.pick{stroke:var(--accent);stroke-opacity:.95;stroke-width:1.6}
.diagram.ask .flow{opacity:.12!important}
.diagram.ask .flow.pick{opacity:1!important}
.morph{position:fixed;z-index:60;pointer-events:none;transition:transform .58s cubic-bezier(.2,.7,.2,1),opacity .58s ease;will-change:transform,opacity;transform-origin:center}
.morph.mark svg{width:100%;height:100%;fill:none;stroke:var(--fg);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.95}
.morph.mark svg .dot{fill:var(--accent);stroke:none}
.morph.mark svg path,.morph.mark svg rect,.morph.mark svg circle{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important;transform:none!important}
.morph.title{font-family:var(--serif);color:var(--fg);white-space:nowrap;letter-spacing:-.01em;transform-origin:left top}
.contact .contact-wa,.sheet-wa{border-color:rgba(244,216,114,.5)}
.sheet-wa .v{color:var(--accent)}
.chapter h3{max-width:19ch}

/* ---- rodada 4: botões vivos ---- */
.top a,.top button{pointer-events:auto}
@media(max-width:600px){.top .btn-share.is-done .t{display:inline}}
.btn-share.is-done{border-color:var(--accent);color:var(--accent)}
.btn-talk,.btn-more,.snav,.chip,.proj,.btn-share,.btn-wa,.sheet-link,.contact a,.contact button,.back-cap,.scene-close,.sheet-close,.hero .cta{position:relative;overflow:hidden;isolation:isolate;transform:translate(var(--bx,0),var(--by,0)) translateY(0);transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .35s,background-color .3s,color .3s}
.btn-talk::after,.btn-more::after,.snav::after,.chip::after,.proj::after,.btn-share::after,.btn-wa::after,.sheet-link::after,.contact a::after,.contact button::after,.back-cap::after,.scene-close::after,.sheet-close::after,.hero .cta::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-130%);transition:transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:0}
.btn-talk:hover::after,.btn-more:hover::after,.snav:hover::after,.chip:hover::after,.proj:hover::after,.btn-share:hover::after,.btn-wa:hover::after,.sheet-link:hover::after,.contact a:hover::after,.contact button:hover::after,.back-cap:hover::after,.scene-close:hover::after,.sheet-close:hover::after,.hero .cta:hover::after{transform:translateX(130%)}
.btn-talk:hover,.btn-more:hover,.snav:hover,.chip:hover,.proj:hover,.btn-share:hover,.btn-wa:hover,.sheet-link:hover,.contact a:hover,.contact button:hover,.back-cap:hover,.scene-close:hover,.sheet-close:hover,.hero .cta:hover{transform:translate(var(--bx,0),var(--by,0)) translateY(-2px);border-color:rgba(244,216,114,.55);box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 1px rgba(244,216,114,.12),0 0 24px rgba(244,216,114,.10)}
.btn-talk:active,.btn-more:active,.snav:active,.chip:active,.proj:active,.btn-share:active,.btn-wa:active,.sheet-link:active,.contact a:active,.contact button:active,.back-cap:active,.scene-close:active,.sheet-close:active,.hero .cta:active{transform:translate(var(--bx,0),var(--by,0)) translateY(0) scale(.97);transition-duration:.12s;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.btn-talk > *,.btn-more > *,.snav > *,.chip > *,.proj > *,.btn-share > *,.btn-wa > *,.sheet-link > *,.contact a > *,.contact button > *,.back-cap > *,.scene-close > *,.sheet-close > *,.hero .cta > *{position:relative;z-index:1}
.ripple{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(244,216,114,.45) 0%,rgba(244,216,114,.18) 40%,transparent 70%);transform:scale(0);animation:ripple .65s cubic-bezier(.2,.7,.2,1) forwards;pointer-events:none;z-index:0}
@keyframes ripple{to{transform:scale(1);opacity:0}}
/* setas que andam */
.btn-more:hover{padding-right:22px}
.btn-more .t{transition:transform .3s}
.btn-more:hover .t{transform:translateX(-2px)}
.snav .ar{display:inline-block;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.snav.next:hover .ar{transform:translateX(4px)}
.snav.prev:hover .ar{transform:translateX(-4px)}
.snav.next.is-last:hover .ar{transform:translateY(3px)}
.chip:hover::after{background:linear-gradient(115deg,transparent 30%,rgba(244,216,114,.22) 50%,transparent 70%)}
.btn-wa:hover{box-shadow:0 12px 32px rgba(244,216,114,.35);filter:brightness(1.06)}
.snav.next:hover{box-shadow:0 12px 30px rgba(250,249,247,.18)}
.btn-talk:hover::before{box-shadow:0 0 16px var(--accent),0 0 4px var(--accent);transform:scale(1.4)}
.btn-talk::before{transition:transform .3s,box-shadow .3s}
.btn-share:hover svg{transform:translateY(-2px)}
.btn-share svg{transition:transform .3s}
.proj:hover svg{transform:scale(1.08) rotate(-4deg)}
.proj svg{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.scene-close:hover,.sheet-close:hover{transform:rotate(90deg) scale(1.05)}
.langs a{position:relative}
.langs a::after{content:"";position:absolute;left:6px;right:6px;bottom:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.langs a:hover::after{transform:scaleX(1)}
.langs a:hover{color:var(--fg)}
.sdot{transition:background .25s,transform .25s,box-shadow .25s}
.sdot:hover{transform:scale(1.6);background:var(--accent);box-shadow:0 0 10px rgba(244,216,114,.6)}
.hero .cta:hover .scroll-line i{animation-duration:.8s}
@media (prefers-reduced-motion:reduce){.btn-talk::after,.btn-more::after,.snav::after,.chip::after,.proj::after,.btn-share::after,.btn-wa::after,.sheet-link::after,.contact a::after,.contact button::after,.back-cap::after,.scene-close::after,.sheet-close::after,.hero .cta::after{display:none}.ripple{display:none}.btn-talk,.btn-more,.snav,.chip,.proj,.btn-share,.btn-wa,.sheet-link,.contact a,.contact button,.back-cap,.scene-close,.sheet-close,.hero .cta{transition:none}}
@media (hover:none){.btn-talk:hover,.btn-more:hover,.snav:hover,.chip:hover,.proj:hover,.btn-share:hover,.btn-wa:hover,.sheet-link:hover,.contact a:hover,.contact button:hover,.back-cap:hover,.scene-close:hover,.sheet-close:hover,.hero .cta:hover{transform:none;box-shadow:none}}

/* ---- rodada 5: o caminho das capacidades ---- */
#capacidades.wrap{max-width:1120px}
.caps-for{display:none}
#caps-title{position:relative;z-index:2;width:max-content;margin:-10px auto 18px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(20,46,39,.92)}
#caps-title::after{display:none}
.journey{margin-top:-6px}
.cards.chapters[hidden]{display:none}
.journey{position:relative;margin-top:10px}
.journey-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.j-dash{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:7 7;stroke-linecap:round;opacity:.85}
.j-dot{fill:var(--accent);filter:drop-shadow(0 0 8px rgba(244,216,114,.8))}
.stations{position:relative;z-index:1;display:grid;gap:clamp(40px,8vh,96px)}
.station{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;min-height:62vh}
.station:nth-child(even) .st-art{order:2}
.st-art{position:relative;background:rgba(27,58,50,.72);border:1px solid var(--line);border-radius:26px;padding:10px;min-width:0;transition:border-color .8s}
.station.on .st-art{border-color:rgba(244,216,114,.28)}
.st-art svg{display:block;width:100%;height:auto}
.st-caption{text-align:center;font-family:var(--serif);font-size:15px;color:var(--fg);margin:6px 0 4px;min-height:1.4em}
.st-text{min-width:0;opacity:0;transform:translateY(16px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.station.on .st-text{opacity:1;transform:none}
.st-text .tag{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#97a399;margin-bottom:8px}
.st-text h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.2vw,42px);line-height:1.04;letter-spacing:-.01em;margin:0 0 10px;text-wrap:balance;max-width:19ch}
.st-text .line{font-family:var(--serif);font-size:clamp(17px,2.2vw,20px);line-height:1.4;color:var(--fg);margin:0 0 16px;max-width:36ch;text-wrap:balance}
.st-text .lead{font-size:14.5px;color:var(--mute);line-height:1.6;margin:0 0 12px;max-width:44ch}
.st-lists{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:0 0 14px}
.st-lists b{display:block;font:500 11.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.st-lists ul{list-style:none;margin:0;padding:0}
.st-lists li{position:relative;padding-left:14px;font-size:14px;line-height:1.45;color:var(--mute);margin-bottom:6px;opacity:0;transform:translateX(-6px);transition:opacity .6s,transform .6s}
.st-lists li::before{content:"";position:absolute;left:0;top:.58em;width:5px;height:5px;border-radius:50%;background:var(--line)}
.station.on .st-lists li{opacity:1;transform:none}
.station.on .st-lists li:nth-child(1){transition-delay:.5s}.station.on .st-lists li:nth-child(2){transition-delay:.7s}.station.on .st-lists li:nth-child(3){transition-delay:.9s}
.station.on .st-lists li::before{background:var(--accent)}
.station .proof{margin-top:6px}
@media(max-width:760px){
  #capacidades.wrap{max-width:720px}
  .station{grid-template-columns:1fr;gap:16px;min-height:auto;padding-left:30px}
  .station:nth-child(even) .st-art{order:0}
  .st-lists{grid-template-columns:1fr;gap:10px}
  .st-text h3{max-width:none}
}
/* desenhos: traços que se desenham em ordem, rótulos que aparecem, movimento só com a estação à vista */
.art{fill:none;stroke:var(--fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.art .d{stroke-dasharray:100;stroke-dashoffset:100;opacity:.92}
.art .thin{stroke-opacity:.25;stroke-width:1.2}
.station.on .art .d{animation:drawn 1.3s cubic-bezier(.3,.7,.2,1) forwards;animation-delay:calc(.15s + var(--i) * .3s)}
@keyframes drawn{to{stroke-dashoffset:0}}
.art .lb{fill:var(--accent);font-family:var(--sans);font-size:13px;letter-spacing:.02em;stroke:none;opacity:0;transform:translateY(6px)}
@media(max-width:760px){.art .lb{font-size:17px}.art{stroke-width:2.4}}
.station.on .art .lb{animation:lbin .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(1s + var(--i) * .4s)}
@keyframes lbin{to{opacity:1;transform:none}}
.art .pt{fill:var(--accent);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.station.on .art .pt{animation:pop .6s cubic-bezier(.2,.9,.3,1.4) forwards;animation-delay:calc(1.4s + var(--i) * .25s)}
.art .spin,.art .spinr{transform-box:fill-box;transform-origin:center;animation-play-state:paused}
.station.on.vis .art .spin{animation:spin 9s linear infinite}
.station.on.vis .art .spinr{animation:spinr 7s linear infinite}
.art .belt rect{fill:rgba(244,216,114,.14);stroke:var(--accent);stroke-width:1.4;opacity:0}
.station.on .art .belt rect{opacity:1;transition:opacity .6s 1.6s}
.station.on.vis .art .belt{animation:belt 4s linear infinite}
@keyframes belt{from{transform:translateX(0)}to{transform:translateX(-110px)}}
.art .lamp{stroke:var(--accent);opacity:.3}
.station.on.vis .art .lamp{animation:blink 1.2s ease-in-out infinite}
.station.on.vis .art .lamp.l2{animation-delay:.4s}.station.on.vis .art .lamp.l3{animation-delay:.8s}
.art .chart{stroke:var(--accent);stroke-width:2.4}
.art .scale .beam{transform-box:fill-box;transform-origin:center;animation-play-state:paused}
.station.on.vis .art .scale .beam{animation:tilt 3.2s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.art .wave{stroke:var(--accent);stroke-width:1.8}
.art .bars rect{fill:var(--accent);opacity:.8;transform-box:fill-box;transform-origin:center bottom}
.station.on.vis .art .bars rect{animation:barp 1.1s ease-in-out infinite}
.station.on.vis .art .bars rect:nth-child(2){animation-delay:.15s}.station.on.vis .art .bars rect:nth-child(3){animation-delay:.3s}.station.on.vis .art .bars rect:nth-child(4){animation-delay:.45s}.station.on.vis .art .bars rect:nth-child(5){animation-delay:.6s}
@keyframes barp{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
.art .ring{stroke:var(--accent);opacity:0;transform-box:fill-box;transform-origin:center}
.station.on.vis .art .ring{animation:ringo 3s ease-out infinite;animation-delay:calc(var(--i,0) * 1s)}
@keyframes ringo{0%{transform:scale(.3);opacity:.9}100%{transform:scale(1.15);opacity:0}}
.art .cone{fill:rgba(244,216,114,.08);stroke:rgba(244,216,114,.35);stroke-width:1;opacity:0}
.station.on .art .cone{opacity:1;transition:opacity 1s .8s}
.station.on.vis .art .cone{animation:conep 2.6s ease-in-out infinite}
.station.on.vis .art .cone.c2{animation-delay:1.3s}
@keyframes conep{0%,100%{fill:rgba(244,216,114,.06)}50%{fill:rgba(244,216,114,.16)}}
.art .pp{opacity:0;transform:translateY(10px)}
.station.on .art .pp{animation:lbin .7s forwards;animation-delay:calc(1.1s + var(--i) * .25s)}
.art .block{fill:rgba(244,216,114,.06)}
.art .drop{fill:var(--accent);opacity:0}
.station.on .art .drop{opacity:.9;transition:opacity .6s 1.8s}
.station:not(.vis) .art .drop{display:none}
.art .coin{stroke:var(--accent)}
.station:not(.vis) .st-diagram .flow{display:none}
/* a teia da cena final se desenha quando a estação liga */
.station.on .st-diagram .edge{animation:draw 1.6s cubic-bezier(.3,.6,.2,1) forwards;animation-delay:calc(.35s + var(--i) * .11s)}
.station.on .st-diagram .flow{animation:flowin .6s ease forwards;animation-delay:calc(1.4s + var(--i) * .11s)}
.station.on .st-diagram .node{animation:nodein .7s cubic-bezier(.2,.9,.3,1.3) forwards;animation-delay:calc(.15s + var(--i) * .13s)}
.ask-station .st-diagram{max-width:560px;margin:0 auto}
@media (prefers-reduced-motion:reduce){.art .d{stroke-dashoffset:0;animation:none!important}.art .lb,.art .pt,.art .pp{opacity:1;transform:none;animation:none!important}.station .st-text,.st-lists li{opacity:1;transform:none}}

/* ---- rodada 6: sinal de rolar universal ---- */
.j-dot{transition:opacity .4s}
.hero .cta.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:4px;margin-top:38px;padding:10px 18px;border:0;background:none;box-shadow:none;overflow:visible;transform:none}
.hero .cta.scroll-cue::after{display:none}
.hero .cta.scroll-cue:hover{transform:none;box-shadow:none;border:0}
.cue-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(244,216,114,.8);animation:cuedot 2.2s cubic-bezier(.4,0,.2,1) infinite}
.cue-chev{width:12px;height:12px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:rotate(45deg);opacity:.35;animation:cuechev 2.2s ease-in-out infinite;margin-top:-4px}
.cue-chev.c2{animation-delay:.25s;opacity:.18}
@keyframes cuedot{0%{transform:translateY(-10px);opacity:0}25%{opacity:1}70%{transform:translateY(16px);opacity:1}100%{transform:translateY(22px);opacity:0}}
@keyframes cuechev{0%,100%{opacity:.15;transform:rotate(45deg) translate(0,0)}50%{opacity:.6;transform:rotate(45deg) translate(3px,3px)}}
.hero .cta.scroll-cue:hover .cue-chev{border-color:var(--accent)}
@media (prefers-reduced-motion:reduce){.cue-dot,.cue-chev{animation:none}.cue-dot{transform:translateY(6px)}}
/* com "reduzir movimento": os desenhos ainda aparecem prontos (sem loops) */

.st-art{background:none;border:0;padding:0}
.station.on .st-art{border:0}
.ask-station .st-art{background:none;border:0}
.stations{gap:clamp(8px,2vh,24px)}
.station{min-height:0;padding:6px 0}
@media(max-width:760px){.stations{gap:14px}.station{padding:8px 0 10px}}

html.seen .hero .cue-dot,.hero .cue-dot{animation:cuedot 3s cubic-bezier(.4,0,.2,1) infinite!important}
html.seen .hero .cue-chev,.hero .cue-chev{animation:cuechev 3s ease-in-out infinite!important}
html.seen .hero .cue-chev.c2,.hero .cue-chev.c2{animation-delay:.3s!important}
@media (prefers-reduced-motion:reduce){.hero .cue-dot,.hero .cue-chev{animation:none!important}}
#caps-title{display:none}
.hero{min-height:88svh;padding-bottom:16px}
#capacidades{margin-top:-28px}
.journey{margin-top:0}

.stations{gap:96px}
.station{padding:0}
@media(max-width:760px){.stations{gap:72px}.station{padding:0 0 4px}}

/* ---- rodada 7: menos blocos, contato por ícones ---- */
#projetos,#eco-title{display:none}
#sobre{margin-top:10px}
.story-cta{margin-top:26px}
.story-wa{font-size:15px;padding:13px 22px}
.story-wa svg{width:18px;height:18px}
.contact-icons{justify-content:center;gap:12px;margin-top:34px}
.contact-icons .ci{width:48px;height:48px;padding:0;border-radius:50%;justify-content:center;position:relative}
.contact-icons .ci svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-icons .ci .lab{position:absolute;top:-28px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--mute);white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none}
.contact-icons .ci:hover .lab,.contact-icons .ci:focus-visible .lab{opacity:1}
.contact-icons .ci .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.contact-icons .ci[data-wa]{border-color:rgba(244,216,114,.55);color:var(--accent)}

/* ---- rodada 8: gente online no canto ---- */
.brand .brand-online{display:inline-flex;align-items:baseline;gap:5px;color:var(--mute)}
.brand .brand-online b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.brand[data-online]:not([data-online="0"]) .brand-site{display:none}
.brand[data-online]:not([data-online="0"]) i{animation-duration:1.6s}
.brand .on-short{display:none}
@media(max-width:600px){.brand .on-long{display:none}.brand .on-short{display:inline}}

.journey #ecossistema{padding:0;margin:72px auto 24px;position:relative;z-index:1;max-width:720px}
.journey #ecossistema .eco-wrap{margin-bottom:0}

#about-title{display:none}
.eco-hint:empty{min-height:0;margin:0}
.story-dot2{transition:opacity .3s}
.journey #ecossistema{margin-bottom:0}
#sobre{margin-top:120px}
@media(max-width:760px){#sobre{margin-top:88px}}

.contact-icons .ci[data-wa]{border-color:var(--line);color:var(--fg)}
.contact-icons .ci[data-wa]:hover{border-color:rgba(244,216,114,.55)}
footer .made{font-size:12.5px;color:var(--dim)}

/* ---- rodada 9: Trilha viva, por trás dos textos; Estações como ofertas ---- */
.journey-path{z-index:1}
.stations{z-index:auto}
.journey #ecossistema{z-index:2}
.station{position:static}
.st-art{position:relative;z-index:0}
.st-text{position:relative;z-index:2}
.j-dash{stroke-width:1.8;opacity:.95}
.j-dot{r:5}
.j-halo{fill:rgba(244,216,114,.12);stroke:rgba(244,216,114,.38);stroke-width:1;opacity:0;transition:opacity .3s}
.st-art svg{position:relative}
.st-offers{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.st-offers li{position:relative;padding-left:24px;font-family:var(--serif);font-size:clamp(17px,2.1vw,20px);line-height:1.32;color:var(--fg);opacity:0;transform:translateX(-8px);transition:opacity .6s,transform .6s;text-wrap:balance;max-width:30ch}
.st-offers li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:1.6px;background:var(--accent);border-radius:1px}
.station.on .st-offers li{opacity:1;transform:none}
.station.on .st-offers li:nth-child(1){transition-delay:.45s}.station.on .st-offers li:nth-child(2){transition-delay:.6s}.station.on .st-offers li:nth-child(3){transition-delay:.75s}.station.on .st-offers li:nth-child(4){transition-delay:.9s}
.st-done{font-size:13px;line-height:1.5;color:var(--mute);margin:0;max-width:46ch;opacity:0;transition:opacity .8s 1.1s}
.station.on .st-done{opacity:1}
.st-text .line{margin-bottom:14px}
@media(max-width:760px){.st-offers li{font-size:17px;max-width:none}}
@media (prefers-reduced-motion:reduce){.st-offers li,.st-done{opacity:1;transform:none}}

/* ---- rodada 10: balão do contador, por site ---- */
.top .brand{position:relative}
.brand .on-pop{position:absolute;top:calc(100% + 10px);left:0;min-width:220px;padding:10px 12px 9px;border:1px solid var(--line);border-radius:12px;background:rgba(27,58,50,.94);backdrop-filter:blur(8px);box-shadow:0 12px 32px rgba(0,0,0,.45);display:grid;gap:5px;font-size:12.5px;color:var(--mute);white-space:nowrap;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .22s,transform .22s;z-index:5}
.brand .on-pop[hidden]{display:none}
.brand .on-pop::before{content:"";position:absolute;top:-6px;left:14px;width:10px;height:10px;background:inherit;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
.brand .on-pop .pop-t{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#97a399;margin-bottom:2px}
.brand .on-pop .pop-r b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;min-width:2.2ch;display:inline-block}
@media(hover:hover){.brand:hover .on-pop:not([hidden]),.brand:focus-visible .on-pop:not([hidden]){opacity:1;transform:none;pointer-events:auto}}
.brand.open .on-pop:not([hidden]){opacity:1;transform:none;pointer-events:auto}
@media(max-width:600px){.brand .on-pop{min-width:200px;font-size:13px}}

/* ---- rodada 11: estação enxuta ---- */
.st-text h3{margin-bottom:18px;max-width:14ch}
.st-offers{gap:11px;margin-bottom:16px}
.st-offers li{max-width:34ch}
.st-more{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.9vw,18px);color:var(--accent);margin:0;max-width:34ch;opacity:0;transform:translateY(6px);transition:opacity .8s 1.1s,transform .8s 1.1s}
.station.on .st-more{opacity:1;transform:none}
.station.on .st-offers li:nth-child(5){transition-delay:1.05s}
@media(max-width:760px){.st-text h3{max-width:none}.st-offers li{max-width:none}}
@media (prefers-reduced-motion:reduce){.st-more{opacity:1;transform:none}}

/* ---- rodada 12: título grande, sem a linha final ---- */
.st-text h3{max-width:22ch;font-size:clamp(26px,3.5vw,38px);margin-bottom:20px}
.st-offers{margin-bottom:0;gap:9px}
.st-offers li{font-size:clamp(16px,1.9vw,18.5px);max-width:36ch}
.station.on .st-offers li:nth-child(6){transition-delay:1.2s}
.st-offers li:last-child{color:var(--mute)}
@media(max-width:760px){.st-text h3{max-width:none;font-size:27px}}
.hero .reach:empty{display:none}

/* ---- tema lousa: complementos da Débora ---- */
.art .chart{stroke:var(--accent);stroke-width:2.2}
.art .rec{fill:var(--accent);opacity:.35}
.station.on.vis .art .rec{animation:blink 1.1s ease-in-out infinite}
.art .sealring{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 9;opacity:0;transition:opacity .8s 1.6s}
.station.on .art .sealring{opacity:.55}
.art .tassel{transform-box:fill-box;transform-origin:50% 0;animation-play-state:paused}
.station.on.vis .art .tassel{animation:tswing 2.6s ease-in-out infinite}
@keyframes tswing{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.art .crowd circle,.art .crowd path{stroke:var(--fg)}
.online-foot{margin:14px 0 0;font-size:12.5px;color:var(--dim);display:inline-flex;align-items:baseline;gap:5px}
.online-foot b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.online-foot[hidden]{display:none}
.online-foot i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:breathe 3s ease-in-out infinite;align-self:center}
footer .made a{color:var(--mute);text-decoration:none;border-bottom:1px solid rgba(244,216,114,.45);transition:color .25s,border-color .25s}
footer .made a:hover{color:var(--accent);border-color:var(--accent)}
/* medalhão: a foto dela no alto do Hero, com um fio de giz amarelo */
.hero-photo{display:block;width:104px;height:104px;border-radius:50%;object-fit:cover;margin:0 auto 22px;border:1px solid rgba(244,216,114,.6);box-shadow:0 0 0 7px rgba(244,216,114,.07),0 18px 40px rgba(0,0,0,.35);animation:rise 1.3s cubic-bezier(.2,.7,.2,1) both}
@media(max-width:600px){.hero-photo{width:92px;height:92px;margin-bottom:18px}}