/* ================================ reset ================================ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* height:auto é essencial: sem ele o atributo height="" do HTML vira altura CSS
   e anula o aspect-ratio, esticando as imagens */
img,picture,svg{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}

/* ================================ tokens ================================ */
:root{
  /* Tema claro é o padrão. As seções que continuam escuras (hero, CTA, rodapé)
     recebem .on-dark, que redeclara os MESMOS tokens com os valores invertidos.
     Como tudo no site lê token, inverter um bloco é trocar de classe.
     --strong = tinta mais forte (era --white); --bg = fundo da página. */
  --bg:#FFFFFF;
  --surface:#F3F5F8;
  --field:#F3F5F8; --field-2:#E9EDF3;
  --strong:#0A0D11;
  --text:#262D35;
  --mute:#59636E; --mute-2:#3D454E;
  --ice:#1A5FB4; --ice-dim:#A9C6E8;
  --line:rgba(8,9,11,.12); --line-2:rgba(8,9,11,.20);
  --wash:rgba(8,9,11,.05);
  --veil:rgba(255,255,255,.86);

  --display:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --body:"Archivo","Segoe UI",system-ui,sans-serif;
  --mono:"Space Mono",ui-monospace,"Courier New",monospace;

  --pad:clamp(20px,5vw,72px);
  --maxw:1440px;
  --sp-m:clamp(56px,8vw,104px);
  --sp-l:clamp(88px,13vw,180px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* assenta devagar no fim, sem quicar */
}

/* seções que permanecem escuras: mesmos tokens, valores invertidos */
.on-dark{
  --bg:#08090B;
  --surface:#14171B;
  --field:#14171B; --field-2:#1B1F24;
  --strong:#FFFFFF;
  --text:#E6EAEE;
  --mute:#8B95A1; --mute-2:#A4AEB9;
  --ice:#9EC5DC; --ice-dim:#5E7B8E;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17);
  --wash:rgba(255,255,255,.05);
  --veil:rgba(8,9,11,.82);
  background:var(--bg); color:var(--text);
}

/* ================================ base ================================ */
body{
  background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:1.0625rem; font-weight:400; line-height:1.7;
  overflow-x:hidden;
}
/* peso 300 reservado aos parágrafos grandes: em corpo pequeno sobre fundo
   escuro o light fica frágil e perde legibilidade */
.manifesto__lead,.method__copy p,.plan__lead,.cta__lead,.about__copy p{font-weight:300}
::selection{background:var(--ice);color:var(--bg)}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--display);font-weight:500;line-height:1.03;letter-spacing:-.025em}
p{text-wrap:pretty}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sp-l)}

.eyebrow{
  font-family:var(--mono);font-size:.6875rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mute);line-height:1.6;
}
.eyebrow--ice{color:var(--ice)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--strong);color:var(--bg);
  padding:12px 20px;font-family:var(--mono);font-size:.75rem}
.skip:focus{left:12px;top:12px}

.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---- buttons ---- */
/* O hover é um disco que cresce do centro e toma o botão, enquanto uma seta
   entra pela esquerda, o rótulo desliza e a seta da direita sai de cena.
   O disco é ::after com z-index:-1: com isolation:isolate ele pinta acima do
   fundo do próprio botão e abaixo do conteúdo, sem precisar de wrapper. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  padding:1.15em 1.9em;min-height:48px;border:1px solid transparent;
  border-radius:100px;
  text-decoration:none;cursor:pointer;background:none;text-align:center;
  --btn-fill:var(--strong);
  transition:color .6s cubic-bezier(.23,1,.32,1),
             border-color .6s cubic-bezier(.23,1,.32,1),
             border-radius .6s cubic-bezier(.23,1,.32,1),
             background .25s var(--ease);
}
.btn:hover{border-radius:12px;border-color:transparent}
.btn:active{transform:scale(.95)}

/* seta que entra pela esquerda. É uma máscara pintada com currentColor, então
   acompanha a cor do texto sem precisar de dois SVGs no markup. */
.btn::before{
  content:"";position:absolute;top:50%;left:-25%;
  width:15px;height:15px;margin-top:-7.5px;z-index:1;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3Cpath%20d%3D%27m12%205%207%207-7%207%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3Cpath%20d%3D%27m12%205%207%207-7%207%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  transition:left .8s cubic-bezier(.34,1.56,.64,1);
}
.btn:hover::before{left:1.2em}

/* o disco */
.btn::after{
  content:"";position:absolute;top:50%;left:50%;
  width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;opacity:0;z-index:-1;
  background:var(--btn-fill);
  transition:width .8s cubic-bezier(.19,1,.22,1),
             height .8s cubic-bezier(.19,1,.22,1),
             margin .8s cubic-bezier(.19,1,.22,1),
             opacity .5s cubic-bezier(.19,1,.22,1);
}
.btn:hover::after{width:340px;height:340px;margin:-170px 0 0 -170px;opacity:1}

.btn__t{position:relative;z-index:1;display:inline-block;
  transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
.btn:hover .btn__t{transform:translateX(10px)}

.btn .ic{width:15px;height:15px;position:relative;z-index:1;
  transition:transform .8s cubic-bezier(.34,1.56,.64,1),opacity .5s var(--ease)}
.btn:hover .ic{transform:translateX(2.6em);opacity:0}

/* ghost: transparente -> disco na tinta forte, texto vira o fundo da página */
.btn--ghost{border-color:var(--line-2);color:var(--text);--btn-fill:var(--strong)}
.btn--ghost:hover{color:var(--bg)}
/* solid: já é cheio, então o disco entra no acento para haver transição visível */
.btn--solid{background:var(--strong);color:var(--bg);border-color:var(--strong);--btn-fill:var(--ice)}

.btn--sm{padding:.85em 1.4em;min-height:44px;font-size:.6875rem}
.btn--sm::before{width:13px;height:13px;margin-top:-6.5px}

/* quem pediu menos movimento não recebe o disco nem o deslize */
@media(prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn::after,.btn__t,.btn .ic{transition:none}
  .btn::before{display:none}
  .btn:hover::after{opacity:1;width:340px;height:340px;margin:-170px 0 0 -170px}
  .btn:hover .btn__t,.btn:hover .ic{transform:none}
  .btn:hover .ic{opacity:1}
}

/* ---- reveal ---- */
/* o estado oculto só existe quando há JS. Sem JS a página nasce visível */
.js .reveal{opacity:0;transform:translateY(14px)}
.reveal{transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* --- títulos: cortina por linha, cada linha sobe de trás da sua própria máscara --- */
/* fica invisível até as linhas serem medidas, senão o texto plano pisca antes */
.js .reveal.split{opacity:0;transform:none}
.reveal.split.ready{opacity:1;transition:opacity .2s linear}
.ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.js .ln>i{transform:translateY(105%)}
.ln>i{display:block;font-style:inherit;
  transition:transform 1s var(--ease-out);transition-delay:calc(var(--i,0)*80ms + var(--d,0ms))}
.split.in .ln>i{transform:none}

/* --- imagens: a moldura abre de baixo para cima e a foto assenta do zoom --- */
.js .rimg{clip-path:inset(0 0 100% 0)}
.rimg{transition:clip-path 1.1s var(--ease-out);transition-delay:var(--d,0ms)}
.rimg.in{clip-path:inset(0 0 0 0)}
.js .rimg img{transform:scale(1.1)}
.rimg img{transition:transform 1.5s var(--ease-out);transition-delay:var(--d,0ms)}
.rimg.in img{transform:none}

/* --- filetes: a linha se desenha da esquerda para a direita --- */
.rline{position:relative;border-top:0 !important;border-bottom:0 !important}
.rline::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-2);
  transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-out);
  transition-delay:calc(var(--d,0ms) + 90ms)}
.rline.in::before{transform:scaleX(1)}
.rline--btm::before{top:auto;bottom:0;background:var(--line)}

/* ================================ nav ================================ */
.nav{position:fixed;inset:0 0 auto;z-index:100;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.nav.stuck{background:var(--veil);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--maxw);margin-inline:auto;padding:18px var(--pad)}
/* No topo a nav flutua sobre a hero escura, então herda tinta clara.
   Depois de rolar ela ganha fundo claro e volta aos tokens da página. */
.nav{--bg:#08090B;--strong:#FFFFFF;--text:#E6EAEE;--mute:#8B95A1;--mute-2:#A4AEB9;
  --ice:#9EC5DC;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.17);--wash:rgba(255,255,255,.05)}
.nav.stuck{--bg:#FFFFFF;--strong:#0A0D11;--text:#262D35;--mute:#59636E;--mute-2:#3D454E;
  --ice:#1A5FB4;--line:rgba(8,9,11,.12);--line-2:rgba(8,9,11,.20);--wash:rgba(8,9,11,.05)}
/* Subpáginas não têm hero escura atrás: a nav já nasce com a tinta da página,
   senão a marca branca fica invisível sobre o fundo claro. */
.nav--onlight{--bg:#FFFFFF;--strong:#0A0D11;--text:#262D35;--mute:#59636E;--mute-2:#3D454E;
  --ice:#1A5FB4;--line:rgba(8,9,11,.12);--line-2:rgba(8,9,11,.20);--wash:rgba(8,9,11,.05)}
.nav--onlight .nav__logo--lt{opacity:0}
.nav--onlight .nav__logo--dk{opacity:1}

.nav__brand{position:relative;display:inline-flex;padding-block:6px}
.nav__logo{display:block;width:104px;transition:opacity .4s var(--ease)}
/* a marca é branca chapada: sobre o fundo claro da nav rolada ela sumiria.
   logo-dark.png é a mesma forma com a luminância zerada (o alfa preserva o desenho). */
.nav__logo--lt{opacity:.95}
.nav__logo--dk{position:absolute;left:0;top:6px;opacity:0}
.nav.stuck .nav__logo--lt{opacity:0}
.nav.stuck .nav__logo--dk{opacity:1}
.nav__brand:hover .nav__logo--lt{opacity:1}
.nav__nav{display:none}
@media(min-width:900px){.nav__nav{display:block}}
.nav__links{display:flex;align-items:center;gap:34px;list-style:none;padding:0}
.nav__links a{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute-2);text-decoration:none;position:relative;padding-block:6px;transition:color .25s}
/* hit area estendida sem deslocar o sublinhado */
.nav__links a::before{content:"";position:absolute;inset:-12px -8px}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ice);transition:right .35s var(--ease)}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--strong)}
.nav__links a:hover::after{right:0}
.nav__cta{display:none}
@media(min-width:1080px){.nav__cta{display:inline-flex}}

.burger{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);
  background:none;cursor:pointer}
.burger span{display:block;width:17px;height:1px;background:var(--text);
  transition:transform .3s var(--ease),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(min-width:900px){.burger{display:none}}

.drawer{position:fixed;inset:0;z-index:99;background:var(--bg);display:flex;flex-direction:column;
  justify-content:center;padding:0 var(--pad);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s}
.drawer.open{opacity:1;visibility:visible}
.drawer a{font-family:var(--display);font-size:clamp(1.9rem,8.5vw,3rem);font-weight:500;
  letter-spacing:-.03em;text-decoration:none;padding-block:.24em;border-bottom:1px solid var(--line)}
.drawer a:last-of-type{border-bottom:0}
@media(min-width:900px){.drawer{display:none}}

/* ================================ hero ================================ */
.hero{position:relative;min-height:100vh;min-height:100dvh;display:grid;
  grid-template-rows:auto 1fr auto;isolation:isolate;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center;will-change:transform}
.hero__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(8,9,11,.94) 0%,rgba(8,9,11,.32) 26%,transparent 48%),
    linear-gradient(to right,rgba(8,9,11,.52) 0%,transparent 52%),
    linear-gradient(to bottom,rgba(8,9,11,.70) 0%,transparent 22%)}
.hero__grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.8;
  background-image:repeating-linear-gradient(to right,rgba(255,255,255,.055) 0 1px,transparent 1px calc(100%/6));
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 72%,transparent)}
@media(max-width:899px){.hero__grid{display:none}}

.hero__spacer{grid-row:1;height:clamp(72px,10vh,104px)}
.hero__body{grid-row:2;align-self:center;max-width:var(--maxw);width:100%;
  margin-inline:auto;padding-inline:var(--pad);margin-top:clamp(8px,4vh,44px)}
.hero__eyebrow{display:flex;align-items:center;gap:16px;margin-bottom:clamp(18px,3vh,30px)}
.hero__eyebrow::after{content:"";flex:1;max-width:120px;height:1px;background:var(--line-2)}
/* o H1 era a imagem da logo (font-size:0 escondia o texto). Virou texto real:
   a logo grande saiu porque brigava com a do topo, e imagem como H1 não é
   lida por busca nem por leitor de tela. */
.hero__h1{margin:0;font-size:clamp(2.5rem,8.6vw,6.6rem);line-height:.94;letter-spacing:-.035em;
  color:var(--strong);text-shadow:0 8px 44px rgba(0,0,0,.45)}
.hero__sub{margin-top:clamp(20px,3.4vh,34px);max-width:34ch;color:var(--mute-2);
  font-size:clamp(.95rem,1.6vw,1.0625rem);line-height:1.65}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.6vh,36px)}

.hero__foot{grid-row:3;max-width:var(--maxw);width:100%;margin-inline:auto;
  padding:0 var(--pad) clamp(26px,4vh,44px)}
.hero__bar{display:grid;grid-template-columns:repeat(2,1fr);gap:0 22px}
@media(min-width:760px){.hero__bar{grid-template-columns:repeat(4,1fr);gap:28px}}
.hero__cell{border-top:1px solid var(--line-2);padding-top:12px;margin-top:16px}
.hero__cell b{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  color:var(--ice);font-weight:400;margin-bottom:7px}
.hero__cell span{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text);margin-bottom:3px}
.hero__cell small{display:block;font-size:.75rem;color:var(--mute);line-height:1.5}

.scroller{position:absolute;right:var(--pad);bottom:clamp(26px,4vh,44px);z-index:2;
  display:none;align-items:center;gap:12px;writing-mode:vertical-rl}
@media(min-width:1180px){.scroller{display:flex}}
.scroller .eyebrow{font-size:.625rem;letter-spacing:.26em}
.scroller i{display:block;width:1px;height:58px;background:var(--line-2);position:relative;overflow:hidden}
.scroller i::after{content:"";position:absolute;inset:0 0 auto;height:22px;background:var(--ice);
  animation:trickle 2.6s var(--ease) infinite}
@keyframes trickle{0%{transform:translateY(-100%)}60%,100%{transform:translateY(280%)}}

/* ================================ manifesto ================================ */
.manifesto{border-top:1px solid var(--line)}
.manifesto h2{font-size:clamp(2.1rem,6.2vw,4.6rem);font-weight:500;max-width:16ch}
.manifesto h2 em{font-style:normal;color:var(--mute)}
.manifesto__lead{margin-top:clamp(24px,3.4vw,38px);max-width:52ch;font-size:clamp(1rem,1.5vw,1.1875rem);
  color:var(--mute-2)}
.stats{display:grid;grid-template-columns:1fr;gap:0;margin-top:var(--sp-m)}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr);gap:40px}}
@media(min-width:760px){.stats--pair{grid-template-columns:repeat(2,1fr);max-width:640px}}

/* lista de países: nomes, sem número */
.reach{margin-top:var(--sp-m);border-top:1px solid var(--line-2);padding-top:20px}
.reach__label{margin-bottom:16px}
.reach__list{display:flex;flex-wrap:wrap;gap:clamp(10px,1.5vw,16px);margin:0;padding:0}
.reach__list li{list-style:none;display:flex}
/* so a bandeira, sem rotulo visivel: o nome vai no aria-label e no title, entao
   leitor de tela anuncia e o mouse revela, sem encher a faixa de texto */
.flag{width:clamp(32px,4vw,42px);height:auto;aspect-ratio:3/2;display:block;
  outline:1px solid var(--line-2);outline-offset:-1px;
  filter:saturate(.9);transition:filter .3s var(--ease),transform .3s var(--ease)}
.reach__list li:hover .flag{filter:none;transform:translateY(-3px)}
.stat{border-top:1px solid var(--line-2);padding-top:20px;margin-top:24px}
.stat b{display:block;font-family:var(--display);font-size:clamp(2.4rem,5vw,3.6rem);font-weight:500;
  letter-spacing:-.04em;line-height:1;color:var(--strong)}
.stat span{display:block;margin-top:10px;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

/* ================================ method ================================ */
.method{background:var(--surface);border-top:1px solid var(--line)}
.method__head{display:grid;gap:clamp(28px,4vw,64px)}
@media(min-width:960px){.method__head{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}}
.method h2{font-size:clamp(2rem,5.4vw,3.9rem)}
.method h2 span:not(.ln){color:var(--ice)}
.method__tag{margin-top:18px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.1em;color:var(--mute)}
.method__copy p+p{margin-top:1.2em}
.method__copy strong{color:var(--strong);font-weight:500}

.pillars{margin-top:var(--sp-l);border-top:1px solid var(--line-2)}
.pillar{display:grid;grid-template-columns:auto 1fr;gap:16px 22px;align-items:start;
  padding-block:clamp(28px,3.6vw,44px);border-bottom:1px solid var(--line)}
@media(min-width:860px){
  .pillar{grid-template-columns:70px 128px minmax(0,1fr);gap:0 40px;align-items:center}
}
.pillar__n{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;color:var(--mute);padding-top:.55em}
.pillar__l{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,7vw,4.4rem);
  line-height:.9;letter-spacing:-.04em;color:var(--ice);transition:color .4s var(--ease)}
.pillar:hover .pillar__l{color:var(--strong)}
.pillar__t{grid-column:1/-1}
@media(min-width:860px){.pillar__t{grid-column:auto}}
.pillar__t h3{font-family:var(--mono);font-size:.8125rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--strong);margin-bottom:10px}
.pillar__t p{color:var(--mute-2);max-width:62ch;font-size:1rem}

/* ================================ results ================================ */
.results{border-top:1px solid var(--line)}
.sec__head{display:grid;gap:20px;margin-bottom:var(--sp-m)}
@media(min-width:900px){.sec__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:48px}}
.sec__head h2{font-size:clamp(1.9rem,4.6vw,3.2rem)}
.sec__head p{color:var(--mute-2);max-width:48ch}
/* contact sheet: miniaturas pequenas e uniformes, uma linha só no desktop */
/* Cada quadro JÁ é um comparativo inteiro: antes e depois montados lado a lado
   dentro do mesmo 500x500. Em 6 colunas viravam 12 corpos numa tira, e o vão
   entre quadros competia com a emenda interna de cada par. Três colunas dão
   tamanho legível, e o gap é propositalmente maior que a emenda interna para
   que cada quadro leia como uma unidade. */
.thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,26px);max-width:1240px}
@media(min-width:1040px){.thumbs{grid-template-columns:repeat(3,1fr)}}
.thumbs__legend{margin-bottom:18px}
.thumbs__legend span{color:var(--ice)}
.shot{position:relative;overflow:hidden;background:var(--surface);outline:1px solid var(--line);outline-offset:-1px}
/* contain, nao cover: os comparativos tem proporcoes diferentes entre si e
   cover cortava silhueta. O que sobra na caixa recebe a cor da superficie,
   entao a borda some em vez de virar barra preta. */
.shot img{width:100%;height:100%;aspect-ratio:1/1;object-fit:contain;
  background:var(--surface);transition:transform .6s var(--ease)}
.shot:hover img{transform:scale(1.04)}
/* O zoom de entrada (.rimg img -> scale(1.1)) dentro de overflow:hidden cortava
   10% do quadro enquanto a revelacao nao terminava. Num comparativo antes/depois
   o corte apaga justamente o que precisa ser comparado, entao aqui a entrada e
   so a cortina de clip-path, sem zoom. */
.js .shot.rimg img{transform:none}
.js .shot.rimg:hover img{transform:scale(1.04)}
.note{margin-top:28px;font-size:.8125rem;color:var(--mute);max-width:62ch}

/* ================================ quotes ================================ */
.quotes{background:var(--surface);border-top:1px solid var(--line)}
.qgrid{display:grid;gap:0}
@media(min-width:900px){.qgrid{grid-template-columns:1fr 1fr;column-gap:clamp(40px,5vw,80px)}}
.q{border-top:1px solid var(--line);padding-block:clamp(32px,4vw,48px)}
.q__mark{font-family:var(--display);font-size:2.6rem;line-height:1;color:var(--ice);
  opacity:.55;margin-bottom:14px}
.q blockquote{font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.9vw,1.4rem);
  line-height:1.45;letter-spacing:-.012em;color:var(--text)}
.q figcaption{margin-top:20px;font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}

/* ================================ plans ================================ */
.plans{border-top:1px solid var(--line)}

.sr-only{position:absolute;left:0;top:0;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Tabela comparativa: cada plano é uma coluna e cada recurso uma linha, para
   a diferença entre os níveis ficar legível de uma vez. Em tela estreita ela
   rola na horizontal com a coluna de recursos fixa. */
.ptable-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.ptable{width:100%;min-width:860px;border-collapse:collapse;text-align:left}
.ptable caption{text-align:left}

.ptable__corner{width:27%}
.ptable__plan{width:24.33%;vertical-align:top;font-weight:400;
  border-left:1px solid var(--line);padding:0 clamp(18px,2vw,34px) clamp(30px,4vw,46px)}
.ptable__plan--on{background:var(--surface)}

.ptable__meta{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:18px;min-height:26px}
/* o selo só existe numa coluna, mas ocupa faixa nas três para os preços
   ficarem na mesma linha de base */
.ptable__badge{display:inline-block;margin-bottom:12px;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--ice);color:var(--bg);padding:7px 11px;min-height:26px}
.ptable__badge--ghost{background:none;padding-inline:0;visibility:hidden}
.ptable__name{font-family:var(--display);font-size:clamp(1.2rem,1.9vw,1.55rem);
  font-weight:500;letter-spacing:-.02em;line-height:1.15;color:var(--strong);margin-bottom:12px}
.ptable__desc{font-size:.875rem;line-height:1.55;color:var(--mute);margin-bottom:26px;min-height:4.5em}
.ptable__price{display:flex;align-items:baseline;gap:8px;color:var(--strong);margin-bottom:8px}
.ptable__price b{font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em;
  font-weight:400;color:var(--mute)}
.ptable__price span{font-family:var(--display);font-size:clamp(1.7rem,2.6vw,2.2rem);
  font-weight:500;letter-spacing:-.03em;line-height:1}
.ptable__plan--on .ptable__price span{color:var(--ice)}
.ptable__cash{margin-bottom:22px}
.ptable__cash a{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  color:var(--ice);text-decoration:underline;text-underline-offset:4px;
  display:inline-flex;align-items:center;min-height:44px}
.ptable__plan .btn{width:100%}

/* --- linhas de recurso --- */
.ptable tbody th{font-weight:400;font-size:.875rem;line-height:1.5;color:var(--text);
  padding:16px 26px 16px 0;border-top:1px solid var(--line);
  position:sticky;left:0;background:var(--bg)}
/* position:relative ancora os rótulos .sr-only dentro da própria célula.
   Sem isso eles se posicionam contra um ancestral distante, caem além da
   largura da viewport e esticam o documento inteiro. */
.ptable tbody td{text-align:center;border-top:1px solid var(--line);
  border-left:1px solid var(--line);padding:16px 12px;position:relative}
.ptable__plan--on{--col-on:1}
.ptable tbody td:last-child{background:var(--surface)}

.ptable__group th{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);font-weight:400;
  padding:38px 0 14px;border-top:1px solid var(--line-2);background:var(--bg)}
.ptable__group + tr th,.ptable__group + tr td{border-top:0}

.ptable__yes{width:16px;height:16px;color:var(--ice);stroke-width:2}
.ptable__no{display:inline-block;width:11px;height:1px;background:var(--mute);
  vertical-align:middle}

.ptable__txt{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text)}
.ptable__cash{font-size:.8125rem;color:var(--mute);margin-bottom:4px}
.ptable__cash b{color:var(--strong);font-weight:500}
.ptable__cycle{font-family:var(--mono);font-size:.5625rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute);margin-bottom:22px}
.ptable__foot{margin-top:22px}
.ptable__foot sup{color:var(--ice)}

/* --- seletor de plano: existe so no telefone --- */
.pswitch{display:none;gap:5px;margin-bottom:22px;padding:5px;
  border:1px solid var(--line);background:var(--surface)}
.pswitch button{flex:1;min-height:44px;border:0;background:none;cursor:pointer;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mute);transition:background .25s var(--ease),color .25s var(--ease)}
.pswitch button[aria-selected="true"]{background:var(--strong);color:var(--bg)}

/* --- fecho: a escolha em termos de momento, nao de preco --- */
.levels{margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--line-2)}
.levels__h{font-size:clamp(1.4rem,3vw,2.2rem);margin-bottom:12px}
.levels__lead{color:var(--mute-2);max-width:52ch;margin-bottom:clamp(28px,4vw,44px)}
.levels__list{list-style:none;padding:0;display:grid;margin:0 0 clamp(26px,3vw,36px)}
@media(min-width:760px){.levels__list{grid-template-columns:repeat(3,1fr);gap:0 32px}}
.levels__list li{border-top:1px solid var(--line);padding:18px 0}
.levels__list b{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ice);font-weight:400;margin-bottom:8px}
.levels__list span{font-family:var(--display);font-size:clamp(1rem,1.6vw,1.15rem);
  letter-spacing:-.02em;color:var(--strong)}
.levels__ask{font-family:var(--display);font-size:clamp(1.15rem,2.2vw,1.5rem);
  letter-spacing:-.02em;color:var(--strong)}

/* --- presencial, fora da comparação --- */
.onsite{margin-top:clamp(48px,6vw,80px);padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--line-2);
  display:grid;gap:clamp(20px,3vw,44px);align-items:center}
@media(min-width:900px){.onsite{grid-template-columns:minmax(0,1fr) auto}}
.onsite h3{font-size:clamp(1.25rem,2.2vw,1.7rem);margin:10px 0 12px}
.onsite p{color:var(--mute);max-width:56ch}
.onsite__hi{color:var(--strong);margin-top:14px}
.onsite__fine{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);margin-top:18px}
.about__hats{font-family:var(--mono);font-size:.6875rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute);margin-top:10px}

/* ================================ pagina de aplicacao ================================ */
.apply{padding-top:calc(var(--nav-h,76px) + clamp(56px,9vw,120px))}
.apply__wrap{max-width:820px}
.apply__back{color:inherit;text-decoration:underline;text-underline-offset:4px;
  display:inline-flex;align-items:center;min-height:44px}
.apply__back:hover{color:var(--ice)}
.apply__h1{font-size:clamp(1.9rem,5vw,3.2rem);margin:10px 0 clamp(20px,3vw,30px)}
.apply__lead{font-size:clamp(1rem,1.5vw,1.1875rem);line-height:1.7;color:var(--mute-2);
  font-weight:300;max-width:62ch}
.apply__lead strong{color:var(--strong);font-weight:500}
.apply__steps{list-style:none;padding:0;margin:clamp(34px,4vw,52px) 0 clamp(40px,5vw,64px);
  display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media(min-width:760px){.apply__steps{grid-template-columns:repeat(3,1fr)}}
.apply__steps li{background:var(--bg);padding:22px 0 22px 0;display:flex;gap:14px;align-items:flex-start}
@media(min-width:760px){.apply__steps li{padding-inline:0 22px}
  .apply__steps li+li{padding-left:22px}}
.apply__steps b{font-family:var(--mono);font-size:.625rem;letter-spacing:.2em;
  color:var(--ice);font-weight:400;flex:none;padding-top:.2em}
.apply__steps span{font-size:.875rem;line-height:1.6;color:var(--mute)}
.apply .form{max-width:none}

/* ================================ about ================================ */
.about{border-top:1px solid var(--line)}
.about__grid{display:grid;gap:clamp(36px,5vw,72px);align-items:center}
@media(min-width:960px){.about__grid{grid-template-columns:minmax(0,.56fr) minmax(0,1fr)}}
.about__photo{position:relative;max-width:360px}
.about__photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.about__photo figcaption{position:absolute;left:0;bottom:0;padding:16px 18px;font-family:var(--mono);
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-2)}
.about h2{font-size:clamp(2rem,5vw,3.4rem)}
.about__role{margin-top:16px;font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ice)}
/* eram 3 itens curtos numa linha; agora são 6 formações longas, que numa
   flex-row quebrariam desalinhadas */
.about__creds{display:grid;gap:11px 34px;margin:30px 0;padding:22px 0;
  border-block:1px solid var(--line)}
@media(min-width:620px){.about__creds{grid-template-columns:repeat(2,minmax(0,1fr))}}
.about__creds li{list-style:none;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  color:var(--mute-2);line-height:1.5;position:relative;padding-left:15px}
.about__creds li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--ice)}
.about__copy p+p{margin-top:1.2em}
.about__copy strong{color:var(--strong);font-weight:500}

/* ================================ cta + form ================================ */
.cta{border-top:1px solid var(--line);background:
  radial-gradient(120% 80% at 78% 0%,rgba(158,197,220,.10),transparent 62%),var(--bg)}
.cta h2{font-size:clamp(2.1rem,6vw,4.4rem);max-width:16ch}
.cta h2 span:not(.ln){color:var(--ice)}
.cta__lead{margin-top:26px;max-width:46ch;color:var(--mute-2);font-size:clamp(1rem,1.5vw,1.125rem)}
.cta__grid{display:grid;gap:clamp(44px,6vw,88px);margin-top:var(--sp-m)}
@media(min-width:980px){.cta__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}}
.cta__pick{display:grid;gap:14px;align-content:start}
.cta__or{font-family:var(--mono);font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--mute);display:flex;align-items:center;gap:14px}
.cta__or::before,.cta__or::after{content:"";flex:1;height:1px;background:var(--line)}

.form{border-top:1px solid var(--line-2);padding-top:32px}
.form h3{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--strong);margin-bottom:8px}
.form__hint{font-size:.875rem;color:var(--mute);margin-bottom:28px}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute-2);margin-bottom:9px}
.field label .req{color:var(--ice)}
.field input,.field select,.field textarea{
  width:100%;background:var(--field);border:1px solid var(--line);color:var(--text);
  padding:14px 15px;min-height:48px;font-size:1rem;font-family:var(--body);font-weight:300;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.field textarea{resize:vertical;min-height:110px;line-height:1.6}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--line-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ice);
  background:var(--field-2)}
.field input::placeholder,.field textarea::placeholder{color:#5A626C}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237E8894' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:44px}
.field .err{display:block;margin-top:7px;font-size:.75rem;color:#E48B8B;min-height:1em}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#B4595A}
.form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.form__status{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;color:var(--ice)}

/* ================================ footer ================================ */
.foot{border-top:1px solid var(--line);padding-block:clamp(44px,6vw,72px)}
.foot__in{display:grid;gap:36px}
@media(min-width:860px){.foot__in{grid-template-columns:auto 1fr auto;align-items:center;gap:48px}}
.foot__logo{width:130px;opacity:.8}
.foot__links{display:flex;flex-wrap:wrap;gap:0 30px;list-style:none;padding:0}
.foot__links a{position:relative;display:inline-block;padding-block:6px;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);text-decoration:none;transition:color .25s}
.foot__links a::before{content:"";position:absolute;inset:-8px -6px}
.foot__links a:hover{color:var(--strong)}
.foot__meta{font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;color:var(--mute);line-height:1.9}
/* registro profissional: credencial, então ganha o acento e um filete próprio */
.foot__cref{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--ice)}
@media(min-width:860px){.foot__meta{text-align:right}}
/* assinatura de quem desenvolveu: discreta, ganha presença só no hover */
.foot__made{display:inline-flex;align-items:center;gap:9px}
.foot__made a{position:relative;display:inline-flex;align-items:center;padding-block:8px;
  opacity:.6;transition:opacity .25s var(--ease)}
.foot__made a::before{content:"";position:absolute;inset:-8px -10px}   /* alvo de toque de 46px */
.foot__made a:hover,.foot__made a:focus-visible{opacity:1}
.foot__made img{width:63px}
.foot__bottom{margin-top:clamp(36px,5vw,56px);padding-top:26px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;color:var(--mute)}

/* ======================= decisões só do mobile ======================= */
/* barra de ação fixa: no telefone o CTA não pode depender de rolar até o fim */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;gap:8px;
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--veil);backdrop-filter:blur(14px);border-top:1px solid var(--line);
  transform:translateY(115%);transition:transform .45s var(--ease-out)}
.dock.up{transform:none}
.dock a{flex:1;min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;text-align:center;text-decoration:none;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase}
.dock a:first-child{background:var(--strong);color:var(--bg)}
.dock a:last-child{border:1px solid var(--line-2);color:var(--text)}
@media(max-width:899px){
  .dock{display:flex}
  body{padding-bottom:74px}        /* o rodapé não fica preso atrás da barra */
}

/* resultados viram trilho com snap: no telefone um grid de 2 colunas encolhe
   demais as miniaturas, o trilho deixa cada uma respirar e sangra até a borda */
@media(max-width:619px){
  .thumbs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 4px}
  .thumbs::-webkit-scrollbar{display:none}
  .thumbs .shot{flex:0 0 86%;scroll-snap-align:start}
}

/* Telefone: a tabela de 3 colunas media 860px num viewport de 390 e escondia
   470px atras de rolagem lateral. Aqui o cabecalho vira bloco, o seletor
   escolhe um plano e a tabela mostra so aquela coluna. Zero rolagem lateral. */
@media(max-width:899px){
  .pswitch{display:flex}
  .ptable-wrap{overflow:visible;margin-inline:0;padding-inline:0}
  .ptable{min-width:0}
  .ptable thead,.ptable thead tr,.ptable thead th{display:block}
  .ptable__corner{display:none}
  .ptable__plan{width:auto;border-left:0;padding:0 0 clamp(24px,5vw,34px)}
  .ptable__plan--on{background:none}
  .ptable__desc{min-height:0}
  .ptable__meta{margin-bottom:14px}
  .ptable[data-show="1"] [data-plan="2"],.ptable[data-show="1"] [data-plan="3"],
  .ptable[data-show="2"] [data-plan="1"],.ptable[data-show="2"] [data-plan="3"],
  .ptable[data-show="3"] [data-plan="1"],.ptable[data-show="3"] [data-plan="2"]{display:none}
  .ptable tbody th{position:static;padding-right:14px}
  .ptable tbody td{width:76px;border-left:0}
  .ptable tbody td:last-child{background:none}
}

/* ================================ a11y / motion ================================ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .js .reveal,.reveal,.js .reveal.split{opacity:1;transform:none}
  .js .ln>i,.js .rimg img{transform:none}
  .js .rimg{clip-path:none}
  .rline::before{transform:scaleX(1)}
  .dock{transition:none}
  .scroller i::after{display:none}
}

/* ============================================================================
   PAGINAS LEGAIS (privacidade, termos)

   Texto corrido longo pede medida de leitura curta: 68ch. Alem disso o olho
   perde a linha ao voltar para a esquerda. O numero da secao fica na margem,
   fora do bloco de texto, para dar ponto de retorno na varredura vertical sem
   competir com a leitura.
   ========================================================================== */

.legal{padding-top:calc(var(--nav-h,76px) + clamp(40px,7vw,88px))}
.legal__wrap{max-width:860px}

.legal__h1{font-family:var(--display);font-weight:500;
  font-size:clamp(30px,5vw,52px);line-height:1.04;letter-spacing:-.02em;
  margin:14px 0 0;color:var(--strong)}

.legal__meta{margin:18px 0 0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

.legal__lead{margin:28px 0 0;font-size:clamp(15.5px,1.9vw,18px);
  line-height:1.62;color:var(--mute-2);max-width:68ch}

.legal__doc{margin-top:clamp(44px,6vw,72px);
  border-top:1px solid var(--line);padding-top:8px}

.legal__item{display:grid;grid-template-columns:56px 1fr;gap:0 18px;
  padding:clamp(26px,3.4vw,38px) 0;border-bottom:1px solid var(--line)}

.legal__n{font-family:var(--mono);font-size:12px;color:var(--ice);
  letter-spacing:.06em;padding-top:6px}

.legal__item h2{margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(18px,2.3vw,23px);line-height:1.22;letter-spacing:-.012em;
  color:var(--strong)}

.legal__item p,.legal__item li{font-size:clamp(14.5px,1.7vw,16px);
  line-height:1.68;color:var(--text);max-width:68ch}
.legal__item p{margin:14px 0 0}
.legal__item ul{margin:14px 0 0;padding-left:20px}
.legal__item li{margin-top:8px}
.legal__item strong{color:var(--strong);font-weight:500}

/* Destaque para o que tem consequencia pratica: prazo de arrependimento,
   dado de saude, necessidade de liberacao medica. */
.legal__note{margin:18px 0 0;padding:16px 18px;background:var(--surface);
  border-left:2px solid var(--ice);max-width:68ch}
.legal__note p{margin:0;font-size:14.5px;line-height:1.62;color:var(--mute-2)}
.legal__note p + p{margin-top:10px}

.legal__end{margin-top:clamp(36px,5vw,56px);display:flex;flex-wrap:wrap;
  gap:12px 26px;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute)}
.legal__end a{color:var(--ice);text-decoration:none;
  border-bottom:1px solid var(--ice-dim);padding-bottom:2px}
.legal__end a:hover{border-bottom-color:var(--ice)}

@media(max-width:640px){
  .legal__item{grid-template-columns:1fr;gap:0}
  .legal__n{padding-top:0;margin-bottom:8px}
}