/* =====================================================================
   Intuitu Labs · sistema compartilhado do site (intuitu.css)
   Carregue em toda página, nesta ordem: intuitu.css → frames.css → <pagina>.css

   Índice de classes
   Layout ........ .wrap  .section  .sec-h  .mesh-host
   Tipografia .... .h1  .h2  .h3  .lede  .note  .credit
   Ações ......... .btn + .btn-ink | .btn-glass | .btn-ghost | .btn-lg   .lnk   svg.ic
   Superfícies ... .glass (--glass-bg, --r)
   Chamado final . .cta-sec  .cta  .cta-in (bloco de fechamento de toda página)
   Marca ......... .brand  .wm
   Navegação ..... .nav  .nav-pill  .nav-links  .nav-cta  .nav-menu  .nav-sheet  (a[aria-current="page"])
   Idioma ........ .lang (selo fixo no canto inferior esquerdo)  .lang-btn  .lang-menu  .lang-opt  .flag; HTML injetado por tools/i18n.py
   Rodapé ........ .foot  .foot-in  .foot-tag  .foot-nav  .foot-meta  .foot-mail  .motion-toggle
   Fundo vivo .... .mesh[data-mesh="hero|soft|cta"]  .mesh-fade  .grain
   Faixa ......... svg.ribbon (data-wave, data-flow, data-reverse)  .ribbon-bleed
   Movimento ..... .reveal (--d)  .lines > .ln > span (--i)  .rise (--d)
   Acessibilidade  .sr  .skip
   Estados no <html> (postos pelo script do <head> e por intuitu.js):
   .js  .motion | .still  .fx (reveal ativo)  .settled (entradas já tocaram)
   ===================================================================== */
/* Fontes hospedadas no próprio site (OFL), subconjunto latino, variáveis (um arquivo cobre 400 a 600) */
@font-face{font-family:"Sora";font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/sora-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/geist-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ---------- Tokens ---------- */
:root{
  --ink:#1F3A2E; --ink-2:#45584E; --ink-3:#5A6A61; --ink-4:#657469; --creme:#FAF7EF; --line:rgba(31,58,46,.12);
  --peach:#FDD4B1; --apricot:#FEB559; --sage:#9EB093; --blue:#85ACD4; --blue-2:#7CA3E6; --lilac:#A39FFC; --lav:#CBAEFB; --strong:#7197FB; --dot:#FC9D67;
  --grad:linear-gradient(100deg,#FDD4B1 0%,#FEB559 15%,#9EB093 45%,#85ACD4 68%,#A39FFC 80%,#CBAEFB 100%);
  --ease:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --display:"Sora",ui-sans-serif,system-ui,sans-serif; --text:"Geist",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --gut:40px;
  /* raios: pílula = ação; vidro = cartão; palco = painel de vidro que segura uma demo; xl = blocos de página (chamado final, próximo projeto) */
  --r-sm:12px; --r-md:16px; --r-lg:24px; --r-glass:30px; --r-stage:36px; --r-xl:44px; --r-pill:999px;
  /* desfoque do vidro: leve (etiquetas), botão, barra (nav, menus, selo) e cartão */
  --blur-1:blur(8px); --blur-btn:blur(18px) saturate(170%); --blur-bar:blur(22px) saturate(180%); --blur-glass:blur(26px) saturate(170%);
  /* escala de títulos (Sora 600); no celular .h1 e .h2 têm regra própria no fim do arquivo */
  --fs-h1:clamp(44px,6vw,92px); --fs-h2:clamp(38px,5.2vw,78px); --fs-h3:clamp(23px,2vw,26px); --fs-cta:clamp(40px,6vw,92px);
  --glass-sh:inset 0 0 0 1px rgba(255,255,255,.75),inset 0 1px 0 rgba(255,255,255,.95),0 50px 90px -50px rgba(31,58,46,.4),0 14px 28px -20px rgba(31,58,46,.2);
  --raise:-6px -6px 14px rgba(255,255,255,.9),8px 10px 20px rgba(31,58,46,.15),inset 0 1px 0 #fff;
  --sink:inset 4px 4px 10px rgba(31,58,46,.12),inset -4px -4px 10px rgba(255,255,255,.88);
  --sink-sm:inset 2px 2px 5px rgba(31,58,46,.13),inset -2px -2px 5px rgba(255,255,255,.9);
  accent-color:var(--ink);
  color-scheme:light;
}
@view-transition{navigation:auto}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:90px}
html.still{scroll-behavior:auto}
body{margin:0;background:var(--creme);color:var(--ink);font:400 18px/1.55 var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:#FEB559;color:var(--ink)}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-70px;z-index:200;background:var(--ink);color:var(--creme);padding:14px 18px;border-radius:12px;text-decoration:none;transition:top .3s var(--ease)}
.skip:focus{top:16px}
svg.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Layout ---------- */
.wrap{width:min(1320px,100% - var(--gut)*2);margin-inline:auto}
.section{position:relative;padding:clamp(96px,11vw,150px) 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(40px,5vw,64px)}

/* ---------- Tipografia ---------- */
.h1{font:600 var(--fs-h1)/.98 var(--display);letter-spacing:-.048em;text-wrap:balance}
.h2{font:600 var(--fs-h2)/1 var(--display);letter-spacing:-.045em;text-wrap:balance}
.h3{font:600 var(--fs-h3)/1.15 var(--display);letter-spacing:-.03em}
.lede{font-size:19.5px;line-height:1.55;color:var(--ink-2);max-width:31em;text-wrap:pretty}
.note{font-size:14px;color:var(--ink-3);display:inline-flex;align-items:center;gap:8px}
.note::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid currentColor}
.credit{font-size:13.5px;line-height:1.45;color:var(--ink-3);max-width:34em}

/* ---------- Botões e links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:0 26px;border-radius:var(--r-pill);font:500 16px/1 var(--text);text-decoration:none;cursor:pointer;border:0;color:var(--ink);background:transparent;
  transition:transform .5s var(--ease),background-color .4s var(--ease),box-shadow .5s var(--ease)}
.btn .ic{transition:transform .5s var(--ease)}
.btn:hover .ic{transform:translateX(3px)}
.btn-ink{background:var(--ink);color:var(--creme);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px -14px rgba(31,58,46,.6)}
.btn-ink:hover{background:#28483A;transform:translateY(-1px)}
.btn-glass{color:var(--ink);background:rgba(255,255,255,.42);-webkit-backdrop-filter:var(--blur-btn);backdrop-filter:var(--blur-btn);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.72),inset 0 1px 0 rgba(255,255,255,.95),0 14px 30px -18px rgba(31,58,46,.45)}
.btn-glass:hover{background:rgba(255,255,255,.6);transform:translateY(-1px)}
.btn-ghost{box-shadow:inset 0 0 0 1px rgba(31,58,46,.22)}
.btn-ghost:hover{background:rgba(31,58,46,.05)}
.btn-lg{min-height:62px;padding:0 32px;font-size:17px}
.lnk{display:inline-flex;align-items:center;gap:8px;min-height:44px;font:500 16px/1 var(--text);text-decoration:none;color:var(--ink)}
.lnk .ic{transition:transform .5s var(--ease)}
.lnk:hover .ic{transform:translateX(3px)}

/* ---------- Vidro ----------
   Sempre sobre fundo com cor (.mesh, brilho ou faixa), senão o vidro some. */
.glass{position:relative;border-radius:var(--r,var(--r-glass));background:var(--glass-bg,rgba(255,255,255,.5));
  -webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);box-shadow:var(--glass-sh)}

/* ---------- Marca ---------- */
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);min-height:44px}
.brand svg{width:34px;height:auto;display:block}
.wm{font:600 14.5px/.98 var(--display);letter-spacing:-.02em}

/* ---------- Navegação em pílula de vidro ---------- */
.nav{position:fixed;z-index:50;top:14px;left:0;right:0;display:flex;justify-content:center;pointer-events:none}
.nav-pill{pointer-events:auto;width:min(1080px,100% - 32px);height:62px;display:flex;align-items:center;gap:12px;padding:0 8px 0 18px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.34);-webkit-backdrop-filter:var(--blur-bar);backdrop-filter:var(--blur-bar);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.85),0 18px 40px -24px rgba(31,58,46,.4);
  transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.nav.scrolled .nav-pill{background:rgba(250,247,239,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(31,58,46,.06),0 18px 40px -22px rgba(31,58,46,.35)}
.nav-links{display:flex;gap:4px;margin-left:auto}
.nav-links a{font:500 15px/1 var(--text);text-decoration:none;color:var(--ink);padding:0 16px;height:44px;display:inline-flex;align-items:center;border-radius:var(--r-pill);transition:background-color .3s}
.nav-links a:hover{background:rgba(255,255,255,.55)}
.nav-links a[aria-current="page"]{background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.nav-cta{margin-left:8px;height:46px;padding:0 22px;border-radius:var(--r-pill);background:var(--ink);color:var(--creme);font:500 15px/1 var(--text);text-decoration:none;display:inline-flex;align-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.nav-cta:hover{background:#28483A}
.nav-menu{display:none;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.5);color:var(--ink);cursor:pointer;align-items:center;justify-content:center}
.nav-sheet{pointer-events:auto;position:absolute;top:72px;width:min(1080px,100% - 32px);padding:10px;border-radius:24px;
  background:rgba(250,247,239,.86);-webkit-backdrop-filter:var(--blur-bar);backdrop-filter:var(--blur-bar);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 30px 60px -30px rgba(31,58,46,.45)}
.nav-sheet a{display:flex;align-items:center;min-height:52px;padding:0 16px;border-radius:14px;text-decoration:none;font:500 18px/1 var(--display)}
.nav-sheet a:hover,.nav-sheet a[aria-current="page"]{background:rgba(255,255,255,.7)}
.nav-sheet[hidden]{display:none}
/* Idioma: selo fixo no canto inferior esquerdo, fora do menu; some ao rolar para baixo (.away) */
.lang{position:fixed;z-index:45;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));transition:transform .5s var(--ease),opacity .35s var(--ease)}
.lang.away{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none}
html.still .lang{transition:none}
.lang-btn{height:40px;padding:0 13px 0 7px;border:0;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font:600 12.5px/1 var(--text);letter-spacing:.06em;color:var(--ink-2);
  background:rgba(250,247,239,.66);-webkit-backdrop-filter:var(--blur-bar);backdrop-filter:var(--blur-bar);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 10px 26px -14px rgba(31,58,46,.4);transition:background-color .3s,color .3s}
.lang-btn:hover,.lang-btn[aria-expanded="true"]{background:rgba(255,255,255,.88);color:var(--ink)}
.flag{flex:none;width:24px;height:24px;border-radius:50%;overflow:hidden;display:block;box-shadow:0 0 0 1px rgba(31,58,46,.12)}
.flag svg{display:block;width:100%;height:100%}
.lang-menu{position:absolute;bottom:calc(100% + 10px);left:0;min-width:184px;padding:6px;border-radius:18px;display:grid;gap:2px;
  background:rgba(250,247,239,.92);-webkit-backdrop-filter:var(--blur-bar);backdrop-filter:var(--blur-bar);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 24px 48px -24px rgba(31,58,46,.45)}
.lang-menu[hidden]{display:none}
.lang-opt{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;color:var(--ink);font:500 15px/1 var(--text)}
.lang-opt .flag{width:22px;height:22px}
.lang-opt:hover{background:rgba(255,255,255,.75)}
.lang-opt[aria-current]{background:rgba(255,255,255,.75);font-weight:600}

/* ---------- Rodapé ---------- */
.foot{padding:0 0 48px}
.foot-in{display:grid;grid-template-columns:1fr auto;gap:28px 40px;align-items:start;padding-top:44px;border-top:1px solid var(--line)}
.foot-tag{margin-top:14px;font-size:15px;color:var(--ink-2)}
.foot-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:0 4px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;font-size:15.5px;text-decoration:none;border-radius:var(--r-sm)}
.foot-nav a:hover{background:rgba(31,58,46,.06)}
.foot-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:13.5px;color:var(--ink-3)}
.foot-meta .copy{margin-right:auto}
.foot-mail{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--ink);text-underline-offset:4px}
.motion-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 8px;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(31,58,46,.05);color:var(--ink-2);font:500 14px/1 var(--text);transition:background-color .3s}
.motion-toggle:hover{background:rgba(31,58,46,.09)}
.motion-toggle .sw{position:relative;flex:none;width:34px;height:20px;border-radius:var(--r-pill);background:rgba(31,58,46,.2);transition:background-color .35s var(--ease)}
.motion-toggle .sw::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(31,58,46,.3);transition:transform .35s var(--ease)}
.motion-toggle[aria-pressed="true"] .sw{background:var(--ink)}
.motion-toggle[aria-pressed="true"] .sw::after{transform:translateX(14px)}
.motion-toggle:disabled{cursor:default;opacity:.75}

/* ---------- Fundo vivo ----------
   <section class="mesh-host"><div class="mesh" data-mesh="hero" aria-hidden="true"></div>...</section>
   O gradiente abaixo é o estado parado (sem JS ou com animação reduzida);
   intuitu.js cria os blobs que orbitam, o grão e a reação ao ponteiro. */
.mesh-host{position:relative;isolation:isolate;overflow:clip}
.mesh{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
   radial-gradient(60% 70% at 8% 12%,rgba(253,212,177,.95),transparent 70%),
   radial-gradient(50% 60% at 28% 92%,rgba(254,181,89,.6),transparent 70%),
   radial-gradient(50% 60% at 60% 100%,rgba(158,176,147,.55),transparent 70%),
   radial-gradient(55% 60% at 92% 70%,rgba(133,172,212,.75),transparent 70%),
   radial-gradient(55% 60% at 88% 4%,rgba(163,159,252,.7),transparent 70%),
   linear-gradient(160deg,#FBEFE0,#F6F0EA 45%,#EDE9F7)}
.mesh[data-mesh="soft"]{background:
   radial-gradient(55% 70% at 6% 10%,rgba(253,212,177,.75),transparent 70%),
   radial-gradient(50% 60% at 94% 20%,rgba(203,174,251,.5),transparent 70%),
   radial-gradient(50% 60% at 70% 100%,rgba(133,172,212,.4),transparent 70%),
   var(--creme)}
.mesh[data-mesh="cta"]{background:radial-gradient(60% 80% at 10% 10%,#FDD4B1,transparent 70%),radial-gradient(60% 70% at 90% 20%,rgba(163,159,252,.85),transparent 70%),radial-gradient(60% 70% at 50% 110%,rgba(133,172,212,.8),transparent 70%),linear-gradient(160deg,#FBEBD7,#EDE6F6)}
.mesh .blob{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.mesh-fade::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:2;background:linear-gradient(to bottom,rgba(250,247,239,0),var(--creme))}
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--grain);background-size:150px 150px;opacity:.55}

/* ---------- Faixa de gradiente infinita ----------
   SVG com um ou mais <path> (comandos absolutos M L C S Q) que começam e terminam fora da tela.
   intuitu.js aplica o gradiente da marca e anima: cores fluindo pelo traço + ondulação suave. */
.ribbon{position:absolute;overflow:visible;pointer-events:none}
.ribbon path{fill:none;stroke:#B9B5F6;stroke-linecap:butt}
.ribbon-bleed{left:50%;width:100vw;margin-left:-50vw}

/* ---------- Chamado final (toda página) ---------- */
.cta-sec{padding:0 0 110px}
.cta{border-radius:var(--r-xl);min-height:560px;display:flex;align-items:center;justify-content:center;text-align:center;padding:110px 32px}
.cta-in{max-width:820px}
.cta h2{font:600 var(--fs-cta)/.98 var(--display);letter-spacing:-.05em;text-wrap:balance}
.cta p{margin:26px auto 0;font-size:20px;line-height:1.5;color:var(--ink-2);max-width:30em;text-wrap:balance}
.cta .btn{margin-top:40px}

/* ---------- Movimento ---------- */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes lineUp{from{transform:translateY(108%)}to{transform:none}}
/* rise começa em 1% e não em 0: texto com opacidade zero não conta como pintado, e o LCP só seria medido no fim da animação */
@keyframes rise{from{opacity:.01;transform:translateY(22px)}to{opacity:1;transform:none}}
/* título que sobe linha a linha: <h1 class="h1 lines"><span class="ln"><span style="--i:0">...</span></span>...</h1> */
.lines .ln{display:block;overflow:hidden;padding:0 .04em .11em 0;margin-bottom:-.11em}
.lines .ln>span{display:block}
/* entradas do carregamento: só tocam uma vez (some com .settled) */
html.motion:not(.settled) .lines .ln>span{animation:lineUp 1.15s var(--ease) both;animation-delay:calc(140ms + var(--i,0) * 90ms)}
html.motion:not(.settled) .rise{animation:rise 1.1s var(--ease) both;animation-delay:var(--d,0ms)}
html.motion:not(.settled) .mesh .blob{animation:fadeIn 1.6s var(--ease) both}
/* entrada ao rolar: conteúdo visível por padrão, só some se o JS ativar .fx */
html.fx.motion .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.2s var(--ease);transition-delay:var(--d,0ms)}
html.fx.motion .reveal.in{opacity:1;transform:none}
/* animação reduzida (sistema ou botão do rodapé): tudo visível e parado */
html.still *,html.still *::before,html.still *::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* ---------- Responsivo ---------- */
@media (max-width:679px){
  :root{--gut:20px}
  body{font-size:17px}
  .nav{top:10px}
  .nav-pill{height:58px;padding:0 6px 0 14px;width:calc(100% - 24px)}
  .nav-sheet{width:calc(100% - 24px);top:76px}
  .nav-links{display:none}
  .nav-cta{margin-left:auto;height:44px;padding:0 18px}
  .nav-menu{display:inline-flex}
  .h1{font-size:clamp(38px,11vw,56px)}
  .lede{font-size:17.5px}
  .foot-in{grid-template-columns:1fr}
  .foot-nav{justify-content:flex-start;margin-left:-12px}
  .foot-meta{flex-direction:column;align-items:flex-start;gap:6px}
  .foot-meta .copy{order:3;margin-top:8px}
  .cta{border-radius:var(--r-glass);padding:84px 22px;min-height:0}
  .cta p{font-size:17.5px}
  .cta .btn{width:100%;justify-content:center;padding:12px 20px;line-height:1.2;text-align:center}
}
@media (max-width:640px){.h2{font-size:min(var(--h2m,2.6rem),9.4vw);overflow-wrap:break-word}}

/* Etiquetas do que foi feito em cada projeto (Site, App, Dashboard...) */
.ptags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ptags li{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-pill);font:500 13.5px/1 var(--text);letter-spacing:.005em;color:var(--ink-2);background:rgba(255,255,255,.5);border:1px solid var(--line);-webkit-backdrop-filter:var(--blur-1);backdrop-filter:var(--blur-1)}
.ptags-c{justify-content:center;margin-top:22px}