/* ========================================================================= MODELO INSTITUCIONAL — folha única, sem framework e sem dependência. Ordem: variáveis · reset · tipografia · botões · cabeçalho · rodapé · home · páginas · componentes de texto · responsivo PARA TROCAR A CARA DO SITE, mexa só no bloco :root abaixo. O resto da folha lê essas variáveis — nenhuma cor está escrita duas vezes. ========================================================================= */ /* --- variáveis ---------------------------------------------------------- */ :root{ /* ---- IDENTIDADE DO SITE — troque só daqui ------------------------------ --cor cor dominante: cabeçalho, rodapé, chamadas, links de texto --cor2 versão mais clara dela, usada em degradês --cor-pe versão mais fechada, usada no rodapé --acento cor de ação: botões e realce do título. Use pouco. --sobre-acento texto que fica em cima do acento (precisa ser escuro) Outras combinações já testadas, é só trocar as quatro primeiras linhas: verde agro ....... #046A38 #0A8B4C #044524 acento #FFCC03 petróleo ......... #00695C #00897B #004D40 acento #FFC107 marinho .......... #12294A #1E3F6E #0B1B33 acento #E3B04B grafite .......... #23272B #3A4046 #16191C acento #FFC300 Confira o contraste em webaim.org/resources/contrastchecker antes de fechar: texto branco sobre --cor precisa dar 4,5:1 ou mais. --------------------------------------------------------------------- */ /* Werlich: grafite do logo preto + dourado (o mockup da marca é metálico). Cor forte só no acento e nas fotos; o fundo fica fechado. */ --cor:#1B1E24; --cor2:#2A2F38; --cor-pe:#111318; --sobre-acento:#17130A; /* A cor dominante ocupa as áreas grandes; o acento é só ação e realce. Se ele começar a aparecer em mais de um lugar por tela, está demais. */ /* Tinta escura das sobreposições: véu do topo, sombras e degradê dos cards. É uma versão bem fechada da --cor, em componentes, porque entra sempre com transparência. Troque junto com --cor. */ --veu:10,12,16; --cor-rgb:27,30,36; /* a mesma --cor, em componentes, para os degradês */ --acento:#E0B454; --acento-esc:#C99A38; --claro:#F2F5F7; --tinta:#0E1719; --cinza:#5B6B72; --linha:#DFE6EA; --branco:#fff; --sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif; --serif:'Source Serif 4',Georgia,'Times New Roman',serif; --raio:20px; --raio-g:24px; /* Escala fluida — tudo cresce junto, do celular ao ultrawide. A margem lateral também escala, senão em tela grande o conteúdo encosta nas bordas e em tela pequena fica sem respiro. */ --margem: clamp(20px, 4.5vw, 72px); --larg: min(calc(100% - var(--margem) * 2), clamp(1120px, 82vw, 1840px)); --larg-txt: min(calc(100% - var(--margem) * 2), clamp(680px, 58vw, 1040px)); /* Ritmo vertical: uma medida para seção, uma para bloco, uma para item. */ --esp-sec: clamp(64px, 7.5vw, 132px); --esp-bloco: clamp(28px, 3.2vw, 56px); --esp-item: clamp(14px, 1.4vw, 24px); /* Tipografia */ --t-base: clamp(16px, 0.28vw + 14.9px, 18px); --t-hero: clamp(32px, 4.6vw + 6px, 82px); --t-h2: clamp(26px, 1.9vw + 12px, 46px); --t-h3: clamp(18px, 0.5vw + 15px, 22px); --t-apoio: clamp(16px, 0.22vw + 15.1px, 17.5px); } /* --- reset -------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} /* O celular pinta a barra de status com a cor de fundo do topo da página. Com o fundo branco no html, sobrava uma faixa clara acima da foto. O verde aqui é o que faz a abertura encostar na borda de cima. O branco continua no body, que é o fundo do conteúdo. */ html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--cor)} /* O verde fica no body e o branco vai para o conteúdo: assim a cor que o celular amostra para pintar a barra de status é a da marca, sem depender do theme-color — que o Safari às vezes ignora enquanto tem a página em cache. */ body{font-family:var(--sans);font-size:var(--t-base);color:var(--tinta);background:var(--cor);-webkit-font-smoothing:antialiased;overflow-x:hidden} main{background:var(--branco)} /* A abertura carrega o verde do topo; o resto do conteúdo é branco. Não pintar seção por seção: a chamada final tem fundo próprio e texto branco, e forçar branco nela apagava o texto. */ .abertura{background:var(--cor)} img{display:block;max-width:100%;height:auto} /* Link não sublinha por padrão: neste layout quase todo link é um card, um item de menu ou um botão, e o traço só sujava. Onde link é link de verdade — dentro de .texto e .conteudo-pagina — o sublinhado volta, logo abaixo. */ a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} input,textarea,select{font:inherit} :focus-visible{outline:3px solid var(--acento);outline-offset:2px;border-radius:4px} .pular-conteudo{position:absolute;left:-9999px;top:0;background:var(--acento);color:var(--cor);padding:12px 20px;border-radius:0 0 12px 0;font-weight:600;z-index:200} .pular-conteudo:focus{left:0} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* --- estrutura ---------------------------------------------------------- */ .wrap{width:var(--larg);margin-inline:auto} .estreito{width:var(--larg-txt);margin-inline:auto} .sec{padding:var(--esp-sec) 0} .sec-b{padding:0 0 var(--esp-sec)} /* --- tipografia --------------------------------------------------------- */ .rot{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--cinza);margin-bottom:18px} .rot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cor)} .titulo-g{font-size:var(--t-h2);line-height:1.12;font-weight:700;letter-spacing:-.03em} /* É h2 de verdade: é o cabeçalho da seção para quem navega por títulos. margin-top zerada porque h2 traria a do navegador. */ .frase-g{font-size:clamp(23px,1.5vw + 14px,40px);line-height:1.26;font-weight:600;letter-spacing:-.025em;max-width:22ch;margin:0 0 var(--esp-item)} .apoio{font-size:var(--t-apoio);line-height:1.75;color:var(--cinza);max-width:62ch} .limao{color:var(--acento)} em.realce,.mk{font-style:normal;color:var(--acento)} /* --- botões ------------------------------------------------------------- */ /* Hover do botão cheio: uma maré escura sobe por baixo (é um círculo que escala, não uma cor animada — só transform), o texto clareia junto e a seta dá um passo. Tudo dentro do raio do botão. */ .btn-lim{background:var(--acento);color:var(--sobre-acento);font-weight:600;font-size:clamp(14px,.24vw + 13.2px,16.5px);padding:12px 20px;border-radius:999px;display:inline-flex;align-items:center;gap:9px;text-decoration:none;border:0; position:relative;overflow:hidden;isolation:isolate; transition:transform .3s cubic-bezier(.19,1,.22,1),color .25s ease} .btn-lim::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit; background:var(--cor);transform:scaleX(0);transform-origin:0 50%; transition:transform .38s cubic-bezier(.65,0,.35,1)} .btn-lim:hover,.btn-lim:focus-visible{transform:translateY(-2px);color:#fff} .btn-lim:hover::before,.btn-lim:focus-visible::before{transform:scaleX(1)} .btn-lim:active{transform:translateY(0) scale(.98)} .btn-lim .seta{width:24px;height:24px;border-radius:50%;background:var(--cor);color:var(--acento);display:flex;align-items:center;justify-content:center;font-size:13px;flex:none; transition:transform .3s cubic-bezier(.19,1,.22,1),background .25s ease,color .25s ease} .btn-lim:hover .seta,.btn-lim:focus-visible .seta{transform:translateX(3px);background:var(--acento);color:var(--sobre-acento)} .btn-lim.cheio{width:100%;justify-content:center} .btn-lim.grande{padding:14px 26px} /* O contorno preenche no hover, na mesma maré. */ .btn-out{border:1px solid var(--linha);color:var(--tinta);font-size:clamp(14px,.24vw + 13.2px,16.5px);font-weight:500;padding:12px 22px;border-radius:999px;text-decoration:none;display:inline-block; position:relative;overflow:hidden;isolation:isolate; transition:color .25s ease,border-color .25s ease,transform .3s cubic-bezier(.19,1,.22,1)} .btn-out::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit; background:var(--cor);transform:scaleX(0);transform-origin:0 50%; transition:transform .38s cubic-bezier(.65,0,.35,1)} .btn-out:hover,.btn-out:focus-visible{color:#fff;border-color:var(--cor);transform:translateY(-2px)} .btn-out:hover::before,.btn-out:focus-visible::before{transform:scaleX(1)} .btn-out.claro{border-color:rgba(255,255,255,.4);color:#fff} .btn-out.claro::before{background:#fff} .btn-out.claro:hover,.btn-out.claro:focus-visible{color:var(--cor);border-color:#fff} @media (prefers-reduced-motion:reduce){ .btn-lim,.btn-out,.btn-lim .seta{transition:none} .btn-lim::before,.btn-out::before{transition:none} } /* --- cabeçalho ---------------------------------------------------------- */ /* O cabeçalho acompanha a rolagem para a marca e o caminho de contato ficarem sempre à mão. Na home ele nasce transparente sobre a foto e só ganha fundo depois que a abertura sai de cena — pintar de cara mataria a foto de topo. */ .cab{position:sticky;top:0;z-index:60;padding:20px 0;background:var(--cor);transition:padding .2s ease,background-color .2s ease} .cab.sobreposto{position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;padding:22px 0} /* Transparente enquanto está sobre a foto; ao rolar ganha fundo, senão o menu branco fica sobre o conteúdo claro e some. */ .cab.rolou{padding:12px 0;box-shadow:0 2px 20px rgba(var(--veu),.22)} .cab.sobreposto.rolou{background:rgba(var(--cor-rgb),.95);backdrop-filter:blur(10px)} @media (prefers-reduced-motion:reduce){ .cab{transition:none} } .nav{display:flex;align-items:center;justify-content:space-between;gap:18px} .marca{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none} .marca .selo{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--cor);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;letter-spacing:.5px;flex:none} .marca .selo img{width:100%;height:100%;object-fit:cover;border-radius:50%} /* Logo horizontal: a altura escala junto com o cabeçalho e a largura segue a proporção do arquivo, sem esticar. */ .marca.com-logo{gap:0} .marca .logo-img{height:clamp(34px,2.6vw + 22px,54px);width:auto;max-width:min(58vw,320px);object-fit:contain} .marca b{font-weight:700;font-size:16px;letter-spacing:-.2px;display:block} .marca span{display:block;font-weight:400;font-size:11px;opacity:.75;letter-spacing:.6px;text-transform:uppercase} .menu{display:flex;gap:30px;font-size:14.5px;font-weight:500;color:rgba(255,255,255,.62);list-style:none} .menu a{text-decoration:none} .menu a:hover{color:#fff} /* Página atual sem cor: os inativos recuam para branco translúcido e o atual fica em branco pleno com um traço curto embaixo. Contraste e um sinal de forma bastam para dizer "você está aqui" — cor era força demais para o trabalho. O traço nasce do centro para não empurrar o texto. */ .menu .current-menu-item>a,.menu a.on{color:#fff;position:relative} .menu .current-menu-item>a::after,.menu a.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-7px;width:16px;height:2px;border-radius:2px;background:rgba(255,255,255,.75)} /* Sem moldura e sem fundo: no celular ele divide a tela com a logo e o botão principal, e a cápsula em volta competia com os dois. Ficam só os traços, translúcidos, num quadrado de 44px que é área de toque e não aparece. */ .abre-menu{display:none;background:none;border:0;color:#fff;padding:0;width:44px;height:44px;align-items:center;justify-content:center;opacity:.8;transition:opacity .15s ease} .abre-menu:hover,.abre-menu[aria-expanded="true"]{opacity:1} .abre-menu .barras{display:block;width:16px;height:2px;background:currentColor;position:relative} .abre-menu .barras::before,.abre-menu .barras::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor} .abre-menu .barras::before{top:-5px} .abre-menu .barras::after{top:5px} .menu-mobile{display:none;background:var(--cor2);border-radius:var(--raio);margin-top:14px;padding:10px 6px} .menu-mobile.aberto{display:block} .menu-mobile ul{list-style:none} .menu-mobile a{display:block;padding:13px 16px;color:#fff;text-decoration:none;font-size:15.5px;border-bottom:1px solid rgba(255,255,255,.1)} .menu-mobile li:last-child a{border-bottom:0} /* --- rodapé ------------------------------------------------------------- */ .rodape{background:var(--cor-pe);color:rgba(255,255,255,.62);padding:56px 0 30px;font-size:clamp(14.5px,.15vw + 13.9px,15.5px)} .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:36px} .rodape h5{color:#fff;font-size:14px;font-weight:600;margin-bottom:14px} .rodape .l{padding:6px 0} .rodape a{text-decoration:none} .rodape a:hover{color:var(--acento)} .rodape ul{list-style:none} .fim{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:12.5px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .sobre-rodape{max-width:330px;line-height:1.7} /* --- home: hero --------------------------------------------------------- */ /* Altura da abertura: parte da altura da tela + parte da largura. Só com vh, uma tela estreita e alta (monitor em pé, tablet retrato) ganharia uma abertura de tela e meia. Somando a largura, o formato entra na conta: tela estreita puxa para baixo, tela deitada mantém a proporção cheia. Piso e teto evitam os dois extremos. */ :root{ --alt-hero: clamp(440px, 62vh + 11vw, 960px); } @supports (height:1svh){ :root{ --alt-hero: clamp(440px, 62svh + 11vw, 960px); } } .hero{position:relative;min-height:var(--alt-hero);display:flex;align-items:flex-end;padding:clamp(120px,13vh,200px) 0 clamp(40px,6vh,72px);overflow:hidden} /* Tela alta não precisa de topo de tela inteira: 80vh já preenche o olhar e o conteúdo começa a aparecer sem rolagem. */ @media(min-height:900px){.hero{min-height:min(80vh,880px)}} .hero-bg{position:absolute;inset:0} .hero-bg img{width:100%;height:100%;object-fit:cover} /* Zoom lento na foto do topo (topo.zoom no JSON, só sem vídeo). No , não no .hero-bg: a paralaxe move o .hero-bg e as duas transformações não brigam. 26s ida e volta — lento o bastante para não ter emenda visível. */ .hero-bg.zoom img{will-change:transform;transform-origin:50% 45%;animation:zoom-lento 26s ease-in-out infinite alternate} @keyframes zoom-lento{from{transform:scale(1)}to{transform:scale(1.09)}} @media (prefers-reduced-motion:reduce){.hero-bg.zoom img{animation:none}} .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease} .hero-video.rodando{opacity:1} .hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(var(--veu),.93) 0%,rgba(var(--veu),.72) 42%,rgba(var(--veu),.32) 100%)} .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,400px);gap:clamp(28px,3vw,56px);align-items:end} /* Rótulo da abertura: mesmo padrão dos rótulos das seções internas. Sem pílula, o texto depende da foto atrás — a sombra difusa garante leitura se um dia entrar uma imagem clara, sem aparecer na escura. */ .tag{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.85);font-size:clamp(12px,.12vw + 11.5px,13px);font-weight:600;letter-spacing:.16em;margin-bottom:var(--esp-item);text-shadow:0 1px 14px rgba(var(--veu),.75)} .tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acento);flex:none} /* balance reparte as linhas por igual: sem ele o trecho destacado começava com uma palavra sozinha no fim da linha anterior, e a cor de realce chamava atenção justamente para a sobra. */ .hero h1{color:#fff;font-size:var(--t-hero);line-height:1.04;font-weight:700;letter-spacing:-.035em;max-width:16ch;margin-bottom:var(--esp-item);text-wrap:balance} /* Título curto pede corpo grande. O mesmo corpo numa frase longa vira parede de texto e come a abertura inteira, então o tamanho cede conforme o texto cresce. As classes vêm do PHP, que conta os caracteres. */ .hero h1.medio{font-size:clamp(38px, 5.5vw + 4px, 96px);max-width:18ch} .hero h1.longo{font-size:clamp(35px, 4.7vw + 5px, 82px);max-width:22ch;letter-spacing:-.03em} .hero p{color:rgba(255,255,255,.8);font-size:var(--t-apoio);line-height:1.7;max-width:52ch;margin-bottom:var(--esp-bloco)} .acoes{display:flex;align-items:center;gap:16px;flex-wrap:wrap} /* O amarelo fica no destaque do título e no botão da abertura. Logo, marcador do chapéu, botão do cabeçalho e ícones da faixa são brancos: a cor aparece onde carrega sentido, em vez de pontilhar a tela inteira. */ /* A logo é imagem, e o "RA" dela é amarelo: brightness(0) apaga a cor e invert(1) devolve tudo em branco, sem precisar de um segundo arquivo. */ .cab .logo-img{filter:brightness(0) invert(1)} /* O logo é preto: no rodapé escuro vira branco também. */ .rodape .logo-img{filter:brightness(0) invert(1)} .hero .tag::before{background:rgba(255,255,255,.5)} /* Botão do cabeçalho vira contorno: com dois botões amarelos na mesma tela, os dois disputam o olho e nenhum vence. O sólido fica só na abertura. */ .cab .btn-lim{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)} .cab .btn-lim .seta{background:rgba(255,255,255,.16);color:#fff} .cab .btn-lim::before{background:#fff} .cab .btn-lim:hover,.cab .btn-lim:focus-visible{color:var(--cor)} .cab .btn-lim:hover .seta,.cab .btn-lim:focus-visible .seta{background:var(--cor);color:#fff} /* Página atual sem cor: os inativos recuam para branco translúcido e o atual fica em branco pleno com um traço curto embaixo. Contraste e um sinal de forma bastam para dizer "você está aqui" — cor era força demais para o trabalho. O traço nasce do centro para não empurrar o texto. */ /* Sem o card lateral a segunda coluna deixa de existir, senão sobra um vão à direita. O texto ganha um teto de leitura para não esticar por 1.800px em tela larga. */ .hero.sem-cartao .wrap{grid-template-columns:minmax(0,1fr)} .hero.sem-cartao .wrap>div:first-child{max-width:min(100%, 62ch)} .hero.sem-cartao h1{max-width:22ch} .hero.sem-cartao h1.medio{max-width:26ch} .hero.sem-cartao h1.longo{max-width:30ch} .cartao{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);border-radius:22px;padding:24px;backdrop-filter:blur(14px)} .cartao .tt{color:#fff;font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px;margin-bottom:12px} .cartao .tt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acento);flex:none} .cartao p{color:rgba(255,255,255,.76);font-size:13.5px;line-height:1.6;margin-bottom:16px} .cartao a{color:var(--acento);font-size:13.5px;font-weight:600;text-decoration:none} /* --- home: faixa -------------------------------------------------------- */ .faixa{background:var(--cor);color:rgba(255,255,255,.72);font-size:clamp(14px,.15vw + 13.4px,15px);padding:16px 0} .faixa .wrap{display:flex;gap:clamp(20px,3vw,44px);flex-wrap:wrap;justify-content:center;align-items:center} .faixa span,.faixa a{display:inline-flex;align-items:center;gap:8px;text-decoration:none} .faixa .ico{color:rgba(255,255,255,.55);flex:none} .faixa a.nota-google:hover b{text-decoration:underline} .faixa b{color:#fff;font-weight:600} .faixa .nota-google b{color:#fff} .avaliacoes{padding:0 0 var(--esp-sec)} /* --- home: cards do escritório ------------------------------------------ */ .cards4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--esp-item);margin-top:var(--esp-bloco)} .c-foto{border-radius:var(--raio);overflow:hidden;min-height:220px} .c-foto img{width:100%;height:100%;object-fit:cover;min-height:220px} .c-txt{background:var(--claro);border-radius:var(--raio);padding:24px;position:relative} .c-txt.lim{background:var(--acento);color:var(--sobre-acento)} .c-txt .n{font-size:clamp(28px,1.1vw + 24px,38px);font-weight:700;letter-spacing:-1.4px;margin-bottom:6px} .c-txt .l{font-size:14.5px;font-weight:600;margin-bottom:9px} .c-txt .d{font-size:13.5px;line-height:1.6;color:var(--cinza)} .c-txt.lim .d{color:var(--sobre-acento);opacity:.82} .c-txt .arr{position:absolute;top:20px;right:20px;width:30px;height:30px;border-radius:50%;background:var(--cor);color:var(--acento);display:flex;align-items:center;justify-content:center;font-size:14px} /* --- home: áreas de atuação --------------------------------------------- */ /* Faixa de fotos do escritório: largura total, sem margem, funcionando como respiro entre a seção de texto e as áreas de atuação. */ /* Instagram — contenção do que vem do plugin. A miniatura de reel é feita para o feed do celular: texto grande queimado na imagem, em caixa vermelha ou amarela, para parar o dedo. Seis dessas em tamanho grande brigam com a sobriedade do resto do site. Então a faixa vira uma linha de miniaturas pequenas: deixa de ser bloco e passa a ser detalhe. O leve dessaturar tira o berro das cores sem apagar o conteúdo, e volta ao normal quando o cursor chega. Não mexer em largura, altura nem padding dos itens: o plugin calcula essas medidas por conta própria, e disputar com ele encolheu as miniaturas para 31 pixels. Daqui sai só acabamento. */ /* Faixa fina pede respiro de faixa, não de seção: o espaço padrão de seção deixava 300px de vazio embaixo de 250px de conteúdo. */ .sec.insta{padding-block:clamp(40px,4.5vw,72px)} .sec.insta .cab-sec{margin-bottom:var(--esp-bloco)} .grade-insta-plugin #sb_instagram .sbi_photo_wrap, .grade-insta-plugin #sb_instagram .sbi_photo{border-radius:14px;overflow:hidden} .grade-insta-plugin #sb_instagram .sbi_photo img{filter:saturate(.82) contrast(.96);transition:filter .3s ease,transform .5s ease} .grade-insta-plugin #sb_instagram .sbi_item:hover .sbi_photo img{filter:none;transform:scale(1.04)} /* O play do plugin é grande e branco-chapado; reduzido ele informa sem gritar. */ .grade-insta-plugin #sb_instagram .sbi_playbtn{font-size:20px !important;opacity:.8;text-shadow:0 2px 10px rgba(0,0,0,.45)} .grade-insta-plugin #sb_instagram .sbi_loader, .grade-insta-plugin #sb_instagram .sbi_load_btn{display:none !important} /* O plugin entrega mais itens do que o pedido e conta com o próprio script para esconder o excedente. Quando esse script não roda — ou roda tarde — a faixa estoura para três linhas. Aqui o limite é garantido sem depender de JS. */ .grade-insta-plugin #sb_instagram .sbi_item:nth-of-type(n+7){display:none !important} /* Instagram: quadrados, como no aplicativo. A legenda só aparece no passar do mouse, e no toque nunca — no celular o dedo abre o post, que já leva ao texto completo. */ .grade-insta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:clamp(8px,1vw,14px)} .post-insta{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:var(--raio);background:var(--linha)} .post-insta img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease} .post-insta:hover img{transform:scale(1.045)} .post-insta .legenda{position:absolute;inset:auto 0 0 0;padding:34px 14px 13px;color:#fff;font-size:12.5px;line-height:1.45; background:linear-gradient(to top,rgba(var(--veu),.9),rgba(var(--veu),0));opacity:0;transition:opacity .25s ease} .post-insta:hover .legenda,.post-insta:focus-visible .legenda{opacity:1} .post-insta .marca-video{position:absolute;top:11px;right:12px;width:26px;height:26px;border-radius:50%; background:rgba(var(--veu),.62);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center} @media (hover:none){.post-insta .legenda{display:none}} .insta-verde{background:var(--cor);color:rgba(255,255,255,.8)} .insta-verde .titulo-g,.insta-verde .rot{color:#fff} .insta-verde .btn-out{border-color:rgba(255,255,255,.4);color:#fff} /* --- abertura no celular: menos coisas pedindo atenção ------------------ */ /* Numa tela de 375px, chapéu + título de 4 linhas + parágrafo de 4 linhas + dois botões é informação demais para quem chegou com a intimação na mão. O que sai é o que se repete: o link secundário leva para uma seção que está logo abaixo — rolar faz o mesmo, sem ocupar uma linha inteira da primeira tela. O chapéu recolhe porque o título já diz o assunto. */ @media (max-width:600px){ /* Só no celular: a imagem nasce no verde e vai se revelando. É aqui que a barra do sistema encosta na foto e a divisão dura aparecia. No desktop não existe barra de status, e o cabeçalho transparente sobre a foto é o que dá a sensação de amplitude. */ .hero-bg::after{background: linear-gradient(to bottom,var(--cor) 0,rgba(var(--cor-rgb),.86) clamp(56px,8svh,96px),rgba(var(--cor-rgb),0) clamp(140px,20svh,240px)), linear-gradient(105deg,rgba(var(--veu),.93) 0%,rgba(var(--veu),.72) 42%,rgba(var(--veu),.32) 100%)} /* No celular, verde chapado: o desfoque atrás de fundo translúcido custa caro em aparelho simples e deixa o conteúdo transparecer sob o menu. */ .cab.sobreposto.rolou{background:var(--cor);backdrop-filter:none} .hero .acoes .btn-out{display:none} /* Três chamadas para a mesma ação na primeira tela — topo, abertura e flutuante — competem entre si. Fica a da abertura, que é a maior, e o flutuante, que acompanha a rolagem. */ .cab .btn-lim{display:none} .hero .tag{font-size:11px;letter-spacing:.14em;margin-bottom:12px;opacity:.85} .hero p{max-width:34ch} /* Abertura e faixa verde dividem exatamente uma tela: a foto ocupa o que sobra e a faixa fecha embaixo. Assim o branco da seção seguinte nunca aparece por baixo — era o que acontecia quando as duas tinham altura própria e a barra do navegador sumia ao rolar, esticando a tela. A medida é svh, a menor altura possível da janela: com vh, a abertura mudaria de tamanho toda vez que a barra aparecesse ou sumisse. */ .abertura{min-height:100svh;display:flex;flex-direction:column} .abertura .hero{flex:1 1 auto;min-height:0;padding-block:clamp(96px,14svh,150px) clamp(28px,5svh,52px)} .abertura .faixa{flex:0 0 auto} } @supports not (height:1svh){ @media (max-width:600px){ .abertura{min-height:100vh} } } /* --- alvos de toque ---------------------------------------------------- */ /* No celular o dedo cobre cerca de 9 mm de tela. Alvo com menos de 44px força a pessoa a mirar, e quem erra duas vezes desiste. Estes três estavam abaixo disso: o botão do menu tinha 40x20. */ @media (hover:none){ /* A área de toque cresce por fora, num pseudo-elemento: com min-height o item ficava 26px mais alto que os vizinhos e abria um vão na faixa. */ .faixa a.nota-google{position:relative} .faixa a.nota-google::after{content:"";position:absolute;inset:-13px -10px} .area-min{min-height:52px} /* Listas de navegação: a linha de texto tem 18px e o dedo tem 44. O padding entra no link, não no item, para a área clicável crescer junto. */ .area-lisa .lista a,.rodape .l a,.rodape ul a{display:block;padding-block:11px} .cab .btn-lim{min-height:44px} /* Sem cursor não existe passar o mouse: o realce vira resposta ao toque. */ .post-insta:active .sbi_photo img,.area:active img{transform:scale(1.03)} } /* --- botão flutuante de WhatsApp -------------------------------------- */ /* Verde do WhatsApp, e não o da marca: aqui o reconhecimento imediato vale mais que a paleta — a pessoa identifica o ícone antes de ler qualquer coisa. Fica acima de tudo, mas sem cobrir texto: canto inferior direito, longe do polegar que rola a página no celular. */ .zap-flutua{position:fixed;right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);z-index:90;display:flex;align-items:flex-end;gap:10px} .zap-btn{width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center; text-decoration:none;box-shadow:0 6px 22px rgba(var(--veu),.28);transition:transform .18s ease,box-shadow .18s ease;flex:none} .zap-btn:hover{transform:scale(1.06);box-shadow:0 8px 26px rgba(var(--veu),.34)} .zap-balao{position:relative;order:-1;max-width:min(74vw,268px);background:#fff;color:var(--tinta);border:1px solid var(--linha); border-radius:16px 16px 4px 16px;padding:14px 16px;font-size:14px;line-height:1.5;box-shadow:0 10px 30px rgba(var(--veu),.16); opacity:0;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease} .zap-balao.aberto{opacity:1;transform:translateY(0)} .zap-balao p{margin:0;padding-right:10px} .zap-fecha{position:absolute;top:4px;right:8px;background:none;border:0;color:var(--cinza);font-size:19px;line-height:1;padding:2px 4px} .zap-fecha:hover{color:var(--tinta)} /* Quem pediu menos movimento no sistema não recebe a animação de entrada. */ @media (prefers-reduced-motion:reduce){ .zap-balao{transition:none} .zap-btn{transition:none} .zap-btn:hover{transform:none} } @media (max-width:600px){ .zap-btn{width:52px;height:52px} .zap-balao{max-width:calc(100vw - 100px)} } .faixa-fotos{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:4px;background:var(--claro)} .faixa-fotos figure{margin:0;overflow:hidden;aspect-ratio:16/10} .faixa-fotos img{width:100%;height:100%;object-fit:cover} @media(max-width:640px){.faixa-fotos figure{aspect-ratio:4/3}} .areas{background:var(--claro);padding:var(--esp-sec) 0} .cab-sec{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--esp-item);margin-bottom:var(--esp-bloco);flex-wrap:wrap} .grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--esp-item)} .area{position:relative;border-radius:22px;overflow:hidden;min-height:330px;display:flex;align-items:flex-end;text-decoration:none} .area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .area::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--veu),.92) 8%,rgba(var(--veu),.15) 72%)} .area .txt{position:relative;z-index:2;padding:26px;color:#fff} .area .num{font-size:12px;font-weight:600;color:var(--acento);margin-bottom:8px} .area h3,.area h2{font-size:var(--t-h3);font-weight:600;letter-spacing:-.02em;margin-bottom:8px} .area p{font-size:clamp(14.5px,.2vw + 13.7px,15.5px);line-height:1.6;color:rgba(255,255,255,.78)} .area-lisa{background:var(--cor);border-radius:22px;padding:26px;color:#fff;min-height:330px;display:flex;flex-direction:column;justify-content:space-between} .area-lisa .tt{color:var(--acento);font-size:12px;font-weight:600;margin-bottom:14px;letter-spacing:.6px} .area-lisa .lista{list-style:none} .area-lisa .lista li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:14.5px} .area-lisa .lista li:last-child{border-bottom:0} .area-lisa .lista a{text-decoration:none} /* --- home: chamada ------------------------------------------------------ */ /* A chamada final é um card verde sobre branco, não uma faixa que atravessa a tela. Pintada de ponta a ponta ela virava a terceira parede verde da página (abertura, chamada, rodapé) e o verde passava de um terço do site. Em card, ela destaca mais e pesa menos. */ .cta{background:none;padding:var(--esp-sec) 0} .cta-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(28px,3vw,56px);align-items:center; background:var(--cor);border-radius:var(--raio-g);padding:clamp(34px,4.2vw,60px)} .cta h2{color:#fff;font-size:var(--t-h2);line-height:1.1;font-weight:700;letter-spacing:-.03em;margin-bottom:var(--esp-item);max-width:18ch} .cta p{color:rgba(255,255,255,.74);font-size:var(--t-apoio);line-height:1.7;margin-bottom:28px} .dep{background:var(--cor2);border-radius:22px;padding:28px} .dep .aspas{color:var(--acento);font-size:clamp(28px,1.2vw + 22px,38px);line-height:1;margin-bottom:10px} .dep p{color:#fff;font-size:var(--t-apoio);line-height:1.65;margin-bottom:16px} .dep .quem{color:rgba(255,255,255,.6);font-size:13px} /* --- entrada da abertura ------------------------------------------------- Animação em CSS, e não classe posta por JS: com `both` o estado inicial vale antes do atraso e o final fica depois, sem depender de mais nenhum script rodar. Se o JS morrer no meio, a abertura já terminou de aparecer. A classe .js vem do script inline no — sem JS não há animação e o conteúdo nasce visível, que é o que importa. ------------------------------------------------------------------------ */ @keyframes sobe{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} @keyframes clareia{from{opacity:0}to{opacity:1}} .js .hero .tag {animation:sobe .75s .10s both cubic-bezier(.22,.61,.36,1)} .js .hero h1 {animation:sobe .85s .20s both cubic-bezier(.22,.61,.36,1)} .js .hero p {animation:sobe .75s .38s both cubic-bezier(.22,.61,.36,1)} .js .hero .acoes{animation:sobe .75s .50s both cubic-bezier(.22,.61,.36,1)} .js .hero .consulta{animation:sobe .8s .62s both cubic-bezier(.22,.61,.36,1)} .js .faixa {animation:clareia .9s .78s both} /* O realce do título chega depois do resto: a cor entra quando o olho já leu a frase, em vez de disputar com ela. */ @keyframes acende{from{color:#fff}to{color:var(--acento)}} .js .hero h1 .mk{animation:acende .5s .95s both} @media (prefers-reduced-motion:reduce){ .js .hero .tag,.js .hero h1,.js .hero p,.js .hero .acoes, .js .hero .consulta,.js .faixa,.js .hero h1 .mk{animation:none} } /* Rede de segurança: a linha do tempo das animações congela em documento escondido (aba aberta em segundo plano). Se em 3 segundos de relógio ela não tiver andado, a abertura aparece do mesmo jeito — abertura invisível é o pior defeito possível nesta página. */ .abertura-pronta .hero .tag,.abertura-pronta .hero h1,.abertura-pronta .hero p, .abertura-pronta .hero .acoes,.abertura-pronta .hero .consulta, .abertura-pronta .faixa,.abertura-pronta .rolar{animation:none;opacity:1} .abertura-pronta .hero .tag,.abertura-pronta .hero h1,.abertura-pronta .hero p, .abertura-pronta .hero .acoes,.abertura-pronta .hero .consulta, .abertura-pronta .faixa{transform:none} .abertura-pronta .rolar .trilho::after{animation:desce 1.9s cubic-bezier(.6,0,.4,1) infinite} .abertura-pronta .hero h1 .mk{animation:none;color:var(--acento)} /* --- grão sobre a foto e o vídeo do topo -------------------------------- Ruído gerado pelo próprio navegador (SVG em data URI): zero requisição e zero arquivo. Sem ele, vídeo de banco de imagens tem aquele acabamento liso que entrega a origem; com ele, ganha textura de imagem tratada. */ .hero-bg::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; opacity:.16;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E"); background-size:180px 180px} /* O véu tem de ficar por cima do grão, senão o ruído clareia o texto. */ .hero-bg::after{z-index:2} /* --- títulos que entram palavra por palavra ------------------------------ O JS embrulha cada palavra em palavra: a caixa de fora corta, a de dentro sobe. A cascata curta (26ms) faz a frase parecer escrita na hora, e não colada pronta. ------------------------------------------------------------------------ */ /* A folga de .2em embaixo (devolvida com margem negativa, sem mexer no layout) é o que deixa a descida do j, do ç e da vírgula aparecer durante a cascata; o deslocamento inicial cresce na mesma medida para a palavra continuar escondida antes de entrar. Depois da animação o JS devolve o HTML original e nada disto permanece. */ .pal{display:inline-block;overflow:hidden;vertical-align:top; padding-bottom:.2em;margin-bottom:-.2em} .pal>i{display:inline-block;font-style:inherit;transform:translateY(125%);opacity:0} .escreveu .pal>i{transform:none;opacity:1; transition:transform .72s cubic-bezier(.19,1,.22,1),opacity .5s ease; transition-delay:calc(var(--i) * 26ms)} @media (prefers-reduced-motion:reduce){ .pal{overflow:visible} .pal>i{transform:none;opacity:1;transition:none} } /* --- cards de serviço vivos --------------------------------------------- A foto respira ao passar o mouse e uma varredura laranja atravessa o card. Tudo em transform e opacity: nada que force o navegador a recalcular posição de outros elementos. */ /* A transição declarada aqui soma a de .surgiu: transition não herda e a regra do card, mais específica, apagava a entrada — o card aparecia batendo. */ .card-area{position:relative;overflow:hidden; transition:border-color .15s ease,opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)} .card-area .im{overflow:hidden;position:relative} .card-area .im img{transition:transform 1.1s cubic-bezier(.19,1,.22,1)} .card-area:hover .im img,.card-area:focus-visible .im img{transform:scale(1.07)} .card-area .im::after{content:"";position:absolute;inset:0; background:linear-gradient(115deg,transparent 38%,rgba(var(--cor-rgb),.35) 50%,transparent 62%); transform:translateX(-120%);transition:transform .85s cubic-bezier(.4,0,.2,1)} .card-area:hover .im::after,.card-area:focus-visible .im::after{transform:translateX(120%)} .card-area h3{transition:color .2s ease} .card-area:hover h3{color:var(--cor)} .card-area .re{transition:color .2s ease} /* A seta do card aparece de fora quando o card é o alvo. */ .card-area .co{position:relative} .card-area .co::after{content:"→";position:absolute;right:clamp(22px,2vw,30px);bottom:clamp(20px,2vw,28px); width:36px;height:36px;border-radius:50%;background:var(--acento);color:var(--sobre-acento); display:flex;align-items:center;justify-content:center;font-size:15px; transform:translateY(10px) scale(.8);opacity:0;transition:transform .35s cubic-bezier(.19,1,.22,1),opacity .25s ease} .card-area:hover .co::after,.card-area:focus-visible .co::after{transform:none;opacity:1} @media (prefers-reduced-motion:reduce){ .card-area .im img,.card-area .im::after,.card-area .co::after{transition:none} .card-area .co::after{opacity:1;transform:none} } /* No toque não existe passar o mouse: a seta fica sempre visível. */ @media (hover:none){ .card-area .co::after{opacity:1;transform:none} .card-area .im::after{display:none} } /* --- indicador de rolagem na abertura ------------------------------------ */ .rolar{position:absolute;left:50%;bottom:clamp(14px,2vh,26px);transform:translateX(-50%); z-index:3;display:flex;flex-direction:column;align-items:center;gap:7px; color:rgba(255,255,255,.6);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; pointer-events:none} .rolar .trilho{width:1px;height:34px;background:rgba(255,255,255,.28);position:relative;overflow:hidden} .rolar .trilho::after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(--acento); animation:desce 1.9s cubic-bezier(.6,0,.4,1) infinite} @keyframes desce{0%{transform:translateY(-16px)}60%,100%{transform:translateY(36px)}} .js .rolar{animation:clareia .8s 1.4s both} .rolar.some{opacity:0;transition:opacity .3s ease} @media (max-width:900px){.rolar{display:none}} @media (prefers-reduced-motion:reduce){.rolar .trilho::after{animation:none;height:34px;opacity:.5}} /* ========================================================================= CAMADA DE MOVIMENTO Regra que vale para tudo aqui: só transform e opacity animam. Qualquer efeito que dependa de JS nasce no estado final e é o JS que o "arma" — assim, sem script, a página é só uma página, nunca um bloco invisível. Tudo abaixo desliga em prefers-reduced-motion. ========================================================================= */ /* --- barra de progresso da leitura -------------------------------------- */ .progresso{position:fixed;top:0;left:0;right:0;height:3px;z-index:120; background:var(--acento);transform:scaleX(0);transform-origin:0 50%; will-change:transform;pointer-events:none} /* --- faixa que corre sem fim ------------------------------------------- Duas cópias do mesmo lote correm lado a lado; quando a primeira sai, a segunda já está no lugar dela. A velocidade responde à rolagem: parada, anda devagar; rolando forte, dispara. */ /* Laranja de propósito: a faixa de avaliações lá embaixo é escura, e as duas na mesma cor pareciam o mesmo componente repetido. Contraste conferido: o texto escuro sobre o acento dá 8,2:1. */ .marquee{background:var(--acento);color:var(--sobre-acento);overflow:hidden; padding:clamp(14px,1.6vw,22px) 0;position:relative;z-index:2} .marquee-pista{display:flex;width:max-content;will-change:transform} .marquee-lote{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px); padding-right:clamp(18px,2.4vw,34px);flex:none} .marquee span{font-size:clamp(15px,1.1vw + 11px,26px);font-weight:700;letter-spacing:-.02em; white-space:nowrap;color:var(--sobre-acento)} .marquee i{color:rgba(42,26,8,.45);font-style:normal;font-size:clamp(13px,.6vw + 9px,18px);flex:none} /* --- dobra do ramo ------------------------------------------------------ */ .nicho{background:var(--claro);padding:var(--esp-sec) 0;position:relative;z-index:3; border-radius:var(--raio-g) var(--raio-g) 0 0;margin-top:calc(var(--raio-g) * -1)} .nicho-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,72px);align-items:center;margin-top:var(--esp-bloco)} .nicho-midia{border-radius:var(--raio-g);overflow:hidden;position:relative; aspect-ratio:16/10;background:var(--linha)} .nicho-midia video,.nicho-midia img{width:100%;height:100%;object-fit:cover;display:block} .nicho-texto .titulo-g{margin-bottom:var(--esp-item)} .nicho-texto .apoio{margin-bottom:var(--esp-bloco)} .ponto{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px; padding:18px 0;border-top:1px solid var(--linha)} .ponto .n{grid-row:span 2;font-size:12px;font-weight:700;color:var(--acento);letter-spacing:.1em;padding-top:3px} .ponto h3{font-size:clamp(16px,.4vw + 15px,19px);font-weight:600;letter-spacing:-.02em} .ponto p{font-size:14.5px;line-height:1.6;color:var(--cinza)} .nicho-texto .btn-lim{margin-top:var(--esp-bloco)} @media (max-width:900px){ .nicho-grade{grid-template-columns:1fr} .nicho-midia{aspect-ratio:16/11} } /* --- cartões que se empilham ------------------------------------------- Cada cartão gruda no mesmo topo, com um degrau por posição. O de baixo sobe e cobre o de cima; o JS encolhe e escurece o que ficou atrás. Só sticky: sem JS eles empilham do mesmo jeito, sem a escala. */ .passos{padding:var(--esp-sec) 0;background:var(--branco);position:relative;z-index:4} /* Texto de um lado, cartões do outro: o título fica preso no meio da tela enquanto a pilha acumula à direita — antes ele subia com a rolagem e o empilhamento acontecia órfão, sem contexto. */ .passos-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px,4.5vw,88px);align-items:start} /* A margem embaixo é o colchão do sticky: quando o fim da seção o empurra, ele para a essa distância do fundo em vez de colar na base. */ /* O intro é mais alto que os cartões, então o fim da seção sempre o empurra antes deles — é geometria, não bug. Em vez de deixá-lo colar na base, o JS o apaga em fade assim que o empurrão começa: ele se despede da cena. */ .passos-intro{position:sticky;top:calc(50vh - 130px);margin-bottom:90px} .passos-intro .titulo-g{margin:10px 0 var(--esp-item);max-width:14ch} .passos-intro .apoio{margin-bottom:var(--esp-bloco);max-width:38ch} /* O vão grande entre cartões fraciona a leitura: cada um tem o próprio trecho de rolagem para entrar, em vez de chegarem todos de uma vez. O padding de cima faz o primeiro cartão nascer abaixo da tela — na primeira vista da dobra existe só o texto, e o cartão sobe com a rolagem. O de baixo mantém a cena presa enquanto a dobra seguinte sobe por cima. */ .pilha{display:flex;flex-direction:column;gap:clamp(90px,24vh,300px); padding-top:clamp(320px,86vh,900px)} /* O respiro de baixo é um ESPAÇADOR, não padding, de propósito: sticky não viaja além do conteúdo do pai, e padding não é conteúdo — com padding, o último cartão não tinha para onde grudar e subia junto com a página, sem nunca recolher. O ::after é conteúdo: é ele que segura o 04 no meio da tela enquanto a dobra seguinte sobe por cima. */ .pilha::after{content:"";flex:none;height:clamp(280px,52vh,600px)} /* Âncora única para a pilha inteira (--alt-pilha = metade do cartão mais alto, medida pelo JS): com âncora por cartão, cada um grudava numa altura diferente e o encolhimento saía desigual. O degrau por índice faz o leque. */ .passo{position:sticky;top:calc(50vh - var(--alt-pilha,150px) + var(--p) * 16px); will-change:transform} /* Com o GSAP no ar, quem prende os cartões é o pin do ScrollTrigger — o sticky sairia brigando com ele. O sticky acima é o plano B sem biblioteca. */ .gsap-on .passo{position:relative;top:auto} .passo-dentro{background:var(--cor);color:#fff;border-radius:var(--raio-g); padding:clamp(26px,3.4vw,52px);display:grid;grid-template-columns:auto minmax(0,1fr); gap:clamp(18px,2.6vw,42px);align-items:start; box-shadow:0 -1px 0 rgba(255,255,255,.08),0 24px 60px rgba(var(--veu),.28)} .passo:nth-child(even) .passo-dentro{background:var(--cor2)} .passo .n{font-size:clamp(30px,3vw,52px);font-weight:700;letter-spacing:-.04em; color:var(--acento);line-height:1} .passo h3{font-size:clamp(19px,1vw + 15px,30px);font-weight:700;letter-spacing:-.03em; margin-bottom:10px} .passo p{color:rgba(255,255,255,.76);font-size:var(--t-apoio);line-height:1.65;max-width:52ch} @media (max-width:900px){ /* Uma coluna: o intro volta a correr com a página (preso, ele cobriria os cartões) e o empilhamento continua embaixo. */ .passos-grade{grid-template-columns:1fr} .passos-intro{position:static;margin-bottom:0} .passos-intro .titulo-g{max-width:20ch} /* Em coluna única o texto já foi lido acima: o primeiro cartão não precisa nascer uma tela abaixo. */ .pilha{padding-top:clamp(40px,8vh,90px)} } @media (max-width:700px){ .passo-dentro{grid-template-columns:1fr;gap:10px} .passo{top:calc(50vh - var(--alt-pilha,170px) + var(--p) * 10px)} .pilha{gap:clamp(70px,16vh,180px)} .pilha::after{height:clamp(200px,36vh,420px)} } /* --- avaliações que andam de lado -------------------------------------- Em tela grande a seção fica presa e a fila anda na horizontal conforme a página rola. No toque isso brigaria com o gesto do aparelho: lá vira carrossel nativo com encaixe, que é o que o dedo já espera. */ /* Altura natural, sem prender a página: o experimento de rolagem horizontal presa fazia a dobra ocupar duas telas e meia de cor chapada. A fila agora é arrastável (mouse e dedo), e a foto de fundo sob o véu tira o aspecto de parede sólida. */ .avaliacoes{background: linear-gradient(rgba(var(--veu),.93),rgba(var(--veu),.90)), var(--cor-pe) center/cover no-repeat; color:#fff;padding:var(--esp-sec) 0; position:relative;z-index:5;border-radius:var(--raio-g) var(--raio-g) 0 0; margin-top:calc(var(--raio-g) * -1);overflow:clip} .avaliacoes{background-image: linear-gradient(rgba(var(--veu),.93),rgba(var(--veu),.88)), url("../img/capa-escritorio.jpg")} .aval-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap} .avaliacoes .titulo-g{color:#fff} .avaliacoes .apoio{color:rgba(255,255,255,.7);max-width:46ch} .avaliacoes .rot{color:var(--acento)} .avaliacoes .btn-out{border-color:rgba(255,255,255,.4);color:#fff} .aval-trilho{margin-top:clamp(26px,3.4vw,44px)} .aval-fila{display:flex;gap:clamp(14px,1.6vw,22px);padding-inline:var(--margem); will-change:transform} .aval{flex:0 0 min(84vw,340px);background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.13);border-radius:var(--raio-g); padding:clamp(20px,2.2vw,28px);display:flex;flex-direction:column;gap:12px; backdrop-filter:blur(6px)} .aval .estrelas{color:var(--acento);font-size:15px;letter-spacing:2px} .aval p{color:rgba(255,255,255,.9);font-size:var(--t-apoio);line-height:1.6;flex:1} .aval figcaption{color:rgba(255,255,255,.62);font-size:13px} /* Carrossel: nativo no toque (com encaixe), arrastável no ponteiro fino — lá o encaixe sai, senão ele briga com o arrasto. */ .aval-trilho{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scrollbar-width:none} .aval-trilho::-webkit-scrollbar{display:none} .aval{scroll-snap-align:center} @media (hover:hover) and (pointer:fine){ .aval-trilho{scroll-snap-type:none;cursor:grab} .aval-trilho.arrastando{cursor:grabbing;user-select:none} .aval-trilho.arrastando .aval{pointer-events:none} } /* --- revelação por máscara ---------------------------------------------- */ .js [data-clip]{clip-path:inset(0 0 100% 0)} .js [data-clip]>*{transform:scale(1.14)} .js [data-clip].revelou{clip-path:inset(0 0 0 0); transition:clip-path 1.1s cubic-bezier(.19,1,.22,1)} .js [data-clip].revelou>*{transform:none; transition:transform 1.4s cubic-bezier(.19,1,.22,1)} /* --- entrada dos pontos e cartões avulsos ------------------------------- */ .js [data-revela]{opacity:0;transform:translateY(16px)} .js [data-revela].revelou{opacity:1;transform:none; transition:opacity .6s ease,transform .7s cubic-bezier(.19,1,.22,1)} /* --- inclinação 3D no ponteiro ------------------------------------------ */ @media (hover:hover) and (pointer:fine){ .inclina{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.19,1,.22,1)} .inclina.inclinando{transition:transform .1s linear} } /* --- botão que puxa o ponteiro ------------------------------------------ */ @media (hover:hover) and (pointer:fine){ [data-iman]{transition:transform .45s cubic-bezier(.19,1,.22,1)} [data-iman].puxando{transition:transform .12s linear} } @media (prefers-reduced-motion:reduce){ .progresso{display:none} .marquee-pista{transform:none !important} .js [data-clip]{clip-path:none} .js [data-clip]>*{transform:none} .js [data-revela]{opacity:1;transform:none} .passo{position:static} .inclina,[data-iman]{transform:none !important;transition:none} } /* --- entrada das capas internas ----------------------------------------- Mesma linguagem da abertura da home: foto abre num zoom-out lento, título e subtítulo sobem em sequência. Só CSS com `both`: sem JS não anima e o conteúdo nasce pronto. */ @keyframes capa-zoom{from{transform:scale(1.08)}to{transform:none}} .js .capa-blog .capa-fundo img{animation:capa-zoom 1.6s cubic-bezier(.19,1,.22,1) both} .js .capa-blog h1{animation:sobe .8s .1s both cubic-bezier(.22,.61,.36,1)} .js .capa-blog .sub{animation:sobe .7s .28s both cubic-bezier(.22,.61,.36,1)} .abertura-pronta .capa-blog h1,.abertura-pronta .capa-blog .sub{animation:none;opacity:1;transform:none} .abertura-pronta .capa-blog .capa-fundo img{animation:none;transform:none} @media (prefers-reduced-motion:reduce){ .js .capa-blog .capa-fundo img,.js .capa-blog h1,.js .capa-blog .sub{animation:none} } /* --- cursor-seta --------------------------------------------------------- Sobre um card clicável, o ponteiro vira o mesmo disco laranja com seta dos botões — o convite ao clique viaja com a mão. Só ponteiro fino; o disco é fixed + transform, fora do fluxo, custo de um translate por quadro. */ .cursor-seta{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px; border-radius:50%;background:var(--acento);color:var(--sobre-acento); display:flex;align-items:center;justify-content:center;font-size:17px; z-index:130;pointer-events:none;transform:translate(-100px,-100px) scale(0); transition:opacity .15s ease;will-change:transform} @media not ((hover:hover) and (pointer:fine)){.cursor-seta{display:none}} @media (hover:hover) and (pointer:fine){ /* Onde o disco assume, o cursor nativo sai de cena. */ .card-area,.area,.card{cursor:none} .card-area *,.area *,.card *{cursor:none} } /* --- consulta de CNPJ --------------------------------------------------- O cartão vive no topo em tela grande e desce para a seção logo abaixo no celular (quem move é o JS). Por isso os estilos vêm em dois contextos: sobre a foto, translúcido; sobre fundo claro, chapado. ---------------------------------------------------------------------- */ /* Sem JS a consulta não faz nada: em vez de mostrar um formulário que recarrega a página, ela some. A classe .js entra no por um script inline no topo do documento. */ .consulta{display:none} .js .consulta{display:block;align-self:end} /* Vidro branco sobre foto clara reprova em contraste — e a foto do topo tem camisa clara justamente onde o cartão cai. Vidro escuro não depende do que estiver atrás. */ .js .consulta{background:rgba(var(--cor-rgb),.92);border-color:rgba(255,255,255,.16)} .consulta p{margin-bottom:14px} .consulta-form{display:grid;gap:10px} /* display:grid na classe vence o [hidden] do navegador, e o formulário continuava na tela por cima da resposta. */ .consulta-form[hidden]{display:none} /* .cartao a pinta todo link do cartão de laranja — no botão laranja isso apagava o texto. O botão manda na própria cor e no próprio corpo. */ .consulta .btn-lim{color:var(--sobre-acento);font-size:clamp(14px,.24vw + 13.2px,16.5px)} .consulta-form input{width:100%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28); border-radius:12px;padding:13px 14px;color:#fff;font:inherit;font-size:16px;letter-spacing:.4px} .consulta-form input::placeholder{color:rgba(255,255,255,.68);letter-spacing:.4px} /* O anel de foco volta para quem chega de teclado: outline:none aqui vencia a regra global de :focus-visible por especificidade. */ .consulta-form input:focus{border-color:var(--acento);background:rgba(255,255,255,.2)} .consulta-form input:focus:not(:focus-visible){outline:none} .consulta-form input:focus-visible{outline:3px solid var(--acento);outline-offset:2px} .consulta-form .btn-lim{justify-content:center;padding:13px 20px} .consulta-form .btn-lim[disabled]{opacity:.6;cursor:progress} .consulta-nota{color:rgba(255,255,255,.8) !important;font-size:11.5px !important;line-height:1.5; margin:10px 0 0 !important} .consulta-erro{color:rgba(255,255,255,.82);font-size:13px;line-height:1.55;margin-top:12px} /* display:none tirava a região do documento, e leitor de tela não anuncia mudança em região que não está renderizada. Vazia ela já não ocupa altura. */ .consulta-saida:empty{margin:0} .consulta-saida.tem-resposta{margin-top:2px} .consulta-nome{color:#fff;font-weight:700;font-size:16px;line-height:1.25;letter-spacing:-.2px} /* O laranja da marca fica a um fio de 4,5:1 quando a foto atrás é clara. Dentro do cartão escuro vale um tom mais claro dele. */ .consulta-fantasia{color:#F9C46F;font-size:12.5px;font-weight:600;margin-top:3px} .consulta-lista{margin:14px 0 16px;display:grid;gap:9px} .consulta-lista>div{display:grid;grid-template-columns:78px minmax(0,1fr);gap:10px;align-items:baseline} .consulta-lista dt{color:rgba(255,255,255,.78);font-size:11px;font-weight:600;letter-spacing:.06em; text-transform:uppercase} .consulta-lista dd{color:rgba(255,255,255,.9);font-size:13px;line-height:1.45} .consulta-lista dd.ok{color:#7BD88F;font-weight:600} .consulta-lista dd.alerta{color:#F9C46F;font-weight:600} .consulta-res .btn-lim{width:100%;justify-content:center} .consulta-outro{display:block;width:100%;margin-top:10px;background:none;border:0;cursor:pointer; color:rgba(255,255,255,.82);font:inherit;font-size:12.5px;text-decoration:underline;padding:8px} .consulta-outro:hover{color:#fff} /* Seção que recebe o cartão no celular. Vazia — em tela grande, ou sem JS — ela não existe: nada de espaço em branco sobrando. */ .sec-consulta{display:none} .sec-consulta:has(.consulta){display:block;background:var(--claro); padding:clamp(26px,4vw,40px) 0 clamp(30px,4vw,44px)} .sec-consulta .consulta{background:var(--cor);border-color:rgba(255,255,255,.14); backdrop-filter:none;max-width:520px;margin:0 auto} /* --- entrada dos blocos ao rolar ---------------------------------------- */ .surge{opacity:0;transform:translateY(14px)} .surgiu{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1)} @media (prefers-reduced-motion:reduce){ .surge{opacity:1;transform:none} } /* --- cards de artigo (usados na home, arquivo e relacionados) ----------- */ .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--esp-item)} /* Teto de três colunas: solto, o auto-fit abria cinco ou seis em monitor grande, e aí a foto do card ficava do tamanho de uma miniatura e sobrava um artigo órfão na última fileira. Com três, a foto respira e a lista fecha certinho em fileiras cheias. */ @media(min-width:1080px){ /* O gap global é calibrado para grade de card pequeno. Em card de 380px para cima ele deixa os artigos encostados um no outro. */ .grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,2.2vw,38px)} } .card{border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;background:#fff;transition:border-color .15s ease} .card:hover{border-color:#C4D0D6} .card .im{height:180px;overflow:hidden;position:relative;background:var(--claro)} .card .im img{width:100%;height:100%;object-fit:cover} .card .cat{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.94);font-size:11px;font-weight:600;padding:6px 12px;border-radius:999px} .card .co{padding:22px;display:flex;flex-direction:column;flex:1} .card .cat-txt{font-size:11.5px;font-weight:600;color:#3C7189;margin-bottom:8px} .card h3{font-size:clamp(16.5px,.35vw + 15px,19px);font-weight:600;line-height:1.34;letter-spacing:-.02em;margin-bottom:10px} .card .re{font-size:clamp(15px,.2vw + 14.2px,16px);line-height:1.65;color:var(--cinza);margin-bottom:18px;flex:1} .card .pe{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--cinza);border-top:1px solid var(--linha);padding-top:14px} .card.baixo .im{height:150px} /* Card de área: sem foto, o número segura a composição e o card cresce pelo texto. A borda de cima ganha a cor da marca no toque/foco. */ /* Lista compacta das áreas secundárias. Cada peça tem posição explícita no grid: deixar o navegador decidir com grid-row solto espremeu a descrição numa coluna de uma palavra. */ .grade-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));gap:clamp(10px,1.2vw,16px)} .area-min{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:18px;row-gap:6px; border:1px solid var(--linha);border-radius:var(--raio);padding:clamp(18px,1.8vw,26px);text-decoration:none;background:#fff; transition:border-color .15s ease,transform .12s ease} .area-min:hover{border-color:#C4D0D6;transform:translateY(-1px)} .area-min .n{grid-area:1 / 1 / 3 / 2;align-self:start;font-size:clamp(20px,1.4vw + 14px,28px);font-weight:700;letter-spacing:-.03em;color:#D4DBE0;line-height:1.1} .area-min .t{grid-area:1 / 2 / 2 / 3;font-size:var(--t-h3);font-weight:600;letter-spacing:-.02em;line-height:1.3} .area-min .d{grid-area:2 / 2 / 3 / 3;font-size:clamp(14.5px,.2vw + 13.7px,15.5px);line-height:1.6;color:var(--cinza)} .area-min .s{grid-area:1 / 3 / 3 / 4;align-self:center;color:var(--cinza);font-size:18px} .area-min.destaque-cta{background:var(--acento);border-color:var(--acento)} .area-min.destaque-cta .n{display:none} .area-min.destaque-cta .t{grid-area:1 / 1 / 2 / 3} .area-min.destaque-cta .d{grid-area:2 / 1 / 3 / 3;color:#42360a} .area-min.destaque-cta .s{color:var(--sobre-acento)} .card-area{border-top:3px solid var(--linha);transition:border-color .15s ease} .card-area:hover{border-top-color:var(--acento)} .card-area .co{padding:clamp(22px,2vw,30px)} .card-area .num-area{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--cinza);margin-bottom:14px} .card-area h3{font-size:var(--t-h3);margin-bottom:12px} .card-area .re{margin-bottom:20px} /* --- índice de artigos -------------------------------------------------- */ .capa-blog{background:var(--cor);padding:clamp(44px,5vw,80px) 0 clamp(96px,10vw,150px);position:relative;overflow:hidden} /* Foto de fundo tratada como textura: o degradê a apaga o suficiente para o texto continuar legível sem precisar de caixa por trás. */ .capa-blog.com-foto{padding-top:clamp(70px,8vw,120px)} .capa-blog .capa-fundo{position:absolute;inset:0} .capa-blog .capa-fundo img,.capa-blog .capa-fundo video{width:100%;height:100%;object-fit:cover} .capa-blog .capa-fundo video{position:absolute;inset:0;opacity:0;transition:opacity .9s ease} .capa-blog .capa-fundo video.rodando{opacity:1} .capa-blog .capa-fundo::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(var(--cor-rgb),.96) 0%,rgba(var(--cor-rgb),.88) 45%,rgba(var(--cor-rgb),.62) 100%)} .capa-blog .wrap{position:relative;z-index:2} .capa-blog h1{color:#fff;font-size:clamp(32px,2.6vw + 12px,60px);line-height:1.06;font-weight:700;letter-spacing:-.035em;max-width:18ch;margin-bottom:var(--esp-item)} .capa-blog .sub{color:rgba(255,255,255,.72);font-size:var(--t-apoio);line-height:1.65;max-width:560px} .busca{margin-top:30px;display:flex;gap:10px;max-width:520px} .busca input{flex:1;border-radius:999px;padding:14px 20px;font-size:16px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)} .busca input::placeholder{color:rgba(255,255,255,.55)} /* Capa da lista de artigos: faixa baixa, com a busca ao lado do título em vez de embaixo. Antes ela comia meia tela antes do primeiro artigo aparecer — numa página cujo trabalho é entregar leitura, apresentação é atraso. As outras capas do site (serviços, escritório, contato) continuam altas: lá a página é sobre o assunto anunciado, não sobre o que vem depois dela. */ @media(min-width:701px){ .capa-blog:has(.busca),.capa-blog.com-foto:has(.busca){padding:clamp(84px,7vw,112px) 0 clamp(34px,3.4vw,48px)} /* A .sec-b não tem padding em cima porque o respiro sempre veio dos 144px de folga que a capa carregava embaixo. Encolhendo a capa, esse respiro sumiu junto e o primeiro artigo encostou na faixa verde. */ .capa-blog:has(.busca) + .sec-b{padding-top:clamp(30px,3.2vw,48px)} .capa-blog:has(.busca) .wrap{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,32vw,420px); align-items:center;column-gap:44px} .capa-blog:has(.busca) h1{grid-area:1 / 1;margin-bottom:8px;font-size:clamp(30px,1.6vw + 16px,44px)} .capa-blog:has(.busca) .sub{grid-area:2 / 1;max-width:58ch;font-size:15.5px;line-height:1.6} .capa-blog:has(.busca) .busca{grid-area:1 / 2 / 3 / 3;margin-top:0;max-width:none} } /* Os filtros acompanham a lista, não a abertura da página: quem chega quer ler, e filtrar é ferramenta de quem já está procurando algo específico. Por isso eles ficam na linha do título da seção, do tamanho de um rótulo. */ .filtros-linha{margin:0} .filtros{display:flex;gap:9px;flex-wrap:wrap;position:relative;z-index:3;margin:0} .tit-sec .filtros .chip{padding:6px 12px;font-size:12.5px;background:none;border-color:transparent;color:var(--cinza)} .tit-sec .filtros .chip:hover{border-color:var(--linha);color:var(--tinta)} .tit-sec .filtros .chip.on{background:var(--claro);border-color:var(--linha);color:var(--tinta);font-weight:600} .tit-sec .filtros .chip .q{font-size:11.5px;opacity:.7} .chip{background:#fff;border:1px solid var(--linha);border-radius:999px;padding:10px 18px;font-size:13.5px;font-weight:500;text-decoration:none;white-space:nowrap} .chip.on{background:var(--acento);border-color:var(--acento);font-weight:600} .chip .q{color:var(--cinza);font-weight:400;margin-left:5px;font-size:12.5px} .chip.on .q{color:#243F1A} /* O destaque cabe junto com o começo da lista na primeira tela: com 400px de foto ele empurrava os outros artigos para fora, e o texto ao lado terminava bem antes da borda de baixo, deixando um vazio branco no meio do card. */ .destaque{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--linha);border-radius:var(--raio-g);overflow:hidden;margin-bottom:40px} .destaque .foto{position:relative;min-height:330px;background:var(--claro)} .destaque .foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .destaque .fx{padding:36px 38px;display:flex;flex-direction:column;justify-content:center} .selo-dest{display:inline-block;align-self:flex-start;background:var(--cor);color:var(--acento);font-size:11.5px;font-weight:600;padding:6px 13px;border-radius:999px;margin-bottom:18px} .destaque h2{font-size:clamp(24px,3vw,34px);line-height:1.17;font-weight:700;letter-spacing:-1.1px;margin-bottom:16px} .destaque h2 a{text-decoration:none} .destaque p{color:var(--cinza);font-size:var(--t-apoio);line-height:1.72;margin-bottom:26px} /* Monitor grande: sem teto, a foto virava uma faixa panorâmica de 2,6:1 e a linha de texto passava dos 700px — larga demais para o olho voltar ao começo da linha seguinte. */ @media(min-width:1400px){ .destaque .foto{min-height:400px} .destaque .fx{padding:44px 54px} .destaque h2{max-width:22ch} .destaque p{max-width:46ch} } .meta{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--cinza);flex-wrap:wrap;align-self:flex-start} .meta .av{width:34px;height:34px;border-radius:50%;background:var(--claro);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--cor)} .meta .pt{width:3px;height:3px;border-radius:50%;background:#C3CED4} .tit-sec{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:24px;flex-wrap:wrap} .tit-sec:has(.filtros){align-items:center} /* Em monitor grande cada bloco fica maior, e o mesmo espaçamento que separava bem os cards pequenos passa a parecer que está tudo encostado. */ @media(min-width:1080px){ .tit-sec{margin-bottom:30px} .destaque{margin-bottom:clamp(48px,4vw,64px)} } .tit-sec h2,.tit-sec h3{font-size:clamp(19px,.6vw + 17px,24px);font-weight:700;letter-spacing:-.7px} .captura{background:var(--claro);border-radius:var(--raio-g);padding:44px;margin:56px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center} .captura h3{font-size:clamp(22px,2.6vw,30px);line-height:1.2;font-weight:700;letter-spacing:-1px;margin-bottom:12px} .captura p{color:var(--cinza);font-size:var(--t-apoio);line-height:1.7} .captura .cx{background:#fff;border:1px solid var(--linha);border-radius:18px;padding:24px} .captura .cx label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px} .captura .cx input{width:100%;border:1px solid var(--linha);border-radius:12px;padding:13px 15px;font-size:16px;margin-bottom:14px} .vazio{border:1px dashed var(--linha);border-radius:var(--raio-g);padding:48px 32px;text-align:center;color:var(--cinza)} .vazio h3{color:var(--tinta);font-size:clamp(18px,.5vw + 16.5px,22px);font-weight:600;margin-bottom:10px} /* paginação */ .pagina{display:flex;justify-content:center;gap:8px;margin:52px 0 0} /* --- artigo ------------------------------------------------------------- */ .progresso{position:fixed;top:0;left:0;height:3px;background:var(--acento);width:0;z-index:99;transition:width .1s linear} .migalha{font-size:13px;color:var(--cinza);padding:26px 0 0} .migalha a{text-decoration:none} .migalha .sep{margin:0 7px;color:#C3CED4} .capa-art{padding:26px 0 0} .catg{display:inline-block;background:var(--cor);color:var(--acento);font-size:11.5px;font-weight:600;padding:7px 14px;border-radius:999px;margin-bottom:20px;text-decoration:none} .capa-art h1{font-size:clamp(30px,2.4vw + 12px,54px);line-height:1.1;font-weight:700;letter-spacing:-.032em;max-width:20ch;margin-bottom:var(--esp-item)} .linha-fina{font-size:clamp(16px,.45vw + 14.7px,20px);line-height:1.6;color:var(--cinza);max-width:54ch;margin-bottom:28px} .assin{display:flex;align-items:center;gap:13px;flex-wrap:wrap;font-size:13.5px;color:var(--cinza);padding-bottom:30px;border-bottom:1px solid var(--linha)} .assin .av{width:42px;height:42px;border-radius:50%;background:var(--claro);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--cor);flex:none} .av.foto{object-fit:cover;display:block} .assin b{color:var(--tinta);font-weight:600;display:block;font-size:14px} .assin .pt{width:3px;height:3px;border-radius:50%;background:#C3CED4} .foto-capa{border-radius:var(--raio-g);overflow:hidden;margin:30px 0 0} .foto-capa img{width:100%;max-height:440px;object-fit:cover} .credito{font-size:12px;color:#8C9BA3;padding-top:9px} .leitura{display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,18vw,280px);gap:clamp(34px,4vw,72px);padding:var(--esp-bloco) 0 var(--esp-sec);align-items:start} .indice{position:sticky;top:26px} .indice .tt,.compart .tt{font-size:11.5px;font-weight:700;letter-spacing:1.2px;color:var(--cinza);margin-bottom:14px} .indice a{display:block;font-size:13.5px;line-height:1.45;color:var(--cinza);text-decoration:none;padding:8px 0 8px 14px;border-left:2px solid var(--linha)} .indice a.on{color:var(--tinta);font-weight:600;border-left-color:var(--cor)} .compart{margin-top:26px;padding-top:20px;border-top:1px solid var(--linha)} .compart a,.compart button{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;text-decoration:none;border:1px solid var(--linha);border-radius:999px;padding:9px 15px;margin:0 6px 8px 0;background:#fff;color:inherit} /* Sans em tudo: a serifada vinha do tema de origem (blog) e destoava do resto — era a única página com outra voz. */ .texto{font-size:clamp(16.5px,.3vw + 15.6px,19px);line-height:1.75;color:#171F22;max-width:68ch} .texto p{margin-bottom:24px} .texto h2{font-family:var(--sans);font-size:clamp(21px,.9vw + 18px,29px);line-height:1.25;font-weight:700;letter-spacing:-.9px;margin:46px 0 16px;scroll-margin-top:24px} .texto h3{font-family:var(--sans);font-size:clamp(17.5px,.35vw + 16.5px,21px);font-weight:600;letter-spacing:-.3px;margin:32px 0 12px;scroll-margin-top:24px} .texto ul,.texto ol{margin:0 0 24px 22px} .texto li{margin-bottom:11px} .texto strong{font-weight:600} .texto a{color:#12617F;text-decoration:underline;text-underline-offset:3px} .texto img{border-radius:var(--raio);margin:12px 0} .texto figure{margin:30px 0} .texto figcaption{font-family:var(--sans);font-size:13px;color:var(--cinza);padding-top:9px} /* caixas do artigo — o redator aplica pelos estilos de bloco */ .resumo{background:var(--claro);border-radius:var(--raio);padding:28px 30px;margin-bottom:38px;font-family:var(--sans)} .resumo .tt{font-size:12px;font-weight:700;letter-spacing:1.2px;color:var(--cor);margin-bottom:14px} .resumo ul{margin:0 0 0 18px;font-size:var(--t-apoio);line-height:1.65} .resumo li{margin-bottom:9px} .destaque-cit,.texto blockquote.citacao{border-left:3px solid var(--acento);padding:6px 0 6px 24px;margin:34px 0;font-size:clamp(18.5px,.7vw + 16px,24px);line-height:1.5;font-weight:600;font-family:var(--sans);letter-spacing:-.5px} .atencao,.texto .atencao{background:#FFF8E8;border:1px solid #F0E0B8;border-radius:18px;padding:24px 26px;margin:34px 0;font-family:var(--sans);font-size:var(--t-apoio);line-height:1.68} .atencao b{display:block;margin-bottom:7px;font-size:14px} .checklist,.texto .checklist{border:1px solid var(--linha);border-radius:var(--raio);padding:26px 28px;margin:34px 0;font-family:var(--sans)} .checklist .tt{font-size:var(--t-h3);font-weight:700;letter-spacing:-.4px;margin-bottom:16px} .checklist ul{list-style:none;margin:0} .checklist li{display:flex;gap:11px;font-size:var(--t-apoio);line-height:1.6;padding:9px 0;border-bottom:1px solid var(--linha);margin:0} .checklist li:last-child{border-bottom:0} .checklist li::before{content:"✓";color:var(--cor);font-weight:700;flex:none} .texto .checklist li::before{content:"✓";color:var(--cor);font-weight:700;margin-right:11px} .cta-meio{background:var(--cor);border-radius:22px;padding:32px;margin:42px 0;font-family:var(--sans)} .cta-meio h4{color:#fff;font-size:clamp(18.5px,.5vw + 17px,22px);font-weight:700;letter-spacing:-.6px;line-height:1.3;margin-bottom:10px} .cta-meio p{color:rgba(255,255,255,.72);font-size:var(--t-apoio);line-height:1.65;margin-bottom:20px} .faq{margin:46px 0 0;font-family:var(--sans)} .faq h2{font-family:var(--sans)} .faq details{border:1px solid var(--linha);border-radius:16px;padding:18px 22px;margin-bottom:11px} .faq summary{font-size:var(--t-h3);font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--cinza);font-weight:500} .faq details[open] summary::after{content:"–"} .faq p{font-size:var(--t-apoio);line-height:1.7;color:var(--cinza);margin-top:12px} .autor{display:flex;gap:18px;border:1px solid var(--linha);border-radius:var(--raio);padding:26px;margin:46px 0 0;font-family:var(--sans)} .autor .av{width:56px;height:56px;border-radius:50%;background:var(--claro);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--cor);flex:none} .autor b{font-size:var(--t-h3);display:block;margin-bottom:5px} .autor p{font-size:var(--t-apoio);line-height:1.65;color:var(--cinza)} .relac{background:var(--claro);padding:70px 0} .relac h2{font-size:clamp(20px,.7vw + 18px,26px);font-weight:700;letter-spacing:-.8px;margin-bottom:24px} /* --- página "O escritório" --------------------------------------------- Mosaico com altura de linha definida: deixar o grid se virar sozinho fez a galeria virar uma tela inteira de foto. A foto grande ocupa duas linhas e fecha exatamente com as duas da direita, sem buraco e sem sobreposição. */ .galeria-esc{--h-linha:clamp(140px,14vw,215px);display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:var(--h-linha);gap:clamp(8px,1vw,14px);margin-top:var(--esp-bloco)} .galeria-esc figure{margin:0;overflow:hidden;border-radius:var(--raio);background:var(--claro)} .galeria-esc img{width:100%;height:100%;object-fit:cover;display:block} .galeria-esc .g1{grid-column:span 2;grid-row:span 2} .galeria-esc .g2{grid-column:span 2} @media(max-width:900px){ .galeria-esc{--h-linha:clamp(120px,26vw,190px);grid-template-columns:repeat(2,1fr)} .galeria-esc .g1{grid-column:span 2;grid-row:span 2} .galeria-esc .g2{grid-column:span 2;grid-row:span 1} } .texto-duplo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,72px);align-items:start} @media(max-width:900px){.texto-duplo{grid-template-columns:1fr}} /* Três colunas em tela grande: com seis fotos, quatro colunas deixam a última linha pela metade. */ .grade-imprensa{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--esp-item)} @media(min-width:1000px){.grade-imprensa{grid-template-columns:repeat(3,1fr)}} .grade-imprensa figure{margin:0;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;background:#fff} .grade-imprensa img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block} .grade-imprensa figcaption{font-size:13.5px;color:var(--cinza);padding:14px 16px;line-height:1.5} /* --- páginas simples e contato ------------------------------------------ */ .pagina-capa{background:var(--claro);padding:56px 0} .pagina-capa h1{font-size:clamp(28px,2.2vw + 12px,48px);line-height:1.1;font-weight:700;letter-spacing:-.03em;max-width:20ch} .conteudo-pagina{font-size:clamp(16px,.3vw + 15px,18px);line-height:1.8;color:#232E32;max-width:74ch;padding:56px 0 90px} .conteudo-pagina h2{font-size:clamp(21px,.8vw + 18px,27px);font-weight:700;letter-spacing:-.7px;margin:38px 0 14px} .conteudo-pagina h3{font-size:clamp(17.5px,.3vw + 16.5px,20px);font-weight:600;margin:28px 0 10px} .conteudo-pagina p{margin-bottom:20px} .conteudo-pagina ul,.conteudo-pagina ol{margin:0 0 20px 22px} .conteudo-pagina li{margin-bottom:9px} .conteudo-pagina a{color:#12617F;text-decoration:underline;text-underline-offset:3px} .contato-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:60px 0 90px;align-items:start} .dados-contato .item{padding:16px 0;border-bottom:1px solid var(--linha)} .dados-contato .rotulo{font-size:12.5px;font-weight:600;color:var(--cinza);margin-bottom:4px} .dados-contato .valor{font-size:var(--t-h3);font-weight:600} .form-contato{background:var(--claro);border-radius:var(--raio-g);padding:32px} /* Campos com 16px: abaixo disso o iPhone dá zoom sozinho ao focar. */ .form-contato label{display:block;font-size:13px;font-weight:600;margin-bottom:7px} .form-contato input,.form-contato textarea{width:100%;border:1px solid var(--linha);border-radius:12px;padding:13px 15px;font-size:16px;margin-bottom:16px;background:#fff} .form-contato textarea{min-height:130px;resize:vertical} .form-contato .aviso-lgpd{font-size:12.5px;line-height:1.6;color:var(--cinza);margin:4px 0 16px} .recado{border-radius:14px;padding:14px 18px;font-size:14.5px;margin-bottom:18px} .recado.ok{background:#E6F5EC;border:1px solid #B6E0C6;color:#14503A} .recado.erro{background:#FDECEC;border:1px solid #F2C4C4;color:#7A2020} .mel{display:none} /* --- 404 ---------------------------------------------------------------- */ .erro404{padding:80px 0} .erro404 .cod{font-size:clamp(56px,6vw + 30px,110px);font-weight:800;letter-spacing:-3px;color:var(--claro);line-height:1} .erro404 h1{font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-1.2px;margin:-16px 0 16px} /* --- estilos de bloco (o que o redator escolhe no editor) --------------- */ .resumo{background:var(--claro);border-radius:var(--raio);padding:28px 30px;margin:0 0 38px;font-family:var(--sans);font-size:var(--t-apoio);line-height:1.65} .resumo p:first-child{font-size:12px;font-weight:700;letter-spacing:1.2px;color:var(--cor);margin-bottom:14px;text-transform:uppercase} .resumo ul{margin:0 0 0 18px} .resumo li{margin-bottom:9px} .atencao{background:#FFF8E8;border:1px solid #F0E0B8;border-radius:18px;padding:24px 26px;margin:34px 0;font-family:var(--sans);font-size:var(--t-apoio);line-height:1.68} .atencao p:first-child strong{display:block;margin-bottom:7px;font-size:14px} .checklist{list-style:none;border:1px solid var(--linha);border-radius:var(--raio);padding:26px 28px;margin:34px 0;font-family:var(--sans)} .checklist li{display:flex;gap:11px;font-size:var(--t-apoio);line-height:1.6;padding:9px 0;border-bottom:1px solid var(--linha);margin:0} .checklist li:last-child{border-bottom:0} .checklist li::before{content:"✓";color:var(--cor);font-weight:700;flex:none} .faq{margin:46px 0 0;font-family:var(--sans)} .faq .wp-block-details{border:1px solid var(--linha);border-radius:16px;padding:18px 22px;margin-bottom:11px} .faq summary{font-size:var(--t-h3);font-weight:600;cursor:pointer} /* --- classes do editor -------------------------------------------------- */ .texto .alignwide,.conteudo-pagina .alignwide{max-width:min(100%,1000px)} .texto .alignfull,.conteudo-pagina .alignfull{max-width:100%} .texto .aligncenter{margin-left:auto;margin-right:auto} .wp-caption img{border-radius:var(--raio)} .wp-block-table table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px} .wp-block-table th,.wp-block-table td{border:1px solid var(--linha);padding:11px 14px;text-align:left} .wp-block-table th{background:var(--claro);font-weight:600} .wp-block-embed__wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--raio)} .wp-block-embed__wrapper iframe{position:absolute;inset:0;width:100%;height:100%} /* --- responsivo --------------------------------------------------------- As grades usam auto-fit, então elas se viram sozinhas. Aqui ficam só as mudanças que dependem de decisão, não de espaço: virar o menu, empilhar o hero, esconder o índice lateral. ---------------------------------------------------------------------- */ @media(max-width:1000px){ .hero .wrap{grid-template-columns:1fr} .cartao{max-width:520px} .destaque{grid-template-columns:1fr} .destaque .foto{min-height:240px} .captura{grid-template-columns:1fr;padding:clamp(24px,4vw,36px)} .leitura{grid-template-columns:1fr;gap:0} .indice{display:none} .contato-grid{grid-template-columns:1fr} .fgrid{grid-template-columns:1fr 1fr} .menu{display:none} .abre-menu{display:inline-flex} } @media(max-width:700px){ .fgrid{grid-template-columns:1fr} /* O card repete o que a chamada final já diz; na tela pequena ele só empurra o conteúdo para fora da primeira dobra. */ .hero .cartao{display:none} .hero{padding:clamp(100px,14vh,140px) 0 clamp(32px,5vh,48px)} .faixa .wrap{flex-direction:column;gap:8px;align-items:flex-start} /* Blog no celular: quem entra aqui quer ver artigo, não a apresentação da seção. A capa com foto, a descrição e a busca ocupavam mais de uma tela antes do primeiro título aparecer. Fica um cabeçalho de texto simples, e os artigos começam logo. Em tela grande a capa continua como estava — lá o espaço sobra. */ .capa-blog:has(.busca),.capa-blog.com-foto:has(.busca){background:none;padding:14px 0 0;min-height:0} .capa-blog:has(.busca) h1{margin-bottom:0} /* Título colado no conteúdo: o espaçamento de seção abria um vazio grande entre "Artigos" e a primeira foto. */ .capa-blog:has(.busca) + .sec-b,.sec-b{padding-top:0} /* Categorias escondidas: cinco filtros para sete artigos, três deles com um artigo cada. Não ajudam a achar nada e ocupam a altura de um card. Voltam quando houver volume que justifique. */ .filtros-linha{display:none} .capa-blog:has(.busca) .capa-fundo{display:none} /* Folga entre o título e a foto do primeiro artigo: sem ela o "g" de "Artigos" encostava na imagem. */ .capa-blog:has(.busca) h1{color:var(--tinta);font-size:clamp(26px,7vw,32px);margin:0 0 16px} .capa-blog:has(.busca) .sub,.capa-blog:has(.busca) .apoio,.capa-blog:has(.busca) p{display:none} .filtros{margin:0} .filtros-linha{margin-bottom:10px} /* Lista de artigos no celular: card horizontal em vez de card vertical. No formato antigo cabia UM artigo por tela — num blog, o que a pessoa faz é correr o olho por vários títulos até um interessar. Foto pequena à esquerda, título grande à direita, resumo fora: o que decide o clique é o título, e o resumo só empurrava o próximo artigo para fora da tela. */ .grade{grid-template-columns:1fr;gap:0} .card{flex-direction:row;align-items:stretch;gap:14px;border:0;border-bottom:1px solid var(--linha); border-radius:0;padding:16px 0;background:none} .card .im{height:auto;width:104px;flex:none;border-radius:14px} .card .im img{height:100%;min-height:88px} .card .cat{display:none} .card .co{padding:0;justify-content:center;gap:6px} .card h3{font-size:16.5px;line-height:1.32;margin:0; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .card .re{display:none} .card .pe{border:0;padding:0;gap:10px;justify-content:flex-start;font-size:12px} .card .pe span+span::before{content:"·";margin-right:10px;opacity:.6} .card:last-child{border-bottom:0} /* Destaque no celular: a foto atravessa a tela de ponta a ponta. É a única imagem grande da página e margem lateral só a encolhe. A margem negativa devolve o padding do container — e o overflow do card precisa abrir, senão ele corta exatamente o sangramento que a margem criou (era isso que deixava a tira branca dos dois lados). O texto fica na margem normal, alinhado com os cards de baixo. */ .destaque{border:0;border-radius:0;overflow:visible;margin-bottom:30px} .destaque .foto{min-height:46vw;border-radius:0; margin-inline:calc(var(--margem) * -1);width:calc(100% + var(--margem) * 2)} .destaque .fx{padding:15px 0 0} .destaque .selo-dest{margin-bottom:12px} .destaque h2{font-size:clamp(21px,5.6vw,26px);margin-bottom:8px} .destaque p{margin-bottom:12px;font-size:15.5px;line-height:1.6; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Assinatura em uma linha: no celular o avatar e o nome do autor quebravam a linha e empurravam o próximo artigo para fora da tela. Data e tempo de leitura bastam. */ .destaque .meta{gap:8px;font-size:12.5px;flex-wrap:nowrap} .destaque .meta .av,.destaque .meta .av+span{display:none} .destaque .meta .av+span+.pt{display:none} .tit-sec{margin-bottom:14px} /* Filtros em faixa rolável: quebrar linha empurraria os artigos para baixo da tela. A barra de rolagem some (é feia e não informa nada), e o último item ganha folga para não parecer cortado na borda. O desbotado à direita é o que avisa que existe mais para o lado. */ .filtros{overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;margin-top:-40px; scrollbar-width:none;-ms-overflow-style:none; -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent); scroll-snap-type:x proximate} .filtros::-webkit-scrollbar{display:none} .filtros>*{flex:none;scroll-snap-align:start} .filtros>*:last-child{margin-right:34px} .fim{flex-direction:column;gap:8px} /* Cabeçalho em uma linha só: marca compacta, botão curto, menu. Quebrando em duas linhas ele comia 250px antes do conteúdo aparecer. */ .nav{flex-wrap:nowrap;gap:10px} .marca{gap:8px;min-width:0} .marca .selo{width:34px;height:34px;font-size:12px} /* 38vw cortava nome e assinatura de tamanho normal por um fio, e sobrava espaço até o botão do menu. 52vw usa o vão que já existia. */ .marca b{font-size:12.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw} .marca span{font-size:9px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw} .cab .btn-lim{font-size:12.5px;padding:9px 12px;gap:6px;white-space:nowrap} .cab .btn-lim .seta{display:none} .hero .acoes{gap:10px} .hero .acoes .btn-lim,.hero .acoes .btn-out{width:100%;justify-content:center} } /* Ultrawide: acima de 2000px a página para de crescer em largura, mas ganha respiro nas laterais para não virar uma coluna solta no meio do vazio. */ @media(min-width:2000px){ :root{--margem:clamp(72px,8vw,180px)} } /* Quem pediu menos animação no sistema não vê o vídeo nem transições. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } /* --- passos: grade simples (substitui a pilha pinada, 17/09/2026) -------- Intro à esquerda sem sticky; quatro cartões em 2×2 à direita, o primeiro na cor da marca. Sem pin, sem scrub: só o fade de entrada do data-revela. */ .passos-simples .passos-grade{align-items:center} .passos-simples .passos-intro{position:static;margin-bottom:0} .passos-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)} .passo-s{background:var(--claro);border-radius:var(--raio-g);padding:clamp(22px,2.6vw,38px); display:flex;flex-direction:column;gap:12px; transition:transform .35s ease,box-shadow .35s ease} .passo-s:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(var(--veu),.14)} .passo-s .n{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--acento-esc)} .passo-s h3{font-size:clamp(18px,.8vw + 14px,24px);font-weight:700;letter-spacing:-.02em;color:var(--tinta);line-height:1.2} .passo-s p{font-size:15px;line-height:1.65;color:var(--cinza)} .passo-s:first-child{background:var(--cor)} .passo-s:first-child .n{color:var(--acento)} .passo-s:first-child h3{color:#fff} .passo-s:first-child p{color:rgba(255,255,255,.78)} @media (max-width:900px){.passos-lista{grid-template-columns:1fr}} @media (min-width:901px) and (max-width:1100px){.passos-lista{grid-template-columns:1fr}}