/* latin: cobre inglês e português inteiros (acentos em U+00C0–00FF) */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 900;font-display:swap; src:url(fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;} :root{ --base:#0B0D10;--surface:#141920;--surface2:#1B212A;--line:#262E38; --ink:#E9EDF2;--mut:#828B98;--im:#7D8695;--acc:#FF9F45;--accink:#1A1205;--stroke:#3A4552; --paper:#F2EFE7;--paper-ink:#14171C;--paper-line:rgba(20,23,28,.18);--paper-mut:#5A6068; --wa-in:#202C33;--wa-out:#144D37;--wa-bg:#0B141A; --ease:cubic-bezier(.22,.61,.36,1); --dsp:'Space Grotesk',sans-serif;--mn:'JetBrains Mono',monospace; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--base);color:var(--ink);font-family:var(--dsp);-webkit-font-smoothing:antialiased;line-height:1.55;overflow-x:hidden} ::selection{background:var(--acc);color:var(--accink)} section[id],header[id]{scroll-margin-top:70px} a{color:inherit;text-decoration:none} button{font-family:var(--dsp)} .mono{font-family:var(--mn)} .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,48px)} :focus-visible{outline:2px solid var(--acc);outline-offset:3px} /* grain */ .grain{position:fixed;inset:-50%;z-index:98;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")} /* cursor ring. A posicao inicial fora da tela (translate -100px) vinha de um style="" inline no proprio
, que o CSP de producao bloqueia (style-src 'self', sem 'unsafe-inline'). Sem ela o anel aparecia no canto superior esquerdo ate o primeiro mousemove. O JS sobrescreve transform a cada movimento, entao o valor abaixo so vale para o primeiro paint. */ .cring{position:fixed;left:0;top:0;width:26px;height:26px;border:1.5px solid rgba(255,159,69,.75);border-radius:50%;pointer-events:none;z-index:99;transform:translate(-100px,-100px) translate(-50%,-50%);display:none} .cring.big{width:52px;height:52px;border-color:rgba(255,159,69,.45)} @media(pointer:fine){.cring{display:block}} /* HUD scroll */ /* reveal */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} /* nav */ /* `body>nav` e não `nav`: o rodapé tem um nav.footlinks com o link da política. (Sem escrever a tag por extenso neste comentário: o build.mjs extrai o menu da home com uma regex de primeira ocorrência, e um exemplo literal aqui em cima seria capturado no lugar do menu de verdade.) Com o seletor solto ele herdava position:fixed + o mesmo fundo e borda, virava uma segunda barra grudada no topo da janela (era de lá que vinha o "Política de Privacidade" solto no canto superior esquerdo, e a segunda linha horizontal em cima do menu) e sumia do rodapé. Sem border-bottom: a barra se separa do conteúdo pelo blur, não por traço. */ body>nav{position:fixed;top:0;left:0;right:0;z-index:80;backdrop-filter:blur(10px);background:rgba(11,13,16,.65)} .navrow{display:flex;align-items:center;justify-content:space-between;height:58px} .wm{font-family:var(--dsp);font-weight:600;letter-spacing:-.025em} .wm .im{color:var(--im)} .wm .mz{color:var(--ink)} /* wordmark ao lado do símbolo no nav: "im" a ~59% do tamanho de "mozart", mesmo tratamento dos SVGs em brand/ (immozart_wordmark-dark.svg). */ .brand-nav .wordmark{display:inline-flex;align-items:baseline;letter-spacing:-.02em;white-space:nowrap} .brand-nav .im{font-size:.59em} @media(max-width:480px){.brand-nav .wordmark{display:none}} .nidx{display:flex;gap:18px;align-items:center;font-family:var(--mn);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)} .nidx a{transition:color .2s} .nidx a:hover{color:var(--acc)} /* o CTA é o único link do nav com fundo âmbar: a regra acima deixava texto e fundo da mesma cor no hover. Aqui o texto fica, o fundo é que clareia. */ .nidx a.nbtn:hover{color:var(--accink)} .nidx a b{color:var(--im);font-weight:400;margin-right:5px} .nidx .mh{display:inline} @media(max-width:900px){.nidx .mh{display:none}} .nbtn{font-family:var(--dsp);font-size:13px;font-weight:600;padding:8px 15px;background:var(--acc);color:var(--accink);border-radius:0;letter-spacing:0;text-transform:none} .nbtn:hover{filter:brightness(1.08)} .lang{display:flex;gap:2px;font-family:var(--mn);font-size:11px} .lang button{padding:5px 8px;background:transparent;border:1px solid var(--stroke);color:var(--mut);cursor:pointer;letter-spacing:.05em} .lang button[aria-pressed="true"]{background:var(--acc);color:var(--accink);border-color:var(--acc)} .lang button:hover{border-color:var(--acc);color:var(--ink)} @media(max-width:420px){.langtop{display:none}} .menu-btn{display:none;width:36px;height:36px;align-items:center;justify-content:center;background:none;border:1px solid var(--stroke);color:var(--ink);cursor:pointer} @media(max-width:900px){.menu-btn{display:flex}} .mmenu{position:fixed;inset:58px 0 0 0;z-index:79;background:var(--base);border-top:1px solid var(--line);display:flex;flex-direction:column;padding:24px clamp(18px,4vw,48px);pointer-events:none;opacity:0;transform:translateY(-10px);transition:opacity .25s var(--ease),transform .25s var(--ease);overflow-y:auto} .mmenu.open{opacity:1;transform:none;pointer-events:auto} .mmenu a{font-family:var(--dsp);font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:-.01em;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink)} .mmenu a:hover{color:var(--acc)} .mmenu .lang{margin-top:20px} @media(min-width:901px){.mmenu{display:none!important}} /* section apparatus */ .rule{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;font-family:var(--mn);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--im)} .rule .n{color:var(--acc)} .sec{padding:clamp(70px,9vw,120px) 0} /* .wrap.sec (seção visão): o atalho `padding: X 0` do .sec zerava o padding lateral que o .wrap define, e o texto encostava na borda da tela abaixo de 1200px. Devolve os dois lados sem mexer no vertical. */ .wrap.sec{padding-left:clamp(18px,4vw,48px);padding-right:clamp(18px,4vw,48px)} h2.big{font-family:var(--dsp);font-weight:600;font-size:clamp(34px,5.6vw,64px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase;margin:26px 0 14px} /* .ol era texto vazado (só contorno). Vazado dá textura, não ênfase: a palavra que carrega o sentido ficava mais fraca que o resto do título. Agora é preenchida em âmbar, que é a única cor de destaque da página. */ h2.big .ol{color:var(--acc)} .paper h2.big .ol{color:#B4640A} .amberblk .ol{color:var(--accink)} .kicker{color:var(--mut);font-size:clamp(15px,1.6vw,17px);max-width:560px} /* ---------- hero ---------- */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:90px 0 70px} /* Constelação em profundidade real: dois canvas, um atrás (z-1) e um à frente (z-3) do plano do texto (z-2). Arestas passam literalmente por diante e por trás da headline. Vem do hero da versão anterior do site (assets/app.js). */ .hero-stage{position:absolute;inset:0;pointer-events:none} .hero-stage canvas{width:100%;height:100%;display:block} .hero-stage.back{z-index:1} /* A camada da frente (z-3, arestas passando POR CIMA da headline) está desligada: a constelação fica inteira atrás do conteúdo do hero. O elemento continua no DOM porque o desenho mede a largura dele pra decidir em qual canvas cada nó cai — com largura 0, tudo cai no canvas de trás. */ .hero-stage.front{display:none} .vig{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 100% at 32% 50%,transparent 40%,rgba(11,13,16,.62) 100%)} .hero .wrap{position:relative;z-index:2} .hero .meta{position:absolute;font-family:var(--mn);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--im);z-index:2} .hero .m-tl{top:76px;left:clamp(18px,4vw,48px)} .hero .m-tr{top:76px;right:clamp(18px,4vw,48px);text-align:right} .hero .m-br{bottom:22px;right:clamp(18px,4vw,48px);text-align:right} @media(max-width:700px){.hero .m-tr,.hero .m-br{display:none}} .hero h1{font-family:var(--dsp);font-weight:700;font-size:clamp(46px,10.5vw,150px);line-height:.92;letter-spacing:-.04em;text-transform:uppercase} .hero h1 .ln{display:block;overflow:hidden;padding-bottom:.05em;margin-bottom:-.05em} .hero h1 .lni{display:inline-block;transform:translateY(112%);animation:lnUp .9s var(--ease) forwards} .hero h1 .ln:nth-child(2) .lni{animation-delay:.12s} @keyframes lnUp{to{transform:none}} .hero h1 .ol{color:var(--acc)} .hero .ast{color:var(--acc);-webkit-text-stroke:0} .hero .foot{margin-top:26px;display:flex;gap:26px;flex-wrap:wrap;align-items:center} .hero .footnote{font-family:var(--mn);font-size:12px;color:var(--mut)} .hero .footnote b{color:var(--acc);font-weight:400} .hbtn{font-size:15px;font-weight:600;padding:14px 24px;background:var(--acc);color:var(--accink);display:inline-flex;gap:10px;align-items:center;transition:transform .18s var(--ease),box-shadow .2s} .hbtn:hover{box-shadow:0 10px 30px rgba(255,159,69,.3)} .hbtn.ghost{background:transparent;color:var(--ink);border:1px solid var(--stroke)} .hbtn.ghost:hover{border-color:var(--acc)} @keyframes blink{50%{opacity:0}} @keyframes fadeIn{to{opacity:1}} .scue{position:absolute;left:clamp(18px,4vw,48px);bottom:22px;z-index:2;font-family:var(--mn);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--im);display:flex;align-items:center;gap:10px;opacity:0;animation:fadeIn 1s 1.3s forwards} .scue i{width:36px;height:1.5px;background:linear-gradient(90deg,var(--acc),transparent);display:block;animation:cueX 1.8s var(--ease) infinite} @keyframes cueX{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}} /* ---------- marquee ---------- */ .mq{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;position:relative} .mq .in{display:flex;white-space:nowrap;width:max-content;animation:mqx 26s linear infinite} .mq:not(.run) .in{animation-play-state:paused} .mq span{font-family:var(--dsp);font-weight:600;font-size:clamp(18px,2.6vw,28px);letter-spacing:-.01em;text-transform:uppercase;padding-right:18px} .mq span i{font-style:normal;color:var(--acc);padding-right:18px} .mq.ol span{color:transparent;-webkit-text-stroke:1px var(--im)} .mq.ol span i{color:transparent;-webkit-text-stroke:1px var(--acc)} .mq.rev .in{animation-direction:reverse} @keyframes mqx{to{transform:translateX(-50%)}} /* ---------- paper (visão) ---------- */ .paper{background:var(--paper);color:var(--paper-ink)} .paper .rule{border-color:var(--paper-line);color:var(--paper-mut)} .paper .rule .n{color:#B4640A} .paper ::selection{background:var(--paper-ink);color:var(--paper)} .manif{font-family:var(--dsp);font-weight:600;font-size:clamp(34px,5.2vw,64px);line-height:1.03;letter-spacing:-.03em;max-width:1020px;margin-top:30px} /* o sublinhado âmbar vai nas palavras, não no .uln: splitVisionHeadline() transforma cada palavra num inline-block (precisa disso pro transform da revelação), e um text-decoration no contêiner só pinta o espaço entre eles — o traço aparecia como dois riscos soltos no meio da frase. */ .manif .uln,.manif .uln .vw{text-decoration:underline;text-decoration-color:#B4640A;text-underline-offset:6px} .visionP{margin-top:24px;font-size:clamp(15px,1.6vw,17px);color:var(--paper-mut);max-width:720px} #visionHeadline .vw{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(10px);transition:opacity .5s var(--ease),filter .5s var(--ease),transform .5s var(--ease)} #visionHeadline .vw.vwin{opacity:1;filter:blur(0);transform:none} .fnotes{margin-top:46px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-top:1px solid var(--paper-line);padding-top:20px} @media(max-width:760px){.fnotes{grid-template-columns:1fr}} .fnotes div{font-size:13.5px;color:var(--paper-mut);line-height:1.5} .fnotes b{font-family:var(--mn);color:#B4640A;font-weight:500;margin-right:6px} /* ---------- 01 serviços ---------- */ .servgrid{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)} @media(max-width:900px){.servgrid{grid-template-columns:1fr}} .servcard{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:32px 32px 40px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:400px} .servcard .sv-bg{position:absolute;inset:0;z-index:1;background:var(--surface)} .servcard .sv-hl{position:absolute;inset:0;z-index:1;opacity:0;transform:scale(1.1);transition:opacity .6s var(--ease),transform .6s var(--ease); background-image:radial-gradient(rgba(255,159,69,.16) 1px,transparent 1px),radial-gradient(120% 100% at 100% 0%,rgba(255,159,69,.18),transparent 60%); background-size:14px 14px,auto} .servcard:hover .sv-hl,.servcard:focus-within .sv-hl{opacity:1;transform:scale(1)} .servcard .sv-content{position:relative;z-index:2} .servcard .sv-lbl{display:flex;align-items:center;gap:8px;font-family:var(--mn);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)} .servcard .sv-lbl i{color:var(--acc);font-style:normal;font-size:10px} .servcard .sv-desc{margin-top:14px;font-size:14px;color:var(--mut);max-width:340px} .servcard .sv-num{position:relative;z-index:2;font-family:var(--dsp);font-size:clamp(90px,11vw,190px);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--stroke);transition:color .4s var(--ease);margin:16px 0} .servcard:hover .sv-num,.servcard:focus-within .sv-num{color:rgba(255,159,69,.14);-webkit-text-stroke:1px var(--acc)} .servcard .sv-list{list-style:none;position:relative;z-index:2;border-left:2px solid var(--stroke);padding-left:18px;display:flex;flex-direction:column;transition:border-color .3s} .servcard:hover .sv-list,.servcard:focus-within .sv-list{border-color:var(--acc)} /* `height` fixa quebrava assim que um item passava de uma linha: o texto transbordava e escrevia por cima do item seguinte. min-height mantém o ritmo de 24px dos itens curtos e deixa os longos crescerem. */ .servcard .sv-list li{min-height:24px;font-size:12.5px;color:var(--mut);line-height:1.5;padding:2px 0} /* ---------- 03 processo — infográfico de fluxo ---------- Sem painéis ilustrados: quatro cartões compactos ligados por conectores. O que carrega o significado é a ligação entre eles, não uma imagem dentro de cada um. No desktop os quatro ficam lado a lado e os conectores são horizontais; abaixo de 900px viram uma coluna e os conectores giram 90°. */ /* gap na grade (e não padding no passo) pra que os quatro cartões tenham exatamente a mesma largura — com padding, o último ficava mais largo. */ .flow{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:38px} .fstep{position:relative;display:flex;align-items:stretch} .fcard{flex:1;display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);background:linear-gradient(180deg,#131a23 0%,#0f141a 100%);padding:20px 18px 24px;transition:border-color .3s var(--ease),transform .3s var(--ease)} .fcard:hover{border-color:var(--acc);transform:translateY(-3px)} .fmark{display:flex;align-items:center;justify-content:space-between} .fnum{font-family:var(--mn);font-size:11.5px;letter-spacing:.1em;color:var(--acc)} .fglyph{width:26px;height:26px;flex:none;opacity:.85} .fglyph *{stroke:var(--stroke);fill:none;stroke-width:1.6;stroke-linecap:round} .fcard:hover .fglyph *{stroke:var(--acc)} .fcard h3{font-family:var(--dsp);font-weight:600;font-size:17px;text-transform:uppercase;letter-spacing:-.01em} .fcard p{font-size:13px;line-height:1.5;color:var(--mut)} /* conector: trilho fino + ponto âmbar que corre de um cartão ao outro */ .fconn{position:absolute;right:-38px;top:50%;width:38px;height:1px;background:var(--line);transform:translateY(-50%)} .fconn::after{content:'';position:absolute;right:0;top:-3px;width:0;height:0;border-left:5px solid var(--stroke);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent} .fconn i{position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:var(--acc);opacity:0} .flow.in .fconn i{animation:fdot 2.6s var(--ease) infinite} .fstep:nth-child(2) .fconn i{animation-delay:.28s} .fstep:nth-child(3) .fconn i{animation-delay:.56s} @keyframes fdot{0%{opacity:0;transform:translateX(0)}12%{opacity:1}62%{opacity:1;transform:translateX(33px)}72%{opacity:0;transform:translateX(33px)}100%{opacity:0;transform:translateX(33px)}} @media(max-width:900px){ .flow{grid-template-columns:1fr;gap:34px} .fconn{right:auto;left:32px;top:auto;bottom:-34px;width:1px;height:34px;transform:none} .fconn::after{right:auto;left:-3px;top:auto;bottom:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:5px solid var(--stroke);border-bottom:none} .fconn i{top:0;left:-2px} @keyframes fdot{0%{opacity:0;transform:translateY(0)}12%{opacity:1}62%{opacity:1;transform:translateY(29px)}72%{opacity:0;transform:translateY(29px)}100%{opacity:0;transform:translateY(29px)}} } /* ---------- index rows (legado — sem consumidor; mantido caso volte a servir de referência) ---------- */ /* ---------- gargalos ---------- Terceiro tratamento de fundo da página (os outros dois são o .paper da visão e o .amberblk do contato). Aqui a razão não é variedade: é fazer o visitante parar. A faixa sai do fundo padrão, o título é o maior da página depois do hero e cada dor é uma linha grande e clicável. */ .gargblk{position:relative;background:linear-gradient(180deg,#12171f 0%,#0d1116 100%);border-block:1px solid var(--line)} .gargblk::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 60% at 50% 0%,rgba(255,159,69,.07) 0%,transparent 70%)} .gargblk .wrap{position:relative} .gargblk .big{font-size:clamp(32px,6vw,64px)} .garglead{margin-top:16px;font-size:clamp(16px,2.1vw,20px);color:var(--ink);max-width:56ch;text-wrap:pretty} .garglead b{color:var(--acc);font-weight:600} /* ---------- gargalos accordion ---------- */ .acc{margin-top:34px;border-top:1px solid var(--line)} .arow{border-bottom:1px solid var(--line)} .arow>button{width:100%;background:none;border:none;color:inherit;display:grid;grid-template-columns:70px 1fr 40px;gap:18px;align-items:center;padding:clamp(20px,2.6vw,30px) 10px;cursor:pointer;text-align:left;transition:padding .25s var(--ease)} .arow>button:hover{padding-left:22px} .arow .num{font-family:var(--mn);font-size:12px;color:var(--im)} .arow h3{font-family:var(--dsp);font-weight:600;font-size:clamp(19px,3vw,32px);letter-spacing:-.02em;line-height:1.08;text-transform:uppercase} .arow .pm{font-family:var(--mn);font-size:20px;color:var(--acc);transition:transform .3s var(--ease)} .arow.open .pm{transform:rotate(45deg)} .arow .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)} .arow.open .body{grid-template-rows:1fr} .arow .body>div{overflow:hidden} .abody{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding:6px 10px 34px 98px} @media(max-width:760px){.abody{grid-template-columns:1fr;padding-left:10px}} .abody .lb{font-family:var(--mn);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--im);margin-bottom:8px} .abody .lb.am{color:var(--acc)} .abody p{font-size:14.5px;color:var(--mut)} .abody p b{color:var(--ink)} .arow.open>button h3{color:var(--acc)} /* barra âmbar na linha aberta: marca onde o visitante está sem mover nada */ .arow{position:relative} .arow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--acc);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease)} .arow.open::before{transform:scaleY(1)} /* ponte pro catálogo: a dor não termina no texto, termina numa peça real */ .sollink{grid-column:1/-1;margin-top:6px;display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--stroke);color:var(--ink);font-family:var(--mn);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;padding:11px 15px;cursor:pointer;transition:border-color .22s,color .22s,background .22s;justify-self:start} .sollink:hover{border-color:var(--acc);color:var(--acc);background:rgba(255,159,69,.07)} .sollink b{font-weight:400;color:var(--acc);text-transform:none;letter-spacing:0;font-size:12.5px} /* ---------- ao vivo (whatsapp) — CSS mantido; a seção que a consome está comentada no HTML (ver #aovivo). Não é peso relevante e a simulação volta depois. ---------- */ .wa-layout{display:grid;grid-template-columns:1fr 340px;gap:clamp(30px,5vw,70px);align-items:center;margin-top:44px} @media(max-width:860px){.wa-layout{grid-template-columns:1fr}} .rec{display:inline-flex;align-items:center;gap:8px;font-family:var(--mn);font-size:11px;letter-spacing:.16em;color:var(--acc);border:1px solid rgba(255,159,69,.35);padding:6px 10px;margin-bottom:18px} .rec i{width:8px;height:8px;border-radius:50%;background:#ff4545;animation:pulse 1.4s infinite} @keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}} .wa-tabs{display:flex;gap:0;margin:20px 0 18px;border:1px solid var(--line);width:max-content} .wa-tab{font-size:13.5px;font-weight:600;padding:10px 18px;border:none;color:var(--mut);cursor:pointer;background:transparent;transition:all .25s var(--ease)} .wa-tab.active{color:var(--accink);background:var(--acc)} .wa-feature{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:12px} .wa-feature li{display:flex;gap:12px;font-size:14.5px;color:var(--mut)} .wa-feature li b{color:var(--ink);font-weight:600} .wa-feature .dot{color:var(--acc);flex:none;margin-top:2px} .phone-col{position:relative} .phone-cap{position:absolute;right:-14px;top:50%;transform:rotate(90deg) translateX(-50%);transform-origin:right top;font-family:var(--mn);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--im);white-space:nowrap} @media(max-width:860px){.phone-cap{display:none}} .phone{width:320px;max-width:100%;margin:0 auto;background:#000;border-radius:38px;padding:10px;box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px var(--line);position:relative} .phone-scr{background:var(--wa-bg);border-radius:30px;overflow:hidden;height:600px;display:flex;flex-direction:column;position:relative;background-image:radial-gradient(rgba(255,255,255,.02) 1px,transparent 1px);background-size:18px 18px} .wa-top{background:#202C33;padding:12px 14px;display:flex;align-items:center;gap:11px;z-index:2} .wa-av{width:38px;height:38px;border-radius:50%;background:var(--surface2);display:flex;align-items:center;justify-content:center} .wa-top .nm{font-size:14.5px;font-weight:600;color:#E9EDF2} .wa-top .st{font-size:11.5px;color:#8fa3ad} .wa-body{flex:1;padding:14px 12px;overflow:hidden;display:flex;flex-direction:column;gap:8px;justify-content:flex-end;font-family:'Inter',system-ui,sans-serif} .bub{max-width:78%;padding:8px 11px 6px;border-radius:10px;font-size:13.5px;line-height:1.4;position:relative;opacity:0;transform:translateY(8px) scale(.98);animation:bubIn .34s var(--ease) forwards;color:#E9EDF2;box-shadow:0 1px 1px rgba(0,0,0,.2)} @keyframes bubIn{to{opacity:1;transform:none}} .bub.in-b{background:var(--wa-in);align-self:flex-start;border-top-left-radius:3px} .bub.out-b{background:var(--wa-out);align-self:flex-end;border-top-right-radius:3px} .bub .t{font-size:9.5px;color:rgba(233,237,242,.5);float:right;margin:5px 0 -2px 10px} .typing{align-self:flex-start;background:var(--wa-in);padding:11px 14px;border-radius:10px;border-top-left-radius:3px;display:flex;gap:4px;opacity:0;animation:bubIn .3s var(--ease) forwards} .typing i{width:6px;height:6px;border-radius:50%;background:#8fa3ad;animation:td 1.2s infinite} .typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s} @keyframes td{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .wa-badge{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--mn);font-size:9.5px;letter-spacing:.08em;background:rgba(255,159,69,.16);color:var(--acc);border:1px solid rgba(255,159,69,.3);padding:4px 8px} /* ---------- catálogo (opus table) ---------- */ .grp-label{margin-top:34px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mn);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--im)} /* respiro maior entre os dois grupos: o primeiro encosta no subtítulo da seção, o segundo precisa se ler como uma virada de assunto. */ .grp-label~.grp-label{margin-top:clamp(56px,7vw,96px)} .ops{margin-top:8px} /* .op virou div (o link de demo abaixo precisa de um de verdade dentro da linha, e um não pode ir dentro de um