/* jota.ai — home nova. Fonte: Figma "Concept" → página Site → frames
   Home-Desktop-Jota (1087:35498, 1440px) e Home-Mobile-Jota (1087:36717, 393px).
   Medidas em px vêm do frame desktop; o mobile segue o frame mobile.
   Artes em img/novo/ exportadas pela REST API do Figma (PNG 4x → WebP 2x/3x, SVG);
   originais em definição máxima ficam fora do repo. */

@font-face{font-family:"Aeonik";src:url("../fonts/aeonik-regular.woff2") format("woff2"),url("../fonts/aeonik-regular.woff") format("woff");font-weight:400;font-display:swap;}
@font-face{font-family:"Aeonik";src:url("../fonts/aeonik-medium.woff2") format("woff2"),url("../fonts/aeonik-medium.woff") format("woff");font-weight:500;font-display:swap;}
@font-face{font-family:"Aeonik";src:url("../fonts/aeonik-bold.woff2") format("woff2"),url("../fonts/aeonik-bold.woff") format("woff");font-weight:700;font-display:swap;}

:root{
  --bg:#F5F5F5;--card:#FFFFFF;--card-2:#FCFCFC;--chip:#F0F0F0;
  --ink:#222222;--black:#000000;--ink-soft:#666666;--ink-faint:#AAAAAA;--ink-hero:#A5A5A5;
  --yellow:#FFE84C;--dark:#242D32;--line:#3B454B;
  --font:"Aeonik","Helvetica Neue",Arial,sans-serif;
  --r-art:56px;--maxw:1126px;--gutter:max(24px,calc((100vw - 1078px)/2));
}

*{margin:0;padding:0;box-sizing:border-box;}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth;}}
[id]{scroll-margin-top:92px;}
@media (max-width:900px){[id]{scroll-margin-top:80px;}}
::selection{background:var(--yellow);color:var(--ink);}/* seleção na cor da marca */
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overflow-x:clip;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;padding-top:132px;}
img,svg{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
/* --gutter = espaço entre a coluna e a borda da janela (as listas que rolam de lado sangram até ela); abaixo de 1200 a coluna tem 24px de padding */
@media (min-width:1200px){.wrap{padding:0;}:root{--gutter:calc((100vw - 1126px)/2);}}
h1,h2,h3{font-weight:400;color:var(--black);text-wrap:balance;}
h1{font-size:clamp(40px,6.25vw,90px);line-height:.9;letter-spacing:-.03em;}
h2{font-size:clamp(40px,5.55vw,80px);line-height:.9;letter-spacing:-.03em;}
h3{font-size:clamp(40px,4.45vw,64px);line-height:.9;letter-spacing:-.03em;color:var(--ink);}
/* trechos que só existem num dos frames (quebra de linha, ícone) */
.m{display:none;}
@media (max-width:560px){.d{display:none;}.m{display:revert;}}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 32px;border-radius:32px;background:var(--ink);color:#EEEEEE;font-size:16px;font-weight:500;letter-spacing:-.03em;white-space:nowrap;transition:transform .18s,box-shadow .18s;}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.18);}

/* ---------- NAV ---------- */
/* fixed + padding no body: encolher a barra não move o conteúdo (âncoras ficam no lugar). */
.nav{--ns:0;--nh:132px;--nc:72px;position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nh);overflow:clip;transform:translateY(calc((var(--nc) - var(--nh))*var(--ns)));background:rgba(245,245,245,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
/* --ns 0..1 vem do scroll (JS): empurrar pra cima comprime a barra, puxar pra baixo devolve. Sem transição: acompanha o dedo.
   Só transform (a barra sobe, o conteúdo desce metade e encolhe): o navegador não refaz layout a cada frame. */
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:100%;max-width:none;padding:0 40px;transform:translateY(calc((var(--nh) - var(--nc))/2*var(--ns)));}
.brand img{width:48px;height:48px;transform:scale(calc(1 - .25*var(--ns)));transform-origin:0 50%;}
.nav .btn{height:48px;transform:scale(calc(1 - .0833*var(--ns)));transform-origin:100% 50%;transition:box-shadow .18s;}
.nav .btn:hover{transform:translateY(-2px) scale(calc(1 - .0833*var(--ns)));}
.nav .btn{width:180px;}

/* ---------- HERO ---------- */
.hero{text-align:center;padding-top:40px;}
.hero h1{max-width:900px;margin:0 auto;}
.hero .lede{margin:24px auto 0;max-width:850px;font-size:clamp(16px,1.4vw,20px);line-height:1.4;letter-spacing:-.03em;color:var(--ink-soft);}
.prompt-panel{position:relative;margin-top:117px;height:358px;border-radius:var(--r-art);overflow:hidden;
  background:var(--yellow) url("../img/novo/liquid.webp?v=79c9c502") 50% 50.6%/102.4% auto no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:25px;padding:0 24px;}
.prompt-panel{isolation:isolate;}
/* Sem poster e sem fade: o fundo do painel (liquid.webp, pré-carregado) é o mesmo quadro e fica como LCP.
   Com poster ou opacity:0 até tocar, o 1º frame do vídeo virava um LCP novo e atrasado (4 s em 4G). */
.liquid{position:absolute;left:-1.16%;top:-40.5%;width:102.4%;height:181%;object-fit:cover;z-index:-1;pointer-events:none;}
.prompt-panel>:not(.liquid){position:relative;}
/* Android Chrome: backdrop-filter sobre vídeo em camada própria esconde os irmãos. */
.prompt-panel:has(.is-playing) .prompt-bar{backdrop-filter:none;-webkit-backdrop-filter:none;}
.prompt-bar{display:flex;align-items:center;gap:10px;width:min(659px,100%);height:84px;padding:0 24px 0 21px;border-radius:115px;background:#fff;border:.8px solid rgba(44,51,56,.05);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);}
.prompt-bar .ic{width:37px;height:37px;}/* Figma 1277:60553/60557: o desenho ocupa a caixa de 37 (sem padding) */
.prompt-bar .ph{flex:1;text-align:left;font-size:18.5px;color:var(--ink-faint);}
.prompt-bar .send{width:46px;height:46px;}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.chip{display:inline-flex;align-items:center;gap:5px;height:48px;padding:11px 13px;border-radius:94px;background:#fff;font-size:15.3px;font-weight:500;white-space:nowrap;}
.chip img{height:25px;width:auto;}
.chip img.sm{height:19.65px;}/* ícones de linha da /chat (Pix, gastos...): mesmo tamanho de lá */

.funding{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-top:73px;text-align:left;}
.funding .trend{display:block;width:28px;height:28px;}
.funding>div{padding-bottom:15px;}/* Figma: logos terminam 15px abaixo do texto */
.funding p{margin-top:1px;font-size:14px;line-height:19.6px;font-weight:500;letter-spacing:-.03em;color:var(--ink-soft);}
.funding p b{display:block;font-size:18px;line-height:25.2px;font-weight:700;color:var(--ink);}
.funding p span{display:block;}
.funding .investors{display:block;width:541px;max-width:100%;flex:0 1 541px;}
.funding .investors img{display:block;width:100%;height:auto;filter:grayscale(1);}/* Figma mostra os logos em cinza */

/* ---------- SIMPLES ---------- */
.simples{margin-top:192px;text-align:center;}
.simples h2{font-size:clamp(40px,6.25vw,90px);}
.simples .lede{max-width:668px;margin:24px auto 0;font-size:clamp(17px,1.66vw,24px);line-height:1.3;color:var(--ink-soft);}
.cloud{position:relative;width:1037px;max-width:100%;aspect-ratio:1037/306;margin:80px auto 0;}
.cloud img{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:auto;}

/* ---------- SPLIT ---------- */
/* 190px do Figma (nuvem → retrato) menos a folga que o centramento vertical do stage adiciona acima do retrato (retrato 738 + nav 72). */
.split{margin-top:calc(190px - clamp(0px, (100vh - 810px)/2, 190px));height:280vh;}/* animação em 1,6 tela de rolagem + 0,2 presa aberta (HOLD no JS) */
.stage{--p:0;--navh:72px;--q:clamp(0,calc(1 - var(--p)/.7),1);position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;}
.stage .wrap{display:grid;grid-template-columns:1fr 394px 1fr;align-items:center;gap:40px;height:100%;box-sizing:border-box;padding-top:var(--navh);}
.split h2{max-width:300px;opacity:clamp(0,calc(1 - var(--p)*2.5),1);}
.split h2:first-child{justify-self:start;margin-left:34px;transform:translateX(calc(var(--p) * -60px));}/* Figma: texto em x=191, coluna em 157 */
.split h2:last-child{transform:translateX(calc(var(--p) * 60px));}
.portrait{width:394px;max-height:calc(100svh - var(--navh) - 48px);aspect-ratio:394/738;border-radius:var(--r-art);}
.scene{--ar:1.40722;--fy:.45;--pr:508.67 114 262.67;position:absolute;inset:0;clip-path:inset(calc(var(--ct,0px)*var(--q)) calc(var(--cr,0px)*var(--q)) calc(var(--cb,0px)*var(--q)) calc(var(--cl,0px)*var(--q)) round calc(var(--r,56px)*var(--q)));}
.scene-inner{position:absolute;transform-origin:0 0;transform:translate(calc(var(--tx,0px)*var(--q)),calc(var(--ty,0px)*var(--q))) scale(calc(1 + (var(--s,1) - 1)*var(--q)));}
/* aberta: a cena é o frame 1087:36168 (1441x1024) inteiro; widgets em % dele */
/* vídeo 16:9 recortado pelo frame da cena, como no Figma (1277:59764); --pr = janela do retrato em px do vídeo (1280x720): x y largura */
.scene-photo{position:absolute;left:-16.62%;top:-2.734%;width:133.241%;height:auto;max-width:none;aspect-ratio:16/9;object-fit:cover;}
.wg{--a:clamp(0,calc((var(--p) - var(--d))*4),1);position:absolute;height:auto;opacity:var(--a);transform:translateY(calc((1 - var(--a))*28px)) scale(calc(.92 + .08*var(--a)));}
.wg-saldos{--d:.45;left:27.203%;top:31.348%;width:15.684%;}
.wg-nubank{--d:.55;left:55.864%;top:38.965%;width:23.605%;}
.wg-google{--d:.65;left:53.019%;top:48.296%;width:23.605%;}
.wg-fluxo{--d:.75;left:35.461%;top:52.832%;width:13.986%;}

/* ---------- FEATURES ---------- */
.features{display:grid;gap:200px;margin-top:200px;}
.feature:nth-child(2){margin-top:-91px;}/* Figma desktop: 109px entre o 1º e o 2º par, 200px nos demais */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;}
.feature .art{border-radius:var(--r-art);overflow:hidden;background:#fff;}
.feature .art picture{display:block;height:100%;}
.feature .art img{width:100%;height:100%;object-fit:cover;}
.feature .copy{min-height:660px;padding:60px;border-radius:40px;background:var(--card-2);}
.feature .ficon{width:90px;height:90px;border-radius:50%;}
.feature h3{margin-top:49px;}
.feature p{margin-top:40px;max-width:423px;font-size:20px;line-height:26px;letter-spacing:-.01em;color:var(--ink-soft);}
.chans{display:flex;gap:10px;margin-top:40px;}
.chans a{display:inline-flex;align-items:center;gap:5px;height:42px;padding:0 14px;border-radius:85px;background:var(--chip);font-size:13.9px;font-weight:500;transition:background .18s;}
.chans a:hover{background:#e6e6e6;}
.chans img{width:17px;height:17px;}

/* ---------- LISTAS COM SETA (time, mídia) ---------- */
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.team .rowhead,.press .rowhead{margin-top:200px;}
.rowhead h2{max-width:500px;}
.arrows{display:flex;gap:10px;flex:none;}
.arrows button{width:56px;height:56px;border-radius:50%;transition:background .18s;}
.arrows button:hover{background:rgba(0,0,0,.05);}
.arrows img{width:100%;height:100%;}
.scroller{display:flex;align-items:flex-start;gap:40px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:80px 0 0;padding-right:var(--gutter);}
.scroller::-webkit-scrollbar{display:none;}
.scroller>*{flex:none;scroll-snap-align:start;}
/* sangria dos dois lados: a lista começa alinhada à coluna e rola até as duas bordas da janela */
.bleed{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding-left:var(--gutter);scroll-padding-left:var(--gutter);}
.person{width:312px;}
.person .photo{aspect-ratio:312/366;border-radius:32px;overflow:hidden;background:#fff;}
.person .photo img{width:100%;height:100%;object-fit:cover;object-position:top;}
.person h4{margin-top:20px;font-size:20px;line-height:26px;font-weight:700;color:var(--ink);}
.person .role{font-size:20px;line-height:26px;color:var(--ink-soft);}
.person .in{display:block;width:24px;height:24px;margin-top:20px;}
.person p{margin-top:20px;font-size:14px;line-height:18.2px;letter-spacing:-.42px;color:var(--ink-soft);}
.press .scroller{gap:20px;}
.news{display:flex;flex-direction:column;gap:16px;width:300px;padding:24px;border-radius:40px;background:var(--card-2);transition:transform .18s;}
.news:hover{transform:translateY(-3px);}
.news .logo{width:48px;height:48px;margin-bottom:4px;}
.news h4{font-size:20px;line-height:26px;font-weight:500;}
.news small{display:block;font-size:14px;line-height:19.6px;color:var(--ink-faint);}
.news .ext{width:28px;height:28px;}

/* ---------- PERGUNTAS (Figma 1319:68405 / 1319:68442) ---------- */
.faq{interpolate-size:allow-keywords;}
.faq h2{margin-top:200px;}
.faq-list{margin-top:84px;border-top:1px solid #E4E3E5;}
.faq details{border-bottom:1px solid #E4E3E5;}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:44px 0;list-style:none;cursor:pointer;font-size:20px;line-height:40px;font-weight:500;letter-spacing:-.2px;color:var(--black);-webkit-tap-highlight-color:transparent;transition:padding .35s cubic-bezier(.2,.8,.2,1),color .18s;}
.faq details[open] summary{padding-bottom:12px;}/* Figma: 16px entre a pergunta e a resposta */
.faq summary::-webkit-details-marker{display:none;}
.faq summary:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px;}
.faq summary::after{content:"";flex:none;width:20px;height:20px;background:linear-gradient(#000,#000) center/100% 2px no-repeat,linear-gradient(#000,#000) center/2px 100% no-repeat;transition:background-size .3s cubic-bezier(.2,.8,.2,1);}
.faq details[open] summary::after{background-size:100% 2px,2px 0;}
.faq details p{max-width:426px;padding-bottom:48px;font-size:16px;line-height:1.4;letter-spacing:-.16px;color:#727077;font-feature-settings:"salt" 1;}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .35s cubic-bezier(.2,.8,.2,1),content-visibility .35s allow-discrete;}
.faq details[open]::details-content{block-size:auto;}
@media (hover:hover){.faq summary:hover{color:var(--ink-soft);}}
@media (prefers-reduced-motion:reduce){.faq details::details-content,.faq summary,.faq summary::after{transition:none;}}
.faq+.footer{margin-top:200px;}
@media (max-width:560px){
  .faq h2{margin-top:80px;}
  .faq-list{margin-top:40px;}
  .faq summary{text-wrap:balance;}
  .faq details p{max-width:281px;}
  .faq+.footer{margin-top:80px;}
}

/* ---------- FOOTER ---------- */
.footer{margin-top:120px;padding:200px 0;background:var(--dark);color:#fff;}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:19px;}
.trust>div{min-height:167px;padding:24px;border:1px solid var(--line);border-radius:32px;background:var(--dark);font-size:14px;line-height:20px;color:#F2F5F6;}
.trust .logos{margin-bottom:20px;}
.trust .logos img{height:auto;}/* tamanho natural: celcoin 19px, meta 15, unico 12 */
.fgrid{display:grid;grid-template-columns:397px 207px 198px 195px 1fr;margin-top:200px;}
.fbrand{display:flex;flex-direction:column;justify-content:space-between;}
.fbrand .smile{width:76px;height:43px;}
.social{display:flex;gap:28px;}
.social img{width:24px;height:24px;}
.fcol h4{font-size:16px;line-height:22.4px;font-weight:500;letter-spacing:-.01em;margin-bottom:10px;}
.fcol a{display:block;font-size:14px;line-height:28px;letter-spacing:-.01em;color:#fff;}
.fcol a:hover{opacity:.7;}
.fcol .gap{display:none;height:28px;}
/* CNPJ no pé da coluna Suporte, alinhado às redes sociais */
.sup,.cnpj{grid-column:5;grid-row:1;}
.cnpj{align-self:end;font-size:10px;line-height:14px;letter-spacing:-.01em;color:var(--ink-faint);}

/* ---------- RESPONSIVO ---------- */
@media (max-width:1200px){
  .features{gap:160px;margin-top:160px;}
  .feature:nth-child(2){margin-top:0;}
  .split{margin-top:160px;}
  .team .rowhead,.press .rowhead{margin-top:160px;}
  .feature .copy{padding:48px;min-height:0;}
  .fgrid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:24px;}
}
@media (max-width:900px){
  .nav{--nh:96px;--nc:60px;}
  body{padding-top:96px;}
  .nav .wrap{padding:0 24px;}
  .nav .btn{width:auto;padding:0 20px;}
  .stage{--navh:60px;}
  .stage .wrap{grid-template-columns:1fr;text-align:center;justify-items:center;align-content:center;gap:40px;}
  .split h2:first-child{justify-self:center;margin:0;transform:translateY(calc(var(--p) * -40px));}
  .split h2:last-child{transform:translateY(calc(var(--p) * 40px));}
  .split h2{max-width:none;}
  .portrait{width:100%;max-width:346px;aspect-ratio:346/204;border-radius:27.29px;}
  .feature{grid-template-columns:1fr;gap:20px;}
  .feature .art{border-radius:33px;}
  .feature .art img{height:auto;}
  .feature .copy{border-radius:33px;padding:40px;}
  .trust{grid-template-columns:1fr 1fr;}
  .fgrid{grid-template-columns:1fr 1fr;gap:40px 24px;}
  .fbrand{grid-column:1/-1;flex-direction:row;align-items:center;}
  .sup{grid-column:auto;grid-row:auto;}
  .cnpj{grid-column:1/-1;grid-row:auto;}
  .footer{padding:80px 0;}
}
@media (max-width:760px){
  /* Figma mobile: bloco de investidores inteiro num card branco */
  .funding{flex-direction:column;align-items:center;text-align:center;gap:40px;margin-top:80px;padding:40px 0;min-height:309px;border-radius:32px;background:#fff;}
  .funding .trend{margin:0 auto 20px;}
  .funding>div{padding-bottom:0;}
  .funding p{font-size:14px;line-height:21px;letter-spacing:-.48px;color:#8c8c8c;}
  .funding p b{font-size:18px;line-height:27px;letter-spacing:-.48px;}
  .funding .investors{flex:none;width:100%;max-width:278px;}
}
@media (max-width:560px){
  /* Tudo abaixo = frame Home-Mobile-Jota (1087:36717), 393px. */
  /* Barra = Figma (Frame 2147251505, 393x80): logo 32 em 24,24; botão 91x32 em 278,24, texto 12. Fixa, não encolhe nem sobe ao rolar. */
  .nav{--nh:80px;--nc:80px;}
  body{padding-top:80px;}
  .brand img{width:32px;height:32px;}
  .nav .btn{width:112px;height:32px;padding:0;font-size:12px;letter-spacing:0;}
  .stage{--navh:80px;}
  .hero{padding-top:40px;}/* título em y=120 no frame (barra 80 + 40) */
  .hero h1{font-size:40px;line-height:40px;letter-spacing:-1.2px;color:var(--ink);}
  .hero .lede{max-width:261px;margin-top:16px;font-size:16px;line-height:20.8px;letter-spacing:-.48px;color:#8c8c8c;}
  /* painel 345x345 em y=335; imagem 646x364 em -151,-22 */
  .prompt-panel{margin-top:56.6px;height:345px;border-radius:32px;gap:20px;padding:0 24px;background-position:50.17% 115.79%;background-size:187.25% auto;}
  .liquid{left:-43.77%;top:-6.38%;width:187.25%;height:105.51%;}
  .funding{margin-top:40px;}
  .prompt-bar{width:min(296.5px,100%);height:60px;gap:3px;padding:0 13.8px 0 16.5px;border-radius:82.6px;}
  .prompt-bar .ic{width:26.4px;height:26.4px;padding:0;}
  .prompt-bar .ph{font-size:16.2px;line-height:16.2px;}
  .prompt-bar .send{width:32px;height:32px;}
  .chips{gap:10.4px 9.6px;}
  .chip{height:36.7px;padding:0 9.9px;gap:4.6px;border-radius:73.6px;font-size:12px;line-height:14.7px;}
  .chip img{height:19.3px;}
  .chip img.sm{height:15.3px;}
  .chip[href$="#resumo"]{padding:0 9.68px;gap:4.51px;}/* Figma: o chip Resumo mensal é um pouco mais justo */

  .simples{margin-top:79px;}
  .simples h2{font-size:40px;line-height:36px;letter-spacing:-1.2px;text-wrap:wrap;}
  .simples .lede{max-width:313px;margin-top:16px;font-size:16px;line-height:20.8px;letter-spacing:-.48px;color:#8c8c8c;}
  /* nuvem 300x245 em x=39 (não centrada no frame) */
  .cloud{width:min(300.06px,calc(100% - 15px));aspect-ratio:300.06/245.12;margin:40px 0 0 15px;}
  .cloud img{left:var(--ml);top:var(--mt);width:var(--mw);}

  h2,h3{font-size:40px;line-height:36px;letter-spacing:-1.2px;}

  /* split: nuvem → título 121px; retrato 346x204 no centro da área abaixo da barra (título 72 + 40 + 204 + 40 + 72) */
  /* animação em 0,8 tela de rolagem (desktop usa 2): no dedo, 2 telas pareciam travadas */
  .split{margin-top:calc(255px - (100svh - 80px)/2);height:215vh;height:215svh;}/* 0,8 tela de animação + 0,35 presa aberta (HOLD no JS) */
  .stage .wrap{padding-left:24px;padding-right:23px;}
  .split h2{max-width:none;}
  /* aberta: a cena é o frame 1151:33075 (393x605), faixa centrada no retrato */
  .scene{--ar:.64959;--fy:.5;--pr:83.6 32.1 1112.8;inset:auto 0;top:calc(50% + 40px - 76.972vw);height:153.944vw;}
  .scene-photo{left:-86.768%;top:0;width:273.537%;}/* Figma 1241:59452: vídeo centralizado na altura da cena */
  .wg-saldos{left:10.687%;top:28.099%;width:27.786%;}
  .wg-nubank{left:39.697%;top:45.95%;width:51.619%;}
  .wg-google{left:33.485%;top:55.355%;width:51.619%;}
  .wg-fluxo{left:10.687%;top:66.281%;width:32.967%;}

  /* Features = frame do Figma 1:1: arte 322x380 (1ª 322x315) em x=36, card 322x428, 20 entre eles, 100 entre pares (90 antes do 2º e do 6º, como no Figma), 120 depois da cena.
     Arte por aspect-ratio: em tela mais estreita que 393 encolhe sem cortar nem achatar. */
  .features{margin-top:calc(120px - (100svh - 80px)/2 + 76.972vw);gap:100px;padding:0 35px 0 36px;}
  .feature:nth-child(2),.feature:nth-child(6){margin-top:-10px;}
  .feature{gap:20px;scroll-margin-top:80px;}
  /* Ímã: parando perto, a rolagem cola o topo da arte 20px abaixo da barra e depois o fim do card 20px acima da borda de baixo.
     proximity: só puxa quando o dedo solta perto de um desses pontos; fora das features não há ponto nenhum. */
  html{scroll-snap-type:y proximity;}
  .feature .art{scroll-snap-align:start;scroll-margin-top:100px;}
  .feature .copy{scroll-snap-align:end;scroll-margin-bottom:20px;}
  /* A proporção fica na própria imagem, sem altura em %: iOS antigo resolve height:100% dentro de caixa com aspect-ratio como 0 e a arte some. */
  .feature .art{height:auto;border-radius:33.17px;}
  .feature .art picture{height:auto;}
  .feature .art img{height:auto;aspect-ratio:322/380;}
  .feature:first-child .art img{aspect-ratio:322/315;}
  .feature .copy{min-height:428.4px;padding:40px;border-radius:40px;}
  .feature:first-child .copy p{color:#aaa;}/* Figma celular: só o card 1 tem o texto em #AAAAAA */
  .feature .ficon{width:48px;height:48px;}
  .feature h3{margin-top:20px;}
  .feature p{margin-top:20px;font-size:14px;line-height:19.6px;letter-spacing:0;color:var(--ink-soft);}
  .chans{gap:7.6px;margin-top:20px;}
  .chans a{height:32.4px;padding:0 10.9px 0 11px;gap:4.1px;border-radius:65.3px;font-size:10.6px;line-height:13.1px;}
  .chans img{width:13px;height:13px;}

  .rowhead{align-items:flex-end;}
  .team .rowhead{margin-top:90px;}
  .team .rowhead h2{margin-left:8px;}/* Figma: título do time em x=32 */
  .team .arrows{margin-bottom:3px;}
  .press .rowhead{margin-top:100px;}
  .arrows{gap:7.1px;}
  .arrows button{width:40px;height:40px;}
  .team .scroller{margin-top:77px;}
  .press .scroller{margin-top:80px;}
  .person{width:190px;}
  .person .photo{aspect-ratio:190/220;border-radius:19.34px;}
  .news{width:240px;}

  .footer{margin-top:100px;padding:69px 0 32px;text-align:center;}
  .trust{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter)) 0 -4px;padding-right:var(--gutter);}
  .trust::-webkit-scrollbar{display:none;}
  .trust>div{flex:none;width:220px;min-height:169px;text-align:left;line-height:19.6px;color:#FCFCFC;}
  .fgrid{display:flex;flex-direction:column;align-items:center;gap:40px;margin-top:120px;}
  .fbrand{display:contents;}
  .fbrand .smile{order:-1;margin-bottom:80px;}
  .social{order:9;margin-top:40px;}
  .fcol h4{margin-bottom:9.6px;}
  .fcol .gap{display:block;}
  .cnpj{order:10;margin-top:-4px;align-self:auto;}
}

/* Tela baixa (celular deitado): sem pin, cena já aberta */
@media (max-height:520px){
  .split{height:auto;}
  .stage{position:relative;height:auto;overflow:visible;}
  .stage .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 40px;height:auto;padding:0 0 32px;text-align:center;}
  .portrait{display:none;}
  .split h2,.split h2:first-child,.split h2:last-child{opacity:1;transform:none;margin:0;}
  .scene{position:relative;inset:auto;top:auto;height:auto;aspect-ratio:1441/1024;clip-path:none;}
  .scene-photo{position:static;transform:none;}
  .scene-inner{transform:none;}
  .wg{--a:1;}
}

/* Home ↔ /chat: transição entre páginas (View Transitions). Os nomes casam com os da /chat. */
@view-transition{navigation:auto;}
.nav .brand{view-transition-name:logo;}
.nav .btn{view-transition-name:navbtn;}
.prompt-panel{view-transition-name:liquid;}
.prompt-bar{transition:transform .25s cubic-bezier(.2,.8,.2,1);}
.prompt-bar:active{transform:scale(.98);}
a.chip{color:inherit;text-decoration:none;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){a.chip:hover{transform:translateY(-2px);}.prompt-bar:hover{transform:translateY(-1px);}}
::view-transition-group(*){animation-duration:.62s;animation-timing-function:cubic-bezier(.22,1,.36,1);}
::view-transition-old(root){animation:.22s ease-out both vt-out;}
::view-transition-new(root){animation:.42s .12s ease-out both vt-in;}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important;}}