/* ============================================================ TSN Sistemas — site institucional (camada mobile-first) Base = celular (até 767px). min-width 768 = tablet, 1024 = desktop. Tokens de cor/tipo/raio vêm do design system inline (index.html). ============================================================ */ :root{ --sec-pad:56px; /* respiro vertical por zona, mobile */ --bg-panel:color-mix(in oklab,var(--accent) 24%,#0B0C0E); /* painel escuro azul-marinho, deriva do accent */ --bg-panel-ink:#EEF1F6; --bg-gradient-panel:radial-gradient(70% 80% at 85% 0%, color-mix(in oklab,var(--accent) 38%,transparent) 0%, transparent 60%), var(--bg-panel); --line-accent:color-mix(in oklab,var(--accent) 55%,transparent); --wash-soft:color-mix(in oklab,var(--accent) 6%,var(--bg)); --dot:color-mix(in oklab,var(--text) 9%,transparent); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); /* saída expo: começa rápido, assenta devagar */ --dur:.7s; --blur-in:.6px; /* desfoque inicial do reveal quase nulo (era 4px, antes 8px) */ --dur-blur:.35s; /* o desfoque some mais rápido que o fade/slide */ --spot:color-mix(in oklab,var(--accent) 14%,transparent); /* brilho que segue o cursor nos cards */ --r-panel:36px; } html{scroll-behavior:smooth;color-scheme:light only} [data-theme="dark"]{color-scheme:dark only} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ---------- elástico do scroll (overscroll) no topo e no pé ---------- Bug real: ao rolar pra cima até o topo, o "elástico" do trackpad/toque puxa a página pra baixo por um instante e o navegador mostra o que existe ACIMA da hero — o canvas, que herdava o fundo do body (branco no tema claro). Aparecia como uma faixa branca rápida acima do header. Correção em duas camadas, válida nas 4 páginas (site.css é compartilhado): 1) overscroll-behavior-y:none — onde o navegador respeita (Chrome/Edge, Safari 16+), a página fica firme no topo e não puxa nada. 2) o canvas (fundo do ) passa a ter a cor do topo da hero (--hero-blue deriva do accent, então acompanha a paleta de cada página), e um "para-choque" fixo abaixo da tela (body::after) tem a cor do footer — se ainda houver elástico (iOS, versões antigas), o que aparece é a continuação da hero em cima e do footer embaixo, nunca uma faixa de outra cor. O body continua com o próprio --bg, por isso o miolo da página não muda. */ html{overscroll-behavior-y:none;background:var(--hero-blue)} body::after{content:"";position:fixed;left:0;right:0;top:100vh;height:100vh;z-index:-2;pointer-events:none;background:var(--bg-footer)} /* ---------- ambiente único da página (camada fixa, sussurro) ---------- */ .env{position:fixed;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:22px 22px; mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)} .env::after{content:"";position:absolute;width:70vmax;height:70vmax;left:-20vmax;top:-10vmax;border-radius:50%; background:radial-gradient(circle,color-mix(in oklab,var(--accent) 9%,transparent) 0%,transparent 65%); will-change:transform;animation:envdrift 90s ease-in-out infinite alternate} @keyframes envdrift{to{transform:translate(45vw,35vh) scale(1.15)}} /* ---------- header: ajustes pro site (o markup base é o do design system) ---------- */ /* o header fica sobre o hero, sem fundo nem risco de divisória: o fundo do hero passa por baixo dele (position:absolute no topo, o hero ganha o respiro de --topbar-h). Assim que a rolagem sai do topo (JS, estado .is-scrolled) ele vira fixo, com o fundo sólido do tema — branco no claro, preto no escuro, sempre via --bg. O !important vence o "background" inline que o editor pode gravar no elemento (recipe de fundo). */ .topbar{position:absolute;top:0;left:0;right:0;width:100%;background:transparent!important; border-bottom:0!important;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none; transition:background .25s ease,box-shadow .25s ease} .topbar__in{flex-wrap:nowrap;padding:10px var(--sp-4);position:relative} /* Estado fixo (faixa): NÃO entra ao sair do topo — dentro da hero o header sobe junto com ela e some. Ele só volta, agora fixo e na cor sólida do tema (--bg: branco no claro, preto no escuro), quando a rolagem passa do fim da hero (depois do degradê de saída, no encontro com "O mecanismo") — o JS mede o pé da .hero e liga .is-scrolled a partir dali. A faixa desliza de cima pra baixo ao aparecer (keyframe topbar-in), e nas páginas de cor (verde/laranja/azul) vale a mesma regra, porque site.css/site.js são compartilhados. O menu fica montado o tempo todo — só o fundo transita. */ .topbar.is-scrolled{position:fixed!important;background:var(--bg)!important;box-shadow:var(--shadow-2); animation:topbar-in .32s cubic-bezier(.22,1,.36,1) both} .topbar.is-scrolled .topbar__in{padding:8px var(--sp-4)} @keyframes topbar-in{from{transform:translateY(-100%);opacity:.6}to{transform:none;opacity:1}} @media (prefers-reduced-motion:reduce){.topbar.is-scrolled{animation:none}} :root{--topbar-h:64px} [id]{scroll-margin-top:var(--topbar-h)} .topbar__logo{text-decoration:none;color:var(--text);flex-shrink:0} .topbar__logo .logo-mark{width:26px;height:26px;color:var(--text);flex-shrink:0} .topbar__logo .logo-live[hidden]{display:none} /* logo que se forma: o traço central é desenhado (dasharray) e o PNG real da marca recorta o resultado */ .logo-draw{color:var(--text);display:block;overflow:visible; -webkit-mask:url(../uploads/9997ab73-abd0-4725-a14d-b7e5b27c9452.png) center/contain no-repeat; mask:url(../uploads/9997ab73-abd0-4725-a14d-b7e5b27c9452.png) center/contain no-repeat} .logo-draw .ld{stroke-dasharray:var(--len,1300);stroke-dashoffset:var(--len,1300)} .logo-draw.is-drawn .ld{stroke-dashoffset:0;transition:stroke-dashoffset var(--ld-dur,.55s) cubic-bezier(.4,0,.2,1) var(--ld-delay,0s)} .logo-draw.is-drawn .ld-1{--ld-dur:.7s;--ld-delay:.1s} .logo-draw.is-drawn .ld-2{--ld-dur:.55s;--ld-delay:.62s} .logo-draw.is-drawn .ld-3{--ld-dur:.3s;--ld-delay:1.05s} .logo-draw.is-drawn .ld-4{--ld-dur:.3s;--ld-delay:1.2s} .logo-draw.is-drawn{animation:logo-settle .5s ease-out 1.35s both} @keyframes logo-settle{from{color:var(--accent)}to{color:var(--text)}} /* header: logo pronta, sem traço animado (a animação vive só no page loader e na seção A marca) */ .logo-draw.is-static{color:var(--text);animation:none} .logo-draw.is-static .ld{stroke-dashoffset:0;transition:none} @media (prefers-reduced-motion:reduce){ .logo-draw .ld{stroke-dashoffset:0;transition:none} .logo-draw.is-drawn{animation:none} } .topbar__cta{margin-left:auto;padding:9px 14px;font-size:13px;white-space:nowrap;flex-shrink:0;color:var(--accent-ink)} .topbar__cta:hover{color:var(--accent-ink);background:var(--accent)} .navtoggle{margin-left:0;order:3;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line-strong); background:var(--bg-card);cursor:pointer;display:grid;place-items:center;padding:0;color:var(--text);position:relative;z-index:75} .navtoggle span,.navtoggle span::before,.navtoggle span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px; transition:transform .3s var(--ease),opacity .2s;position:relative} .navtoggle span::before,.navtoggle span::after{content:"";position:absolute;left:0} .navtoggle span::before{top:-6px}.navtoggle span::after{top:6px} .navtoggle[aria-expanded="true"] span{background:transparent} .navtoggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)} .navtoggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)} /* menu mobile/tablet: painel de tela cheia entrando da direita, estilo Stripe */ .navscrim{position:fixed;inset:0;z-index:65;background:color-mix(in oklab,#000 55%,transparent); opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s} .navscrim.is-open{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s} .navlinks{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:70;margin:0;width:min(88vw,400px);height:100dvh; flex-direction:column;align-items:stretch;justify-content:center;gap:6px; padding:var(--sp-9) var(--sp-6);background:var(--bg-card);border-bottom:0;border-left:1px solid var(--line);box-shadow:var(--shadow-3); transform:translateX(100%);opacity:1;visibility:hidden;transition:transform .38s var(--ease),visibility 0s .38s} .navlinks.is-open{transform:translateX(0);visibility:visible;transition:transform .38s var(--ease),visibility 0s} .navlinks a{font-size:19px;padding:14px 16px;border-radius:var(--r-sm)} .navlinks a.is-active{color:var(--accent);background:var(--accent-wash)} .navlinks .btn{margin-top:var(--sp-3);justify-content:center;color:var(--accent-ink)} .navlinks .btn:hover{color:var(--accent-ink);background:var(--accent)} html.nav-open{overflow:hidden} @media (prefers-reduced-motion:reduce){ .navlinks,.navscrim{transition:none} } /* ---------- zonas ---------- */ .s{padding:var(--sec-pad) 0;position:relative} .s--alt{background:var(--bg-alt)} .s--wash{background:var(--wash-soft)} .wrap{position:relative;z-index:1} /* ---------- costuras entre seções: gradiente disfarçando o corte de cor ---------- cada seção "recebe" o tom de saída da anterior no topo e dissolve pra transparente, revelando o próprio fundo — a marca de troca de seção some. .wrap já ganhou z-index acima pra o conteúdo ficar sempre por cima disso. */ .s--alt::before,.mec::before,.s--wash::before,.seg::before,.ct::before{ content:"";position:absolute;left:0;right:0;top:0;height:clamp(64px,10vw,140px);pointer-events:none} .s--alt::before{background:linear-gradient(to bottom,var(--hero-end,var(--accent-wash)) 0%,transparent 100%)} .mec::before{background:linear-gradient(to bottom,var(--bg-alt) 0%,transparent 100%)} .s--wash::before{background:linear-gradient(to bottom,var(--bg) 0%,transparent 100%)} .seg::before{background:linear-gradient(to bottom,var(--wash-soft) 0%,transparent 100%)} .ct::before{background:linear-gradient(to bottom,var(--bg) 0%,transparent 100%)} footer.site{position:relative} .s__head{max-width:62ch;margin-bottom:var(--sp-6)} .s__head .lead{margin-bottom:0} .h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.03em;font-weight:800;margin:0 0 var(--sp-4)} .h2 .hl{color:var(--accent)} .hero-copy{font-size:var(--fs-h1);line-height:1.08;letter-spacing:-.035em;font-weight:800;margin:0 0 var(--sp-5)} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(22px);filter:blur(var(--blur-in)); transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out),filter var(--dur-blur) var(--ease)} .rv.is-in{opacity:1;transform:none;filter:none} /* foto dentro de um bloco revelado: assenta de um leve zoom */ .rv .photo img{transform:scale(1.07);transition:transform 1.5s var(--ease-out)} .rv.is-in .photo img{transform:none} .rv--late{transition-delay:.18s} .stagger > *{opacity:0;transform:translateY(16px);filter:blur(var(--blur-in));transition:opacity .6s var(--ease),transform .6s var(--ease-out),filter var(--dur-blur) var(--ease)} .stagger.is-in > *{opacity:1;transform:none;filter:none} .stagger.is-in > :nth-child(2){transition-delay:.08s}.stagger.is-in > :nth-child(3){transition-delay:.16s} .stagger.is-in > :nth-child(4){transition-delay:.24s}.stagger.is-in > :nth-child(5){transition-delay:.32s} .stagger.is-in > :nth-child(6){transition-delay:.40s}.stagger.is-in > :nth-child(7){transition-delay:.48s} .draw path,.draw circle,.draw polyline{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600); transition:stroke-dashoffset 1.4s var(--ease)} .draw.is-in path,.draw.is-in circle,.draw.is-in polyline{stroke-dashoffset:0} @media (prefers-reduced-motion:reduce){ .rv,.stagger > *{opacity:1;transform:none;filter:none;transition:none} .rv .photo img{transform:none;transition:none} .draw path,.draw circle,.draw polyline{stroke-dashoffset:0;transition:none} .env::after{animation:none} } /* ---------- HERO ---------- */ /* Hero ocupa a tela inteira na entrada (100svh = altura visível real no mobile, sem a barra do navegador cortar); o conteúdo fica centralizado verticalmente e o padding continua garantindo respiro sob o header. */ .hero{position:relative;overflow:clip;background:var(--bg-gradient-hero);padding:calc(var(--topbar-h) + var(--sec-pad) - 8px) 0 var(--sec-pad); --hero-pad-b:var(--sec-pad); min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box} .hero__in{display:grid;gap:var(--sp-6);width:100%} .hero .eyebrow{display:inline-flex;align-items:center;gap:8px} .hero .eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px} .hero__cta{display:flex;flex-direction:column;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-5)} .hero__cta .btn{justify-content:center} .hero__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .hero__tags li{font-size:12.5px;font-weight:600;color:var(--text-muted);padding:5px 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:color-mix(in oklab,var(--bg-card) 70%,transparent)} .hero__media{position:relative} .hero__photo{aspect-ratio:4/3;box-shadow:var(--shadow-3);will-change:transform} .hero__photo img{object-position:60% 30%} .hero__card{position:relative;margin:calc(-1 * var(--sp-6)) var(--sp-3) 0;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg); box-shadow:var(--shadow-2);display:flex;gap:12px;align-items:flex-start;background:color-mix(in oklab,var(--bg-card) 94%,transparent);backdrop-filter:blur(8px)} .hero__card svg{flex-shrink:0;color:var(--accent)} .hero__card b{display:block;font-size:14.5px;margin-bottom:2px} .hero__card span{font-size:13.5px;color:var(--text-2);line-height:1.45} /* ---------- HERO · fundo azul da marca + recorte da equipe ---------- O fundo da hero é a arte azul com a marca d'água da logo (mesma arte em qualquer tema, claro ou escuro) — por isso o TEXTO da hero é sempre claro: os tokens de tinta são sobrescritos só dentro de .hero, sem mexer no tema global do resto da página. A foto recortada da equipe entra à direita, por cima da marca d'água. */ :root{ --bg-hero-image:url("../uploads/28bd6646-6e82-4edd-9239-f55499370515.png"); /* marca d'água da logo (o "S" facetado), reaproveitada como fundo em qualquer seção que precise do mesmo efeito da hero: .ben__mark e .sg__art::before usam este mesmo token, nunca uma cópia da url */ --bg-mark:url("../uploads/3478c519-ff8c-4842-a7e5-f024f3d1d897.png"); /* A arte do PNG é azul, mas a COR dela segue a paleta: .hero::before pinta a hero com --hero-tint (= --accent) em mix-blend-mode:color — a luminosidade e a marca d'água da arte ficam, só o matiz troca (azul na 1, laranja na 2, verde na 3). Todos os tons "do azul" abaixo derivam do accent pelo mesmo motivo. */ --hero-tint:var(--accent); --hero-blue:color-mix(in oklab,var(--accent) 68%,#000); /* tom médio da arte, pra costuras e detalhes */ --hero-ink:#F4F6F8; --hero-ink-2:color-mix(in oklab,var(--accent-2) 24%,#FFFFFF); --hero-ink-muted:color-mix(in oklab,var(--accent-2) 50%,#FFFFFF); --hero-line:rgba(255,255,255,.22); --hero-line-strong:rgba(255,255,255,.42); --hero-glass:color-mix(in oklab,color-mix(in oklab,var(--accent) 26%,#000) 84%,transparent); /* card/chips em vidro escuro sobre a cor da hero */ } .hero{background:var(--bg-hero-image) right center/cover no-repeat,var(--bg-gradient-hero);isolation:isolate; --text:var(--hero-ink);--text-2:var(--hero-ink-2);--text-muted:var(--hero-ink-muted); --line:var(--hero-line);--line-strong:var(--hero-line-strong);--bg-card:var(--hero-glass);--bg:var(--hero-blue); color:var(--text)} .hero .lead,.hero p{color:var(--text-2)} /* camada de tinta da paleta sobre a arte: fica atrás do conteúdo (.hero__in z-index:1) e antes do degradê de saída (.hero::after); isolation:isolate na .hero impede o blend de vazar pro fundo fixo (.env) atrás dela */ .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--hero-tint);mix-blend-mode:color} .hero__aurora{opacity:.35;mix-blend-mode:screen} .hero__card{border:1px solid var(--hero-line);color:var(--hero-ink)} .hero__card b{color:var(--hero-ink)} .hero__tags li{color:var(--hero-ink-2)} .hero .btn--ghost:hover{color:var(--accent-2);border-color:var(--accent-2)} /* A foto é um PNG recortado (3600×2025) com margem transparente dos lados: as pessoas ocupam x 20%→82% e y 2%→100% do arquivo. A caixa tem EXATAMENTE essa proporção (2229×1981, mais 4% de folga pra sombra) e o object-position cai no centro delas — nada das laterais é cortado, e sem a margem vazia a foto fica bem maior. Só o pé da imagem dissolve (mask), pra o corte na cintura sumir no degradê. */ .hero__people{position:relative;aspect-ratio:2400/1981;width:120%;margin:0 -10%;will-change:transform; -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)} .hero__people::before{content:"";position:absolute;inset:auto 8% 0 8%;height:70%;border-radius:50%; background:radial-gradient(ellipse at 50% 100%,rgba(255,255,255,.22) 0%,transparent 70%);filter:blur(28px);pointer-events:none} .hero__people img{position:relative;width:100%;height:100%;object-fit:cover;object-position:50.8% 100%; filter:drop-shadow(0 30px 40px rgba(3,10,50,.55))} /* costura hero → próxima seção: o próprio pé da hero dissolve pra cor da seção de baixo (--bg-alt, a mesma do #dor) em vários degraus, então no encontro as duas cores já são iguais e não existe linha de troca. Fica atrás do conteúdo (.hero__in tem z-index:1); a máscara da foto revela esse degradê por baixo. */ :root{--hero-fade:clamp(160px,30vh,340px)} .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hero-fade);z-index:0;pointer-events:none; background:linear-gradient(to bottom,transparent 0%, color-mix(in oklab,var(--bg-alt) 6%,transparent) 18%, color-mix(in oklab,var(--bg-alt) 24%,transparent) 42%, color-mix(in oklab,var(--bg-alt) 58%,transparent) 66%, color-mix(in oklab,var(--bg-alt) 88%,transparent) 86%, var(--bg-alt) 100%)} .hero + .s--alt::before{display:none} /* o convite "Role" fica dentro do degradê claro: tinta do azul da arte, não a clara */ .hero .hero__scroll{color:var(--hero-blue)} .hero .hero__scroll:hover{color:var(--accent)} .hero .hero__scroll i::after{background:var(--bg-alt)} /* paleta azul sobre a arte azul: o destaque do título e o botão principal ficam claros (tinta da hero + accent-2), senão somem no fundo */ .hero .hero-copy .hl,.hero .hero-copy .hl .w{background:none;color:var(--accent-2);-webkit-text-fill-color:var(--accent-2)} .hero .btn--primary{background:var(--hero-ink);color:var(--hero-blue)} .hero .btn--primary:hover{box-shadow:0 8px 20px -8px rgba(0,0,0,.5)} .hero .btn--primary::before{background:linear-gradient(100deg,transparent 0%,color-mix(in oklab,var(--hero-blue) 22%,transparent) 50%,transparent 100%)} .topbar:not(.is-scrolled) .navlinks .btn,.topbar:not(.is-scrolled) .topbar__cta{background:var(--hero-ink);color:var(--hero-blue)} .topbar:not(.is-scrolled) .navlinks .btn:hover,.topbar:not(.is-scrolled) .topbar__cta:hover{background:var(--hero-ink);color:var(--hero-blue)} /* ---------- HERO · formulário "Vamos conversar?" (cartão empilhado) ---------- componente de referência: um cartão branco sólido flutua sobre 2 camadas de azul mais claras, empilhadas atrás dele (degraus visíveis no topo) — as camadas derivam de --accent por color-mix, então trocam de cor junto com a paleta ativa. O cartão em si vira "ilha clara" mesmo dentro da hero escura, por isso tem seu próprio jogo de tokens (--signup-*), independente de --hero-ink/--hero-glass usados no resto da hero. */ :root{ --signup-bg:#FFFFFF; --signup-ink:#161A1F; --signup-ink-2:#3A4247; --signup-muted:#7A838D; --signup-line:#E3E7ED; --signup-stack-near:color-mix(in oklab,var(--accent) 55%,#FFFFFF 45%); --signup-stack-far:color-mix(in oklab,var(--accent) 24%,#FFFFFF 76%); } /* card de cadastro: cantos assimétricos (inferior direito quase reto) + 2 cartões empilhados atrás, deslocados pra cima/direita */ .hero__signup-stack{--signup-r:28px;--signup-r-cut:6px;--signup-step:11px; position:relative;max-width:400px;margin:calc(var(--sp-6) + 2 * var(--signup-step)) calc(2 * var(--signup-step)) 0 0} .hero__signup-stack::before,.hero__signup-stack::after{content:"";position:absolute;pointer-events:none; border-radius:var(--signup-r) var(--signup-r) var(--signup-r-cut) var(--signup-r);box-shadow:var(--shadow-2); transition:transform .35s cubic-bezier(.2,.7,.2,1)} .hero__signup-stack::after{inset:calc(-2 * var(--signup-step)) calc(-2 * var(--signup-step)) calc(2 * var(--signup-step)) calc(2 * var(--signup-step));z-index:0;background:var(--signup-stack-far)} .hero__signup-stack::before{inset:calc(-1 * var(--signup-step)) calc(-1 * var(--signup-step)) var(--signup-step) var(--signup-step);z-index:1;background:var(--signup-stack-near)} .hero__signup-stack:hover::after{transform:translate(3px,-3px)} .hero__signup-stack:hover::before{transform:translate(1.5px,-1.5px)} @media (prefers-reduced-motion:reduce){.hero__signup-stack::before,.hero__signup-stack::after{transition:none;transform:none}} .hero__signup{margin:0;padding:var(--sp-5) var(--sp-5) var(--sp-4);position:relative;z-index:2; border-radius:var(--signup-r) var(--signup-r) var(--signup-r-cut) var(--signup-r); background:var(--signup-bg);border-color:var(--signup-line);box-shadow:var(--shadow-3); color:var(--signup-ink)} .hero__signup h2{font-size:22px;margin:0 0 var(--sp-3);color:var(--accent);font-weight:800;letter-spacing:-.02em} .hero__signup > p{font-size:var(--fs-sm);margin:0 0 var(--sp-4);color:var(--signup-ink-2)} .hero__channel{display:flex;gap:6px;margin:0 0 var(--sp-3);padding:4px;border:1px solid var(--signup-line);border-radius:var(--r-pill); background:var(--bg-inset,#F7F8FA);width:max-content} .hero__channel__btn{font:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none;background:none; color:var(--signup-muted);padding:7px 16px;border-radius:var(--r-pill);transition:.16s ease} .hero__channel__btn.is-active{background:var(--accent);color:var(--accent-ink)} .hero__channel__btn:not(.is-active):hover{color:var(--signup-ink)} .hero__signup .field{margin-bottom:0} .hero__signup .field > label{color:var(--signup-ink-2)} .hero__signup .input{background:var(--signup-bg);border-color:var(--signup-line);color:var(--signup-ink); border-radius:var(--r-md);padding:13px 18px} .hero__signup .input::placeholder{color:var(--signup-muted)} .hero__signup .input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 22%,transparent)} .hero__signup .input:user-invalid{border-color:#E5484D} .hero__signup__row{display:flex;flex-direction:column;gap:var(--sp-3)} .hero__signup__row .btn{justify-content:center;white-space:nowrap;width:100%;padding:14px 22px;font-size:15.5px} /* o cartão é uma ilha clara: o botão volta ao par accent/accent-ink padrão do site (pílula azul, texto branco), não ao invertido branco/azul que ".hero .btn--primary" usa pros botões soltos direto sobre o fundo escuro da hero */ .hero__signup__row .btn--primary{background:var(--accent);color:var(--accent-ink)} .hero__signup__row .btn--primary:hover{filter:brightness(1.08);box-shadow:0 8px 20px -8px var(--accent)} .hero__signup__row .btn--primary:active{filter:brightness(.94)} .hero__signup .cap{display:block;margin-top:var(--sp-3);color:var(--signup-muted)} .hero__signup .cap a{color:var(--accent);font-weight:600;text-underline-offset:3px} .hero__signup .cap a:hover{color:color-mix(in oklab,var(--accent) 70%,#000)} .hero__signup .err{margin:var(--sp-2) 0 0;color:#E5484D} .hero__signup .alert{margin:var(--sp-3) 0 0;border-color:color-mix(in oklab,var(--accent) 40%,transparent);background:color-mix(in oklab,var(--accent) 9%,transparent);color:var(--signup-ink)} .hero__signup .alert b{color:var(--signup-ink)} .hero__signup .alert[hidden],.hero__signup .err[hidden]{display:none} .hero__signup.is-sent .hero__channel,.hero__signup.is-sent .hero__signup__row,.hero__signup.is-sent > p,.hero__signup.is-sent .cap{display:none} .hero__tags{margin-top:var(--sp-5)} /* header transparente sobre a hero: tinta clara enquanto não rolou; ao rolar volta pros tokens do tema (fundo sólido). O painel do menu mobile fica de fora — ele tem fundo próprio e continua nos tokens do tema. */ .topbar:not(.is-scrolled) .topbar__logo,.topbar:not(.is-scrolled) .topbar__logo .logo-mark, .topbar:not(.is-scrolled) [data-ls-pages]{color:var(--hero-ink)} .topbar:not(.is-scrolled) .topbar__logo span span{color:var(--hero-ink-muted)!important} .topbar:not(.is-scrolled) .navtoggle{color:var(--hero-ink);border-color:var(--hero-line-strong);background:var(--hero-glass)} @media (min-width:768px){ .topbar:not(.is-scrolled) .navlinks a:not(.btn){color:var(--hero-ink-2)} .topbar:not(.is-scrolled) .navlinks a:not(.btn):hover{color:var(--hero-ink);background:rgba(255,255,255,.12)} .topbar:not(.is-scrolled) .navlinks a.is-active:not(.btn){color:var(--hero-ink);background:rgba(255,255,255,.12)} } /* ---------- DOR ---------- */ .dor__grid{display:grid;gap:var(--sp-6)} .dor__photo{aspect-ratio:16/11} .pains{list-style:none;margin:0 0 var(--sp-5);padding:0;display:grid;gap:10px} .pains li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-card); font-size:15px;color:var(--text-2);transition:border-color .2s,transform .2s} .pains li:hover{border-color:var(--accent-2);transform:translateX(3px)} .pains svg{flex-shrink:0;color:var(--accent);margin-top:1px} .dor__punch{border-left:3px solid var(--accent);padding:6px 0 6px var(--sp-4);margin:0;font-size:17px;font-weight:600;color:var(--text);line-height:1.45;max-width:46ch} .dor__punch em{font-style:normal;color:var(--accent)} /* ---------- MECANISMO ---------- */ .mec{background:var(--bg);overflow:clip} .mec__grid{display:grid;gap:var(--sp-6)} .mec__intro .h2{max-width:20ch} .mec__flow{display:flex;flex-wrap:wrap;gap:6px 4px;margin-top:var(--sp-4);font-family:var(--ff-mono);font-size:12px;color:var(--text-muted);letter-spacing:.06em} .mec__flow b{color:var(--accent);font-weight:600} .steps{position:relative} .steps__list{list-style:none;margin:0;padding:0 0 0 44px;display:grid;gap:var(--sp-5)} .steps__rail{position:absolute;left:12px;top:0;bottom:0;width:20px;height:100%;overflow:visible;color:var(--accent)} .steps__rail path{fill:none;stroke-width:2.5;stroke-linecap:round} .steps__rail .bg{stroke:var(--line-strong)} .steps__rail .fg{stroke:currentColor;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0)); transition:stroke-dashoffset .15s linear} .step.rv{filter:blur(calc(var(--blur-in) * .5));transition-duration:.32s}/* etapas chegam com um desfoque mais leve e revelam mais rápido que o resto do site */ .step.rv.is-in{filter:none}/* precisa vencer .step.rv em especificidade, senão o blur nunca some (bug corrigido) */ .step{position:relative;padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-card);box-shadow:var(--shadow-1); transition:border-color .25s,box-shadow .25s,transform .25s} .step::before{content:"";position:absolute;left:-38px;top:30px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2.5px solid var(--line-strong);transition:.3s} .step.is-on{border-color:var(--accent);box-shadow:var(--shadow-2)} .step.is-on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 18%,transparent)} .step__top{display:flex;align-items:center;gap:12px;margin-bottom:10px} .step__n{font-family:var(--ff-mono);font-size:13px;color:var(--accent);letter-spacing:.08em} .step__ico{width:40px;height:40px;border-radius:12px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;margin-left:auto} .step__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .step h3{margin:0 0 6px;font-size:19px;letter-spacing:-.02em} .step p{margin:0;font-size:15px} .step p + p{margin-top:8px;color:var(--text-muted);font-size:14px} /* ---------- TRANSFORMAR ---------- */ .tr__grid{display:grid;gap:var(--sp-4)} .tr{display:grid;gap:12px;padding:var(--sp-5);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-card); position:relative;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s,border-color .3s} .tr::after{content:"";position:absolute;inset:auto -40px -40px auto;width:120px;height:120px;border-radius:50%; background:radial-gradient(circle,color-mix(in oklab,var(--accent) 16%,transparent),transparent 70%);opacity:0;transition:opacity .3s} .tr:hover,.tr:focus-within{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--accent-2)} .tr:hover::after{opacity:1} .tr__from,.tr__to{position:relative} .tr__lbl{display:block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:4px} .tr__from .tr__lbl{color:var(--text-muted)} .tr__from p{margin:0;color:var(--text-muted);font-size:14.5px;text-decoration:line-through;text-decoration-color:color-mix(in oklab,var(--text-muted) 45%,transparent);text-decoration-thickness:1px} .tr__arrow{width:26px;height:26px;color:var(--accent)} .tr__arrow svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tr__to .tr__lbl{color:var(--accent)} .tr__to p{margin:0;font-weight:600;color:var(--text);font-size:16px;line-height:1.45} /* ---------- SEGMENTOS ---------- */ .seg{overflow:clip} .seg__track{display:flex;gap:var(--sp-4);overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--sp-5) var(--sp-4); margin:0 calc(-1 * var(--sp-5));scrollbar-width:none;-webkit-overflow-scrolling:touch} .seg__track::-webkit-scrollbar{display:none} .segc{flex:0 0 78%;scroll-snap-align:start;border-radius:var(--r-lg);overflow:hidden;background:var(--bg-card);border:1px solid var(--line); display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .3s var(--ease),box-shadow .3s} .segc:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)} .segc .photo{aspect-ratio:4/3} .segc .photo img{transition:transform .8s var(--ease)} .segc:hover .photo img{transform:scale(1.04)} .segc__body{padding:var(--sp-4) var(--sp-5) var(--sp-5)} .segc__body h3{margin:0 0 6px;font-size:18px} .segc__body p{margin:0;font-size:14.5px} .segc--org{background:var(--bg-gradient-panel);color:var(--bg-panel-ink);border-color:transparent;justify-content:flex-end;min-height:280px} .segc--org .segc__ico{padding:var(--sp-5) var(--sp-5) 0;color:var(--accent-2)} .segc--org .segc__ico svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .segc--org p{color:color-mix(in oklab,var(--bg-panel-ink) 78%,transparent)} .seg__hint{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);margin-top:4px} .seg__hint svg{width:16px;height:16px} /* ---------- PAINEL ESCURO com curva da referência ---------- */ .panel-wrap{padding:var(--sec-pad) 0 0;background:var(--bg)} .panel{position:relative;background:var(--bg-gradient-panel);color:var(--bg-panel-ink); border-radius:var(--r-panel) var(--r-panel) 0 0;padding:calc(var(--sec-pad) * 1.7) 0; min-height:82svh;display:flex;flex-direction:column;justify-content:center; box-shadow:inset 0 1px 0 var(--line-accent),inset 1px 0 0 var(--line-accent),inset -1px 0 0 var(--line-accent)} .panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; border:1px solid var(--line-accent);border-bottom:0; mask-image:linear-gradient(180deg,#000 0,#000 120px,transparent 300px);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 120px,transparent 300px)} .panel .eyebrow{color:var(--accent-2)} .panel .h2{color:#fff} .panel .lead{color:color-mix(in oklab,var(--bg-panel-ink) 80%,transparent)} .needs{list-style:none;margin:var(--sp-6) 0;padding:0;display:grid;gap:8px} .needs li{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:var(--r-md); background:color-mix(in oklab,#fff 6%,transparent);border:1px solid color-mix(in oklab,#fff 10%,transparent);font-size:15.5px;font-weight:500; transition:background .25s,border-color .25s,transform .25s} .needs li:hover{background:color-mix(in oklab,#fff 10%,transparent);border-color:var(--line-accent);transform:translateX(4px)} .needs svg{flex-shrink:0;width:22px;height:22px;color:var(--accent-2);fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .panel__close{display:grid;gap:var(--sp-4);align-items:center} .panel__close .hero-copy{font-size:clamp(28px,7vw,44px);color:#fff;margin:0} .panel__close .btn--primary{justify-content:center} .panel__grain{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.5;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* ---------- SOBRE ---------- */ .sobre{background:var(--bg)} /* empilhamento: o painel azul (#talvez) gruda na tela e #sobre sobe por cima dele como um cartão de cantos arredondados, igual ao topo do painel. --panel-stick-top vem do site.js (negativo quando o painel é mais alto que a tela, pra ele terminar de rolar antes) */ .panel-wrap{position:sticky;z-index:0;top:var(--panel-stick-top,calc(var(--sec-pad) * -1))} /* tudo que vem depois cobre o painel grudado (senão ele apareceria atrás de #contato/footer) */ .panel-wrap ~ section,.panel-wrap ~ footer{position:relative;z-index:1} .panel-wrap + .sobre{border-radius:var(--r-panel) var(--r-panel) 0 0; box-shadow:0 -24px 60px -28px color-mix(in oklab,black 55%,transparent)} @media (prefers-reduced-motion:reduce){ .panel-wrap{position:static} .panel-wrap + .sobre{border-radius:0;box-shadow:none} } .sobre__grid{display:grid;gap:var(--sp-6)} .sobre__photo{aspect-ratio:16/11} .pillars{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:10px} .pillars li{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-card)} .pillars b{display:block;font-size:14.5px;margin-bottom:2px} .pillars span{font-size:13.5px;color:var(--text-2);line-height:1.45} .vision{margin-top:var(--sp-6);padding:var(--sp-5);border-radius:var(--r-lg);background:var(--bg-inset);border:1px solid var(--line)} .vision__path{width:100%;height:auto;color:var(--accent);margin:8px 0 4px;overflow:visible} .vision__path path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} .vision__path circle{fill:var(--bg-card);stroke:currentColor;stroke-width:2.5} .vision__labels{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;font-size:9.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-2);text-align:center;line-height:1.25} .vision__labels span:last-child{color:var(--accent)} /* ---------- PROVA SOCIAL: depoimentos via WhatsApp ---------- */ .prova__grid{display:grid;gap:var(--sp-6)} .prova__cta{margin-top:var(--sp-5)} .prova__media{display:flex;flex-direction:column;align-items:center;gap:var(--sp-5)} .prova__stat{align-self:flex-start;display:flex;flex-direction:column;gap:2px; padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);border:1px solid var(--line); background:var(--bg-card);box-shadow:var(--shadow-2)} .prova__stat__n{font-family:var(--ff-mono);font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.02em;color:var(--accent)} .prova__stat__l{font-size:var(--fs-sm);color:var(--text-muted)} .phonecard{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);margin:0;text-align:center} .phonecard__frame{width:100%;max-width:240px} .phonecard__frame .phone__scr{padding:34px 9px 10px;background:var(--bg-inset);gap:8px} .chat{display:flex;flex-direction:column;gap:8px;padding:0 8px 12px} .chat__bubble{margin:0;font-size:12.5px;line-height:1.4;padding:8px 11px;border-radius:14px;max-width:88%;text-align:left} .chat__bubble--in{align-self:flex-start;background:var(--bg-card);color:var(--text);border:1px solid var(--line);border-bottom-left-radius:4px} .chat__bubble--out{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:4px} .phonecard__meta{font-size:var(--fs-sm)} .phonecard__meta b{display:block;color:var(--text)} .phonecard__meta span{color:var(--text-muted)} /* ---------- A MARCA: a logo grande se forma ao entrar na tela ---------- */ .marca{background:var(--bg)} .marca__grid{display:grid;gap:var(--sp-6)} .marca__steps{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:10px;counter-reset:none} .marca__steps li{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-card)} .marca__steps b{display:block;font-size:14.5px;margin-bottom:2px;font-family:var(--ff-mono);font-weight:600;letter-spacing:.02em;color:var(--accent)} .marca__steps span{font-size:13.5px;color:var(--text-2);line-height:1.45} .marca__actions{display:flex;flex-direction:column;gap:10px;margin-top:var(--sp-5)} .marca__stage{--bg-gradient-marca:radial-gradient(60% 60% at 50% 46%,color-mix(in oklab,var(--accent) 16%,transparent) 0%,transparent 72%),var(--bg-inset); position:relative;display:grid;place-items:center;gap:var(--sp-4);padding:var(--sp-7) var(--sp-5); border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-gradient-marca);overflow:clip;isolation:isolate} .marca__stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(circle,color-mix(in oklab,var(--text) 14%,transparent) .8px,transparent .9px);background-size:14px 14px;opacity:.55; -webkit-mask:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)} .marca__logo{width:min(56vw,260px);height:auto;aspect-ratio:1;color:var(--text)} .marca__logo.is-drawn .ld-1{--ld-dur:1s;--ld-delay:.1s} .marca__logo.is-drawn .ld-2{--ld-dur:.75s;--ld-delay:.85s} .marca__logo.is-drawn .ld-3{--ld-dur:.4s;--ld-delay:1.45s} .marca__logo.is-drawn .ld-4{--ld-dur:.4s;--ld-delay:1.65s} .marca__logo.is-drawn{animation:logo-settle .6s ease-out 1.9s both} .marca__cap{margin:0;text-align:center;color:var(--text-muted)} /* ---------- CONTATO ---------- */ .ct{background:var(--bg-gradient-band)} .ct__grid{display:grid;gap:var(--sp-6)} .ct__next{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:12px;counter-reset:nx} .ct__next li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text-2)} .ct__next li::before{counter-increment:nx;content:counter(nx,decimal-leading-zero);font-family:var(--ff-mono);font-size:12px;color:var(--accent);padding-top:3px;flex-shrink:0} .ct__form{padding:var(--sp-5);box-shadow:var(--shadow-3)} .ct__form .field:last-of-type{margin-bottom:var(--sp-5)} .ct__form .btn{width:100%;justify-content:center} .ct__row{display:grid;gap:0} .ct__ok{display:none;text-align:center;padding:var(--sp-5) 0} .ct__ok svg{width:48px;height:48px;color:var(--accent);margin:0 auto var(--sp-3);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ct__form.is-sent form{display:none} .ct__form.is-sent .ct__ok{display:block} .ct__priv{font-size:12.5px;color:var(--text-muted);margin:var(--sp-3) 0 0;text-align:center} .ct__form .seven-sucesso{display:none} .ct__form .seven-aviso{margin:var(--sp-3) 0 0;font-size:13.5px;color:#E5484D;text-align:center} .ct__form .seven-aviso[hidden]{display:none} .ct__form [aria-invalid="true"]{border-color:#E5484D} .ct__form .btn:disabled{opacity:.6;cursor:progress} /* ---------- FOOTER ---------- */ .footer__top{display:flex;flex-direction:column;gap:var(--sp-5);align-items:flex-start} .footer__brand{display:flex;align-items:center;gap:10px} .footer__ctl{gap:var(--sp-2);flex-wrap:wrap} .footer__ctl .swbtn{border-color:#2A2E35;background:#15171B;color:#C7CCD3} .footer__ctl .swbtn:hover{border-color:var(--accent)} .footer__ctl .swbtn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .footer__contact{font-style:normal;display:flex;flex-direction:column;gap:6px;margin-top:var(--sp-5);font-size:14px;color:#9AA3AE} .footer__contact a{transition:color .15s} .footer__legal{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid #22262C} .footer__legal p{margin:0;font-size:12.5px;color:#8A929C} /* ---------- divisor pro anexo de identidade ---------- */ .anexo-hd{padding:var(--sp-6) 0;background:var(--bg-alt);border-top:1px solid var(--line)} .anexo-hd .wrap{display:flex;flex-direction:column;gap:6px} .anexo-hd .cap{max-width:60ch} /* ---------- PREFERÊNCIAS / COOKIES ---------- */ .pref__head{max-width:62ch;margin-bottom:var(--sp-6)} .pref__head .lead{margin-bottom:0} .pref__grid{display:grid;gap:var(--sp-5);margin-bottom:var(--sp-6)} .pref__card{padding:var(--sp-5);border-radius:var(--r-lg);border:1px solid var(--line);background:var(--bg-card); box-shadow:var(--shadow-1);transition:border-color .25s,box-shadow .25s,transform .25s} .pref__card:hover{border-color:var(--accent-2);box-shadow:var(--shadow-2);transform:translateY(-2px)} .pref__card h3{font-size:19px;margin:var(--sp-4) 0 12px;font-weight:700;letter-spacing:-.01em} .pref__card p{margin:0 0 10px;font-size:14.5px;color:var(--text-2);line-height:1.5} .pref__card p:last-child{margin-bottom:0} .pref__card b{font-weight:700;color:var(--accent)} .pref__badge{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-md); background:var(--accent-wash);color:var(--accent);margin-bottom:var(--sp-3);flex-shrink:0} .pref__badge svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pref__badge--accent{background:color-mix(in oklab,var(--accent) 18%,var(--bg-card));color:var(--accent-2)} .pref__note{margin:0;padding:var(--sp-5);border-left:3px solid var(--accent);border-radius:var(--r-md); background:color-mix(in oklab,var(--accent) 8%,transparent);font-size:14.5px;color:var(--text-2);line-height:1.6} .pref__note a{color:var(--accent);font-weight:600;text-decoration:none} .pref__note a:hover{text-decoration:underline} /* ============================================================ MENU MOBILE (até 767px): painel gaveta vira tela cheia ============================================================ */ @media (max-width:767px){ .navscrim{display:none} .navlinks{width:100vw;max-width:100vw;height:100dvh;border-left:0;box-shadow:none; background:var(--bg-gradient-hero);justify-content:flex-start;gap:0; padding:calc(var(--sp-9) + env(safe-area-inset-top,0px)) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom,0px))} .navlinks::before{content:"Menu";display:block;font-family:var(--ff-mono);font-size:12px;color:var(--text-muted); letter-spacing:.08em;text-transform:uppercase;margin:0 4px var(--sp-4)} .navlinks a{font-size:23px;font-weight:800;letter-spacing:-.02em;padding:18px 6px;border-radius:0; border-bottom:1px solid var(--line);display:flex;align-items:center; opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease),color .15s,background .15s} .navlinks a:hover,.navlinks a:active{background:var(--bg-alt)} .navlinks a.btn{border-bottom:0} .navlinks.is-open a{opacity:1;transform:none} .navlinks.is-open a:nth-child(2){transition-delay:.06s} .navlinks.is-open a:nth-child(3){transition-delay:.12s} .navlinks.is-open a:nth-child(4){transition-delay:.18s} .navlinks.is-open a:nth-child(5){transition-delay:.24s} .navlinks .btn{margin-top:var(--sp-6);padding:16px 22px;font-size:16px;justify-content:center} } @media (max-width:767px) and (prefers-reduced-motion:reduce){ .navlinks a{transition-delay:0s!important} } /* ============================================================ TABLET (768px+) ============================================================ */ @media (min-width:768px){ :root{--sec-pad:80px} .topbar__in{padding:12px var(--sp-5)} .footer__top{flex-direction:row;justify-content:space-between;align-items:center} .hero__in{grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--sp-7)} .hero__cta{flex-direction:row} .hero__card{margin:calc(-1 * var(--sp-6)) var(--sp-5) 0 calc(-1 * var(--sp-4))} /* foto maior, apoiada no pé da hero: a cintura (já mascarada) some dentro do degradê de saída; o card flutua por cima, no canto de baixo à esquerda */ .hero__in{flex:1 0 auto} /* a grade ocupa a altura toda da hero: texto centrado, foto no pé */ /* a foto cresce até a ALTURA da coluna de copy (não mais até a largura da coluna): .hero__media estica na linha da grade (altura = coluna de texto + o padding de baixo, que ela invade) e vira container de tamanho; a foto é absoluta, apoiada no pé, com largura derivada da altura (100cqh × proporção do recorte). Limite: nunca mais larga que a coluna + sangria até a borda da tela + uma invasão controlada no vão da grade, pra não cobrir o formulário. */ .hero{--hero-bleed:calc(max(0px,(100vw - var(--maxw)) / 2) + var(--sp-5));--hero-overlap:calc(var(--sp-8) * 3)} .hero__media{align-self:stretch;margin-bottom:calc(-1 * var(--hero-pad-b));min-height:0;container-type:size} .hero__people{position:absolute;bottom:0;right:calc(-1 * var(--hero-bleed));margin:0; width:calc(100% + var(--hero-bleed) + var(--hero-overlap)); width:min(calc(106cqh * 2400 / 1981),calc(100% + var(--hero-bleed) + var(--hero-overlap)))} .hero__card{position:absolute;left:0;bottom:calc(var(--hero-pad-b) + var(--sp-4));margin:0;max-width:330px;z-index:2} .dor__grid{grid-template-columns:1fr 1fr;align-items:center} .dor__photo{aspect-ratio:4/5} .tr__grid{grid-template-columns:1fr 1fr} .segc{flex-basis:44%} .needs{grid-template-columns:1fr 1fr} .panel{min-height:78svh} .panel__close{grid-template-columns:1fr auto} .sobre__grid{grid-template-columns:1fr 1fr;align-items:start} .pillars{grid-template-columns:1fr 1fr} .prova__grid{grid-template-columns:1fr 1fr;align-items:center} .prova__media{flex-direction:row;flex-wrap:wrap;justify-content:center} .phonecard{flex:1 1 200px} .marca__grid{grid-template-columns:1fr 1fr;align-items:center} .marca__steps{grid-template-columns:1fr 1fr} .marca__actions{flex-direction:row} .ct__grid{grid-template-columns:1fr 1fr;align-items:start} .ct__row{grid-template-columns:1fr 1fr;gap:0 var(--sp-4)} .pref__grid{grid-template-columns:repeat(2,1fr)} .steps__list{padding-left:56px} .vision__labels{font-size:11px;letter-spacing:.06em} .step::before{left:-50px} .steps__rail{left:18px} } /* ---------- menu, só tablet (768–1023px): vira barra horizontal em vez do painel gaveta de celular, que sobrava largura à toa aqui ---------- */ @media (min-width:768px) and (max-width:1023px){ .navtoggle{display:none} .navscrim{display:none} .navlinks{position:static;height:auto;width:auto;flex-direction:row;flex-wrap:wrap; align-items:center;justify-content:flex-end;gap:4px;padding:0; background:none;border:0;box-shadow:none; transform:none;opacity:1;visibility:visible;margin:0;justify-content:center;transition:none} .navlinks a{font-size:13.5px;padding:8px 10px;border-radius:var(--r-pill);white-space:nowrap} .navlinks .btn{margin:0 0 0 8px;padding:10px 18px} /* logo | menu (pode quebrar em 2 linhas) | CTA; as pontas medem só o que precisam */ .topbar__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-3)} .topbar__logo{justify-self:start} .navlinks{justify-self:center;justify-content:center} .topbar__cta{justify-self:end;margin:0;padding:10px 18px;font-size:14px} } /* ============================================================ DESKTOP (1024px+) ============================================================ */ @media (min-width:1024px){ :root{--sec-pad:112px;--r-panel:56px} .marca__grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-7)} .marca__logo{width:320px} .panel{min-height:74svh} .pref__grid{grid-template-columns:repeat(4,1fr)} .pref__head{margin-bottom:var(--sp-8)} .pref__note{padding:var(--sp-6)} .navtoggle{display:none} .navscrim{display:none} .navlinks{position:static;height:auto;width:auto;flex-direction:row;align-items:center;gap:2px;padding:0; background:none;border:0;box-shadow:none; transform:none;opacity:1;visibility:visible;margin:0;justify-content:center;transition:none} .navlinks a{font-size:13.5px;padding:7px 10px;border-radius:var(--r-pill);white-space:nowrap} .navlinks .btn{margin:0 0 0 8px;padding:9px 16px} /* logo à esquerda | menu centralizado | CTA "Fale conosco" à direita */ .topbar__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-4)} .topbar__logo{justify-self:start} .navlinks{justify-self:center} .topbar__cta{justify-self:end;margin:0;padding:9px 16px;font-size:13.5px} .hero{--hero-pad-b:calc(var(--sp-9) + 48px);padding:calc(var(--topbar-h) + var(--sp-9)) 0 var(--hero-pad-b)} /* base maior: espaço pro indicador "Role" */ .hero__in{grid-template-columns:1fr 1fr;gap:var(--sp-8)} .hero__signup-stack{max-width:400px} .hero-copy{font-size:clamp(38px,3.9vw,54px)} .hero__photo{aspect-ratio:5/4} .mec__grid{grid-template-columns:.8fr 1.2fr;gap:var(--sp-9)} .mec__intro{position:sticky;top:96px;align-self:start} .steps__list{padding-left:64px} .step::before{left:-58px} .steps__rail{left:22px} .tr__grid{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)} .seg__track{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;margin:0;padding:0;scroll-snap-type:none} .segc{flex-basis:auto;grid-column:span 2} .segc:nth-child(4),.segc:nth-child(5){grid-column:span 3} .segc:nth-child(4) .photo{aspect-ratio:16/8} .seg__hint{display:none} .sobre__grid{grid-template-columns:1fr 1.1fr;gap:var(--sp-9)} .sobre__photo{position:sticky;top:96px;aspect-ratio:4/5} .prova__grid{grid-template-columns:.95fr 1.05fr;gap:var(--sp-9)} .prova__media{display:block;position:relative;min-height:620px} .prova__stat{position:absolute;top:0;left:6px;z-index:3} .phonecard{position:absolute;flex:none} .phonecard--a{top:76px;left:96px;width:220px;transform:rotate(-6deg);z-index:2} .phonecard--b{top:0;right:20px;width:240px;transform:rotate(4deg);z-index:1} .phonecard--c{bottom:0;left:20px;width:200px;transform:rotate(8deg);z-index:2} .ct__grid{grid-template-columns:.9fr 1.1fr;gap:var(--sp-9)} .ct__form{padding:var(--sp-6)} .ct__form .btn{width:auto} .anexo-hd .wrap{flex-direction:row;align-items:baseline;justify-content:space-between} } /* ============================================================ CAMADA MODERNA (2026-09-16): detalhes vivos por cima do que já existia. Tudo deriva dos tokens (accent/accent-2/ink) — nada de hex solto. ============================================================ */ /* barra de progresso de rolagem: o header não acompanha o scroll, então ela é a única pista de "onde estou na página" */ .progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:64;pointer-events:none; transform-origin:0 50%;transform:scaleX(var(--sp,0)); background:linear-gradient(90deg,var(--accent),var(--accent-2))} /* destaque dos títulos em gradiente da própria paleta */ .h2 .hl,.hero-copy .hl{background:linear-gradient(92deg,var(--accent) 0%,color-mix(in oklab,var(--accent) 55%,var(--accent-2)) 100%); -webkit-background-clip:text;background-clip:text;color:transparent} /* hero: aurora lenta atrás do conteúdo (accent + accent-2 desfocados) */ .hero__aurora{position:absolute;inset:0;pointer-events:none;overflow:clip} .hero__aurora::before,.hero__aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(64px);opacity:.6;will-change:transform} .hero__aurora::before{width:56vw;height:56vw;max-width:680px;max-height:680px;right:-14vw;top:-22vw; background:radial-gradient(circle,color-mix(in oklab,var(--accent) 30%,transparent) 0%,transparent 66%); animation:aurora-a 18s ease-in-out infinite alternate} .hero__aurora::after{width:44vw;height:44vw;max-width:560px;max-height:560px;left:-16vw;bottom:-20vw; background:radial-gradient(circle,color-mix(in oklab,var(--accent-2) 36%,transparent) 0%,transparent 66%); animation:aurora-b 24s ease-in-out infinite alternate} @keyframes aurora-a{to{transform:translate(-10vw,14vw) scale(1.12)}} @keyframes aurora-b{to{transform:translate(12vw,-10vw) scale(1.08)}} .hero__in{position:relative;z-index:1} /* hero: título entra palavra por palavra (spans .w criados no site.js) */ .hero-copy .w{display:inline-block;opacity:0;transform:translateY(.55em) rotate(2deg);transform-origin:0 100%; transition:opacity .7s var(--ease),transform .9s var(--ease-out);transition-delay:calc(var(--i,0) * 55ms + 120ms)} .hero-copy .hl .w{background:inherit;-webkit-background-clip:text;background-clip:text} .hero-copy .w .p{color:var(--text);-webkit-text-fill-color:var(--text)} /* pontuação colada fica na cor do texto, não do destaque */ .is-in .hero-copy .w{opacity:1;transform:none} /* hero: convite pra rolar, só desktop */ .hero__scroll{display:none} /* eyebrows: ponto de status pulsando antes do rótulo */ .s .eyebrow::before,.panel .eyebrow::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%; background:currentColor;margin-right:10px;vertical-align:1px;animation:ping 2.6s ease-out infinite} @keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in oklab,currentColor 45%,transparent)}70%,100%{box-shadow:0 0 0 9px transparent}} /* botão primário: varredura de luz ao passar o mouse */ .btn--primary{position:relative;overflow:hidden;isolation:isolate} .btn--primary::before{content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;width:45%;z-index:-1;pointer-events:none; background:linear-gradient(100deg,transparent 0%,color-mix(in oklab,var(--accent-ink) 32%,transparent) 50%,transparent 100%); transform:skewX(-18deg);transition:left .7s var(--ease-out)} .btn--primary:hover::before,.btn--primary:focus-visible::before{left:130%} /* cards: brilho suave que segue o cursor (--mx/--my vêm do site.js) */ .pains li,.needs li,.pillars li,.step,.ct__form{position:relative;isolation:isolate} .tr::before,.pains li::before,.needs li::before,.pillars li::before,.ct__form::before,.step::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s var(--ease); background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--spot),transparent 62%)} .tr:hover::before,.pains li:hover::before,.needs li:hover::before,.pillars li:hover::before,.ct__form:hover::before,.step:hover::after{opacity:1} .needs li{--spot:color-mix(in oklab,var(--accent-2) 22%,transparent)} .pillars li{transition:border-color .25s,transform .25s} .pillars li:hover{border-color:var(--accent-2);transform:translateY(-2px)} .step.is-on .step__ico{box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 10%,transparent);transition:box-shadow .4s var(--ease)} .ct__form{border-color:color-mix(in oklab,var(--accent) 30%,var(--line))} /* segmentos: título ganha seta sutil no hover */ .segc__body h3{display:flex;align-items:center;gap:8px} .segc__body h3::after{content:"";width:14px;height:2px;border-radius:2px;background:var(--accent);opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s var(--ease-out)} .segc:hover .segc__body h3::after{opacity:1;transform:none} /* footer: fio de luz no topo, na cor da paleta */ footer.site::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none; background:linear-gradient(90deg,transparent 0%,var(--accent-2) 50%,transparent 100%);opacity:.7} @media (min-width:1024px){ .hero__scroll{display:flex;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:1; align-items:center;gap:10px;text-decoration:none;font-family:var(--ff-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)} .hero__scroll i{display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--accent),transparent);position:relative;overflow:hidden} .hero__scroll i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--bg);opacity:.9;animation:scrollcue 1.8s var(--ease) infinite} @keyframes scrollcue{to{top:110%}} .hero__scroll:hover{color:var(--accent)} } @media (prefers-reduced-motion:reduce){ .hero__aurora::before,.hero__aurora::after{animation:none} .hero-copy .w{opacity:1;transform:none;transition:none} .s .eyebrow::before,.panel .eyebrow::before{animation:none} .btn--primary::before{display:none} .hero__scroll i::after{animation:none} .progress{transition:none} .marca__logo.is-drawn{animation:none} } /* ============================================================ FUNCIONALIDADES (#funcionalidades) — título + mockup, carrossel de benefícios Fundo: --bg-features (mesma zona neutra do site). Costura: recebe o wash de #transformar no topo e entrega --bg pra #segmentos logo abaixo. ============================================================ */ :root{ --bg-features:var(--bg); --mock-screen:var(--bg-inset); --fn-arrow-size:42px; } .fn{background:var(--bg-features);overflow:clip} .fn::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(64px,10vw,140px);pointer-events:none; background:linear-gradient(to bottom,var(--wash-soft) 0%,transparent 100%)} .fn + .seg::before{background:linear-gradient(to bottom,var(--bg-features) 0%,transparent 100%)} .fn__top{display:grid;gap:var(--sp-6);align-items:center;margin-bottom:var(--sp-7)} .fn__top .s__head{margin-bottom:0} /* ---- mockup: notebook (browser) + celular sobreposto ---- */ .fn__mock{position:relative;padding-bottom:64px;padding-left:40px;max-width:640px} .fn__laptop{box-shadow:var(--shadow-3)} .fn__dash{display:grid;grid-template-columns:44px 1fr;background:var(--mock-screen);min-height:220px} .fn__side{display:flex;flex-direction:column;gap:10px;padding:14px 10px;background:var(--bg-card);border-right:1px solid var(--line)} .fn__side i{display:block;height:8px;border-radius:var(--r-xs);background:var(--line-strong)} .fn__side i.is-on{background:var(--accent)} .fn__main{padding:14px;display:grid;gap:12px;align-content:start} .fn__greet{display:flex;justify-content:space-between;align-items:baseline;gap:8px} .fn__greet b{font-size:13px;letter-spacing:-.01em} .fn__greet .mono{font-size:10px} .fn__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .fn__kpi{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 9px;display:grid;gap:4px;min-width:0} .fn__kpi small{font-size:8.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fn__kpi b{font-family:var(--ff-mono);font-size:15px;letter-spacing:-.02em;color:var(--accent)} .fn__kpi i{display:block;height:3px;border-radius:2px;background:var(--line);position:relative;overflow:hidden} .fn__kpi i::after{content:"";position:absolute;inset:0;width:var(--w,50%);background:var(--accent);border-radius:inherit; transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease-out) .35s} .fn__kpi--warn b{color:#D98200} .fn__kpi--warn i::after{background:#D98200} .rv.is-in .fn__kpi i::after{transform:scaleX(1)} .fn__row{display:grid;grid-template-columns:1.6fr 1fr;gap:8px} .fn__chart,.fn__list{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px;display:grid;gap:8px;align-content:start} .fn__chart small,.fn__list small{font-size:8.5px;color:var(--text-muted)} .fn__bars{display:flex;align-items:flex-end;gap:5px;height:56px} .fn__bars i{flex:1;height:var(--h,50%);border-radius:3px 3px 0 0;background:color-mix(in oklab,var(--accent) 55%,var(--bg-card)); transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease-out)} .fn__bars i:nth-child(6){background:var(--accent)} .rv.is-in .fn__bars i{transform:scaleY(1)} .rv.is-in .fn__bars i:nth-child(2){transition-delay:.06s}.rv.is-in .fn__bars i:nth-child(3){transition-delay:.12s} .rv.is-in .fn__bars i:nth-child(4){transition-delay:.18s}.rv.is-in .fn__bars i:nth-child(5){transition-delay:.24s} .rv.is-in .fn__bars i:nth-child(6){transition-delay:.30s}.rv.is-in .fn__bars i:nth-child(7){transition-delay:.36s} .fn__list span{display:block;height:8px;border-radius:var(--r-xs);background:var(--line)} .fn__list span:nth-child(3){width:70%}.fn__list span:nth-child(5){width:55%} .fn__phone{position:absolute;left:0;bottom:0;width:118px;max-width:40%;border-width:6px;border-radius:26px;z-index:2; transform:rotate(-5deg);transition:transform .5s var(--ease-out)} .fn__phone .phone__notch{width:48px;height:12px;top:5px} .fn__mock:hover .fn__phone{transform:rotate(-2deg) translateY(-4px)} .fn__scr{padding:22px 8px 8px;gap:6px;background:var(--mock-screen);overflow:hidden} .fn__scr-top{display:flex;justify-content:space-between;align-items:baseline} .fn__scr-top b{font-size:11px} .fn__scr-top .mono{font-size:8px} .fn__scr-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-xs);padding:5px 6px;display:grid;gap:1px} .fn__scr-card b{font-family:var(--ff-mono);font-size:9px;color:var(--accent)} .fn__scr-card span{font-size:8.5px;color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fn__scr-card em{font-style:normal;font-size:7.5px;color:#1F9D6E} .fn__scr-card.is-wait em{color:#D98200} .fn__scr-cta{margin-top:auto;background:var(--accent);color:var(--accent-ink);font-size:8.5px;font-weight:700;text-align:center;padding:6px;border-radius:var(--r-pill)} /* ---- carrossel de benefícios ---- */ .fn__carousel{position:relative} .fn__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none; scroll-behavior:smooth;border-radius:var(--r-md);outline-offset:6px} .fn__track::-webkit-scrollbar{display:none} .fn__group{flex:0 0 100%;min-width:0;scroll-snap-align:start;list-style:none;margin:0;padding:2px;display:grid;gap:var(--sp-5)} .fn__item{display:grid;gap:var(--sp-2);align-content:start;min-width:0} .fn__ico{width:36px;height:36px;color:var(--accent);margin-bottom:var(--sp-1)} .fn__ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);transition:stroke-dashoffset 1.1s var(--ease)} .fn__carousel.is-in .fn__ico svg{stroke-dashoffset:0} .fn__item h3{margin:0;font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.015em} .fn__item p{margin:0;font-size:var(--fs-body);color:var(--text-2)} .fn__item p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-thickness .15s} .fn__item p a:hover{text-decoration-thickness:2px} .fn__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:var(--fn-arrow-size);height:var(--fn-arrow-size); border-radius:50%;border:1px solid var(--line-strong);background:color-mix(in oklab,var(--bg-card) 88%,transparent);color:var(--text); cursor:pointer;padding:0;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px); box-shadow:var(--shadow-1);transition:background .18s,border-color .18s,color .18s,transform .18s} .fn__arrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .fn__arrow:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .fn__arrow:active{transform:translateY(-50%) scale(.94)} .fn__arrow[disabled]{opacity:.35;pointer-events:none} .fn__arrow--prev{left:calc(-1 * var(--fn-arrow-size) / 2)} .fn__arrow--next{right:calc(-1 * var(--fn-arrow-size) / 2)} .fn__dots{display:flex;justify-content:center;gap:10px;margin-top:var(--sp-6)} .fn__dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--accent);background:transparent;padding:0;cursor:pointer; transition:background .2s,transform .2s var(--ease-out)} .fn__dot:hover{transform:scale(1.2)} .fn__dot.is-on{background:var(--accent)} @media (max-width:767px){ .fn__scr-cta{display:none} /* tela do celular é curta no mobile: sem o botão, os 3 cards cabem inteiros */ } @media (min-width:768px){ .fn__group{grid-template-columns:repeat(3,1fr);gap:var(--sp-5)} .fn__mock{padding-bottom:56px;padding-left:84px;justify-self:center;width:100%} .fn__phone{width:150px;left:0} .fn__arrow{display:inline-flex} } @media (min-width:1024px){ .fn__top{grid-template-columns:1fr 1.15fr;gap:var(--sp-8);margin-bottom:var(--sp-8)} .fn__mock{padding-bottom:44px;padding-left:112px;max-width:none} .fn__phone{width:168px;left:0;bottom:-6px} .fn__group{gap:var(--sp-7)} .fn__arrow--prev{left:calc(-1 * var(--fn-arrow-size) - 8px)} .fn__arrow--next{right:calc(-1 * var(--fn-arrow-size) - 8px)} } @media (prefers-reduced-motion:reduce){ .fn__track{scroll-behavior:auto} .fn__kpi i::after{transform:none;transition:none} .fn__bars i{transform:none;transition:none} .fn__ico svg{stroke-dasharray:none;stroke-dashoffset:0;transition:none} .fn__phone,.fn__mock:hover .fn__phone{transform:rotate(-5deg);transition:none} .fn__dot,.fn__arrow{transition:none} } /* ============================================================ O PRODUTO (#produto) — notebook centralizado num painel escuro em caixa, brilho suave atrás, grade 2x2 de diferenciais com fio fino em cima. Zona: a seção continua em --bg (página clara); o escuro é o painel em caixa, que deriva do accent + fundo do footer, sem hex novo. ============================================================ */ :root{ --bg-produto:var(--bg); --bg-produto-panel:color-mix(in oklab,var(--accent) 8%,var(--bg-footer)); --bg-gradient-produto:radial-gradient(60% 50% at 50% 34%,color-mix(in oklab,var(--accent) 36%,transparent) 0%,transparent 72%),var(--bg-produto-panel); --produto-ink:var(--bg-footer-ink); --produto-ink-2:color-mix(in oklab,var(--bg-footer-ink) 72%,transparent); --produto-line:color-mix(in oklab,var(--bg-footer-ink) 18%,transparent); } .prod{background:var(--bg-produto)} .prod__panel{position:relative;isolation:isolate;overflow:clip;border-radius:var(--r-panel); background:var(--bg-gradient-produto);color:var(--produto-ink); padding:var(--sp-7) var(--sp-5) var(--sp-6);display:grid;gap:var(--sp-6);justify-items:center; box-shadow:var(--shadow-3),inset 0 1px 0 var(--line-accent)} .prod__glow{position:absolute;left:50%;top:38%;width:min(90vw,860px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1; border-radius:50%;pointer-events:none;will-change:transform; /* sem filter:blur — o degradê já é macio e o blur repintava a cada frame */ background:radial-gradient(circle,color-mix(in oklab,var(--accent) 38%,transparent) 0%,color-mix(in oklab,var(--accent) 14%,transparent) 38%,transparent 70%); animation:prod-breathe 9s ease-in-out infinite alternate} @keyframes prod-breathe{to{transform:translate(-50%,-52%) scale(1.14)}} .prod__cap{margin:0;color:var(--produto-ink-2);letter-spacing:.06em;text-transform:uppercase;font-size:11px} .prod__laptop{width:100%;max-width:760px;display:grid;gap:0;justify-items:center; transform-origin:50% 100%;transition:transform .8s var(--ease-out)} .prod__panel:hover .prod__laptop{transform:none} .prod__screen{width:100%;--bg-card:var(--bg-inset);border-color:color-mix(in oklab,var(--bg-footer-ink) 26%,transparent); border-radius:var(--r-md) var(--r-md) 0 0;box-shadow:0 30px 70px -30px color-mix(in oklab,var(--accent) 60%,transparent)} .prod__screen .fn__dash{min-height:200px;color:var(--text)} /* a tela volta pra tinta do tema, não pra tinta clara do painel */ .prod__base{width:calc(100% + 40px);max-width:800px;height:14px;border-radius:0 0 12px 12px; background:linear-gradient(180deg,color-mix(in oklab,var(--bg-footer-ink) 34%,var(--bg-footer)) 0%,color-mix(in oklab,var(--bg-footer-ink) 12%,var(--bg-footer)) 100%); border-top:1px solid color-mix(in oklab,var(--bg-footer-ink) 44%,transparent);display:grid;place-items:start center} .prod__base i{display:block;width:96px;height:4px;border-radius:0 0 4px 4px;background:color-mix(in oklab,var(--bg-footer-ink) 8%,var(--bg-footer))} .prod__grid{list-style:none;margin:var(--sp-2) 0 0;padding:0;width:100%;max-width:760px;display:grid;gap:var(--sp-5)} .prod__grid li{padding-top:var(--sp-4);border-top:1px solid var(--produto-line);transition:border-color .3s} .prod__grid li:hover{border-top-color:var(--accent-2)} .prod__grid p{margin:0;font-size:15.5px;font-weight:600;line-height:1.45;color:var(--produto-ink);max-width:30ch} /* Preenchimento no scroll: o site.js liga .prod--fill (nunca com reduced motion) e anima --prod-p 0→1 enquanto o painel sobe; ele abre até as bordas da tela, perde o raio, cresce até 100svh e fica fixo por --prod-hold antes de seguir. */ .prod--fill{--prod-p:0;--prod-hold:70svh} .prod--fill .wrap::after{content:"";display:block;height:var(--prod-hold)} /* espaçador, não padding: sticky não entra no padding do pai */ .prod--fill .prod__panel{position:sticky;top:var(--prod-top,0px);align-content:center;contain:layout paint; margin-left:calc(var(--prod-gl,0px) * -1 * var(--prod-p));margin-right:calc(var(--prod-gr,0px) * -1 * var(--prod-p)); border-radius:calc(var(--r-panel) * (1 - var(--prod-p)));min-height:calc(100svh * var(--prod-p))} @media (max-width:767px){ .prod--fill{--prod-hold:40svh} } /* Versão estática da seção produto: sem animação de dezoom */ .prod--static .wrap::after{display:none} .prod--static .prod__panel{position:relative;margin:0;border-radius:var(--r-panel);min-height:auto} .prod--static .prod__laptop{transition:none} .prod--static .prod__glow{animation:none} /* ============================================================ CASOS DE USO (#casos) — cabeçalho centrado, pills que filtram e um painel em duas colunas: texto à esquerda, foto com cartões flutuantes à direita. Zona: --bg-usecases (mesma zona neutra); cards em --bg-alt. ============================================================ */ :root{ --bg-usecases:var(--bg); --bg-usecase-card:var(--bg-alt); } .uc{background:var(--bg-usecases)} .uc + .seg::before{background:linear-gradient(to bottom,var(--bg-usecases) 0%,transparent 100%)} .s__head--center{margin-left:auto;margin-right:auto;text-align:center} .s__head--center .lead{margin-left:auto;margin-right:auto} .uc__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:var(--sp-6)} .uc__tabs .chip{font-size:13.5px;padding:8px 16px;cursor:pointer;font-family:inherit;transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease-out)} .uc__tabs .chip:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .uc__tabs .chip.chip--on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} .uc__tabs .chip.chip--on:hover{color:var(--accent-ink)} .uc__panels{position:relative} .uc__panel{display:grid;gap:var(--sp-4)} .uc__panel[hidden]{display:none} .uc__panel.is-on{animation:uc-in .55s var(--ease-out) both} @keyframes uc-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .uc__card{position:relative;border-radius:var(--r-lg);background:var(--bg-usecase-card);border:1px solid var(--line);overflow:clip;isolation:isolate} .uc__card--txt{padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);min-height:280px} .uc__for{font-family:var(--ff-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)} .uc__title{font-size:clamp(28px,4.4vw,44px);line-height:1.06;letter-spacing:-.035em;font-weight:800;margin:0;max-width:11ch;color:var(--text)} .uc__card--txt p{margin-top:auto;font-size:16px;line-height:1.6;color:var(--text-2);max-width:44ch} .uc__card--media{min-height:380px;display:flex;align-items:flex-end;padding:var(--sp-5)} .uc__photo{position:absolute;inset:0;z-index:-1;border-radius:0;background:var(--bg-usecase-card)} .uc__photo::after{background:linear-gradient(180deg,color-mix(in oklab,var(--bg-usecase-card) 55%,transparent) 0%,transparent 34%,color-mix(in oklab,var(--accent) 12%,transparent) 100%)} .uc__photo img{object-position:60% 30%} .uc__float{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:var(--r-md); background:color-mix(in oklab,var(--bg-card) 92%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:var(--shadow-2); transform:translateY(10px);opacity:0;transition:transform .7s var(--ease-out),opacity .6s var(--ease)} .uc__panel.is-on .uc__float{transform:none;opacity:1} .uc__panel.is-on .uc__float--a{transition-delay:.25s} .uc__panel.is-on .uc__float--b{transition-delay:.42s} .uc__float--a{top:var(--sp-4);left:var(--sp-4)} .uc__float--b{top:calc(var(--sp-4) + 72px);left:var(--sp-6)} .uc__float small{display:block;font-size:11.5px;color:var(--text-muted);white-space:nowrap} .uc__float b{display:block;font-family:var(--ff-mono);font-size:19px;letter-spacing:-.02em;color:var(--text);line-height:1.1} .uc__ico{width:34px;height:34px;border-radius:10px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0} .uc__ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .uc__quote{margin:0;align-self:flex-end;font-style:italic;font-weight:500;font-size:15px;color:var(--text);max-width:22ch; padding:10px 14px;border-radius:var(--r-md);background:color-mix(in oklab,var(--bg-card) 86%,transparent);backdrop-filter:blur(8px);border:1px solid var(--line)} @media (max-width:767px){ .prod__screen .fn__kpis{grid-template-columns:1fr 1fr} /* 4 métricas em 2 linhas: cabem sem cortar o rótulo */ } @media (min-width:768px){ .prod__panel{padding:var(--sp-8) var(--sp-7) var(--sp-7)} .prod__grid{grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--sp-8)} .uc__panel{grid-template-columns:1fr 1fr;gap:var(--sp-5)} .uc__card--txt{padding:var(--sp-6);min-height:440px} .uc__card--media{min-height:440px} .uc__float--b{top:calc(var(--sp-4) + 84px);left:var(--sp-7)} } @media (min-width:1024px){ .prod__panel{padding:var(--sp-9) var(--sp-8) var(--sp-8);gap:var(--sp-7)} .prod__grid{gap:var(--sp-7) var(--sp-9);margin-top:var(--sp-4)} .uc__panel{gap:var(--sp-6)} .uc__card--txt{padding:var(--sp-7);min-height:520px} .uc__card--media{min-height:520px;padding:var(--sp-6)} .uc__float--a{top:var(--sp-5);left:var(--sp-5)} .uc__float--b{top:calc(var(--sp-5) + 92px);left:var(--sp-8)} .uc__float b{font-size:22px} } @media (prefers-reduced-motion:reduce){ .prod__glow{animation:none} .prod__laptop,.prod__panel:hover .prod__laptop{transform:none;transition:none} .uc__panel.is-on{animation:none} .uc__float,.uc__panel.is-on .uc__float{transform:none;opacity:1;transition:none} } /* ============================================================ RECURSOS (#recursos) — referência section-cmsjnolm3000k4pk72ldlgc9b: linha de cabeçalho (título à esquerda, CTA à direita), foto com card accordion flutuante à esquerda, grade de 6 cards de ícone à direita. Fundo: --bg-recursos = a mesma zona --bg-alt em que a hero dissolve, então não há linha de troca entre a hero e esta seção. ============================================================ */ :root{ --bg-recursos:var(--bg-alt); --bg-recursos-card:var(--bg-card); } .rec{background:var(--bg-recursos)} .rec__head{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-6)} .rec__head .h2{max-width:20ch;margin-bottom:0} .rec__cta{justify-self:start} .rec__grid{display:grid;gap:var(--sp-6)} .rec__media{position:relative;padding-bottom:var(--sp-7)} .rec__photo{aspect-ratio:4/3;border-radius:var(--r-lg);box-shadow:var(--shadow-2)} .rec__photo img{object-position:50% 30%} .rec__float{position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:0;padding:var(--sp-4) var(--sp-5); box-shadow:var(--shadow-3);background:color-mix(in oklab,var(--bg-recursos-card) 96%,transparent);backdrop-filter:blur(8px)} .rec__float__cap{display:block;font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px} .rec__item{border-top:1px solid var(--line)} .rec__item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 0;font-size:14.5px;font-weight:700;color:var(--text);transition:color .2s} .rec__item summary::-webkit-details-marker{display:none} .rec__item summary svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; color:var(--text-muted);transition:transform .3s var(--ease-out),color .2s} .rec__item summary:hover{color:var(--accent)} .rec__item[open] summary svg{transform:rotate(180deg);color:var(--accent)} .rec__item p{margin:0 0 12px;font-size:13.5px;line-height:1.5;color:var(--text-2);animation:rec-open .35s var(--ease-out) both} @keyframes rec-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .rec__cards{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4);grid-template-columns:repeat(2,1fr)} .rec__card{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);text-align:center; min-height:150px;padding:var(--sp-5) var(--sp-4);border-radius:var(--r-lg);background:var(--bg-recursos-card);border:1px solid var(--line);box-shadow:var(--shadow-1); transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s} .rec__card b{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.3;max-width:14ch} .rec__ico{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--accent-wash);color:var(--accent); transition:background .3s,color .3s,transform .4s var(--ease-out)} .rec__ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .rec__card:hover{transform:translateY(-4px);border-color:var(--accent-2);box-shadow:var(--shadow-2)} .rec__card:hover .rec__ico{background:var(--accent);color:var(--accent-ink);transform:scale(1.08) rotate(-6deg)} /* ============================================================ BENEFÍCIOS (#beneficios) — referência section-cmsjnn31t000g4pk79p85lb9t: painel em caixa na cor da marca, recorte da equipe sangrando pra fora do painel à esquerda, título-manifesto + grade 2x3 à direita. Tudo deriva de --accent (nunca hex cravado): --bg-gradient-beneficios. ============================================================ */ :root{ --bg-beneficios:var(--bg); --beneficios-ink:var(--accent-ink); --beneficios-ink-2:color-mix(in oklab,var(--accent-ink) 78%,transparent); --bg-gradient-beneficios:radial-gradient(70% 90% at 100% 0%,color-mix(in oklab,var(--accent-2) 38%,transparent) 0%,transparent 60%), linear-gradient(135deg,var(--accent) 0%,color-mix(in oklab,var(--accent) 72%,#000) 100%); --ben-bleed:56px; /* quanto o recorte da equipe sobe acima do painel */ --bg-mark-beneficios:var(--bg-mark); } .ben{background:var(--bg-beneficios);padding-top:calc(var(--sec-pad) + var(--ben-bleed))} .ben::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(64px,10vw,140px);pointer-events:none; background:linear-gradient(to bottom,var(--bg-recursos) 0%,transparent 100%)} .ben + .mec::before{background:linear-gradient(to bottom,var(--bg-beneficios) 0%,transparent 100%)} .ben__panel{position:relative;border-radius:var(--r-panel);background:var(--bg-gradient-beneficios);color:var(--beneficios-ink); display:grid;gap:var(--sp-5);padding:0 var(--sp-5) var(--sp-6);box-shadow:var(--shadow-3)} .ben__panel::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.35;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} .ben__media{position:relative;z-index:1;margin-top:calc(-1 * var(--ben-bleed));display:flex;justify-content:center} /* marca-d'água da logo atrás de tudo no painel (foto e texto), mesma ideia da .hero::before: forma mascarada na cor do texto do painel, bem apagada, nunca a cor crua do PNG (que fica quase branca e sumiria). Fica no painel inteiro, não só atrás da foto, senão o recorte da pessoa cobre a coluna toda e a marca some por trás dela sem aparecer em lugar nenhum */ .ben__mark{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;background:var(--beneficios-ink); -webkit-mask:var(--bg-mark-beneficios) 96% 96%/46% no-repeat;mask:var(--bg-mark-beneficios) 96% 96%/46% no-repeat} /* recorte da pessoa: caixa mais estreita que o PNG de origem pra aproximar da silhueta dela, pé dissolvido */ .ben__people{position:relative;z-index:1;width:min(100%,440px);aspect-ratio:3/4; -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)} /* logo grande atrás da foto, só neste recorte (não é o .ben__mark do painel, que fica no canto atrás do título): mesma marca d'água "S" facetado, escalada bem maior, atrás do PNG recortado da pessoa — aparece nas áreas transparentes do recorte, como se estivesse atrás dela */ .ben__people::before{content:"";position:absolute;inset:-14%;z-index:0;pointer-events:none;opacity:.55; background:var(--beneficios-ink); -webkit-mask:var(--bg-mark-beneficios) 50% 42%/104% no-repeat;mask:var(--bg-mark-beneficios) 50% 42%/104% no-repeat} .ben__people img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;object-position:50.8% 100%;filter:drop-shadow(0 24px 32px color-mix(in oklab,var(--accent) 40%,#000))} .ben__body{position:relative;z-index:1} .ben__title{font-size:clamp(24px,3vw,34px);line-height:1.14;letter-spacing:-.03em;font-weight:800;margin:0 0 var(--sp-5);color:var(--beneficios-ink);max-width:22ch} .ben__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-5)} .ben__list li{display:flex;gap:14px;align-items:flex-start} .ben__list b{display:block;font-size:15.5px;font-weight:700;margin-bottom:3px;color:var(--beneficios-ink)} .ben__list p{margin:0;font-size:14px;line-height:1.5;color:var(--beneficios-ink-2)} .ben__ico{flex-shrink:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--beneficios-ink);color:var(--accent); box-shadow:0 8px 18px -8px color-mix(in oklab,#000 40%,transparent);transition:transform .4s var(--ease-out)} .ben__ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .ben__list li:hover .ben__ico{transform:translateY(-3px) scale(1.06)} /* contraste do foco sobre a cor da marca */ .ben :focus-visible{outline-color:var(--beneficios-ink)} /* mobile: o card accordion assenta abaixo da foto (só invade o pé dela), pra não cobrir a imagem */ @media (max-width:767px){ .rec__media{padding-bottom:0} .rec__float{position:relative;left:auto;right:auto;bottom:auto;margin:calc(-1 * var(--sp-6)) var(--sp-3) 0} } @media (min-width:768px){ .rec__head{grid-template-columns:1fr auto;align-items:end} .rec__cta{justify-self:end} .rec__grid{grid-template-columns:1fr 1.15fr;align-items:start} .rec__cards{grid-template-columns:repeat(2,1fr);gap:var(--sp-4)} .rec__float{left:calc(-1 * var(--sp-4));right:auto;width:min(78%,300px)} /* tablet: painel ainda empilhado (recorte em cima, lista em 2 colunas); o recorte cresce */ .ben{--ben-bleed:72px} .ben__panel{padding:0 var(--sp-7) var(--sp-7)} .ben__people{width:min(100%,540px)} .ben__list{grid-template-columns:repeat(2,1fr);gap:var(--sp-5) var(--sp-6)} } @media (min-width:1024px){ .rec__grid{grid-template-columns:.9fr 1.1fr;gap:var(--sp-7)} .rec__cards{grid-template-columns:repeat(3,1fr)} .rec__card{min-height:170px} /* desktop: recorte à esquerda apoiado no pé do painel, ocupando a coluna inteira (largura = coluna + o padding esquerdo do painel + uma invasão curta no vão) e subindo acima do topo do painel quando a altura permitir */ .ben{--ben-bleed:0px;padding-top:calc(var(--sec-pad) * .5)} /* no desktop o recorte fica dentro do painel: sem respiro extra */ .ben__panel{grid-template-columns:1.05fr 1fr;align-items:center;gap:var(--sp-6); padding:var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-7)} .ben__media{align-self:stretch;margin:0;display:block;min-height:0} /* no desktop o painel vira 2 colunas: a marca fica no canto superior direito, atrás do título e antes da grade de benefícios começar, onde a foto não alcança */ .ben__mark{-webkit-mask-position:98% 92%;mask-position:98% 92%;-webkit-mask-size:34%;mask-size:34%} .ben__people{position:absolute;left:calc(-1 * var(--sp-7));bottom:calc(-1 * var(--sp-8)); width:calc(80% + var(--sp-7) + var(--sp-6));max-width:none;aspect-ratio:3/4;height:auto} .ben__people img{object-fit:cover;object-position:50.8% 100%} .ben__title{margin-bottom:var(--sp-6)} } @media (prefers-reduced-motion:reduce){ .rec__card,.rec__ico,.ben__ico,.rec__item summary svg{transition:none} .rec__item p{animation:none} } /* ============================================================ FUNCIONALIDADES (#funcionalidades) — navegação vertical de módulos à esquerda (aba ativa em bloco na cor de destaque + trilha que acompanha), painel à direita com título na cor de marca, arte composta (mockup de UI + recorte da equipe), parágrafo de posicionamento, lista de funções em três colunas, faixa de três métricas com ícone circular e link em texto. Fundo: --bg-func = --bg (zona neutra). Costura: recebe o backdrop de cima. ============================================================ */ :root{ --bg-func:var(--bg); --func-trail:color-mix(in oklab,var(--text) 12%,transparent); } .func{background:var(--bg-func)} .fc{display:grid;gap:var(--sp-5)} /* navegação: no celular vira uma linha rolável de pills; a trilha some */ .fc__nav{position:relative;display:flex;gap:8px;overflow-x:auto;overflow-y:clip;padding:4px 0 8px; scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(var(--sp-5) * -1);padding-left:var(--sp-5);padding-right:var(--sp-5)} .fc__nav::-webkit-scrollbar{display:none} .fc__tab{flex:0 0 auto;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--text-2); background:var(--bg-card);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:9px 16px; transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease-out),box-shadow .2s} .fc__tab:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .fc__tab.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 8px 20px -10px var(--accent)} .fc__tab.is-on:hover{color:var(--accent-ink)} .fc__trail{display:none} /* painel */ .fc__panels{position:relative} .fc__panel[hidden]{display:none} .fc__panel.is-on{animation:fc-in .7s var(--ease) both} @keyframes fc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .fc__title{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.03em;font-weight:800;color:var(--accent);margin:0 0 var(--sp-5)} .fc__body{display:grid;gap:var(--sp-5)} /* arte composta: mockup de UI e recorte da equipe apoiado no pé */ .fc__art{position:relative;isolation:isolate;overflow:clip;border-radius:var(--r-lg);aspect-ratio:5/4; background:linear-gradient(160deg, color-mix(in oklab,var(--accent) 82%,white) 0%, var(--accent) 48%, color-mix(in oklab,var(--accent) 68%,black) 100%); box-shadow:var(--shadow-2)} .fc__mark{position:absolute;inset:0;z-index:0;opacity:.45;pointer-events:none;background:var(--accent-ink); -webkit-mask:var(--bg-mark) 0% 100%/58% no-repeat;mask:var(--bg-mark) 0% 100%/58% no-repeat} .fc__mock{position:absolute;left:5%;bottom:6%;width:min(58%,260px);display:grid;gap:9px;padding:12px;border-radius:var(--r-md); background:var(--bg-card);border:1px solid var(--line);box-shadow:var(--shadow-2);z-index:3; transform:translateY(8px);opacity:0;transition:transform .6s var(--ease-out) .15s,opacity .5s var(--ease) .15s} .fc__panel.is-on .fc__mock{transform:none;opacity:1} .fc__mock-bar{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--text);padding-bottom:8px;border-bottom:1px solid var(--line)} .fc__mock-bar i{width:8px;height:8px;border-radius:50%;background:var(--accent)} .fc__mock-row{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px;font-size:10.5px;color:var(--text-muted)} .fc__mock-row b{display:block;height:7px;border-radius:var(--r-pill);background:var(--line);position:relative;overflow:hidden} .fc__mock-row b::after{content:"";position:absolute;inset:0;width:var(--w,50%);border-radius:inherit; background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);transform-origin:left;transform:scaleX(0); transition:transform .9s var(--ease-out) .35s} .fc__panel.is-on .fc__mock-row b::after{transform:none} .fc__mock-item{font-family:var(--ff-mono);font-size:10px;letter-spacing:.02em;padding:4px 0;color:var(--text-2)} .fc__mock-chip{font-family:var(--ff-mono);font-size:10px;letter-spacing:.02em;padding:4px 9px;border-radius:var(--r-pill); background:var(--accent-wash);color:var(--accent);margin-top:4px} .fc__mock-msg{font-size:10.5px;color:var(--text-2);padding:4px 0;padding-left:12px;border-left:2px solid var(--accent)} .fc__mock-msg:nth-child(odd){text-align:right;padding-left:0;padding-right:12px;border-left:none;border-right:2px solid var(--accent)} /* pessoa recortada (PNG com alpha), grande e apoiada no pé do cartão */ .fc__cut{position:absolute;z-index:2;right:0;bottom:0;width:88%;height:94%;max-width:none; object-fit:contain;object-position:right bottom; filter:drop-shadow(0 18px 30px color-mix(in oklab,black 32%,transparent)); transform:translateY(12px);opacity:0;transition:transform .8s var(--ease-out) .05s,opacity .6s var(--ease) .05s} .fc__panel.is-on .fc__cut{transform:none;opacity:1} /* texto */ .fc__lead{font-size:18px;line-height:1.45;font-weight:700;color:var(--text);margin:0 0 var(--sp-3);letter-spacing:-.01em} .fc__txt > p:not(.fc__lead){font-size:15.5px;line-height:1.65;color:var(--text-2);margin:0 0 var(--sp-4)} .fc__mods{list-style:none;margin:0 0 var(--sp-5);padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px} .fc__mods li{position:relative;padding-left:16px;font-size:14.5px;color:var(--text-2);line-height:1.4} .fc__mods li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)} .fc__kpis{list-style:none;margin:0 0 var(--sp-5);padding:var(--sp-5) 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:var(--sp-4)} .fc__kpis li{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center} .fc__kico{grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center} .fc__kico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .fc__kpis b{font-family:var(--ff-mono);font-size:22px;letter-spacing:-.02em;line-height:1.1;color:var(--text)} .fc__kpis small{font-size:13px;color:var(--text-muted);line-height:1.35} .fc__link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--accent);text-decoration:none; padding-bottom:4px;border-bottom:2px solid var(--accent);transition:gap .2s var(--ease-out),color .15s} .fc__link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)} .fc__link:hover{gap:14px} .fc__link:hover svg{transform:translateX(2px)} @media (min-width:768px){ /* tablet: navegação vira coluna à esquerda com trilha, painel à direita */ .fc{grid-template-columns:150px 1fr;gap:var(--sp-6)} .fc__nav{flex-direction:column;overflow:visible;gap:12px;margin:0;padding:0 18px 0 0;align-self:start;position:sticky;top:calc(var(--topbar-h) + 16px)} .fc__tab{flex:1 1 auto;width:100%;aspect-ratio:1;display:grid;place-items:center;text-align:center;padding:8px; border-radius:var(--r-md);font-size:13px;line-height:1.2;color:var(--text-muted);box-shadow:none} .fc__tab:hover{transform:none} .fc__tab.is-on{color:var(--accent-ink)} .fc__trail{display:block;position:absolute;top:0;bottom:0;right:0;width:3px;border-radius:var(--r-pill);background:var(--func-trail)} .fc__trail i{position:absolute;left:0;right:0;border-radius:inherit;background:var(--accent); height:calc((100% - (var(--fc-n) - 1) * 12px) / var(--fc-n)); top:calc(var(--fc-i) * ((100% - (var(--fc-n) - 1) * 12px) / var(--fc-n) + 12px)); transition:top .6s var(--ease)} .fc__title{margin-bottom:var(--sp-5)} .fc__mods{grid-template-columns:repeat(3,1fr)} .fc__kpis{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)} .fc__kpis li{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:6px;align-items:start} .fc__kico{grid-row:auto;margin-bottom:6px} .fc__art{aspect-ratio:4/5;max-width:none} } @media (min-width:1024px){ .fc{grid-template-columns:168px 1fr;gap:var(--sp-8)} .fc__nav{gap:14px;padding-right:22px} .fc__tab{font-size:13.5px} .fc__trail i{height:calc((100% - (var(--fc-n) - 1) * 14px) / var(--fc-n)); top:calc(var(--fc-i) * ((100% - (var(--fc-n) - 1) * 14px) / var(--fc-n) + 14px))} .fc__title{padding-left:0} .fc__panels,.fc__panel.is-on{display:flex;flex-direction:column} .fc__panel.is-on{flex:1} .fc__body{flex:1;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:var(--sp-7);align-items:stretch} .fc__art{aspect-ratio:auto;min-height:520px;max-width:none} .fc__txt{display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-2) 0} .fc__txt > *{margin-block:0} .fc__lead{font-size:24px;line-height:1.35} .fc__txt > p:not(.fc__lead){font-size:17px} .fc__mods{grid-template-columns:1fr 1fr;gap:12px 20px} .fc__mods li{font-size:15.5px} .fc__kpis b{font-size:26px} .fc__kpis small{font-size:14px} .fc__link{align-self:flex-start;margin-bottom:var(--sp-2)} } @media (prefers-reduced-motion:reduce){ .fc__panel.is-on{animation:none} .fc__mock,.fc__panel.is-on .fc__mock,.fc__cut,.fc__panel.is-on .fc__cut{transform:none;opacity:1;transition:none} .fc__mock-row b::after,.fc__panel.is-on .fc__mock-row b::after{transform:none;transition:none} .fc__trail i{transition:none} } /* ============================================================ SEGMENTOS (#segmentos) — referência section-cmsjo6ua6000s4pk7ygfksaqk: navegação vertical de segmentos à esquerda (aba ativa em bloco na cor de destaque + trilha que acompanha), painel à direita com título na cor de marca, arte composta (cartão em gradiente da paleta + mockup de UI + recorte da equipe), parágrafo de posicionamento, módulos em três colunas, faixa de três métricas com ícone circular e link em texto. Fundo: --bg-segmentos = --bg-alt (zona estrutural). Costura: recebe o --bg-usecases de #casos (regra .uc + .seg::before já existente). ============================================================ */ :root{ --bg-segmentos:var(--bg-alt); --bg-segmentos-art:var(--accent); --bg-gradient-segmentos:radial-gradient(90% 70% at 18% 8%, color-mix(in oklab,var(--accent-2) 55%,transparent) 0%, transparent 60%), linear-gradient(160deg, color-mix(in oklab,var(--accent) 82%,white) 0%, var(--accent) 48%, color-mix(in oklab,var(--accent) 68%,black) 100%); --segmentos-mock-bg:var(--bg-card); --segmentos-trail:color-mix(in oklab,var(--text) 12%,transparent); } .seg{background:var(--bg-segmentos)} .sg{display:grid;gap:var(--sp-5)} /* navegação: no celular vira uma linha rolável de pills; a trilha some */ .sg__nav{position:relative;display:flex;gap:8px;overflow-x:auto;overflow-y:clip;padding:4px 0 8px; scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 calc(var(--sp-5) * -1);padding-left:var(--sp-5);padding-right:var(--sp-5)} .sg__nav::-webkit-scrollbar{display:none} .sg__tab{flex:0 0 auto;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;color:var(--text-2); background:var(--bg-card);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:9px 16px; transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease-out),box-shadow .2s} .sg__tab:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)} .sg__tab.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 8px 20px -10px var(--accent)} .sg__tab.is-on:hover{color:var(--accent-ink)} .sg__trail{display:none} /* painel */ .sg__panels{position:relative} .sg__panel[hidden]{display:none} .sg__panel.is-on{animation:sg-in .7s var(--ease) both} @keyframes sg-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .sg__title{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.03em;font-weight:800;color:var(--accent);margin:0 0 var(--sp-5)} .sg__body{display:grid;gap:var(--sp-5)} /* arte composta: cartão em gradiente da paleta, mockup de UI e recorte da equipe apoiado no pé */ .sg__art{position:relative;isolation:isolate;overflow:clip;border-radius:var(--r-lg);aspect-ratio:5/4; background:var(--bg-gradient-segmentos);box-shadow:var(--shadow-2)} /* marca d'água da logo atrás da foto do segmento, mesma técnica da hero (.hero::before) e de .ben__mark: forma mascarada, bem apagada, nunca a cor crua do PNG. Elemento real (não ::before) porque a máscara em pseudo-elemento dentro de isolation:isolate não pintava aqui */ .sg__mark{position:absolute;inset:0;z-index:0;opacity:.45;pointer-events:none;background:var(--accent-ink); -webkit-mask:var(--bg-mark) 0% 100%/58% no-repeat;mask:var(--bg-mark) 0% 100%/58% no-repeat} .sg__mock{position:absolute;left:5%;bottom:6%;width:min(58%,260px);display:grid;gap:9px;padding:12px;border-radius:var(--r-md); background:var(--segmentos-mock-bg);border:1px solid var(--line);box-shadow:var(--shadow-2);z-index:3; transform:translateY(8px);opacity:0;transition:transform .6s var(--ease-out) .15s,opacity .5s var(--ease) .15s} .sg__panel.is-on .sg__mock{transform:none;opacity:1} .sg__mock-bar{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--text);padding-bottom:8px;border-bottom:1px solid var(--line)} .sg__mock-bar i{width:8px;height:8px;border-radius:50%;background:var(--accent)} .sg__mock-row{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:8px;font-size:10.5px;color:var(--text-muted)} .sg__mock-row b{display:block;height:7px;border-radius:var(--r-pill);background:var(--line);position:relative;overflow:hidden} .sg__mock-row b::after{content:"";position:absolute;inset:0;width:var(--w,50%);border-radius:inherit; background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 100%);transform-origin:left;transform:scaleX(0); transition:transform .9s var(--ease-out) .35s} .sg__panel.is-on .sg__mock-row b::after{transform:none} .sg__mock-chip{justify-self:start;font-family:var(--ff-mono);font-size:10px;letter-spacing:.02em;padding:4px 9px;border-radius:var(--r-pill); background:var(--accent-wash);color:var(--accent)} /* pessoa do segmento recortada (PNG com alpha), grande e apoiada no pé do cartão; o mockup flutua por cima dela no canto inferior esquerdo */ .sg__cut{position:absolute;z-index:2;right:0;bottom:0;width:88%;height:94%;max-width:none; object-fit:contain;object-position:right bottom; filter:drop-shadow(0 18px 30px color-mix(in oklab,black 32%,transparent)); transform:translateY(12px);opacity:0;transition:transform .8s var(--ease-out) .05s,opacity .6s var(--ease) .05s} .sg__panel.is-on .sg__cut{transform:none;opacity:1} /* foto com duas pessoas é mais larga que alta: a altura manda (mesmos 94% das outras) e a largura segue a proporção, centralizada e vazando pelas laterais quando o cartão é estreito */ .sg__cut--wide{width:auto;right:auto;left:50%;translate:-50% 0;object-position:center bottom} /* texto */ .sg__lead{font-size:18px;line-height:1.45;font-weight:700;color:var(--text);margin:0 0 var(--sp-3);letter-spacing:-.01em} .sg__txt > p:not(.sg__lead){font-size:15.5px;line-height:1.65;color:var(--text-2);margin:0 0 var(--sp-4)} .sg__mods{list-style:none;margin:0 0 var(--sp-5);padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 16px} .sg__mods li{position:relative;padding-left:16px;font-size:14.5px;color:var(--text-2);line-height:1.4} .sg__mods li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--accent)} .sg__kpis{list-style:none;margin:0 0 var(--sp-5);padding:var(--sp-5) 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:var(--sp-4)} .sg__kpis li{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center} .sg__kico{grid-row:1/3;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center} .sg__kico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .sg__kpis b{font-family:var(--ff-mono);font-size:22px;letter-spacing:-.02em;line-height:1.1;color:var(--text)} .sg__kpis small{font-size:13px;color:var(--text-muted);line-height:1.35} .sg__link{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--accent);text-decoration:none; padding-bottom:4px;border-bottom:2px solid var(--accent);transition:gap .2s var(--ease-out),color .15s} .sg__link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease-out)} .sg__link:hover{gap:14px} .sg__link:hover svg{transform:translateX(2px)} @media (min-width:768px){ /* tablet: navegação vira coluna à esquerda com trilha, painel à direita */ .sg{grid-template-columns:150px 1fr;gap:var(--sp-6)} .sg__nav{flex-direction:column;overflow:visible;gap:12px;margin:0;padding:0 18px 0 0;align-self:start;position:sticky;top:calc(var(--topbar-h) + 16px)} .sg__tab{flex:1 1 auto;width:100%;aspect-ratio:1;display:grid;place-items:center;text-align:center;padding:8px; border-radius:var(--r-md);font-size:13px;line-height:1.2;color:var(--text-muted);box-shadow:none} .sg__tab:hover{transform:none} .sg__tab.is-on{color:var(--accent-ink)} .sg__trail{display:block;position:absolute;top:0;bottom:0;right:0;width:3px;border-radius:var(--r-pill);background:var(--segmentos-trail)} .sg__trail i{position:absolute;left:0;right:0;border-radius:inherit;background:var(--accent); height:calc((100% - (var(--sg-n) - 1) * 12px) / var(--sg-n)); top:calc(var(--sg-i) * ((100% - (var(--sg-n) - 1) * 12px) / var(--sg-n) + 12px)); transition:top .6s var(--ease)} .sg__title{margin-bottom:var(--sp-5)} .sg__mods{grid-template-columns:repeat(3,1fr)} .sg__kpis{grid-template-columns:repeat(3,1fr);gap:var(--sp-4)} .sg__kpis li{grid-template-columns:1fr;grid-template-rows:auto auto auto;row-gap:6px;align-items:start} .sg__kico{grid-row:auto;margin-bottom:6px} .sg__art{aspect-ratio:4/5;max-width:none} } @media (min-width:1024px){ .sg{grid-template-columns:168px 1fr;gap:var(--sp-8)} .sg__nav{gap:14px;padding-right:22px} .sg__tab{font-size:13.5px} .sg__trail i{height:calc((100% - (var(--sg-n) - 1) * 14px) / var(--sg-n)); top:calc(var(--sg-i) * ((100% - (var(--sg-n) - 1) * 14px) / var(--sg-n) + 14px))} .sg__title{padding-left:0} /* o painel ocupa a mesma altura da coluna de abas: arte estica até o pé e o texto distribui lead/módulos em cima e métricas/CTA embaixo, sem sobra vazia */ .sg__panels,.sg__panel.is-on{display:flex;flex-direction:column} .sg__panel.is-on{flex:1} .sg__body{flex:1;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:var(--sp-7);align-items:stretch} .sg__art{aspect-ratio:auto;min-height:520px;max-width:none} .sg__txt{display:flex;flex-direction:column;justify-content:space-between;padding:var(--sp-2) 0} .sg__txt > *{margin-block:0} .sg__lead{font-size:24px;line-height:1.35} .sg__txt > p:not(.sg__lead){font-size:17px} .sg__mods{grid-template-columns:1fr 1fr;gap:12px 20px} .sg__mods li{font-size:15.5px} .sg__kpis b{font-size:26px} .sg__kpis small{font-size:14px} .sg__link{align-self:flex-start;margin-bottom:var(--sp-2)} } /* rolagem guiada (tablet/desktop, JS liga .seg--pin): o bloco de abas+painel gruda na tela e cada trecho de scroll avança um segmento; o ::after da .wrap dá a distância extra (--sg-run) e, passado o último, a página segue pra seção de baixo */ @media (min-width:768px){ .seg--pin .sg{position:sticky;top:var(--sg-top,calc(var(--topbar-h) + 16px))} .seg--pin .wrap::after{content:"";display:block;height:var(--sg-run,0px)} } @media (prefers-reduced-motion:reduce){ .sg__panel.is-on{animation:none} .sg__mock,.sg__panel.is-on .sg__mock,.sg__cut,.sg__panel.is-on .sg__cut{transform:none;opacity:1;transition:none} .sg__mock-row b::after,.sg__panel.is-on .sg__mock-row b::after{transform:none;transition:none} .sg__trail i{transition:none} } /* contato: pausa de rolagem (JS liga .ct--hold quando o bloco cabe na tela) — o texto+form gruda por um trecho de scroll (--ct-run) antes de a página seguir pro footer */ .ct--hold .ct__grid{position:sticky;top:var(--ct-top,calc(var(--topbar-h) + 16px))} .ct--hold::after{content:"";display:block;height:var(--ct-run,0px)} /* hero: cadastro via Seven — a mensagem padrão do embed dá lugar ao alerta da página */ .hero__signup .seven-sucesso{display:none} .hero__signup .seven-aviso{margin:var(--sp-2) 0 0;font-size:var(--fs-sm);color:#E5484D} .hero__signup .seven-aviso[hidden],.hero__signup [data-channel-field][hidden]{display:none} /* ---------- banner de cookies (Seven) — os data-seven-* ficam intactos, só o visual é da página ---------- */ .footer__legal{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);align-items:center;justify-content:space-between} .footer__cookies{font-size:12.5px;color:#8A929C;text-decoration:none;transition:color .15s} .footer__cookies:hover{color:var(--bg-footer-ink)} .cookies{position:fixed;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);z-index:90;box-sizing:border-box; max-height:calc(100vh - 2 * var(--sp-3));overflow-y:auto; background:var(--bg-card);color:var(--text);border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--shadow-3);padding:var(--sp-5); animation:cookies-in .5s var(--ease-out) both} .cookies[hidden]{display:none} .cookies::before{content:"";position:absolute;left:var(--sp-5);right:var(--sp-5);top:0;height:2px;border-radius:0 0 2px 2px; background:linear-gradient(90deg,var(--accent),color-mix(in oklab,var(--accent) 0%,transparent))} @keyframes cookies-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} .cookies__head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-2)} .cookies__icon{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-pill);flex-shrink:0; background:var(--accent-wash);color:var(--accent)} [data-theme="dark"] .cookies__icon{background:color-mix(in oklab,var(--accent) 18%,#000);color:var(--accent-2)} .cookies__title{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em} .cookies__text{font-size:var(--fs-sm);line-height:1.55;margin:0 0 var(--sp-4)} .cookies__text a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .cookies__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)} .cookies__actions .btn{justify-content:center;padding:11px 16px} .cookies__actions .btn--primary{grid-column:1 / -1;order:-1} .cookies__actions .btn--link{padding:11px 0;color:var(--text-muted)} .cookies__actions .btn--link:hover{color:var(--text)} .cookies__prefs{display:grid;gap:var(--sp-2);margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--line)} .cookies__prefs[hidden]{display:none} .cookies__opt{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);font-weight:600;color:var(--text-2); padding:10px var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;transition:border-color .15s,background .15s} .cookies__opt:hover{border-color:var(--line-accent)} .cookies__opt:has(input:checked){border-color:var(--accent);background:var(--wash-soft)} .cookies__opt input{width:18px;height:18px;margin:0;accent-color:var(--accent);flex-shrink:0} .cookies__save{justify-content:center;margin-top:var(--sp-2)} @media (min-width:768px){ .cookies{left:auto;right:var(--sp-5);bottom:var(--sp-5);width:440px;padding:var(--sp-6)} .cookies__actions{grid-template-columns:auto auto 1fr} .cookies__actions .btn--primary{grid-column:auto;order:0} .cookies__prefs{grid-template-columns:1fr 1fr} .cookies__save{grid-column:1 / -1} } @media (prefers-reduced-motion:reduce){.cookies{animation:none}} /* ---------- ajustes de layout, só tablet (768–1023px): correções de responsividade pedidas pro modo Tablet — desktop e mobile ficam como estão ---------- */ @media (min-width:768px) and (max-width:1023px){ /* hero (ajuste 3): a composição em duas colunas do desktop não cabe aqui — a foto ficava pequena ou invadia o card/tags, e o min-height de 100svh deixava um vazio enorme no topo. No tablet a hero empilha de propósito: título grande, texto + card de cadastro + tags em cima, foto da equipe centralizada embaixo com o card flutuante apoiado nela (mesma composição do mobile, só que com a largura bem aproveitada) */ .hero{min-height:auto;--hero-overlap:0px;padding-bottom:var(--sp-5)} .hero__in{grid-template-columns:1fr;gap:var(--sp-5);align-items:center;justify-items:center;text-align:center} .hero-copy{font-size:clamp(40px,5.6vw,52px);max-width:15ch;margin-inline:auto} .hero .lead{max-width:44ch;margin-inline:auto} .hero__txt{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;text-align:center} .hero__signup-stack{max-width:400px;margin-inline:auto;text-align:left} .hero__tags{max-width:560px;justify-content:center;margin-inline:auto} .hero__media{align-self:auto;margin:var(--sp-4) 0 0;container-type:normal;min-height:0} .hero__people{position:relative;bottom:auto;right:auto;width:min(100%,640px);margin:0 auto} .hero__card{position:relative;left:auto;bottom:auto;margin:calc(-1 * var(--sp-6)) auto 0;max-width:480px;width:calc(100% - 2 * var(--sp-4))} /* sobre (ajuste 2): duas colunas espremiam foto, cards e a faixa "visão" (rótulos quebravam em duas linhas). No tablet a seção empilha: foto deitada ocupando a largura toda, depois o texto e os cinco pilares em duas colunas (o último fecha a linha inteira) */ .sobre__grid{grid-template-columns:1fr;gap:var(--sp-6)} .sobre__photo{position:static;aspect-ratio:16/9} .sobre .s__head .h2{max-width:22ch} .sobre .s__head .lead{max-width:60ch} .pillars{grid-template-columns:1fr 1fr} .pillars li:last-child{grid-column:1 / -1} /* recursos: com duas colunas o card "O que entra no sistema" cobria a foto inteira; no tablet a foto vai em cima ocupando a largura toda e os 6 cards ficam em 3 colunas */ .rec__grid{grid-template-columns:1fr;gap:var(--sp-6)} .rec__media{padding-bottom:var(--sp-7)} .rec__photo{aspect-ratio:16/9} .rec__float{left:var(--sp-4);right:auto;width:min(46%,320px)} .rec__cards{grid-template-columns:repeat(3,1fr)} /* segmentos: a arte tinha proporção 4/5 numa coluna larga e virava uma "torre" de quase 1000px; proporção deitada e altura máxima, com a pessoa e o mockup reescalados */ .sg__art{aspect-ratio:3/2;max-height:460px;width:100%} .sg__mock{width:min(42%,240px)} .sg__cut{width:62%} }