/* ============================================================ VH2 — folha de estilo compartilhada por todas as páginas Editar aqui altera o site inteiro. Não duplicar em página nenhuma. ============================================================ */ /* ------------------------------------------------------------ FONTES O briefing pede Aktiv Grotesk (licença paga, Dalton Maag). Ao licenciar, coloque os .woff2 na mesma pasta e descomente o bloco abaixo: a pilha em --font já tenta Aktiv Grotesk antes do fallback (Inter), então nada mais precisa mudar. ------------------------------------------------------------ */ /* Ao licenciar, apague estes comentários e ajuste o caminho: @font-face{font-family:"Aktiv Grotesk";src:url("AktivGrotesk-Light.woff2") format("woff2");font-weight:300;font-display:swap} @font-face{font-family:"Aktiv Grotesk";src:url("AktivGrotesk-Regular.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Aktiv Grotesk";src:url("AktivGrotesk-Medium.woff2") format("woff2");font-weight:500;font-display:swap} */ /* ============================================================ TOKENS ============================================================ */ :root{ --accent:#C96442; /* cor da marca, extraída do logo.svg */ --bg:#FFFFFF; --ink:#0E0E0E; --ink-soft:rgba(14,14,14,.60); --line:rgba(14,14,14,.16); /* rede: presença de fundo, discreta */ --net-edge:rgba(14,14,14,.20); --net-node:rgba(14,14,14,.52); --net-live:rgba(14,14,14,.62); /* aresta acesa por um sinal */ --font:"Aktiv Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --head-h:94px; /* altura do cabeçalho; o painel do menu se alinha por ela */ --gutter:clamp(20px,5vw,72px); --maxw:1560px; --ease:cubic-bezier(.22,.61,.36,1); } :root[data-theme="dark"]{ --bg:#0D0D0D; --ink:#F5F5F3; --ink-soft:rgba(245,245,243,.58); --line:rgba(245,245,243,.16); --net-edge:rgba(245,245,243,.18); --net-node:rgba(245,245,243,.50); --net-live:rgba(245,245,243,.62); } *,*::before,*::after{box-sizing:border-box} /* O também recebe a cor de fundo: é dela que o iOS tinge a área da barra de status quando o theme-color não é aplicado. Sem isto, o topo da tela fica branco mesmo com o site em escuro. */ html{ -webkit-text-size-adjust:100%;scroll-behavior:smooth; background:var(--bg); transition:background-color .45s var(--ease); } body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font);font-weight:300; -webkit-font-smoothing:antialiased;overflow-x:hidden; transition:background-color .45s var(--ease),color .45s var(--ease); } a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px} section[id]{scroll-margin-top:100px} /* ============================================================ CABEÇALHO — logo, menu, hambúrguer no mobile e seletor de versão ============================================================ */ .head{ position:fixed;inset:0 0 auto 0;z-index:60; background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1); transition:background-color .45s var(--ease); } .head__in{ max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter); height:var(--h,var(--head-h));display:flex;align-items:center;gap:24px; transition:height .45s var(--ease); } .head.is-scrolled .head__in{--h:66px} /* LOGO — um só SVG. Proporções reais: completo 2636.02/832.78 = 3.16527 · símbolo 900/832.78 = 1.08079 No scroll só a largura muda; o símbolo não sai do lugar. */ .brand{display:flex;align-items:center;flex:0 0 auto;height:40px} .brand svg{ --lh:38px;display:block;height:var(--lh);width:calc(var(--lh) * 3.16527); overflow:hidden;transition:width .55s var(--ease); } .head.is-scrolled .brand svg{width:calc(var(--lh) * 1.08079)} .brand .rays path{fill:var(--accent)} .brand .ring{fill:none;stroke:var(--accent);stroke-width:6} .brand .word path{fill:currentColor} .brand .word{opacity:1;transition:opacity .28s var(--ease)} .head.is-scrolled .brand .word{opacity:0;transition-duration:.2s} /* entrada: símbolo, depois v · h · 2 */ .brand .mark{animation:markIn .8s var(--ease) .06s both} .brand .ltr{transform-box:view-box;animation:ltrIn .7s var(--ease) both} .brand .ltr--v{animation-delay:.30s} .brand .ltr--h{animation-delay:.38s} .brand .ltr--2{animation-delay:.46s} /* só opacidade: o grupo .mark carrega um transform de posicionamento no SVG, e um transform no CSS o substituiria, deslocando o símbolo */ @keyframes markIn{from{opacity:0}to{opacity:1}} @keyframes ltrIn{from{opacity:0}to{opacity:1}} /* menu — links no desktop, hambúrguer no mobile */ .nav{display:flex;align-items:center;gap:clamp(13px,1.35vw,24px);margin-left:auto} .nav a{ position:relative;font-size:13.5px;letter-spacing:-.005em;color:var(--ink-soft); white-space:nowrap;padding:6px 0;transition:color .25s; } .nav a:not(.nav__t):not(.cta)::after{ content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px; background:currentColor;transition:right .35s var(--ease); } .nav a:hover{color:var(--ink)} .nav a:not(.nav__t):not(.cta):hover::after{right:0} /* Desenvolvimento com submenu */ .nav__g{position:relative} .nav__t{ display:flex;align-items:center;gap:6px;cursor:pointer;padding:6px 0; font-size:13.5px;letter-spacing:-.005em;color:var(--ink-soft);white-space:nowrap;transition:color .25s; } .nav__t::after{ content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-1px);opacity:.6;transition:transform .3s var(--ease); } /* o sublinhado do hover vem do ::before, deixando o ::after livre para a seta */ .nav__t{position:relative} .nav__t::before{ content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:currentColor; transition:right .35s var(--ease); } .nav__g:hover .nav__t::before,.nav__g:focus-within .nav__t::before{right:18px} .nav__g:hover .nav__t,.nav__g:focus-within .nav__t{color:var(--ink)} .nav__g:hover .nav__t::after,.nav__g:focus-within .nav__t::after{transform:rotate(225deg) translateY(-2px)} .nav__sub{ position:absolute;top:100%;left:-14px;min-width:190px;padding:10px 0; display:flex;flex-direction:column; background:var(--bg);border:1px solid var(--line);border-radius:4px; box-shadow:0 12px 30px rgba(0,0,0,.10); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .28s var(--ease),transform .3s var(--ease),visibility .3s; } .nav__g:hover .nav__sub,.nav__g:focus-within .nav__sub{opacity:1;visibility:visible;transform:none} .nav__sub a{padding:7px 16px;font-size:14px;color:var(--ink-soft)} .nav__sub a:not(.nav__t)::after{display:none} .nav__sub a:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)} /* abertura de chamados: único item em formato de botão */ .nav .cta,.sheet .cta{ color:#fff;background:var(--accent);border-radius:999px; padding:9px 17px;font-weight:400;white-space:nowrap; transition:opacity .25s var(--ease),transform .3s var(--ease); } .nav .cta{margin-left:4px} .nav .cta::after{display:none} .nav .cta:hover,.sheet .cta:hover{color:#fff;opacity:.88;transform:translateY(-1px)} .sheet .cta{align-self:flex-start;margin-top:18px;font-size:1.02rem;letter-spacing:-.01em;padding:11px 22px} .burger{ display:none;width:34px;height:34px;flex:0 0 auto; align-items:center;justify-content:center;color:var(--ink-soft);transition:color .25s; } .burger:hover{color:var(--ink)} .burger i{display:block;width:18px;height:1px;background:currentColor;position:relative;transition:transform .35s var(--ease)} .burger i::before,.burger i::after{ content:"";position:absolute;left:0;width:18px;height:1px;background:currentColor; transition:transform .35s var(--ease); } .burger i::before{top:-5px} .burger i::after{top:5px} body.menu-open .burger i{transform:rotate(45deg)} body.menu-open .burger i::before{transform:translateY(5px) rotate(-90deg)} body.menu-open .burger i::after{transform:translateY(-5px) rotate(-90deg)} .sheet{ position:fixed;inset:0;z-index:55;background:var(--bg); display:flex;flex-direction:column;justify-content:flex-start;gap:0; padding:calc(var(--head-h) + 18px) var(--gutter) 40px; overflow-y:auto; opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s; } body.menu-open .sheet{opacity:1;visibility:visible} .sheet a{ font-size:clamp(1.35rem,5.4vw,1.95rem);letter-spacing:-.035em;font-weight:300;line-height:1.34; opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .45s var(--ease); } /* divisórias muito discretas entre os itens de primeiro nível */ .sheet>a:not(.cta),.sheet>.sheet__g{ padding:13px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent); } .sheet>a:not(.cta):first-child{padding-top:0} body.menu-open .sheet a{opacity:1;transform:none} body.menu-open .sheet a:nth-child(2){transition-delay:.04s} body.menu-open .sheet a:nth-child(3){transition-delay:.08s} body.menu-open .sheet a:nth-child(4){transition-delay:.12s} body.menu-open .sheet a:nth-child(5){transition-delay:.16s} body.menu-open .sheet a:nth-child(6){transition-delay:.20s} body.menu-open .sheet a:nth-child(7){transition-delay:.24s} body.menu-open .sheet a:nth-child(8){transition-delay:.28s} body.menu-open .sheet a:nth-child(9){transition-delay:.32s} .sheet__g{ opacity:0;transform:translateY(10px); transition:opacity .4s var(--ease),transform .45s var(--ease); } body.menu-open .sheet__g{opacity:1;transform:none;transition-delay:.12s} .sheet__t{ display:flex;align-items:center;gap:9px;cursor:pointer; font-size:clamp(1.35rem,5.4vw,1.95rem);letter-spacing:-.035em;font-weight:300;line-height:1.34; } .sheet__t::after{ content:"";width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .3s var(--ease); } .sheet__g.is-sub .sheet__t::after{transform:rotate(225deg) translateY(-3px)} .sheet__sub{ display:flex;flex-direction:column;padding-left:18px; max-height:0;overflow:hidden;opacity:0; transition:max-height .42s var(--ease),opacity .3s var(--ease); } .sheet__g.is-sub .sheet__sub{max-height:180px;opacity:1} .sheet__sub a{font-size:clamp(1.02rem,4vw,1.3rem);color:var(--ink-soft);padding:5px 0;opacity:1;transform:none} /* seletor claro / escuro — discreto, só ícone */ .theme{ margin-left:6px;width:34px;height:34px;flex:0 0 auto; display:flex;align-items:center;justify-content:center;border-radius:50%; color:var(--ink-soft);transition:color .25s,background-color .25s; } .theme:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)} .theme svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round} .theme .i-moon{display:none} :root[data-theme="dark"] .theme .i-sun{display:none} :root[data-theme="dark"] .theme .i-moon{display:block} /* ============================================================ HERO — texto à esquerda, nuvem neural à direita ============================================================ */ .hero{ max-width:var(--maxw);margin:94px auto 0;padding:clamp(30px,5vh,70px) var(--gutter) clamp(40px,7vh,90px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center;gap:clamp(28px,4vw,72px); } .hero__text h1{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1;font-size:clamp(2.1rem,4.4vw,4rem)} .hero__text blockquote{ margin:clamp(24px,3vw,40px) 0 0;padding:0;font-weight:200;letter-spacing:-.02em;line-height:1.35; font-size:clamp(1.05rem,1.75vw,1.6rem);max-width:32ch; } .hero__text blockquote span{color:var(--accent)} .hero__net{position:relative;height:clamp(400px,64svh,640px)} #net{position:absolute;inset:0;width:100%;height:100%;display:block} .svc{position:absolute;inset:0;z-index:3} /* cada âncora da nuvem: item simples (a) ou grupo com submenu (div) */ .svc>*{position:absolute;transform:translate(-50%,-50%)} .svc__i{ display:flex;align-items:center;gap:11px;white-space:nowrap; padding:7px 15px 7px 11px;border-radius:999px; font-size:clamp(.9rem,1.1vw,1.1rem);letter-spacing:-.02em;font-weight:400; background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); transition:color .25s; } .svc__i::before{ content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto; box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent); transition:box-shadow .35s var(--ease); } .svc>*{opacity:0;pointer-events:none;transition:opacity .4s var(--ease)} .hero__net.is-open .svc>*,.hero__net.is-preview .svc>*{opacity:1} .hero__net.is-open .svc>*{pointer-events:auto} .svc__i:hover{color:var(--accent)} .svc a:hover::before,.svc a:focus-visible::before{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 20%,transparent)} .hero__net.is-open .svc a:nth-child(2),.hero__net.is-preview .svc a:nth-child(2){transition-delay:.05s} .hero__net.is-open .svc a:nth-child(3),.hero__net.is-preview .svc a:nth-child(3){transition-delay:.10s} .hero__net.is-open .svc a:nth-child(4),.hero__net.is-preview .svc a:nth-child(4){transition-delay:.15s} .hero__net.is-open .svc a:nth-child(5),.hero__net.is-preview .svc a:nth-child(5){transition-delay:.20s} /* ============================================================ PÁGINAS INTERNAS — sem hero, o conteúdo precisa de folga sob o cabeçalho fixo. Usado por _modelo.html e 404.html. ============================================================ */ .page{ max-width:var(--maxw);margin:0 auto; padding:calc(var(--head-h) + clamp(50px,9vh,120px)) var(--gutter) clamp(40px,7vh,90px); } .page h1{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1;font-size:clamp(2.1rem,5vw,4.2rem);max-width:20ch} .page__lead{ margin:clamp(22px,3vw,36px) 0 0;font-weight:200;letter-spacing:-.02em;line-height:1.4; font-size:clamp(1.05rem,1.75vw,1.6rem);max-width:46ch;color:var(--ink-soft); } .page__back{ display:inline-block;margin-top:clamp(24px,3vw,40px); font-size:15px;color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px; } .page--404{min-height:52svh} /* páginas em desenvolvimento: mesmo sistema, centro vertical para a página curta não ficar deslocada no alto */ .page--wip{min-height:58svh;display:flex;flex-direction:column;justify-content:center} .page--wip h1{max-width:none} .page--wip .dot{color:var(--accent)} .page--wip .page__lead{max-width:34ch} /* ============================================================ PÁGINA DE SERVIÇO — abertura + seções numeradas com corpo longo Mesma gramática do bloco 01/02/03 da home: número, título e filete. A diferença é o corpo, que aqui admite parágrafos e listas. Namespace .doc para não colidir com .content/.row. ============================================================ */ .doc{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .doc__open{ padding:calc(var(--head-h) + clamp(46px,8vh,104px)) 0 clamp(40px,6vh,80px); display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(24px,4vw,64px);align-items:center; } .doc__open>div:first-child{min-width:0} /* ------------------------------------------------------------ CARRINHO — desenho a traço que entra rolando pela esquerda, se desenha durante o percurso e estaciona. Ocupa o vazio à direita da abertura. Só no desktop: no mobile a coluna some. ------------------------------------------------------------ */ .cart{width:100%;height:auto;display:block;overflow:hidden} /* o carrinho surge da borda, sem invadir o texto */ .cart *{ fill:none;stroke:var(--accent);stroke-width:2.4; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1; /* pathLength="1" normaliza */ animation:cartDraw 1.15s ease .35s both; } .cart .piso{stroke:var(--ink-soft);stroke-width:1;opacity:0;animation:pisoIn .6s ease .25s both} /* substrato do mobile: só existe lá; aqui fica fora */ .cart .chao{display:none} .cart #chaoFade .c0{stop-color:var(--ink-soft);stop-opacity:0} .cart #chaoFade .c1{stop-color:var(--ink-soft);stop-opacity:.55} /* SÍMBOLO QUE SOBE — sai do cesto, atravessa o menu e desaparece. Elemento próprio, irmão do SVG do carrinho: dentro dele seria recortado pelo overflow e não passaria por cima do cabeçalho fixo. O z-index maior que o do .head é o que permite o transpasse. A posição em % acompanha a caixa do desenho, então o símbolo nasce sempre sobre o cesto. */ .doc__art{position:relative} .cart-mark{ position:absolute;left:48.4%;top:8.2%;width:19.2%;height:auto; z-index:65;pointer-events:none; transform-origin:center; animation:markJourney 5.4s 1.35s both; } .cart-mark .m-rays path{fill:var(--accent);stroke:none} .cart-mark .m-ring{fill:none;stroke:var(--accent);stroke-width:6} .cart-mark mask rect{fill:#fff} .cart-mark mask circle{fill:#000} @keyframes artFim{to{visibility:hidden}} /* Viagem do SVG no mobile: entra fora da borda esquerda e termina inteiramente fora da direita. */ @keyframes cartTrip{ from{transform:translateX(-110px)} to {transform:translateX(calc(100vw + 20px))} } /* giro proporcional ao percurso: ~22 voltas para uma roda de ~3,7px de raio atravessando cerca de 520px de tela */ @keyframes cartRollOn{from{transform:rotate(0)}to{transform:rotate(8000deg)}} @keyframes markJourney{ /* nasce no cesto */ 0% {opacity:0;transform:translateY(0) scale(.35) rotate(-25deg); animation-timing-function:cubic-bezier(.2,1.3,.4,1)} 9% {opacity:1;transform:translateY(0) scale(1) rotate(0deg); animation-timing-function:ease-in-out} /* respira antes de partir */ 24% {opacity:1;transform:translateY(-5px) scale(1) rotate(0deg); animation-timing-function:cubic-bezier(.45,0,.75,.25)} /* sobe pela página, passando pelo menu */ 88% {opacity:1} 100% {opacity:0;transform:translateY(-116vh) scale(.62) rotate(38deg)} } /* pontos no eixo das rodas */ .cart__dot{ fill:var(--accent);stroke:none;stroke-dasharray:none; transform-box:fill-box;transform-origin:center; animation:dotIn .5s cubic-bezier(.2,1.3,.4,1) both; } .cart__dot.d5,.cart__dot.d6{animation-delay:1.2s} @keyframes dotIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}} /* rastro do percurso, que fica no chão atrás do carrinho */ .cart__trail{fill:var(--accent);stroke:none;stroke-dasharray:none;animation:trailIn .8s ease both} .cart__trail.t1{animation-delay:1.0s} .cart__trail.t2{animation-delay:1.1s} .cart__trail.t3{animation-delay:1.2s} @keyframes trailIn{from{opacity:0}to{opacity:.30}} .cart__body{animation:cartRoll 1.5s cubic-bezier(.2,.8,.25,1) both} .cart__wheel{ transform-box:fill-box;transform-origin:center; animation:cartSpin 1.5s cubic-bezier(.2,.8,.25,1) both; } @keyframes cartDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes pisoIn{from{opacity:0}to{opacity:.5}} @keyframes cartRoll{ 0% {transform:translateX(-58%)} 82% {transform:translateX(2%)} /* passa um fio e volta: freada */ 100%{transform:translateX(0)} } @keyframes cartSpin{ 0% {transform:rotate(-320deg)} 82% {transform:rotate(12deg)} 100%{transform:rotate(0deg)} } .doc__eyebrow{ margin:0 0 22px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--ink-soft);display:flex;align-items:center;gap:10px; } .doc__eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)} .doc__open h1{ margin:0;font-weight:500;letter-spacing:-.038em;line-height:.98; font-size:clamp(2.3rem,6.2vw,5rem);max-width:18ch; } /* o
do título é intencional: define onde a linha quebra */ .doc__open h1 br{display:inline} .doc__sub{ margin:clamp(18px,2.4vw,30px) 0 0;font-weight:300;letter-spacing:-.025em;line-height:1.25; font-size:clamp(1.15rem,2.4vw,2.05rem);max-width:30ch;color:var(--accent); } .doc__intro{margin:clamp(30px,4.5vw,54px) 0 0;max-width:62ch;display:flex;flex-direction:column;gap:1.1em} .doc__intro p{ margin:0;font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.62;letter-spacing:-.008em; color:var(--ink-soft); } .doc__intro p:first-child{color:var(--ink);font-size:clamp(1.05rem,1.4vw,1.28rem)} /* seções numeradas */ .doc__block{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr); gap:clamp(20px,4vw,64px);align-items:start; padding:clamp(44px,6vw,86px) 0;border-top:1px solid var(--line); } .doc__block:last-of-type{border-bottom:1px solid var(--line)} .doc__label{position:sticky;top:calc(var(--head-h) + 24px)} .doc__n{ font-size:clamp(1.6rem,2.4vw,2.2rem);font-weight:500;letter-spacing:-.04em;line-height:1; color:var(--accent);margin-bottom:12px; } .doc__t{ margin:0;font-size:clamp(1.35rem,2.5vw,2.1rem);font-weight:500; letter-spacing:-.035em;line-height:1.06; } .doc__body{display:flex;flex-direction:column;gap:1.15em} .doc__body p{margin:0;font-size:clamp(1rem,1.2vw,1.14rem);line-height:1.62;letter-spacing:-.008em} .doc__body ul{margin:0;padding:0;list-style:none;display:grid;gap:9px} .doc__body li{ position:relative;padding-left:20px; font-size:clamp(.96rem,1.12vw,1.06rem);line-height:1.5;letter-spacing:-.008em; color:var(--ink-soft); } .doc__body li::before{ content:"";position:absolute;left:0;top:.62em; width:6px;height:6px;border-radius:50%;background:var(--accent); } /* listas de duas colunas quando são longas */ .doc__body ul.is-two{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px clamp(20px,3vw,44px)} /* ============================================================ CONTENT — 01 / 02 / 03 ============================================================ */ .content{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)} .row{ display:grid;grid-template-columns:.55fr 1.45fr 2fr;gap:clamp(20px,4vw,60px);align-items:center; padding:clamp(56px,8vw,120px) 0;border-top:1px solid var(--line); } .content .row:last-child{border-bottom:1px solid var(--line)} .row__n{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:500;letter-spacing:-.04em;line-height:1;transition:color .3s} .row:hover .row__n{color:var(--accent)} .row__t{margin:0;font-size:clamp(1.5rem,3vw,2.6rem);font-weight:500;letter-spacing:-.035em;line-height:1.02} .row__d{margin:0;font-size:clamp(1rem,1.35vw,1.28rem);line-height:1.5;letter-spacing:-.01em} /* ============================================================ CLAIM ============================================================ */ .claim{max-width:var(--maxw);margin:0 auto;padding:clamp(110px,17vh,230px) var(--gutter)} .claim p{ margin:0 auto;text-align:center;font-weight:500;letter-spacing:-.035em;line-height:1.05; font-size:clamp(2rem,5.6vw,4.6rem);max-width:24ch; } /* ============================================================ FOOTER — segue o tema: branco com conteúdo preto no claro ============================================================ */ .foot{border-top:1px solid var(--line);padding-top:clamp(70px,10vh,130px);overflow:hidden} .foot__grid{ max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter); display:grid;grid-template-columns:1.15fr .95fr .6fr;gap:clamp(34px,5vw,60px); } .foot__nav{display:flex;flex-direction:column;gap:2px} .foot__nav a{ font-size:clamp(1.15rem,2.1vw,1.85rem);letter-spacing:-.03em;font-weight:300;line-height:1.3; width:fit-content;transition:color .25s,transform .35s var(--ease); } .foot__nav a:hover{color:var(--accent);transform:translateX(6px)} /* logo no lugar de "Página inicial": leva ao topo e abre a lista */ .foot__brand{margin:0 0 clamp(20px,2.6vw,34px)} .foot__brand:hover{transform:none} .foot__brand svg{display:block;height:38px;width:auto} .foot__brand .rays path{fill:var(--accent)} .foot__brand .ring{fill:none;stroke:var(--accent);stroke-width:6} .foot__brand .word path{fill:currentColor;transition:fill .25s} .foot__brand:hover .word path{fill:var(--accent)} .foot__t{ display:flex;align-items:center;gap:9px;cursor:pointer;width:fit-content; font-size:clamp(1.15rem,2.1vw,1.85rem);letter-spacing:-.03em;font-weight:300;line-height:1.3; transition:color .25s; } .foot__t:hover{color:var(--accent)} .foot__t::after{ content:"";width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .3s var(--ease); } .foot__g.is-sub .foot__t::after{transform:rotate(225deg) translateY(-3px)} /* fechado por padrão; abre no clique */ .foot__sub{ display:flex;flex-direction:column;padding-left:20px;border-left:1px solid var(--line); max-height:0;overflow:hidden;opacity:0;margin:0; transition:max-height .42s var(--ease),opacity .3s var(--ease),margin .42s var(--ease); } .foot__g.is-sub .foot__sub{max-height:180px;opacity:1;margin:6px 0 8px} .foot__sub a{font-size:clamp(.95rem,1.4vw,1.15rem);color:var(--ink-soft)} .foot__sub a:hover{color:var(--accent)} .foot h3{margin:0 0 13px;font-size:17px;font-weight:400;letter-spacing:-.012em} .foot__col p,.foot__col a{font-size:13.5px;line-height:1.62;color:var(--ink-soft);margin:0} .foot__col a{display:block;transition:color .25s} /* e-mail, telefone e abertura de chamados: laranja ao passar o mouse */ .foot__col a:hover{color:var(--accent)} .foot__block+.foot__block{margin-top:clamp(38px,6vh,74px)} .conceito{display:block;width:100%;margin-top:clamp(48px,7vh,90px)} .conceito text{fill:var(--ink);font-family:var(--font);font-weight:400} .foot__base{max-width:var(--maxw);margin:0 auto;padding:22px var(--gutter) 30px} .foot__base p{ margin:0;font-size:12px;line-height:1.55;letter-spacing:.005em;color:var(--ink-soft); } /* ============================================================ REVEAL ============================================================ */ /* botões flutuantes: voltar ao topo e WhatsApp */ .dock{ position:fixed;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);z-index:70; display:flex;flex-direction:column;align-items:center;gap:12px; } .dock a,.dock button{ width:50px;height:50px;border-radius:50%;flex:0 0 auto; display:flex;align-items:center;justify-content:center; background:var(--accent);color:#fff; box-shadow:0 6px 22px rgba(0,0,0,.18); transition:transform .3s var(--ease),opacity .3s var(--ease),visibility .3s,box-shadow .3s var(--ease); } .dock a:hover,.dock button:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.24)} .dock svg{width:25px;height:25px;display:block} .dock .up{width:42px;height:42px;opacity:0;visibility:hidden;transform:translateY(8px)} .dock .up svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} body.is-down .dock .up{opacity:1;visibility:visible;transform:none} @media (max-width:1180px){ .dock{gap:10px} .dock a,.dock button{width:46px;height:46px} .dock .up{width:38px;height:38px} } .js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease)} .js .rv.in{opacity:1;transform:none} /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width:1180px){ .brand svg{--lh:36px} :root{--head-h:80px} .head__in{gap:0} .head.is-scrolled .head__in{--h:64px} .nav{display:none} .theme{margin-left:auto} .burger{display:flex;margin-left:4px} .row{grid-template-columns:1fr;gap:14px;align-items:start} /* página de serviço: uma coluna, rótulo deixa de ser fixo */ .doc__open{grid-template-columns:1fr} /* MOBILE — o carrinho atravessa o VÃO entre o menu e "SERVIÇOS". O vão é exatamente o clamp do padding-top do .doc__open, começando na altura do cabeçalho (--head-h): a faixa usa os mesmos valores, então ela ocupa o vão com precisão, sem palpite. Aqui quem se move é o SVG inteiro, não o desenho dentro dele — assim nada é recortado e o carrinho atravessa até sair pela borda direita. z-index acima do botão flutuante (70), senão ele desapareceria atrás do botão antes de chegar ao fim. */ .doc__art{ display:flex;align-items:center; position:fixed;left:0;width:100vw; top:var(--head-h);height:clamp(46px,8vh,104px);bottom:auto; z-index:72;pointer-events:none; animation:artFim 0s linear 6.1s forwards; } .cart-mark,.cart__trail,.cart .piso{display:none} /* o substrato acompanha o carrinho e some nas duas pontas pelo degradê */ .cart .chao{ display:block;fill:none;stroke:url(#chaoFade);stroke-width:1.6; stroke-linecap:round;stroke-dasharray:none;animation:none; } /* o SVG é dimensionado pela altura do vão e viaja de ponta a ponta */ .cart{width:auto;height:78%;overflow:visible;animation:cartTrip 5.5s linear .35s both} .cart__body{animation:none} /* o desenho fica parado no SVG */ .cart__wheel{animation:cartRollOn 5.5s linear .35s both} .cart__dot.d5,.cart__dot.d6{animation-delay:.5s} .doc__block{grid-template-columns:1fr;gap:16px;padding:clamp(38px,7vw,56px) 0} .doc__label{position:static} .doc__n{margin-bottom:6px} .doc__body ul.is-two{grid-template-columns:1fr} .row__n{color:var(--accent)} .foot__grid{grid-template-columns:1fr} /* sem hover não há como revelar os pontos: a rede fica só como fundo e os serviços vivem no menu e no rodapé */ /* mobile: nuvem em cima, texto abaixo */ .hero{grid-template-columns:1fr;margin-top:80px;gap:clamp(26px,5vh,44px);padding-top:clamp(20px,3vh,36px)} .hero__net{order:1;height:clamp(380px,52svh,520px)} .hero__text{order:2} /* sem mouse os pontos ficam sempre visíveis, com deriva lenta própria */ .svc__i{font-size:.94rem;padding:6px 13px 6px 10px} .svc>*{animation:svcDrift 11s ease-in-out infinite both} .svc>*:nth-child(2){animation-duration:13s;animation-delay:-2.5s} .svc>*:nth-child(3){animation-duration:12s;animation-delay:-5s} .svc>*:nth-child(4){animation-duration:14s;animation-delay:-7s} .svc>*:nth-child(5){animation-duration:12.5s;animation-delay:-9s} .svc>*:nth-child(6){animation-duration:13.5s;animation-delay:-3.5s} } /* deriva independente do canvas: a propriedade translate soma ao transform de centralização, então o rótulo continua alinhado ao ponto */ @keyframes svcDrift{ 0% {translate:0 0} 25% {translate:3px -5px} 50% {translate:-2px 4px} 75% {translate:-4px -2px} 100%{translate:0 0} } /* Desktop: as colunas de contato ganham corpo. Fica fora do bloco mobile de propósito — abaixo de 1181px nada muda. */ @media (min-width:1181px){ .foot__brand svg{height:44px} .foot h3{font-size:19px;margin-bottom:15px} .foot__col p,.foot__col a{font-size:15px;line-height:1.6} .foot__block+.foot__block{margin-top:clamp(42px,6.5vh,80px)} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important} .js .rv{opacity:1;transform:none} }