/* ========================================================================== R&C Computadores — estilo.css ESQUELETO (fase de estrutura). Visual neutro em tons de cinza, de propósito — a identidade visual definitiva entra quando a logo em vetor (SVG/AI) e as cores exatas forem confirmadas. ========================================================================== */ /* -------------------------------------------------------------------------- 1. VARIÁVEIS DE COR (:root) Trocar a identidade visual do site inteiro = editar só este bloco. -------------------------------------------------------------------------- */ :root { /* ---- Paleta NEUTRA em uso agora (esqueleto, tons de cinza) ---- */ --cor-fundo: #ffffff; /* fundo geral da página */ --cor-fundo-alt: #f4f4f5; /* fundo alternado de seções (zebra) */ --cor-texto: #1f2124; /* texto principal, quase preto */ --cor-texto-suave: #55585e; /* texto secundário / legendas */ --cor-borda: #d7d9dc; /* bordas, divisores, contornos de card */ --cor-primaria: #1C4D86; /* PALETA OFICIAL: azul escuro da marca (era #3a3d42, cinza provisório do esqueleto) */ --cor-primaria-hover: #133965; /* azul escuro, degrau 700 da escala oficial — não é cor inventada, vem do documento de marca */ --cor-header-fundo: #ffffff; /* fundo do cabeçalho fixo */ --cor-footer-fundo: #202225; /* fundo do rodapé (escuro neutro) */ --cor-footer-texto: #e7e8ea; /* texto do rodapé */ --cor-card-fundo: #ffffff; /* fundo dos cards de serviço/produto */ /* ---- Cores da marca (cabeçalho em duas faixas) ---- Azul escuro e bordô confirmados pelo dono para a barra de contato e para os botões de navegação do cabeçalho. Mesmos valores de --cor-primaria / --cor-primaria-hover (500/700 da escala azul), mantidos como tokens próprios porque nomeiam um uso específico (faixa de contato, botões de menu, hero). */ --cor-azul-marca: #1C4D86; /* faixa de contato + botões de menu */ --cor-azul-marca-hover: #133965; /* azul escuro, degrau 700 da escala oficial (era #153c69, tom inventado fora da escala) */ --cor-bordo-marca: #B22A46; /* botão "Contato" — destaque proposital */ --cor-bordo-marca-hover: #881E34; /* bordô, degrau 700 da escala oficial (era #8f2138, tom inventado fora da escala) */ --cor-foco-anel-externo: #1f2124; /* anel externo do foco (contraste no fundo branco) */ --cor-azul-claro-marca: #0098DA; /* acento — extremo claro do gradiente da logo (hero) */ --cor-hero-camada: rgba(28, 77, 134, 0.20); /* véu de BASE, uniforme, sobre a foto inteira — só para unificar a cor da foto com a marca. Baixo de propósito (dentro da faixa 15%-30% pedida): o contraste de verdade não vem daqui, vem da sombra LOCALIZADA em cima do texto (ver .hero background-image, seção 5). ANTES este valor era 0,85 e SOMAVA com um véu de 0,75 no background-image — as duas camadas empilhadas resultavam em ~96% de opacidade azul (quase sólida), por isso o dono via "a imagem não aparece". Corrigido em 12/08/2026. */ --hero-imagem: url("../img/hero.jpg"); /* ATENÇÃO ao "../": url() no CSS resolve a partir da pasta DESTE arquivo (css/), não da raiz do site. Sem o "../" o navegador procuraria css/img/hero.jpg e a imagem nunca apareceria — sem erro visível. */ --raio-pill: 999px; /* pill dos botões do cabeçalho — mesmo valor numérico já usado em .selo-novo, para não criar um 3º raio */ --cor-branco: #ffffff; /* branco puro — texto/preenchimento sobre fundo colorido (botões do menu, hero) */ /* ---- Verde oficial do WhatsApp — só para o botão de contato direto ---- Cor de marca de terceiro (WhatsApp), não da nossa paleta — por isso fica em variáveis próprias, separadas das cores --cor-azul-marca / --cor-bordo-marca (essas sim são a nossa identidade). */ --cor-whatsapp: #25D366; /* fundo do botão "Falar no WhatsApp" */ --cor-whatsapp-hover: #1DA851; /* mesmo verde, um degrau mais escuro (hover) */ /* ---- Verde da seção de Reciclagem (Lixo Eletrônico) ---- Não é o mesmo verde do WhatsApp de propósito: no site inteiro o verde virou sinal de "isso abre o WhatsApp" (ver --cor-whatsapp acima). Se a seção de reciclagem usasse esse mesmo verde, o visitante confundiria o card/faixa da seção com "mais um botão de WhatsApp". Por isso aqui entra um verde mais escuro e fechado, com identidade própria — verde "reciclagem/ecológico", não verde "conversa". */ --cor-verde-reciclagem: #2E7D32; /* fundo da faixa e ícones da seção */ --cor-verde-reciclagem-hover: #1B5E20; /* mesmo verde, um degrau mais escuro (hover) */ --cor-verde-reciclagem-claro: #4CAF50; /* extremo claro do gradiente dos ícones dos cards */ /* ---- Cor das estrelas do widget de Avaliações do Google ---- */ --cor-avaliacoes-dourado: #F5B400; /* dourado usado nos sites de avaliação (Google, etc.) — separado de --cor-primaria (azul) de propósito: aqui a cor precisa imitar o padrão visual do widget, não a marca */ /* ---- Cores das bolinhas de iniciais dos avaliadores (estilo Gmail) ---- Cada card do carrossel de Avaliações recebe uma cor diferente, igual aos avatares de contato do Gmail — antes todas as bolinhas eram cinza e iguais. As 8 cores foram escolhidas com contraste mínimo de 4.5:1 (padrão WCAG AA) para as iniciais em texto BRANCO por cima. */ --cor-avatar-1: #1A73E8; /* azul */ --cor-avatar-2: #D93025; /* vermelho */ --cor-avatar-3: #188038; /* verde */ --cor-avatar-4: #B06000; /* âmbar escuro */ --cor-avatar-5: #7B1FA2; /* roxo */ --cor-avatar-6: #00695C; /* teal */ --cor-avatar-7: #C2185B; /* rosa */ --cor-avatar-8: #455A64; /* azul-acinzentado */ /* ---- Amarelo oficial do Google (botão do widget de Avaliações) ---- */ --cor-google-amarelo: #FBBC05; --cor-google-amarelo-hover: #E0A800; /* Fundos tingidos das seções da metade de baixo da página. São versões bem claras do verde de reciclagem e do dourado das avaliações, para dar cor sem brigar com os cards brancos que ficam por cima. */ --cor-verde-fundo: #DCEFDD; --cor-dourado-fundo: #FFF8E8; /* ---- Cor de destaque para marcadores [[FALTA: ...]] ---- */ /* Fundo amarelo de alerta — NÃO remover até o site estar 100% preenchido. */ --cor-falta-fundo: #fff3b0; --cor-falta-borda: #e0b400; --cor-falta-texto: #5c4a00; /* ---- Tipografia (fontes do sistema — sem CDN, sem Google Fonts) ---- */ --fonte-base: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* ---- Espaçamentos e bordas ---- */ --raio-borda: 6px; --sombra-card: 0 1px 3px rgba(0, 0, 0, 0.08); --largura-maxima: 1140px; /* ========================================================================== ESTIMATIVA A CONFIRMAR — paleta extraída visualmente da logo (arquivo R&C Computadores_ok.jpg, ver BRIEFING-rcomputadores.md secao 5). NÃO ESTÁ EM USO NESTE ESQUELETO. Hex aproximados, sem conta-gotas real. Quando a logo em vetor (SVG/AI/EPS) chegar, extrair as cores exatas e só então substituir os valores das variáveis acima por estas (ou pelas cores confirmadas). --estimativa-azul-claro: #29ABE2 a #00AEEF; (gradiente claro do ícone/letras "R&C") --estimativa-azul-escuro: #003399 a #0033A0; (gradiente escuro do ícone/letras "R&C") --estimativa-vinho: #A50050 a #9E0059; (swoosh e palavra "Computadores"/"TECHNOLOGY") --estimativa-branco: #FFFFFF; (fundo/contraste do monitor) ========================================================================== */ } /* -------------------------------------------------------------------------- 2. RESET BÁSICO E BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } section[id] { /* Compensa a altura do cabeçalho, que agora é sticky por inteiro (faixa única). Sem isso, o título da seção fica escondido atrás dele ao chegar por um link âncora. Valor calculado para a altura do cabeçalho fechado (menu mobile recolhido) neste breakpoint — ver também os ajustes nas media queries da seção 4. Recalculado para a logo de 160px de largura (~76px de altura) + padding-top 0,6rem + padding-bottom 0,6rem (agora simétrico, para centralizar a logo com os botões — ver .cabecalho-linha) + borda 1px ≈ 96px, com folga até 97px. */ scroll-margin-top: 97px; } body { margin: 0; font-family: var(--fonte-base); color: var(--cor-texto); background-color: var(--cor-fundo); line-height: 1.6; } img { max-width: 100%; height: auto; display: block; } a { color: var(--cor-primaria); } a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid var(--cor-primaria); outline-offset: 2px; } .container { width: 100%; max-width: var(--largura-maxima); margin: 0 auto; padding: 0 1.25rem; } h1, h2, h3 { line-height: 1.25; margin-top: 0; } section { padding: 3rem 0; } .secao-alt { background-color: var(--cor-fundo-alt); } .secao-titulo { text-align: center; margin-bottom: 0.5rem; } .secao-subtitulo { text-align: center; color: var(--cor-texto-suave); max-width: 640px; margin: 0 auto 2.5rem; } /* -------------------------------------------------------------------------- 3. MARCADOR [[FALTA: ...]] — destaque visual obrigatório Todo texto/dado que ainda não foi fornecido pelo dono usa esta classe. -------------------------------------------------------------------------- */ .falta { background-color: var(--cor-falta-fundo); border: 1px dashed var(--cor-falta-borda); color: var(--cor-falta-texto); padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.9em; font-weight: 600; display: inline-block; } .falta-bloco { background-color: var(--cor-falta-fundo); border: 2px dashed var(--cor-falta-borda); color: var(--cor-falta-texto); padding: 1rem 1.25rem; border-radius: var(--raio-borda); font-weight: 600; text-align: center; } /* -------------------------------------------------------------------------- 4. CABEÇALHO — FAIXA ÚNICA, fundo branco sólido, sticky (gruda no topo ao rolar a página inteira). Logo à esquerda, navegação à direita. Antes o cabeçalho tinha 3 faixas (barra de contato azul + faixa só da logo + faixa de botões, sticky separada). O dono pediu para simplificar: uma faixa só, branca, com a logo e 4 botões de menu. O telefone e o WhatsApp saíram daqui e agora vivem no Hero (ver seção 5). Como agora o
inteiro é a única coisa no topo da página (não há mais faixas acima dele disputando espaço), position:sticky funciona aplicado direto nele — o problema do sticky "parar de grudar" que existia antes só acontecia porque a faixa sticky ficava dentro de um
mais alto que ela; aqui o
É a própria faixa sticky. */ .cabecalho { position: sticky; top: 0; z-index: 100; background-color: var(--cor-header-fundo); border-bottom: 1px solid var(--cor-borda); } .cabecalho-linha { display: flex; /* center: alinha o CENTRO vertical da logo com o centro vertical dos botões de navegação — pedido do dono. A logo é bem mais alta (200px de largura, ~95px de altura) que os botões, então com "center" ela fica mais alta que os botões, mas os dois ficam opticamente na mesma linha (mesmo meio). Padding simétrico (topo = base) é o que garante esse centro: com folga igual dos dois lados, o item mais alto (a logo) fica sobrando pros lados igualmente, sem cortar nada — não há altura fixa no cabeçalho. */ align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; padding-top: 0.6rem; padding-bottom: 0.6rem; } /* Esconde visualmente sem remover do DOM — leitores de tela e buscadores continuam lendo o conteúdo normalmente. NÃO usar display:none nem visibility:hidden aqui, pois essas duas técnicas também escondem o elemento de leitores de tela, o que anula o propósito da classe. */ .apenas-leitor-tela { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cabecalho-logo { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.05rem; color: var(--cor-texto); text-decoration: none; flex: 0 1 auto; min-width: 0; } .cabecalho-logo img { /* Logo dimensionada pela LARGURA — 200px no desktop (pedido do dono). height: auto mantém a proporção real do arquivo (200x95, ~2,1:1), então a altura acompanha sozinha e a imagem nunca é distorcida nem cortada. No mobile a largura é reduzida nas media queries abaixo pra não estourar telas estreitas; a altura acompanha proporcionalmente. */ width: 160px; height: auto; flex-shrink: 0; } .cabecalho-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Botão "Menu" — controla a navegação via JavaScript (js/menu.js). */ .menu-mobile-toggle { display: inline-block; border: 1px solid var(--cor-borda); background: var(--cor-fundo); border-radius: var(--raio-borda); padding: 0.4rem 0.6rem; font-size: 0.85rem; cursor: pointer; flex: 0 0 auto; } /* Navegação: ocupa sempre a largura toda do cabeçalho, empilhada verticalmente no celular. VISÍVEL POR PADRÃO — isso é proposital: se o JavaScript não carregar ou falhar, o menu continua aqui, acessível, em vez de sumir. */ .menu-principal { display: block; flex: 1 0 100%; } .menu-principal ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0.75rem 0 0.25rem; border-top: 1px solid var(--cor-borda); } /* Itens do menu como BOTÕES-PILL (raio total) preenchidos na cor primária da marca. No celular ocupam a largura toda e têm altura mínima de 44px (alvo de toque recomendado para acessibilidade). */ .botao-menu { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; text-align: center; text-decoration: none; white-space: nowrap; font-weight: 600; font-size: 0.95rem; border-radius: var(--raio-pill); padding: 0.75rem 1.25rem; background-color: var(--cor-azul-marca); color: var(--cor-branco); } .botao-menu:hover { background-color: var(--cor-azul-marca-hover); } /* "Contato" é o único botão diferente (bordô da marca) — destaque proposital em relação aos outros três. */ .botao-menu--contato { background-color: var(--cor-bordo-marca); } .botao-menu--contato:hover { background-color: var(--cor-bordo-marca-hover); } /* Foco visível e distinto do hover em qualquer botão de menu: anel branco colado no botão + anel escuro externo, pra aparecer tanto sobre o botão colorido quanto sobre o fundo branco ao redor dele. */ .botao-menu:focus-visible { outline: 2px solid var(--cor-branco); outline-offset: 2px; box-shadow: 0 0 0 4px var(--cor-foco-anel-externo); } /* Estado "fechado" só existe quando o JavaScript roda e adiciona esta classe (ver js/menu.js). Sem JS, essa classe nunca aparece e o menu permanece visível — navegação nunca fica inalcançável. */ .menu-principal.menu-principal--fechado { display: none; } /* Tablet: logo cresce um pouco, cabeçalho ainda com o botão "Menu". */ @media (min-width: 600px) { .cabecalho-logo img { width: 180px; } /* Cabeçalho um pouco mais alto neste breakpoint (logo maior) — ajusta a compensação de âncora das seções. 180px de largura ≈ 85,5px de altura + padding-top 0,6rem + padding-bottom 0,6rem + borda 1px ≈ 106px, com folga até 107px. */ section[id] { scroll-margin-top: 107px; } } @media (min-width: 860px) { .cabecalho-logo { font-size: 1.15rem; flex: 0 0 auto; } .cabecalho-logo img { width: 200px; } .menu-mobile-toggle { display: none; } /* No desktop a navegação sempre aparece ao lado da logo, e a classe de "fechado" do JS não tem efeito nenhum — especificidade maior (duas classes) garante que esta regra vence a de fechado acima. */ .menu-principal, .menu-principal.menu-principal--fechado { display: block; flex: 0 0 auto; } /* Linha única de botões, alinhada à DIREITA — a logo fica à esquerda (justify-content: space-between em .cabecalho-linha cuida do espaçamento entre as duas pontas). */ .menu-principal ul { flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-end; gap: 0.5rem; padding: 0; border-top: 0; } /* Em linha, os botões voltam a ter largura pelo próprio texto (não mais 100%) — a altura continua igual entre eles porque vem do mesmo padding/fonte em todos, não de largura mínima. */ .botao-menu { width: auto; min-height: 40px; padding: 0.6rem 1.1rem; font-size: 0.88rem; } /* Cabeçalho mais alto neste breakpoint (logo de 200px de largura, ~95px de altura) — ajusta de novo a compensação de âncora das seções. 95px + padding-top 0,6rem + padding-bottom 0,6rem + borda 1px ≈ 115px — medido ao vivo no navegador: 115,69px. Folga até 116px. */ section[id] { scroll-margin-top: 116px; } } /* -------------------------------------------------------------------------- 5. HERO Fundo: a foto (var(--hero-imagem)) com um véu azul translúcido por cima (garante contraste para o texto branco) e um gradiente de marca como último recurso, caso a foto falte. Enquanto img/hero.jpg não existir, o navegador falha essa camada em silêncio e só o gradiente aparece — no dia em que a foto for adicionada, ela entra sozinha, sem editar CSS. O véu é DUAS peças, não uma: um véu de base uniforme e leve (::before, --cor-hero-camada) mais um segundo véu que MUDA DE FORMA por largura de tela — chapado no celular, localizado (sombra atrás do texto) a partir de 860px. Ver comentário detalhado dentro de .hero, logo abaixo. */ .hero { position: relative; /* Reduzido de 3.5rem para 2.65rem (~24% a menos) — o dono achou o hero alto demais. Combinado com o layout em duas colunas abaixo (que tira telefone/botões de baixo do parágrafo), a altura total cai bem mais que só este padding sozinho já indicaria. */ padding: 2.65rem 0; /* QUATRO camadas, mobile-first. Em CSS a PRIMEIRA da lista fica POR CIMA. Base (< 860px, texto empilhado ocupando quase a largura toda — ver .hero-conteudo abaixo): um véu CHAPADO, mais forte, porque aqui não existe "margem livre" onde a sombra localizada faria sentido — o texto toma a tela quase inteira. A partir de 860px (layout em duas colunas, texto só no meio — ver media query no fim desta seção) o véu chapado é TROCADO por uma sombra LOCALIZADA, mais fiel à foto nas margens. 1) véu azul chapado (mobile) — foto ainda visível, mas mais coberta, porque o texto cobre quase toda a largura da tela. 2) véu de BASE (--cor-hero-camada, ver :root) — uniforme, leve (20%), aplicado via .hero::before (por cima da foto, abaixo do texto), só para unificar a cor da foto com o azul da marca, nos dois modos. 3) a foto (--hero-imagem). 4) gradiente da marca, que só aparece se a foto faltar. ANTES havia um véu chapado de 75% aqui SOMADO a outro véu de 85% no ::before — as duas camadas empilhadas resultavam em ~96% de opacidade azul (quase sólida) em QUALQUER largura de tela, por isso a foto não aparecia nem no desktop. Corrigido e MEDIDO DE VERDADE em 12/08/2026, no Chrome, com a foto real (img/hero.jpg, recorte cover/center): um script desenhou a foto num , aplicou por cima as MESMAS camadas deste CSS e varreu (passo 8px) os pixels atrás de h1, parágrafo e telefone, calculando o contraste WCAG contra branco pixel a pixel. Script descartável, não faz parte do site. Piores contrastes medidos, viewport de referência 1905px (mínimo exigido entre parênteses): h1 (min 3.0): 3,99 — dentro da faixa alvo [3,4 – 5,0] parágrafo (min 4.5): 5,00 — dentro da faixa alvo [4,9 – 6,5] telefone (min 4.5): 11,25 — bem acima da faixa alvo; o pixel mais crítico do telefone cai sobre um trecho da foto naturalmente muito escuro (placa-mãe), e reduzir o véu praticamente não muda esse valor (testado até 20% de véu total: continua > 11). Não dá pra trazer pra dentro da faixa sem violar a margem mínima do parágrafo — aceito como sobra de contraste, não como defeito. A 360px (mobile, véu chapado): h1 4,37 / parágrafo 5,30 / telefone 9,18 — mesmo padrão. Se trocar a foto ou o texto de lugar, MEÇA o contraste de novo antes de publicar. */ background-image: linear-gradient(rgba(28, 77, 134, 0.45), rgba(28, 77, 134, 0.45)), var(--hero-imagem), linear-gradient(135deg, var(--cor-azul-marca) 0%, var(--cor-azul-claro-marca) 100%); background-size: cover; background-position: center; background-repeat: no-repeat; color: var(--cor-branco); } .hero::before { content: ""; position: absolute; inset: 0; background-color: var(--cor-hero-camada); } .hero .container { position: relative; z-index: 1; } /* Duas colunas: texto (h1 + parágrafo) à esquerda, bloco de contato (telefone + botões) à direita. Mobile-first — aqui embaixo é o padrão empilhado (< 860px); a versão lado a lado entra na media query no fim desta seção. */ .hero-conteudo { display: flex; flex-direction: column; gap: 1.75rem; align-items: stretch; } .hero-coluna-texto { display: flex; flex-direction: column; gap: 1rem; } /* Bloco de contato: telefone e os 2 botões EMPILHADOS verticalmente e centralizados nesta coluna, nesta ordem — telefone, botão WhatsApp, botão Pedir orçamento (o marcador [[FALTA: link do WhatsApp]] mora no HTML logo após o botão do WhatsApp, então cai numa linha própria entre os dois botões, nunca "dentro" de nenhum deles). */ .hero-coluna-contato { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; text-align: center; } .hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); max-width: 22ch; color: var(--cor-branco); } .hero p { font-size: 1.1rem; color: var(--cor-branco); max-width: 60ch; } /* Telefone visível no hero — mesmo destino (tel:) do link do rodapé e da seção de contato, só que em evidência logo na primeira dobra. */ .hero-telefone { margin: 0; font-size: 1.15rem; font-weight: 700; } .hero-telefone a { color: var(--cor-branco); text-decoration: none; } .hero-telefone a:hover { text-decoration: underline; } .hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } /* Escopado só ao hero (".hero .hero-ctas", mais específico que a regra genérica acima) — o MESMO ".hero-ctas" também é usado fora do hero, na seção "Criação de Sites" (um botão só, centralizado), e essa outra ocorrência não deve virar coluna nem ganhar largura 100%. Aqui dentro do hero os 2 botões empilham em coluna e ficam com a MESMA LARGURA entre si (width: 100% nos dois, dentro do mesmo container). */ .hero .hero-ctas { flex-direction: column; align-items: stretch; width: 100%; gap: 0.75rem; } .hero .hero-ctas .botao { width: 100%; box-sizing: border-box; text-align: center; } /* O marcador [[FALTA: ...]] é um , não um botão — sem align-self ele esticaria feio na largura toda (herda align-items: stretch do pai). Mantém a largura pelo próprio texto, centralizado. */ .hero .hero-ctas .falta { align-self: center; } @media (min-width: 860px) { .hero-conteudo { flex-direction: row; align-items: center; gap: 2.5rem; } .hero-coluna-texto { flex: 1.4 1 0%; min-width: 0; } .hero-coluna-contato { flex: 1 1 0%; max-width: 300px; } /* Sombra LOCALIZADA — troca o véu chapado do mobile por um degradê horizontal que só fica escuro na FAIXA onde o texto vive. Medido AO VIVO no navegador (getBoundingClientRect, viewport 1905px, o mesmo usado pelo dono): a coluna h1+parágrafo ocupa de 21,1% a 61,0% da largura do hero, e a coluna telefone+botões ocupa de 63,1% a 78,9% — praticamente uma faixa contínua de ~21% a ~79%. (O rascunho inicial desta seção estimava a coluna direita terminando em 64%; a medição real mostrou que ela vai até quase 79% — os números abaixo já usam a medição, não a estimativa.) Nas margens livres (perto de 0% e perto de 100%, onde não há texto) o degradê cai para 5% e a foto aparece quase limpa. Escolhida em vez de um painel opaco atrás só do texto porque a faixa de texto (h1+parágrafo à esquerda, telefone+botões à direita) é praticamente contínua nesta página — um único degradê cobre as duas colunas sem precisar de dois painéis separados. Transições longas de propósito (32 pontos percentuais subindo, ~610px em 1905px; 18 pontos descendo, ~340px) — um corte seco criaria uma faixa visível na foto, pior que o véu chapado que estamos substituindo. O patamar (32%-82%) cobre as duas colunas com folga de sobra em ambos os lados. Pico de opacidade 45% — o mesmo valor do véu chapado do mobile (ver .hero acima), escolhido por tentativa e medição: 55% passava com folga demais (menos foto visível que o necessário); 40% e abaixo derrubava o contraste do parágrafo abaixo do mínimo. 45% é o menor valor que ainda deixa margem de segurança >= 0,4 nos três alvos. Números medidos: ver comentário completo em .hero, no topo desta seção. */ .hero { background-image: linear-gradient( 90deg, rgba(28, 77, 134, 0.05) 0%, rgba(28, 77, 134, 0.45) 32%, rgba(28, 77, 134, 0.45) 82%, rgba(28, 77, 134, 0.05) 100% ), var(--hero-imagem), linear-gradient(135deg, var(--cor-azul-marca) 0%, var(--cor-azul-claro-marca) 100%); } } .botao { display: inline-block; padding: 0.75rem 1.5rem; border-radius: var(--raio-borda); text-decoration: none; font-weight: 600; border: 2px solid var(--cor-primaria); } .botao-cheio { background-color: var(--cor-primaria); color: var(--cor-branco); } .botao-cheio:hover { background-color: var(--cor-primaria-hover); border-color: var(--cor-primaria-hover); } .botao-contorno { background-color: transparent; color: var(--cor-primaria); } .botao-contorno:hover { background-color: var(--cor-primaria); color: var(--cor-branco); } /* Botão "Ver todas as avaliações no Google" — fundo no amarelo oficial do Google (widget de Avaliações), texto branco e estrela no lugar da seta. .botao-google vem DEPOIS de .botao-contorno no arquivo e as duas regras têm a mesma especificidade (classe única), então border-color aqui vence sem precisar de !important. AVISO DE CONTRASTE (decisão registrada, não é bug): branco sobre #FBBC05 fica com contraste abaixo do mínimo de 4.5:1 do WCAG. Foi uma escolha estética explícita do dono do site em 13/08/2026 — a alternativa de maior contraste seria texto escuro (#1f2124) ou um amarelo mais escuro. Não "corrigir" isto sem confirmar com ele de novo. */ .botao-google { background-color: var(--cor-google-amarelo); border-color: var(--cor-google-amarelo); color: var(--cor-branco); } .botao-google:hover { background-color: var(--cor-google-amarelo-hover); border-color: var(--cor-google-amarelo-hover); color: var(--cor-branco); } .botao-google-estrela { margin-left: 0.5rem; font-size: 1.1em; line-height: 1; vertical-align: -0.05em; } /* -------------------------------------------------------------------------- 5.1 BOTÕES DE CONTATO DIRETO — WhatsApp e a variação "vazada" clara. Usados dentro da .faixa-chamada (ver seção 6) e em qualquer outro ponto onde um convite direto ao WhatsApp/telefone fizer sentido sobre fundo azul da marca. Mesmo padding/raio entre os dois, para os pares de botão ficarem visualmente equivalentes lado a lado. -------------------------------------------------------------------------- */ /* .formulario-contato button[type="submit"] agrupado aqui: é o botão "Enviar pelo WhatsApp" do formulário de contato (ver index.html, seção CONTATO). Ele também abre o WhatsApp, então recebe o MESMO tratamento visual do .botao-whatsapp — sinal verde consistente para "isso fala com o WhatsApp" em qualquer lugar do site. O seletor é escopado ao formulário (não é ".botao-cheio" genérico) para não pintar de verde outros botões cheios do site que não são de WhatsApp (ex.: "Pedir orçamento", "Quero um site assim"). Este botão chega com as classes "botao botao-cheio" no HTML, que aplicam border: 2px solid var(--cor-primaria) (azul) — por isso este bloco também zera a borda, senão sobraria um contorno azul em volta do botão verde. */ .botao-whatsapp, .formulario-contato button[type="submit"] { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--cor-whatsapp); color: var(--cor-branco); font-weight: 700; text-decoration: none; padding: 0.75rem 1.5rem; border-radius: 6px; border: 2px solid transparent; min-height: 44px; /* alvo de toque confortável no celular */ } .botao-whatsapp:hover, .formulario-contato button[type="submit"]:hover { background-color: var(--cor-whatsapp-hover); } /* Foco visível: mesmo padrão já usado em .botao-menu (anel branco colado ao botão + anel escuro externo) — funciona tanto sobre fundo colorido quanto sobre fundo branco, porque o anel externo escuro sempre contrasta com o que estiver ao redor do botão. Especificidade maior que a regra genérica "button:focus" (seção 2) garante que este anel vence a dela. */ .botao-whatsapp:focus-visible, .formulario-contato button[type="submit"]:focus-visible { outline: 2px solid var(--cor-branco); outline-offset: 2px; box-shadow: 0 0 0 4px var(--cor-foco-anel-externo); } /* Botão "vazado" claro — fundo transparente, borda e texto brancos. Pensado para ficar ao lado do .botao-whatsapp sobre um fundo azul sólido (ex.: dentro da .faixa-chamada). No hover inverte: fundo branco, texto na cor azul da marca — o mesmo comportamento do .botao-contorno usado dentro do hero, só que reaproveitável fora dele. */ .botao-vazado-claro { display: inline-flex; align-items: center; gap: 0.5rem; background-color: transparent; border: 2px solid var(--cor-branco); color: var(--cor-branco); font-weight: 700; text-decoration: none; padding: 0.75rem 1.5rem; border-radius: 6px; min-height: 44px; } .botao-vazado-claro:hover { background-color: var(--cor-branco); color: var(--cor-azul-marca); } .botao-vazado-claro:focus-visible { outline: 2px solid var(--cor-branco); outline-offset: 2px; box-shadow: 0 0 0 4px var(--cor-foco-anel-externo); } /* Ícone (SVG) dentro dos dois botões acima — só tamanho e alinhamento. ATENÇÃO: o ícone do WhatsApp usa fill="currentColor" no HTML, e os demais ícones usam stroke="currentColor" — por isso esta regra NÃO define fill nem stroke. Forçar um dos dois aqui apagaria o desenho do outro tipo de ícone. A cor certa já chega sozinha via currentColor, herdando a cor do texto do botão (branco). */ .botao-icone { width: 20px; height: 20px; flex-shrink: 0; } /* Dentro do hero (fundo azul), os dois botões usam branco em vez da cor neutra padrão — sobre azul, um botão cinza (--cor-primaria) não tem contraste suficiente nem combina com a marca. Escopado só a .hero para não afetar os mesmos componentes (.botao-cheio/.botao-contorno) usados em outras seções da página. */ .hero .botao-cheio { background-color: var(--cor-branco); border-color: var(--cor-branco); color: var(--cor-azul-marca); } .hero .botao-cheio:hover { background-color: var(--cor-fundo-alt); border-color: var(--cor-fundo-alt); } .hero .botao-contorno { border-color: var(--cor-branco); color: var(--cor-branco); /* "Pedir orçamento" é o único botão do hero SEM fundo sólido (é vazado de propósito, ver .botao-contorno acima) — por isso é o único que depende inteiramente da foto por trás para o contraste do texto. Medido em 12/08/2026: no pior pixel sob este botão, sem este fundo o contraste ficava em 3,88 (abaixo do mínimo de texto normal, 4,5). Esta cor de fundo semi-sólida (--cor-primaria-hover a 35%) resolve (medido: 5,63) mantendo o efeito "vazado/vidro" — não vira um botão cheio igual ao "Falar no WhatsApp". Não é um dos 3 alvos obrigatórios do hero (h1/parágrafo/telefone), mas a regra do projeto permite dar fundo a um botão vazado que caia em área clara da foto. */ background-color: rgba(19, 57, 101, 0.35); } .hero .botao-contorno:hover { background-color: var(--cor-branco); color: var(--cor-azul-marca); } /* Marcador [[FALTA: ...]] dentro do hero: o amarelo padrão já tem contraste próprio (fundo claro + borda + texto escuro), então continua legível mesmo sobre o azul do hero — não precisa de ajuste. */ /* -------------------------------------------------------------------------- 6. GRADES DE CARDS (serviços / produtos / diferenciais) -------------------------------------------------------------------------- */ .grade-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 620px) { .grade-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .grade-cards.colunas-3 { grid-template-columns: repeat(3, 1fr); } } /* ESTILO B (escolhido pelo dono, réplica de _amostra-estilos.html, bloco ".b-card"): sem borda cinza — a separação do fundo branco passa a vir só da sombra, mais presente que a --sombra-card antiga. Raio maior (10px) e a transition abaixo preparam o efeito de "levantar" no hover. */ .card { background-color: var(--cor-card-fundo); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); padding: 1.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease; } /* Hover: o card sobe 4px e a sombra cresce, reforçando a sensação de profundidade. Só existe transição suave por causa da regra acima. */ .card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); } /* Quem pede menos movimento ao sistema (prefers-reduced-motion) fica sem a animação de subir e sem a transição suave — recebe só a sombra maior do hover, sem deslocamento. Existe gente que passa mal com esse tipo de movimento na tela, por isso este bloco é obrigatório, não opcional. */ @media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } } .card h3 { margin-bottom: 0.5rem; font-size: 1.1rem; } .card p { color: var(--cor-texto-suave); font-size: 0.95rem; margin-bottom: 0; } /* Lista de itens dentro do card (usada nos cards de Assistência Técnica, que têm descrição curta + lista dos principais itens do serviço). */ .card-lista { margin: 0.85rem 0 0; padding-left: 1.15rem; color: var(--cor-texto-suave); font-size: 0.9rem; } .card-lista li { margin-bottom: 0.4rem; } .card-lista li:last-child { margin-bottom: 0; } /* ESTILO B: o círculo passa a levar um em vez de um número — por isso saem font-weight/color de texto e entra um gradiente diagonal com as duas cores azuis da marca. Sem borda: o degradê já dá contraste suficiente contra o card branco. Maior (56px, era 40px) para o traço do ícone respirar dentro do círculo. */ .card-icone { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--cor-azul-marca), var(--cor-azul-claro-marca)); display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; } /* O ícone (SVG) usa stroke="currentColor" no HTML — herdando branco daqui, o desenho aparece em branco por cima do gradiente do círculo. */ .card-icone svg { width: 26px; height: 26px; color: var(--cor-branco); } /* Identidade própria da seção de Reciclagem (section#lixo-eletronico, classe .secao-reciclagem): troca só o gradiente do círculo do ícone, de azul da marca para o verde-reciclagem (ver :root, comentário sobre por que esse verde é diferente do verde do WhatsApp). Escopado com ".secao-reciclagem" na frente para não vazar para os cards de outras seções, que continuam azuis normalmente. */ .secao-reciclagem .card-icone { background: linear-gradient(135deg, var(--cor-verde-reciclagem), var(--cor-verde-reciclagem-claro)); } /* Modificador do card em destaque ("Mais pedido"): friso superior bordô da marca. position: relative ancora o selo (.card-selo) logo abaixo, que é posicionado absoluto em relação a este card. */ .card--destaque { position: relative; border-top: 4px solid var(--cor-bordo-marca); } /* Selo "Mais pedido": encostado no canto superior direito do card em destaque, meio para fora da borda (top negativo), igual à amostra aprovada. Fonte pequena e padding curto para não brigar com o título do card logo abaixo. */ .card-selo { position: absolute; top: -12px; right: 20px; background-color: var(--cor-bordo-marca); color: var(--cor-branco); font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.75rem; border-radius: var(--raio-pill); } /* Card do Diagnóstico Digital (Criação de Sites): tem muito mais conteúdo que os outros 3 cards da grade, então ocupa a largura inteira (spana todas as colunas do .grade-cards.colunas-3, em qualquer breakpoint) e ganha um destaque sutil — fundo alternativo + friso superior na cor da marca. Sem gradiente, sem sombra pesada (mantém a --sombra-card padrão, já leve, herdada de .card). */ .card-diagnostico { grid-column: 1 / -1; background-color: var(--cor-fundo-alt); border-top: 4px solid var(--cor-azul-marca); } /* Grade interna do Diagnóstico Digital: os 4 blocos ("O que analisamos", "O que você recebe", "Benefícios", "Para quem é indicado") reaproveitam o .grade-cards base (1 coluna no mobile, 2 a partir de 620px) para não virar um paredão de texto. */ .card-diagnostico-blocos { margin-top: 1.25rem; } .card-diagnostico-blocos h4 { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.25; } /* Destaque de "linha de negócio nova" — mesmo peso visual dos demais, só um rótulo textual "Novo" para deixar claro o contexto de negócio, sem crescer tamanho de fonte nem card em relação às outras seções. */ .selo-novo { display: inline-block; background-color: var(--cor-texto); color: #fff; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.55rem; border-radius: 999px; margin-left: 0.5rem; vertical-align: middle; } /* -------------------------------------------------------------------------- 6.1 FAIXA DE CHAMADA — bloco de destaque para o FIM de uma seção (normalmente logo abaixo da grade de cards), reforçando um convite à ação. Fundo azul sólido da marca, texto branco, cantos arredondados no mesmo raio (10px) dos .card, para manter a mesma linguagem visual dos outros blocos da seção. -------------------------------------------------------------------------- */ .faixa-chamada { background-color: var(--cor-azul-marca); color: var(--cor-branco); text-align: center; border-radius: 10px; padding: 2rem 1.5rem; margin-top: 2.5rem; /* separa visualmente da grade de cards logo acima */ } .faixa-chamada-texto { color: var(--cor-branco); font-size: 1.1rem; margin: 0 0 1.25rem; } /* Botões lado a lado no desktop. No celular EMPILHAM em coluna e cada um ocupa a largura toda — mais fácil de tocar sem errar o alvo (a altura mínima de 44px de cada botão já vem de .botao-whatsapp/.botao-vazado-claro, ver seção 5.1). */ .faixa-chamada-botoes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; } @media (max-width: 599px) { .faixa-chamada-botoes { flex-direction: column; align-items: stretch; } .faixa-chamada-botoes > * { width: 100%; justify-content: center; /* centraliza ícone + texto dentro do botão esticado */ } } /* Modificador verde da .faixa-chamada — usado na seção de Reciclagem (.secao-reciclagem), no lugar do azul padrão. Só troca o fundo; todo o resto (raio, padding, margem, texto branco) é herdado de .faixa-chamada acima, sem duplicar nada. */ .faixa-chamada--verde { background-color: var(--cor-verde-reciclagem); } /* Botão branco sólido, para usar DENTRO de uma faixa já verde (a .faixa-chamada--verde acima). MOTIVO: um botão verde em cima de um fundo verde some — perde o contraste que o separa da faixa. Por isso este botão inverte a lógica do .botao-whatsapp: fundo branco sólido, texto na cor verde-reciclagem. Mesmo padding/raio/altura mínima (44px) dos outros botões de contato da página, para ficar visualmente do mesmo "peso". */ .botao-claro-solido { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--cor-branco); color: var(--cor-verde-reciclagem); font-weight: 700; text-decoration: none; padding: 0.75rem 1.5rem; border-radius: 6px; border: 2px solid transparent; min-height: 44px; } /* Hover: fundo levemente acinzentado (não desaparece sobre a faixa verde, diferente do branco puro) e texto num verde mais escuro, reforçando o estado interativo sem perder o contraste. */ .botao-claro-solido:hover { background-color: var(--cor-fundo-alt); color: var(--cor-verde-reciclagem-hover); } /* Foco visível: mesmo padrão de anel duplo já usado nos outros botões novos desta página (branco colado + anel escuro externo), ver seção 5.1. */ .botao-claro-solido:focus-visible { outline: 2px solid var(--cor-branco); outline-offset: 2px; box-shadow: 0 0 0 4px var(--cor-foco-anel-externo); } /* Substitui um style="text-align:center" que existia inline no HTML e foi removido de lá — a regra agora mora só aqui, no CSS. */ .texto-centralizado { text-align: center; } /* -------------------------------------------------------------------------- 7. AVALIAÇÕES DO GOOGLE Widget no estilo "avaliações do Google": cabeçalho com nota geral (5 estrelas douradas preenchidas por clip de largura — mesma técnica de sobreposição já usada aqui, só trocando a cor para dourado) + carrossel horizontal com os 26 depoimentos reais coletados do Perfil da Empresa no Google (ver comentário no HTML, acima da seção). -------------------------------------------------------------------------- */ .avaliacoes-cabecalho { text-align: center; /* Bloco propositalmente estreito para agrupar título + logo + estrelas + nota como um selo compacto, em vez de espalhar pela largura inteira do .container (1140px), como o cabeçalho de um widget de avaliações de verdade. */ max-width: 350px; margin: 0 auto 2rem; } /* Selo: "EXCELENTE" + as 5 estrelas formam um bloco vertical, e o "G" do Google fica ao lado direito DESSE bloco, centrado na altura dele (align-items: center). O conjunto inteiro é centralizado na página com justify-content: center. Antes o logo ficava empilhado numa linha própria; ao lado, o selo lê como um carimbo de nota do Google e ocupa menos altura. */ .avaliacoes-selo { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin-bottom: 0.6rem; } /* Espaçador invisível que espelha os 44px do logo do Google à direita, para o título e as estrelas ficarem no centro real da caixa e alinharem com a linha de resumo abaixo. */ .avaliacoes-selo::before { content: ""; flex: 0 0 44px; } /* "EXCELENTE" — o próprio h2 da seção (título + destaque do widget, sem duplicar heading). Caixa alta só visualmente, via text-transform, para o texto no HTML continuar em português normal (bom para leitor de tela e para o "Ver como" de buscadores). margin-bottom aperta o espaço até as estrelas logo abaixo, para o selo ler como uma unidade compacta. */ .avaliacoes-titulo { text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.3rem; } .avaliacoes-estrelas-google { /* Sem margem: agora o parágrafo vive dentro do bloco do selo (.avaliacoes-selo-texto) e o espaçamento em relação ao "G" ao lado é controlado pelo gap de .avaliacoes-selo, não por margem própria. */ margin: 0; } .avaliacoes-estrelas { position: relative; display: inline-block; vertical-align: middle; /* As 5 estrelas do cabeçalho são o elemento mais importante do widget — eram pequenas demais (1.5rem) para chamar atenção. clamp() deixa grandes no celular (2rem no piso) e ainda maiores em telas largas (2.75rem no teto), crescendo com a viewport entre os dois limites. font-size fica no PAI de propósito: .avaliacoes-estrelas-fundo e .avaliacoes-estrelas-preenchidas usam font-size: inherit, então as duas camadas sobrepostas continuam idênticas em tamanho — mudar só aqui é seguro, mudar em uma camada e não na outra desalinharia as estrelas. */ font-size: clamp(2rem, 7vw, 2.75rem); /* Brilho sutil para destacar as estrelas do fundo da seção — aplicado no container (que recorta as duas camadas por baixo), não em cada camada, para não duplicar a sombra. */ filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18)); } /* Barra de fundo com as 5 estrelas em cinza-claro — define a largura total da barra (a camada preenchida abaixo é posicionada absoluta por cima e não conta para o tamanho da caixa). */ .avaliacoes-estrelas-fundo { color: var(--cor-borda); font-size: inherit; font-family: inherit; letter-spacing: 0.1em; line-height: 1; } /* Barra preenchida (cor de destaque) sobreposta à de fundo, cortada em 96% de largura = 4,8 ÷ 5. Fonte, tamanho, letter-spacing e line-height têm que ser IDÊNTICOS aos da barra de fundo, senão as estrelas desalinham. */ .avaliacoes-estrelas-preenchidas { position: absolute; top: 0; left: 0; width: 96%; overflow: hidden; white-space: nowrap; color: var(--cor-primaria); font-size: inherit; font-family: inherit; letter-spacing: 0.1em; line-height: 1; } /* Modificador dourado — usado só no cabeçalho do widget de Avaliações, imitando a cor oficial das estrelas do Google. A camada de fundo continua cinza-claro (--cor-borda) nos dois casos: só a parte "preenchida" muda de cor. */ .avaliacoes-estrelas--dourada .avaliacoes-estrelas-preenchidas { color: var(--cor-avaliacoes-dourado); } /* Nota e contagem juntas numa linha só ("4,8 de 5 com base em 46 avaliações") — antes eram dois parágrafos separados (.avaliacoes-nota e .avaliacoes-subtexto, removidos). O número em continua com destaque (cor de texto normal); o resto do texto fica na cor suave, como o antigo subtexto. */ .avaliacoes-resumo { margin: 0 0 1rem; font-size: 1.05rem; color: var(--cor-texto-suave); } .avaliacoes-resumo strong { color: var(--cor-texto); } /* flex: 0 0 auto impede que o "G" seja espremido quando a tela é estreita — sem isto o flex encolheria o SVG e o ícone ficaria menor no celular. */ .avaliacoes-logo-google { display: block; flex: 0 0 auto; margin: 0; } /* ---- Carrossel ---- */ .avaliacoes-carrossel { position: relative; display: flex; align-items: center; gap: 0.75rem; } /* Trilha rolável: overflow-x + scroll-snap fazem o carrossel funcionar por completo SEM JavaScript (rolagem por dedo/trackpad). tabindex="0" no HTML permite rolar também pelo teclado (setas) quando focada. position: relative — CORREÇÃO DE BUG (12/08/2026): sem isto, cada um dos 26 cards tem um (texto "Nota 5 de 5", só para leitor de tela) com position:absolute e nenhum top/left definido. Sem um ancestral posicionado mais próximo, esse span usa .avaliacoes-carrossel (position:relative) como referência, e o navegador calcula a "posição estática" dele pela posição que teria no fluxo normal DENTRO da trilha — ou seja, para os cards do final da fileira, uma posição milhares de pixels à direita, fora da área visível. Como .avaliacoes-carrossel tem overflow:visible, esse retângulo fantasma vazava para fora da trilha e inflava o scrollWidth da página inteira (a rolagem horizontal da PÁGINA, não só da trilha). Ao dar position:relative à própria trilha, ela passa a ser o ancestral posicionado desses spans, e o vazamento para fora do carrossel some. Confirmado no navegador: sem isto, document.documentElement.scrollWidth = 8984px (viewport de 1920px); com isto, volta a 1905px = clientWidth (sem overflow). Também confirmado que overflow-x:hidden SOZINHO na trilha NÃO resolve isto (o span escapa da trilha antes mesmo do clip entrar em ação) — só dar um ancestral posicionado corrige a causa raiz. */ .avaliacoes-trilha { display: flex; gap: 1.25rem; overflow-x: auto; position: relative; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 0.25rem 0.25rem 1rem; flex: 1 1 auto; /* Esconde a barra de rolagem VISUALMENTE (a referência de design não tem uma barra cinza aparecendo ali), mas a rolagem em si continua funcionando normalmente por dedo, trackpad, mouse e teclado — só o desenho da barra some, não a função. */ scrollbar-width: none; /* Firefox */ } /* Mesma ideia acima, para navegadores baseados em WebKit/Blink (Chrome, Edge, Safari), que não respeitam scrollbar-width e exigem este pseudo-elemento específico para esconder a barra. Não usar overflow:hidden em lugar nenhum disto — isso mataria a rolagem por completo e quebraria o fallback sem JavaScript. */ .avaliacoes-trilha::-webkit-scrollbar { display: none; } /* Quem pediu menos movimento ao sistema operacional recebe rolagem instantânea, mesmo nos cliques dos botões "‹"/"›" controlados pelo js/avaliacoes.js (o script lê esta mesma media query em JS). */ @media (prefers-reduced-motion: reduce) { .avaliacoes-trilha { scroll-behavior: auto; } } .avaliacoes-trilha:focus-visible { outline: 3px solid var(--cor-primaria); outline-offset: 2px; } .avaliacoes-card { flex: 0 0 auto; width: min(85vw, 300px); scroll-snap-align: start; display: flex; flex-direction: column; } @media (min-width: 620px) { .avaliacoes-card { width: 320px; } } .avaliacoes-card-topo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.75rem; } /* Bolinha de iniciais do avaliador. A cor de fundo vem dos modificadores --1 a --8 logo abaixo (cada card do HTML recebe uma delas, ciclando); aqui fica só o formato e o texto branco por cima, comum a todas. */ .avaliacoes-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--cor-branco); } /* Cores das bolinhas, estilo Gmail — ver variáveis --cor-avatar-1 a -8 no :root. Cicla a cada 8 cards para os 15 avaliadores do carrossel. */ .avaliacoes-avatar--1 { background-color: var(--cor-avatar-1); } .avaliacoes-avatar--2 { background-color: var(--cor-avatar-2); } .avaliacoes-avatar--3 { background-color: var(--cor-avatar-3); } .avaliacoes-avatar--4 { background-color: var(--cor-avatar-4); } .avaliacoes-avatar--5 { background-color: var(--cor-avatar-5); } .avaliacoes-avatar--6 { background-color: var(--cor-avatar-6); } .avaliacoes-avatar--7 { background-color: var(--cor-avatar-7); } .avaliacoes-avatar--8 { background-color: var(--cor-avatar-8); } .avaliacoes-card-autor { flex: 1 1 auto; min-width: 0; } .avaliacoes-card-nome { margin: 0; font-weight: 700; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .avaliacoes-card-data { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--cor-texto-suave); } .avaliacoes-google-icone { flex: 0 0 auto; margin-left: auto; } /* As estrelas são o sinal de confiança mais forte de cada card — por isso ganham destaque (tamanho maior e a mesma sombra sutil das estrelas do cabeçalho, para os dois lugares combinarem visualmente). */ .avaliacoes-card .estrelas { display: block; color: var(--cor-avaliacoes-dourado); font-size: 1.25rem; letter-spacing: 0.1em; margin: 0 0 0.5rem; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15)); } /* Os depoimentos vêm crus do Google e alguns são bem mais longos que outros. Como a trilha é flex, TODOS os cards esticam até a altura do maior — sem este corte, um único depoimento gigante deixava espaço branco enorme nos cards curtos. Com 9 linhas o card ficava com 372px de altura e sobrava espaço em branco nos depoimentos curtos; com 5 linhas o card volta ao tamanho (~265px) para o qual o carrossel foi desenhado. O clamp só limita a EXIBIÇÃO a 5 linhas com reticências; o texto completo continua íntegro no HTML e pode ser lido no link "Ver todas as avaliações no Google" logo abaixo do carrossel. */ .avaliacoes-card-texto { margin: 0; padding: 0; border: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; overflow: hidden; } .avaliacoes-card-texto p { margin: 0; color: var(--cor-texto-suave); font-size: 0.95rem; } /* Espaço entre parágrafos dentro do mesmo depoimento (quando o Google traz o texto quebrado em mais de um

), sem interferir na contagem de linhas do clamp acima. */ .avaliacoes-card-texto p + p { margin-top: 0.6em; } /* Botões redondos "anterior"/"próximo" — ESCONDIDOS por padrão. Só aparecem quando o JavaScript confirma que rodou de verdade, ao adicionar a classe "avaliacoes-carrossel--pronta" no wrapper (mesmo padrão de progressive enhancement do menu mobile, ver js/menu.js). Sem JS, a trilha continua rolável normalmente, só sem os botões. */ .avaliacoes-carrossel-botao { display: none; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--cor-borda); background-color: var(--cor-card-fundo); color: var(--cor-texto); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: var(--sombra-card); } .avaliacoes-carrossel-botao:hover:not(:disabled) { background-color: var(--cor-fundo-alt); } .avaliacoes-carrossel-botao:disabled { opacity: 0.4; cursor: not-allowed; } .avaliacoes-carrossel--pronta .avaliacoes-carrossel-botao { display: flex; align-items: center; justify-content: center; } /* -------------------------------------------------------------------------- 8. SOBRE -------------------------------------------------------------------------- */ .sobre .container { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } @media (min-width: 800px) { .sobre .container { grid-template-columns: 1fr 1.2fr; } } .sobre-foto-placeholder { aspect-ratio: 4 / 3; background-color: var(--cor-fundo-alt); border: 2px dashed var(--cor-borda); border-radius: var(--raio-borda); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--cor-texto-suave); } /* -------------------------------------------------------------------------- 9. CONTATO -------------------------------------------------------------------------- */ .contato .container { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 860px) { .contato .container { grid-template-columns: 1fr 1fr; } } .contato-info dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0; } .contato-info dt { /* Flex só para alinhar o ícone (.contato-icone) com o texto do rótulo — sem isso o ícone (que é inline por padrão) desalinha verticalmente do texto ao lado. */ display: flex; align-items: center; font-weight: 700; color: var(--cor-texto-suave); } .contato-info dd { margin: 0; } /* CORREÇÃO DE ESTOURO HORIZONTAL NO CELULAR Medido em viewport de 345px: a seção Contato empurrava a página inteira para 589px de largura, deixando o site rolar para o lado. Eram três causas somadas: 1. os itens da grade (.contato-info / .contato-formulario) vinham com min-width: auto, que é o padrão do CSS Grid e impede encolher abaixo do conteúdo; 2. a coluna de valores do

era "1fr", que também não encolhe abaixo do conteúdo — o endereço sozinho exigia 448px; 3. o e-mail é uma palavra longa sem espaço e não quebrava. O mapa tem a sua própria correção na regra .mapa-placeholder. Nada aqui altera o layout em telas grandes. */ .contato-info, .contato-formulario { min-width: 0; } .contato-info dd, .contato-info dd a { overflow-wrap: anywhere; } /* Ícone dentro do
da lista de contato (telefone, e-mail, endereço, horário). ATENÇÃO: mesma ressalva da .botao-icone (seção 5.1) — não forçar fill nem stroke aqui, cada SVG já define o seu no HTML; esta regra cuida só de tamanho, cor e espaçamento em relação ao texto. */ .contato-icone { width: 18px; height: 18px; color: var(--cor-azul-marca); margin-right: 0.5rem; flex-shrink: 0; } /* Moldura do mapa do Google Maps embutido (iframe real, não é mais placeholder). min-height garante espaço suficiente para o rodapé de atribuição do Google não ser cortado pelo overflow:hidden em telas estreitas. */ .mapa-placeholder { margin-top: 1.5rem; aspect-ratio: 16 / 9; min-height: 320px; /* Sem este limite o mapa forçava 569px de largura e estourava a tela no celular. */ max-width: 100%; background-color: var(--cor-fundo-alt); border: 1px solid var(--cor-borda); border-radius: var(--raio-borda); overflow: hidden; } /* Ação logo abaixo do mapa: um botão sólido centralizado convidando a abrir o endereço num app de mapas de verdade (o iframe embutido não serve pra traçar rota). */ .mapa-acao { text-align: center; margin-top: 1rem; } .botao-mapa { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--cor-azul-marca); color: var(--cor-branco); font-weight: 700; text-decoration: none; padding: 0.75rem 1.5rem; border-radius: 6px; min-height: 44px; } .botao-mapa:hover { background-color: var(--cor-azul-marca-hover); } /* Mesmo padrão de foco dos demais botões novos (ver seção 5.1) — anel branco colado ao botão + anel escuro externo, visível tanto sobre o fundo branco desta seção quanto sobre qualquer fundo colorido. */ .botao-mapa:focus-visible { outline: 2px solid var(--cor-branco); outline-offset: 2px; box-shadow: 0 0 0 4px var(--cor-foco-anel-externo); } .formulario-contato { display: flex; flex-direction: column; gap: 1rem; } .campo-formulario { display: flex; flex-direction: column; gap: 0.35rem; } .campo-formulario label { font-weight: 600; font-size: 0.9rem; } .campo-formulario input, .campo-formulario textarea { padding: 0.65rem 0.75rem; border: 1px solid var(--cor-borda); border-radius: var(--raio-borda); font-family: inherit; font-size: 1rem; } .campo-lgpd { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--cor-texto-suave); } .campo-lgpd input { margin-top: 0.2rem; } /* Aviso de erro de validação do formulário (ver js/contato.js). Fica escondido por padrão ("hidden" no HTML) e só aparece quando falta preencher um campo obrigatório. Reaproveita --cor-bordo-marca (já existe no :root) em vez de inventar um vermelho novo — é a cor mais próxima de "alerta" já usada na paleta oficial da marca. */ .formulario-erro { color: var(--cor-bordo-marca); font-size: 0.85rem; margin-bottom: 0.25rem; } /* Texto de apoio do formulário (aviso de privacidade e o link do