@charset "UTF-8"; /* =========================================================================== MCJC Engenharia — folha do site institucional/de vendas. Escrita do zero, de propósito. O main.css do template de 2023 tem 79 KB e 3.547 linhas para uma página só, e a maior parte é de páginas que nem existem aqui (reseller, blog, vps) mais as variáveis quebradas do tema (--theme-two com 8 dígitos, --secoundary-one valendo "#2f16"). Carregar aquilo de novo significaria arrastar o modal de login em inglês, o odometer e o nice-select junto — peso morto que o visitante baixa no celular, no canteiro, com sinal ruim. O que foi mantido é o que dá a CARA da marca e está documentado na receita visual: o ciano #60d4e3 mandando sozinho, o gradiente de três paradas só em elemento interativo, a inclinação skew que some no hover, o triângulo em clip-path separando seção, o relevo inset dos cartões brancos e a ilustração isométrica repetida a 10% como marca d'água. =========================================================================== */ /* --------------------------------------------------------------- tokens */ :root{ /* A cor-assinatura. No template ela era escrita crua em dez lugares (main.css:262, :1063, :2052...); aqui mora num token só para que trocar a marca não vire caça ao hexadecimal. */ --ciano:#60d4e3; --ciano-vivo:#00cdfb; --ciano-grad:#00d7ff; /* Ciano escurecido para TEXTO sobre fundo claro. O #60d4e3 puro sobre branco dá 1,75:1 de contraste — reprova até para título grande, que exige 3:1. O template escrevia título de card nessa cor e o texto simplesmente sumia em tela de celular no sol. Mesmo matiz, luminância baixada até 6,1:1. */ --ciano-texto:#0b6c7a; --roxo:#433ac1; --marinho:#0b0483; /* O mesmo roxo do gradiente, bem mais escuro (a pedido do dono, 23/09/2026, em duas rodadas: #070251 e, por ainda estar claro demais, este). A barra de contato e o rodapé são as duas faixas cheias do site, uma em cada ponta; no tom claro elas competiam com a capa, que é a única coisa que deveria puxar o olho na primeira tela. Mesmo matiz, só luminância — a marca continua a mesma, e o texto claro por cima ganha contraste em vez de perder. Fica em variável própria porque `--marinho` também pinta link, foco e botão de contorno: escurecer tudo mudaria o site inteiro para consertar duas faixas. */ --marinho-escuro:#050130; --tinta:#090303; --texto:#3b3b45; --papel:#fff; --neve:#f4f7fb; --linha:#ebebeb; /* O véu marinho das seções com foto, guardado em componentes RGB porque cada seção usa uma opacidade diferente: quanto mais texto por cima, mais opaco. */ --veu:4,42,66; /* A sombra dos cartões brancos — e de tudo o que é "caixa" no site: cartão, cabeçalho, item de dúvida, formulário e caixa de contato usam esta mesma variável, e é ela que faz todos parecerem do mesmo site. Era o par `inset` do tema de 2023 (relevo esculpido por dentro). Saiu a pedido do dono, em 23/09/2026: por ser interna, a sombra só se via em dois lados e o cartão parecia chapado no fundo claro. Agora são três camadas, todas sem deslocamento lateral, para a sombra cercar as QUATRO bordas: um fio de contorno que define a borda, um halo curto que descola do fundo, e uma sombra longa e baixa que dá a altura. */ --relevo:0 0 0 1px rgba(13,27,42,.055), 0 0 14px rgba(13,27,42,.05), 0 8px 26px rgba(11,4,131,.10); --grad:linear-gradient(90deg,#433ac1 0%,#0b0483 30%,#00d7ff 100%); /* Gradiente do botão principal: a receita manda inverter (ciano na esquerda, roxo na direita). Com as paradas cruas o rótulo branco cai em cima do #00d7ff puro, 1,73:1 — ilegível. Puxando a parada ciana para -20% ela continua dando o tom na borda esquerda, mas o ponto mais claro que o texto realmente pisa fica em 4,6:1, acima do mínimo AA. */ --grad-btn:linear-gradient(95deg,#00d7ff -20%,#0b0483 24%,#433ac1 108%); --raio:14px; --env:1200px; } /* ----------------------------------------------------------------- base */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:1.0625rem;line-height:1.72; color:var(--texto);background:var(--papel); -webkit-font-smoothing:antialiased; } img{max-width:100%;height:auto;display:block} ul{margin:0;padding:0;list-style:none} p{margin:0 0 1rem} a{color:var(--marinho);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{margin:0 0 .6em;color:var(--tinta);font-weight:600;line-height:1.16; letter-spacing:-.015em} /* Escala fluida em vez dos quatro breakpoints do template. Lá h1 saltava de 76px para 44px em degraus, e nos degraus intermediários (tablet deitado) o título de duas palavras longas em português estourava a coluna. */ h1{font-size:clamp(2.15rem,5.2vw,4.35rem);font-weight:700;letter-spacing:-.03em} h2{font-size:clamp(1.8rem,3.9vw,3.25rem)} h3{font-size:clamp(1.15rem,1.9vw,1.5rem)} h4{font-size:1.06rem} /* O foco tem de ser visível E ter 3:1 contra o fundo. Ciano puro como anel de foco dá ~2:1 no branco e sumiria justamente para quem navega por teclado; por isso o anel é marinho no claro e vira ciano só onde o fundo é escuro (regra mais abaixo). */ :focus-visible{outline:3px solid var(--marinho);outline-offset:2px;border-radius:4px} .env{max-width:var(--env);margin:0 auto;padding:0 16px} @media(min-width:640px){.env{padding:0 24px}} .oculto-visual{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Pular para o conteúdo: sem isso o leitor de tela e o teclado atravessam a barra de contato, o logo e cinco itens de menu em TODA visita. */ .pular{position:absolute;left:16px;top:-64px;z-index:200;background:var(--marinho); color:#fff;padding:12px 18px;border-radius:8px;transition:top .2s} .pular:focus{top:12px} /* ------------------------------------------------------------- ícone SVG */ .ico{width:1.25em;height:1.25em;flex:0 0 auto;stroke:currentColor;fill:none; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} /* ---------------------------------------------------------------- botões */ /* A inclinação de -21deg com o rótulo voltando ao prumo em +21deg é o que dá identidade ao botão. Sem ela o site vira template genérico — é o item 4 da receita e foi o primeiro detalhe testado. */ .btn{ display:inline-flex;align-items:center;gap:.55rem; padding:14px 30px;border:0;border-radius:10px;cursor:pointer; font:600 1.0625rem/1.25 Montserrat,sans-serif; transform:skew(-21deg); transition:transform .4s ease,filter .25s ease,box-shadow .25s ease; text-decoration:none; /* 48px de altura mínima: alvo de toque de quem está de luva no canteiro. */ min-height:48px; } .btn>span{display:inline-flex;align-items:center;gap:.5rem;transform:skew(21deg)} .btn:hover{text-decoration:none;transform:skew(0deg);filter:brightness(.92)} .btn:active{transform:skew(0deg) translateY(1px)} /* Os +21deg do `` existem SÓ para anular os -21deg da moldura. Quando a moldura se endireita no hover não sobra o que anular, e o contra-giro passa a ser a única inclinação em cena: a moldura fica reta e a palavra deitada — o "torto ao passar o mouse" que o dono apontou. As duas têm de voltar ao prumo juntas, e na mesma duração, senão o texto balança no meio do caminho. */ .btn:hover>span,.btn:focus-visible>span,.btn:active>span{transform:skew(0deg)} .btn>span{transition:transform .4s ease} .btn--grad{background:var(--grad-btn);color:#fff; box-shadow:0 8px 22px rgba(11,4,131,.28)} .btn--grad:hover{box-shadow:0 12px 28px rgba(11,4,131,.34)} /* Botão secundário no claro: contorno marinho, 8:1 de contraste. O hover rosa→lilás do template (#f57171→#7c84f4) foi jogado fora — destoava de toda a paleta e era resquício declarado do tema comprado. */ .btn--linha{background:transparent;color:var(--marinho); box-shadow:inset 0 0 0 2px var(--marinho)} .btn--linha:hover{background:var(--marinho);color:#fff;filter:none} .btn--g{padding:17px 38px;font-size:1.125rem} /* Sobre fundo escuro a dupla inverte: o contorno vira ciano, que ali rende 8,5:1, e o anel de foco acompanha. */ .escura .btn--linha,.rodape .btn--linha{color:var(--ciano);box-shadow:inset 0 0 0 2px var(--ciano)} .escura .btn--linha:hover{background:var(--ciano);color:#062231} .escura :focus-visible,.rodape :focus-visible{outline-color:var(--ciano)} /* ---------------------------------------------------------------- seções */ /* overflow:hidden fica na SEÇÃO, nunca no body. Colocar overflow-x:hidden no body transforma o body em contexto de rolagem e o cabeçalho sticky para de grudar — defeito clássico e silencioso, aparece só depois de publicado. As lascas diagonais e os cartões inclinados são justamente o que precisa de recorte, e eles moram aqui dentro. */ .secao{position:relative;overflow:hidden;padding:clamp(64px,8vw,112px) 0} .secao--neve{background:var(--neve)} section[id],footer[id],div[id].capa{scroll-margin-top:100px} /* O separador de seção não é onda nem SVG: é um triângulo recortado por clip-path, exatamente como o tema faz em sete lugares. Fica como lasca lateral (largura pequena, altura cheia) para não roubar leitura do texto. */ .lasca-e::before,.lasca-d::after{ content:"";position:absolute;top:0;height:100%;width:5%;max-width:90px; background:var(--ciano);border-radius:10px;pointer-events:none;opacity:.9; z-index:0; } /* Sem estas duas linhas a lasca passa POR CIMA da terceira coluna de cartões: o pseudo-elemento é posicionado e vem depois no documento, então vence os cartões (que também são position:relative) no empilhamento. O sintoma é o canto direito do cartão comido por um triângulo ciano. */ .secao>.env{position:relative;z-index:1} .lasca-e::before{left:0;clip-path:polygon(100% 0,0 100%,100% 100%)} .lasca-d::after{right:0;clip-path:polygon(0 0,0 100%,100% 100%)} /* Abaixo de 768px a lasca vira uma tira gorda sobre o texto em coluna única; some. */ @media(max-width:767px){.lasca-e::before,.lasca-d::after{display:none}} /* Seção escura = foto em cover + véu marinho por cima. O blur de backdrop-filter que o tema usava foi descartado: é das coisas mais caras que existem para a GPU de um Android barato, e esse é o aparelho de quem abre o site na obra. A cor e a opacidade do véu são as mesmas. */ .escura{color:#e8f1f7;background-color:#062231;background-size:cover; background-position:center} .escura h1,.escura h2,.escura h3,.escura h4{color:#fff} .escura .olho{color:var(--ciano)} .escura a{color:var(--ciano)} @media(min-width:992px){ /* background-attachment:fixed só no desktop: no iOS ele é ignorado e no Android trava a rolagem, e a seção fica com a foto esticada errada. */ .escura{background-attachment:fixed} } .cabeca{max-width:720px;margin:0 auto clamp(36px,4vw,60px);text-align:center} .cabeca p{font-size:1.125rem;margin:0} .olho{display:inline-block;margin:0 0 .7rem;font-size:.82rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--ciano-texto)} /* ------------------------------------------------- barra de contato fixa */ .barra{background:var(--marinho-escuro);color:#dfe6ff;font-size:.86rem} .barra .env{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center; justify-content:flex-end;min-height:42px;padding-top:6px;padding-bottom:6px} .barra a{display:inline-flex;align-items:center;gap:.45rem;color:#fff;font-weight:500} .barra a:hover{color:var(--ciano);text-decoration:none} @media(max-width:519px){.barra .env{justify-content:center}} /* --------------------------------------------------------- cabeçalho fixo */ /* Sticky, não fixed: fixed obrigaria a chutar um padding-top no body, e o chute erra sempre que a barra de contato quebra em duas linhas no celular — sobra ou falta um vão em cima da capa. */ .cabecalho{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96); backdrop-filter:blur(8px);transition:box-shadow .25s ease} /* O gradiente-assinatura entra como fio de 3px no pé do cabeçalho. Pintar o cabeçalho inteiro com ele, como o .menu-fixed do tema fazia, jogaria os itens de menu brancos em cima da ponta #00d7ff do gradiente — 2,4:1, ilegível justamente no elemento que fica na tela o tempo todo. */ .cabecalho::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px; background:var(--grad)} .cabecalho.fixa{box-shadow:0 10px 30px rgba(9,3,3,.12)} .topo{display:flex;align-items:center;gap:16px;min-height:74px} .cabecalho.fixa .topo{min-height:64px} .topo,.cabecalho.fixa .topo{transition:min-height .25s ease} .logo{display:block;flex:0 0 auto;margin-right:auto} .logo img{width:auto;height:46px;object-fit:contain} .cabecalho.fixa .logo img{height:40px} .menu{display:flex;align-items:center;gap:26px} .menu a{color:var(--texto);font-weight:500;font-size:.98rem;padding:6px 0; position:relative} .menu a:hover{color:var(--marinho);text-decoration:none} /* Sublinhado ciano nasce do centro: é o mesmo ciano-assinatura em papel de decoração, onde a regra de contraste de texto não se aplica. */ .menu a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:2px; background:var(--ciano);transition:left .25s,right .25s} .menu a:hover::after,.menu a:focus-visible::after{left:0;right:0} .hamburguer{display:none;align-items:center;justify-content:center; width:48px;height:48px;border:0;border-radius:10px;cursor:pointer; background:var(--papel);box-shadow:var(--relevo);color:var(--marinho)} .hamburguer .ico{width:26px;height:26px} .hamburguer .ico-fechar{display:none} .hamburguer[aria-expanded="true"] .ico-menu{display:none} .hamburguer[aria-expanded="true"] .ico-fechar{display:block} @media(max-width:991px){ .hamburguer{display:inline-flex} /* Fechado é display:none, não o atributo `hidden` nem opacidade. Com display:none o menu sai também da árvore de acessibilidade — leitor de tela e tabulação não caem dentro de uma gaveta fechada. E, como quem fecha é o CSS e não o JavaScript, a lista não pisca na tela no carregamento antes de o script rodar. */ .menu{display:none;position:absolute;left:0;right:0;top:100%; flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 18px; background:var(--papel);box-shadow:0 18px 36px rgba(9,3,3,.16); border-top:1px solid var(--linha)} .menu.aberto{display:flex} .menu a{padding:14px 4px;border-bottom:1px solid var(--linha);font-size:1.05rem} .menu a::after{display:none} .menu .btn{margin-top:14px;justify-content:center} /* Sem JavaScript o menu tem de aparecer inteiro: página que esconde a navegação atrás de script vira beco sem saída quando o arquivo não baixa. */ .sem-js .menu{display:flex;position:static;box-shadow:none;border-top:0;padding:0 0 12px} .sem-js .hamburguer{display:none} } @media(max-width:991px){.topo{position:relative;flex-wrap:wrap}} /* O padding lateral aqui é função do SKEW, não gosto: o botão é um paralelogramo (skewX(-21deg)) e o texto dentro dele volta ao prumo com o skew contrário. Quem está torto é a MOLDURA — então, perto do topo e da base, a borda inclinada avança sobre o espaço do texto em tan(21°) × altura ÷ 2 ≈ 8px de cada lado. Com os 24px de antes, o "e" final de "Falar com a gente" encostava na borda e parecia cortado no canto superior direito; é o único botão do site com padding apertado, e por isso o único em que o defeito aparecia. 34px devolve a folga que o hero (38px) já tinha. */ .topo .btn{padding:12px 34px;font-size:.98rem} /* Sem estas duas linhas o CTA do cabeçalho sai com texto CINZA-ESCURO em cima do gradiente roxo — ilegível, e logo no único botão que aparece em todas as telas antes de qualquer rolagem. A causa é especificidade, não descuido: `.btn--grad` pinta `color:#fff` com um seletor de peso (0,1,0), e `.menu a` (linha 235), que existe para os links escuros do menu sobre o cabeçalho branco, pesa (0,1,1) — ganha por um elemento. O botão é `` dentro de `.menu`, então herdava a cor dos links. `.topo .btn--grad` pesa (0,2,0) e devolve o branco sem mexer no resto. A sublinha animada de `.menu a::after` pela mesma razão não tem o que fazer num botão sólido: rasgava uma faixa ciano no meio do gradiente no hover. */ .topo .btn--grad, .topo .btn--grad:hover, .topo .btn--grad:focus-visible, .topo .btn--grad:active{color:#fff} .topo .btn::after{display:none} /* Os três estados acima não são zelo: sem eles o texto SOME ao passar o mouse. `.menu a:hover` (linha 237) pinta o link de `--marinho` para o menu escuro sobre o cabeçalho branco, e pseudo-classe conta como classe na especificidade — (0,2,1) contra os (0,2,0) de `.topo .btn--grad`. No hover o branco perdia e o texto virava azul-marinho em cima do gradiente azul-marinho: o botão ficava aparentemente vazio, que é pior do que feio, porque parece quebrado. */ /* ------------------------------------------------------------------ capa */ /* O tema punha um véu chapado de 30% sobre a foto do hero. Com 30% o texto branco depende da sorte do trecho da foto que calhar atrás dele. Aqui o véu é um degradê horizontal: pesado onde o texto mora (esquerda) e leve do meio para a direita, onde a foto continua aparecendo. */ .capa{ position:relative;color:#fff; background: linear-gradient(90deg,rgba(var(--veu),.93) 0%,rgba(var(--veu),.86) 42%, rgba(var(--veu),.55) 74%,rgba(var(--veu),.32) 100%), #062231 url("../img/banner/banner5.png") center/cover no-repeat; padding:clamp(72px,10vw,140px) 0 clamp(80px,11vw,150px); overflow:hidden; } .capa h1{color:#fff;max-width:17ch} .capa .selo{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1.1rem; padding:8px 16px;border-radius:999px;font-size:.84rem;font-weight:600; letter-spacing:.06em;text-transform:uppercase; background:rgba(96,212,227,.16);color:var(--ciano); box-shadow:inset 0 0 0 1px rgba(96,212,227,.45)} .capa__sub{max-width:56ch;font-size:clamp(1.05rem,1.6vw,1.375rem);color:#dceaf3; line-height:1.6} .capa__btns{display:flex;flex-wrap:wrap;gap:16px;margin:2rem 0 1.4rem} .capa__nota{margin:0;font-size:.95rem;color:#b9d2e0} /* A capa é escura mas NÃO usa a classe .escura (ela traz fundo próprio), e por isso não herdava a inversão do botão de contorno: o "Falar com a gente" nascia marinho sobre foto marinha, praticamente invisível, bem no segundo CTA da primeira dobra. */ .capa .btn--linha{color:#fff;box-shadow:inset 0 0 0 2px var(--ciano)} .capa .btn--linha:hover{background:var(--ciano);color:#062231;filter:none} .capa :focus-visible{outline-color:var(--ciano)} /* ------------------------------------------------ cartões (relevo comum) */ .cartao{position:relative;background:var(--papel);border-radius:var(--raio); box-shadow:var(--relevo);padding:30px 26px;overflow:hidden; transition:transform .4s ease,box-shadow .4s ease} .escura .cartao{background:rgba(255,255,255,.055);color:#e8f1f7; box-shadow:inset 0 0 0 1px rgba(96,212,227,.28)} /* A ilustração isométrica entra duas vezes no mesmo cartão: inteira como miniatura e de novo atrás, no canto, a 10%. É profundidade de graça, sem baixar imagem nova — o arquivo já está no cache por causa da miniatura. */ .fantasma{position:absolute;top:-14px;right:-18px;width:150px;opacity:.1; pointer-events:none;filter:grayscale(1) contrast(1.4)} .escura .fantasma{opacity:.14;filter:none} /* ------------------------------------------------------ grade de sistemas */ .sistemas{display:grid;gap:22px; grid-template-columns:repeat(auto-fit,minmax(248px,1fr))} /* O cartão NÃO é inclinado. Era: `skewX(-4deg)` nele e `skewX(4deg)` em cada filho para devolver o conteúdo ao prumo — o truque que o tema de 2023 usa. Saiu em 23/09/2026, e o motivo é um defeito, não gosto. A compensação `.sist>*` pesa (0,1,0), igual a `.btn`, e vem depois no arquivo: ela não SOMAVA ao `skew(-21deg)` do botão, ela o APAGAVA. O `` de dentro continuava aplicando os +21deg que só existem para anular os -21 perdidos, e o texto do botão saía deitado — o "itálico" que o dono apontou. E havia um segundo andar: a animação de entrada (`.com-js .rev.vista`) termina com `transform:none`, que apaga o `-4deg` do PRÓPRIO cartão. Ou seja, a inclinação que justificava a compensação nunca chegava à tela, mas a compensação ficava — o texto torto era o único resto visível de um efeito que não acontecia. Consertar mantendo o skew exigiria as duas peças concordando em três estados (normal, hover, celular) e mais a animação; sem ele, `.btn` volta a ser `.btn` em todo lugar. */ .sist{display:flex;flex-direction:column} .sist:hover,.sist:focus-within{box-shadow:var(--relevo),0 18px 40px rgba(11,4,131,.14)} .sist__mini{width:64px;height:64px;object-fit:contain;margin-bottom:14px} .sist h3{margin-bottom:.25rem} /* Altura mínima igual para as quatro frases "feito para quem...": elas têm 2 e 3 linhas, e sem isso a lista de sinais de cada cartão começa numa altura diferente, o que atrapalha justamente a comparação de cinco segundos entre os quatro sistemas. */ .sist__para{font-size:.95rem;color:var(--texto);margin-bottom:1rem;min-height:5.2em} .sist__sinais{margin:0 0 1.5rem;display:grid;gap:.55rem;font-size:.95rem} .sist__sinais li{display:flex;gap:.55rem;align-items:flex-start;line-height:1.5} .sist__sinais .ico{color:var(--ciano-texto);margin-top:.22em} .sist .btn{margin-top:auto;align-self:flex-start;padding:12px 22px;font-size:.95rem} /* No celular os quatro cartões viram uma coluna só: a altura mínima que alinhava as frases "feito para quem..." lado a lado perde a função e vira espaço vazio no meio de cada cartão. */ @media(max-width:767px){ .sist__para{min-height:0} } /* ------------------------------------------------------ seção-anúncio */ .anuncio__topo{max-width:780px;margin:0 auto clamp(34px,4vw,54px);text-align:center} .anuncio__topo h2{margin-bottom:.35rem} .anuncio__topo .sub{font-size:1.125rem;font-weight:600;color:var(--ciano-texto);margin:0} .escura .anuncio__topo .sub{color:var(--ciano)} .anuncio__grade{display:grid;gap:24px;align-items:start; grid-template-columns:minmax(0,5fr) minmax(0,7fr)} @media(max-width:899px){.anuncio__grade{grid-template-columns:1fr}} .bloco h3{font-size:1.18rem;margin-bottom:1.1rem} /* As dores são falas, não features: entram com travessão, como se o engenheiro estivesse contando. Elas vinham em itálico para marcar essa diferença. Saiu: o dono pediu que NENHUM texto do site use itálico (23/09/2026). O travessão e a ausência do ícone de check bastam para separá-las — check é para o que o sistema entrega. */ .lista-dor{display:grid;gap:.9rem} .lista-dor li{position:relative;padding-left:1.5rem;line-height:1.55} .lista-dor li::before{content:"—";position:absolute;left:0; color:var(--ciano-texto);font-weight:700} .escura .lista-dor li::before{color:var(--ciano)} .lista-ok{display:grid;gap:.85rem;margin-top:1.2rem} .lista-ok li{display:flex;gap:.7rem;align-items:flex-start;line-height:1.55} .lista-ok .ico{color:var(--ciano-texto);margin-top:.3em;width:1.15em;height:1.15em} .escura .lista-ok .ico{color:var(--ciano)} .anuncio__cta{margin-top:clamp(30px,4vw,48px);text-align:center} .anuncio__cta .nota{margin:1rem 0 0;font-size:.95rem;color:var(--texto)} .escura .anuncio__cta .nota{color:#bcd4e2} /* ------------------------------------------------------------ provas */ .grade-3{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))} .prova h3{font-size:1.1rem;margin-bottom:.5rem} .prova p{margin:0;font-size:.97rem} /* --------------------------------------------------------------- pessoas */ /* Sem foto de propósito: hoje os dois sócios aparecem com a MESMA imagem de banco (imguser.png), e retrato repetido é o sinal que mais denuncia template comprado. Monograma não mente. */ .pessoa{display:flex;gap:20px;align-items:flex-start} .pessoa__sigla{flex:0 0 auto;width:78px;height:78px;border-radius:18px; display:grid;place-items:center;background:var(--grad);color:#fff; font-weight:700;font-size:1.6rem;letter-spacing:.04em} .pessoa h3{margin-bottom:.1rem} .pessoa .cargo{display:block;margin-bottom:.7rem;font-size:.88rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--ciano)} .pessoa p{margin:0;font-size:.97rem} @media(max-width:479px){ .pessoa{flex-direction:column;gap:14px} .pessoa__sigla{width:64px;height:64px;font-size:1.35rem} } /* -------------------------------------------------------------- serviços */ .servico{display:flex;flex-direction:column} .servico__ico{width:54px;height:54px;border-radius:14px;display:grid;place-items:center; background:var(--grad);color:#fff;margin-bottom:16px} .servico__ico .ico{width:26px;height:26px} .servico h3{font-size:1.06rem;margin-bottom:.45rem} .servico p{margin:0;font-size:.95rem} /* ------------------------------------------------------------- segurança */ .seg{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .nao-temos{margin-top:26px;padding:24px 26px;border-radius:var(--raio); background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .nao-temos h3{font-size:1.06rem;margin-bottom:.5rem} .nao-temos p{margin:0;color:#cfe0ea;font-size:.97rem} /* ------------------------------------------------------------------- FAQ */ .faq{max-width:840px;margin:0 auto;display:grid;gap:12px} .faq__item{background:var(--papel);border-radius:var(--raio);box-shadow:var(--relevo); overflow:hidden} /* O