/* =========================================================
   CASE — estrutura comum às páginas de case
   (base, nav, abertura, ficha, seções de texto, decisões, galeria do kit, resultado, próximo case, rodapé)

   Cada case carrega este arquivo e depois o próprio <style>, que define a paleta
   nos tokens abaixo e guarda só os componentes daquele projeto.

   Tokens de cor (definidos no :root de cada case):
     --c-accent   cor de ação: tag de destaque, barra da galeria
     --c-em       destaques no texto (<em>), linha e hover da ficha
     --c-label    rótulos das seções e números das legendas
     --c-soft     fundo da abertura e do bloco "O desafio"
     --c-tint     fundo das seções .tint
     --c-num      números grandes das decisões
     --c-result   fundo do resultado · --c-result-label: rótulo sobre ele
     --c-read     tom inicial das palavras na leitura por rolagem
     --c-nav      fundo translúcido da nav
   ========================================================= */
:root{
  --base:#FFFFFF; --line:#E8E8EA;
  --ink:#141414; --ink-soft:#6E6E73; --ink-faint:#A1A1A6;
  --c-accent:var(--ink); --c-em:var(--ink); --c-label:var(--ink-soft);
  --c-soft:#F6F6F6; --c-tint:#F6F6F6; --c-num:#DCDCE0;
  --c-result:#141414; --c-result-label:rgba(255,255,255,.6);
  --c-read:#DCDCE0; --c-nav:rgba(255,255,255,.82);
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
body{background:var(--base);color:var(--ink);font-family:Poppins,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.55;overflow-x:hidden}
/* o corte horizontal fica no main: em html/body ele quebraria o sticky */
main{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 40px}
.label{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.caption{font-size:14px;color:var(--ink-faint);margin-top:16px}

.tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1;padding:7px 12px;border-radius:999px;background:#fff;color:var(--ink);border:1px solid var(--line);font-weight:500;white-space:nowrap}
.tag.accent{background:var(--c-accent);border-color:var(--c-accent);color:#fff}

/* =========================================================
   MOTION — variáveis que o scroll alimenta (assets/js/motion.js)
   --e  entrada de cada .rv (0→1)   --w  tom de cada palavra
   --p  progresso de um bloco preso na tela
   ========================================================= */
.rv{opacity:var(--e,1);transform:translate3d(0,calc((1 - var(--e,1)) * 40px),0)}
/* imagens: abrem um recorte e assentam a escala */
.fig{--fr:32px;border-radius:var(--fr);overflow:hidden}
.fig.rv{opacity:1;transform:none;clip-path:inset(calc((1 - var(--e,1)) * 10%) calc((1 - var(--e,1)) * 4%) round var(--fr))}
.fig.rv img{transform:scale(calc(1.1 - var(--e,1) * .1))}

[data-read]{--read-from:var(--c-read);--read-to:var(--ink)}
[data-read] .wd{display:inline-block;color:color-mix(in srgb,var(--read-to) calc(var(--w,0) * 100%),var(--read-from));transform:translateY(calc((1 - var(--w,0)) * .16em))}
.lead[data-read],.decision p[data-read]{--read-to:var(--ink-soft)}
[data-read] em{font-style:normal;--read-to:var(--c-em)}
/* selos dentro do texto entram inteiros, como uma palavra */
[data-read] .note{opacity:calc(.35 + var(--w,0) * .65)}

/* =========================================================
   NAV — a mesma da home
   ========================================================= */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--c-nav);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid color-mix(in srgb,var(--ink) 6%,transparent);font-family:Manrope,-apple-system,sans-serif}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#1D1D1F}
.brand-mark{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0}
.nav-right{display:flex;align-items:center;gap:24px}
.back{font-size:14px;font-weight:500;color:var(--ink-soft)}
@media (hover:hover){.back:hover{color:var(--ink)}}
.nav-cta{font-size:14px;font-weight:600;background:#1D1D1F;color:#fff;padding:8px 16px;border-radius:999px}
/* idioma: em inglês a página só aparece depois da tradução (assets/js/i18n.js) */
.i18n body{visibility:hidden}
/* switch PT / EN: trilho com um polegar branco que desliza até o idioma ativo · .flip (no clique) anima a troca antes de recarregar */
.lang{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;height:32px;padding:3px;border-radius:999px;background:rgba(0,0,0,.06);box-shadow:inset 0 1px 2px rgba(0,0,0,.08);font-size:11.5px;font-weight:600;letter-spacing:.06em;flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lang::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.1),0 3px 8px rgba(0,0,0,.1);transition:transform .4s cubic-bezier(.6,0,.2,1.2),scale .2s,box-shadow .3s}
.lang span{position:relative;z-index:1;display:grid;place-items:center;height:100%;min-width:30px;padding:0 8px;color:rgba(0,0,0,.38);transition:color .3s}
html:not([lang=en]) .lang:not(.flip) [lang=pt-BR],html[lang=en] .lang.flip [lang=pt-BR],html[lang=en] .lang:not(.flip) [lang=en],html:not([lang=en]) .lang.flip [lang=en]{color:#1D1D1F}
html[lang=en] .lang:not(.flip)::before,html:not([lang=en]) .lang.flip::before{transform:translateX(100%)}
@media (hover:hover){.lang:hover span{color:rgba(0,0,0,.62)}.lang:hover::before{box-shadow:0 1px 2px rgba(0,0,0,.12),0 4px 12px rgba(0,0,0,.15)}}
.lang:active::before{scale:1.08 1}
.lang:focus-visible{outline:2px solid #1D1D1F;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.lang::before{transition:none}}
/* botão PT / EN: o idioma atual fica em destaque */

/* =========================================================
   ABERTURA — o título abre o case e o quadro (.hero-frame) sobe até cobrir a tela
   cada case define o fundo e o conteúdo do quadro
   ========================================================= */
.hero{position:relative;height:200vh;background:var(--c-soft);--a:clamp(0,calc((var(--p,0) - .04) * 2.2),1);--cut:62%}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-text{position:relative;z-index:2;padding-top:calc(60px + 8vh);opacity:calc(1 - var(--a) * 1.8);transform:translateY(calc(var(--a) * -6vh))}
.hero .tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.hero h1{font-size:clamp(44px,5.4vw,92px);line-height:.98;letter-spacing:-.045em;font-weight:700;max-width:13em}
.hero h1 em{font-style:normal;color:var(--c-em)}
.hero-sub{font-size:19px;color:var(--ink-soft);max-width:600px;margin-top:22px;line-height:1.5}
.hero-frame{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--c-accent);clip-path:inset(calc((1 - var(--a)) * var(--cut)) calc((1 - var(--a)) * 40px) calc((1 - var(--a)) * 40px) round calc((1 - var(--a)) * 48px))}

/* =========================================================
   FICHA — a linha corre por cima do traço ao passar o mouse
   ========================================================= */
.facts{padding:96px 0 40px}
.facts dl{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px}
.fact{padding:22px 0;border-top:1px solid var(--line);background:linear-gradient(var(--c-em),var(--c-em)) 0 -1px / 0 2px no-repeat;transition:background-size .6s var(--ease)}
.fact dt{color:var(--ink-faint);margin-bottom:6px;transition:color .4s var(--ease)}
.fact dd{font-size:18px;font-weight:500;letter-spacing:-.01em;transition:color .4s var(--ease)}
@media (hover:hover){
  .fact:hover{background-size:100% 2px}
  .fact:hover dt{color:var(--c-label)}
  .fact:hover dd{color:var(--c-em)}
}

/* =========================================================
   SEÇÕES DE TEXTO — headline grande e leitura no ritmo do scroll
   ========================================================= */
.sec{padding:140px 0}
.sec-head{display:grid;grid-template-columns:1fr 1.25fr;gap:24px 64px;align-items:start}
.sec-head h2{font-size:clamp(40px,5vw,84px);line-height:.98;letter-spacing:-.045em;font-weight:700}
.lead{font-size:clamp(20px,1.7vw,26px);line-height:1.45;letter-spacing:-.01em;padding-top:.4em}
.lead + .lead{margin-top:18px;padding-top:0}
.sec-head + *{margin-top:72px}
.sec.sec--flush{padding-top:0}
.tint{background:var(--c-tint)}

/* contexto: frase grande, como o statement da home */
.context .statement{font-size:clamp(30px,3.6vw,58px);line-height:1.12;letter-spacing:-.035em;font-weight:600;max-width:22em}
.context .label{display:block;color:var(--c-label);margin-bottom:28px}

/* o desafio */
.question{background:var(--c-soft);padding:160px 0;text-align:center}
.question .label{display:block;color:var(--c-label);margin-bottom:28px}
.question h2{font-size:clamp(40px,5.6vw,96px);line-height:1;letter-spacing:-.045em;font-weight:700;max-width:15em;margin:0 auto}

/* decisões */
.decisions{display:flex;flex-direction:column;gap:140px}
.decision-text{display:grid;grid-template-columns:1fr 1.25fr;gap:24px 64px;margin-bottom:40px}
.decision-num{font-size:clamp(64px,8vw,132px);font-weight:700;letter-spacing:-.06em;line-height:.85;color:var(--c-num)}
.decision h3{font-size:clamp(26px,2.4vw,38px);letter-spacing:-.035em;line-height:1.1;font-weight:700;margin-bottom:16px}
.decision p{font-size:19px;line-height:1.6}

/* =========================================================
   KIT — preso na tela, corre na horizontal (como a galeria da home)
   a altura da trilha vem de --kit-h; os painéis ficam em cada case
   ========================================================= */
.kit{position:relative;height:var(--kit-h,320vh);background:var(--base);--g:clamp(0,calc((var(--p,0) - .06) * 1.2),1)}
.kit-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.g-track{position:absolute;left:0;top:54%;display:flex;align-items:center;gap:3vw;padding:0 40px;transform:translate3d(calc(var(--g) * (100vw - var(--tw,300vw))),-50%,0)}
.g-intro{flex-shrink:0;width:min(560px,38vw);display:flex;flex-direction:column;gap:22px;padding-right:2vw}
.g-intro .label{color:var(--c-label)}
.g-intro h2{font-size:clamp(40px,4.4vw,72px);line-height:.98;letter-spacing:-.045em;font-weight:700}
.g-intro p{font-size:17px;line-height:1.55;color:var(--ink-soft)}
.g-item{flex-shrink:0;margin:0}
.g-item figcaption{display:flex;gap:14px;margin-top:18px;font-size:15px;color:var(--ink-soft);max-width:520px;opacity:var(--v,1);transform:translateY(calc((1 - var(--v,1)) * 20px))}
.g-item figcaption b{color:var(--c-label);font-weight:600}
.g-bar{position:absolute;left:40px;right:40px;bottom:40px;height:2px;background:var(--line)}
.g-bar i{position:absolute;inset:0;background:var(--c-accent);transform:scaleX(var(--g));transform-origin:left}

/* =========================================================
   RESULTADO
   ========================================================= */
.result{background:var(--c-result);color:#fff;padding:160px 0 120px}
.result .label{display:block;color:var(--c-result-label);margin-bottom:28px}
.result h2{font-size:clamp(44px,6.2vw,108px);letter-spacing:-.05em;line-height:.96;font-weight:700;max-width:13em}
.result h2[data-read]{--read-from:rgba(255,255,255,.24);--read-to:#fff}
.result .leads{display:grid;grid-template-columns:1fr 1fr;gap:24px 64px;margin-top:56px}
.result .leads p{font-size:19px;line-height:1.6}
.result .leads p[data-read]{--read-from:rgba(255,255,255,.28);--read-to:rgba(255,255,255,.86)}
.outcomes{display:flex;gap:12px;flex-wrap:wrap;margin-top:48px}

/* =========================================================
   PRÓXIMO CASE + RODAPÉ
   ========================================================= */
.next{padding:160px 0 120px}
.next .label{display:block;color:var(--ink-faint);margin-bottom:24px}
.next-link{display:inline-block;font-family:Manrope,-apple-system,sans-serif;font-size:clamp(76px,15vw,260px);line-height:.85;letter-spacing:-.075em;font-weight:800;color:#1D1D1F}
.next-link span{display:inline-block;transform:translateX(calc((1 - var(--e,1)) * var(--dir) * 12vw))}
.next-link .arr{color:var(--c-accent);transition:transform .6s var(--ease)}
@media (hover:hover){a.next-link:hover .arr{transform:translateX(.12em)}}
/* próximo case ainda sem página: nome apagado e selo "em breve", sem clique */
.next-link--soon{color:color-mix(in srgb,var(--ink-faint) 55%,#fff);cursor:default}
.soon{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-faint);font-family:Poppins,-apple-system,sans-serif;font-size:14px;font-weight:600;line-height:1;letter-spacing:0;white-space:nowrap;vertical-align:middle}
.soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c-accent)}
.next p{margin-top:32px;font-size:18px;color:var(--ink-soft);max-width:520px}
.home-link{display:inline-flex;margin-top:40px;font-size:15px;font-weight:600;padding:14px 24px;border-radius:999px;background:#fff;border:1px solid var(--line)}
footer{border-top:1px solid var(--line);font-family:Manrope,-apple-system,sans-serif}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:72px;font-size:13px;color:var(--ink-faint)}
footer .links{display:flex;gap:20px}
@media (hover:hover){footer a:hover{color:var(--ink)}}

/* botão voltar ao topo — aparece depois da abertura */
.to-top{position:fixed;right:24px;bottom:calc(24px + env(safe-area-inset-bottom));z-index:60;width:52px;height:52px;border-radius:50%;background:#1D1D1F;color:#fff;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
@media (hover:hover){.to-top:hover{transform:translateY(-3px)}}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:900px){
  .wrap{padding:0 20px}
  .back{display:none}

  .hero{height:180vh;--cut:66%}
  .hero-text{padding-top:calc(60px + 5vh)}
  .hero .tags{gap:6px;margin-bottom:20px}
  .hero .tag{font-size:11px;padding:6px 9px}
  .hero h1{font-size:clamp(34px,10vw,56px)}
  .hero-sub{font-size:16px;margin-top:16px}
  .hero-frame{clip-path:inset(calc((1 - var(--a)) * var(--cut)) calc((1 - var(--a)) * 20px) calc((1 - var(--a)) * 20px) round calc((1 - var(--a)) * 36px))}

  .facts{padding:64px 0 16px}
  .facts dl{grid-template-columns:1fr 1fr;gap:0 16px}
  .fact dd{font-size:15px}
  .sec{padding:88px 0}
  .sec.sec--flush{padding-top:0}
  .sec-head,.decision-text,.result .leads{grid-template-columns:1fr}
  .sec-head + *{margin-top:40px}
  .lead{font-size:18px;padding-top:0}
  .question{padding:96px 0}
  .decisions{gap:88px}
  .decision-text{margin-bottom:24px}
  .decision-num{font-size:64px}
  .decision p{font-size:17px}
  .fig{--fr:24px}

  /* kit: no celular a trilha vira uma coluna e a página rola na vertical */
  .kit{height:auto;--g:0}
  .kit-stage{position:static;height:auto;overflow:visible;padding:88px 0}
  .g-track{position:static;flex-direction:column;align-items:stretch;gap:48px;padding:0 20px;transform:none}
  .g-intro{width:auto;gap:14px;padding-right:0}
  .g-intro p{font-size:15px}
  .g-item figcaption{font-size:13px;max-width:none;gap:10px}
  .g-bar{display:none}

  .result{padding:96px 0 72px}
  .result .leads p{font-size:17px}
  .next{padding:104px 0 72px}
  .next p{font-size:16px}
  footer .wrap{flex-direction:column;justify-content:center;gap:8px;height:auto;padding:24px 20px}
  .to-top{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:46px;height:46px}
}