/* ══════════════════════════════════════════════════════════════════ 1. RESET ══════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img, svg { display: block; max-width: 100%; } button, input, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ══════════════════════════════════════════════════════════════════ 2. VARIÁVEIS CSS ══════════════════════════════════════════════════════════════════ */ :root { /* Cores */ --azul-profundo: #0A2540; --azul-cabecalho-rodape: #03172b; --azul-noite: #12395E; --azul-noite-2: #164873; --ciano-marca: #8CEEF3; --ciano-texto: #0B7C8C; --laranja-urgencia: #F2531A; --laranja-escuro: #D1420E; --verde-whatsapp: #1C8520; --verde-whatsapp-escuro: #166A1A; --texto-corpo: #29323C; --texto-suave: #566270; --texto-claro: #EAF6F8; --texto-claro-suave: #B9CBD6; --fundo-claro: #F2F9FA; --fundo-branco: #FFFFFF; --borda-sutil: #DDE7EA; --borda-sutil-escura: rgba(234, 246, 248, .14); --alerta: #E24B3E; /* Tipografia */ --fonte-titulo: 'Space Grotesk', 'Segoe UI', sans-serif; --fonte-corpo: 'Inter', 'Segoe UI', sans-serif; /* Formas e sombras */ --radius-sm: 6px; --radius-md: 12px; --sombra-suave: 0 12px 32px rgba(10, 37, 64, .12); --sombra-botao: 0 8px 20px rgba(28, 133, 32, .28); /* Transições */ --transicao-rapida: .18s ease; --transicao: .28s ease; /* Layout */ --largura-maxima: 1180px; --espaco-secao: 5.5rem; --espaco-secao-mobile: 3.25rem; } /* ══════════════════════════════════════════════════════════════════ 3. TIPOGRAFIA BASE ══════════════════════════════════════════════════════════════════ */ body { font-family: var(--fonte-corpo); color: var(--texto-corpo); background: var(--fundo-branco); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--fonte-titulo); color: var(--azul-profundo); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; margin-bottom: .75rem; } h1 { font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); } h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); } h3 { font-size: 1.2rem; font-weight: 600; } h4 { font-size: 1.05rem; font-weight: 600; } p { max-width: 62ch; } p.sem-limite { max-width: none; } .container { max-width: var(--largura-maxima); margin-inline: auto; padding-inline: 1.5rem; } /* ══════════════════════════════════════════════════════════════════ 4. ANIMAÇÕES DE ENTRADA (respeitam prefers-reduced-motion) ────────────────────────────────────────────────────────────────── Usa transition (não @keyframes) de propósito: uma animação por keyframes SEMPRE salta pro estado "from" no instante em que começa, não importa o que a tela já estivesse mostrando — como o elemento já nascia visível, isso causava um "piscar" (visível → some → reaparece) bem perceptível ao rolar a página. Transition anima a PARTIR do estado atual, sem esse salto. A classe "js-pronto" é aplicada ao por um script síncrono bem no topo do (ver includes/header.php) — roda antes da primeira pintura da página, então o estado "escondido" abaixo já nasce assim, sem transição visível nenhuma no carregamento. Se o JS estiver bloqueado, "js-pronto" nunca existe e nada abaixo se aplica: o elemento permanece visível o tempo todo (mesma garantia de sempre). ══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { html.js-pronto .reveal, html.js-pronto .reveal-left, html.js-pronto .reveal-right, html.js-pronto .reveal-scale { transition: opacity .6s ease, transform .6s ease; } html.js-pronto .reveal { opacity: 0; transform: translateY(22px); } html.js-pronto .reveal-left { opacity: 0; transform: translateX(-26px); } html.js-pronto .reveal-right { opacity: 0; transform: translateX(26px); } html.js-pronto .reveal-scale { opacity: 0; transform: scale(.94); } html.js-pronto .reveal.reveal-ativo, html.js-pronto .reveal-left.reveal-ativo, html.js-pronto .reveal-right.reveal-ativo, html.js-pronto .reveal-scale.reveal-ativo { opacity: 1; transform: none; } html.js-pronto .d1 { transition-delay: .05s; } html.js-pronto .d2 { transition-delay: .15s; } html.js-pronto .d3 { transition-delay: .25s; } html.js-pronto .d4 { transition-delay: .35s; } html.js-pronto .d5 { transition-delay: .45s; } } /* ══════════════════════════════════════════════════════════════════ 5. HEADER, NAV, DROPDOWN, CTA, HAMBÚRGUER, DRAWER MOBILE ══════════════════════════════════════════════════════════════════ */ .site-header { position: fixed; top: 16px; left: 16px; right: 16px; max-width: 1180px; margin-inline: auto; z-index: 100; border-radius: 20px; background: rgba(3, 23, 43, .55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 10px 34px rgba(0, 0, 0, .25); } .site-header.com-sombra { background: rgba(3, 23, 43, .78); box-shadow: 0 10px 34px rgba(0, 0, 0, .38); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 128px; } .logo-link { display: flex; align-items: center; flex-shrink: 0; } .logo-header { height: 96px; width: auto; } .nav-desktop { display: none; } .nav-lista { display: flex; align-items: center; gap: .5rem; } .nav-item { position: relative; } .nav-link { font-family: var(--fonte-corpo); font-weight: 600; font-size: .95rem; color: var(--texto-claro); display: inline-flex; align-items: center; gap: .3rem; padding: .55rem 1.05rem; border-radius: 999px; position: relative; transition: background var(--transicao-rapida), color var(--transicao-rapida); } .nav-link:not(.nav-cta):hover { background: rgba(255, 255, 255, .08); } .nav-link.ativo:not(.nav-cta) { background: rgba(140, 238, 243, .16); color: var(--ciano-marca); } .nav-link-dropdown .icone-chevron { width: 15px; height: 15px; transition: transform var(--transicao); } .nav-item-dropdown:hover .icone-chevron { transform: rotate(180deg); } .nav-cta { background: var(--verde-whatsapp); color: #fff; padding: .65rem 1.3rem; border-radius: var(--radius-sm); box-shadow: var(--sombra-botao); transition: background var(--transicao-rapida), transform var(--transicao-rapida); display: inline-flex; align-items: center; gap: .4rem; } .nav-cta:hover { background: var(--verde-whatsapp-escuro); transform: translateY(-1px); } .nav-cta .icone { width: 16px; height: 16px; } .submenu { position: absolute; top: calc(100% + 14px); left: -1rem; min-width: 240px; background: var(--fundo-branco); border-radius: var(--radius-md); box-shadow: var(--sombra-suave); padding: .5rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao); } .nav-item-dropdown:hover .submenu, .nav-item-dropdown:focus-within .submenu { opacity: 1; visibility: visible; transform: translateY(0); } .submenu-link { display: block; padding: .65rem .85rem; border-radius: var(--radius-sm); font-size: .92rem; font-weight: 500; color: var(--texto-corpo); transition: background var(--transicao-rapida), color var(--transicao-rapida); } .submenu-link:hover, .submenu-link.ativo { background: var(--fundo-claro); color: var(--ciano-texto); } .nav-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; } .nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin-inline: auto; transition: transform var(--transicao), opacity var(--transicao); } .nav-toggle.aberto span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.aberto span:nth-child(2) { opacity: 0; } .nav-toggle.aberto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-drawer { background: var(--azul-cabecalho-rodape); border-top: 1px solid var(--borda-sutil-escura); border-radius: 0 0 16px 16px; max-height: 0; overflow: hidden; } .nav-drawer.aberto { max-height: 80vh; overflow-y: auto; } .nav-drawer-lista { padding: 1rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .25rem; } .nav-drawer-grupo { padding-block: .5rem; border-bottom: 1px solid var(--borda-sutil-escura); } .nav-drawer-titulo { display: block; font-weight: 700; color: #fff; padding-block: .5rem; font-size: .95rem; } .nav-drawer-grupo ul { padding-left: .75rem; display: flex; flex-direction: column; } .nav-drawer-link { display: block; width: 100%; text-align: left; padding: .65rem 0; font-weight: 500; font-size: .95rem; color: var(--texto-claro-suave); } .nav-drawer-link.ativo { color: var(--ciano-marca); } .nav-drawer-cta { margin-top: .5rem; background: var(--verde-whatsapp); color: #fff; text-align: center; padding: .85rem; border-radius: var(--radius-sm); font-weight: 700; display: flex; align-items: center; justify-content: center; gap: .5rem; } .nav-drawer-cta .icone { width: 18px; height: 18px; } /* -- Breadcrumb (integrado ao hero, sobre a foto — nunca ocupa faixa própria) -- */ .breadcrumb-inline { margin-bottom: 1.1rem; } .breadcrumb-lista { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: .8rem; list-style: none; } .breadcrumb-lista a { color: var(--texto-claro-suave); font-weight: 500; transition: color var(--transicao-rapida); } .breadcrumb-lista a:hover { color: var(--ciano-marca); } .breadcrumb-lista span[aria-current] { color: #fff; font-weight: 600; } .breadcrumb-separador { display: flex; align-items: center; } .icone-breadcrumb { width: 13px; height: 13px; color: var(--texto-claro-suave); opacity: .7; } /* ══════════════════════════════════════════════════════════════════ 6. BOTÕES UTILITÁRIOS ══════════════════════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--fonte-corpo); font-weight: 700; font-size: .98rem; padding: .95rem 1.7rem; border-radius: var(--radius-sm); transition: background var(--transicao-rapida), transform var(--transicao-rapida), border-color var(--transicao-rapida), color var(--transicao-rapida); white-space: nowrap; } .btn-primario { background: var(--verde-whatsapp); color: #fff; box-shadow: var(--sombra-botao); } .btn-primario:hover { background: var(--verde-whatsapp-escuro); transform: translateY(-2px); } .btn-neutro { background: var(--azul-profundo); color: #fff; } .btn-neutro:hover { background: var(--azul-noite); transform: translateY(-2px); } .btn-secundario { background: transparent; border: 1.5px solid var(--borda-sutil-escura); color: var(--texto-claro); } .btn-secundario:hover { border-color: var(--ciano-marca); color: var(--ciano-marca); } .btn-claro { background: var(--fundo-branco); color: var(--azul-profundo); } .btn-claro:hover { background: var(--fundo-claro); transform: translateY(-2px); } .icone-btn { width: 20px; height: 20px; flex-shrink: 0; } /* ══════════════════════════════════════════════════════════════════ 7. HERO ══════════════════════════════════════════════════════════════════ */ .hero { position: relative; padding: 130px 0 3.5rem; /* topo com espaço pro cabeçalho flutuante, que fica por cima da foto */ background-color: var(--azul-profundo); background-image: linear-gradient(100deg, rgba(6,20,34,.95) 0%, rgba(6,20,34,.82) 42%, rgba(6,20,34,.42) 78%), var(--hero-img); background-size: cover; background-position: center; color: var(--texto-claro); } .hero-inner { position: relative; display: flex; flex-direction: column; gap: 2.5rem; min-height: 320px; justify-content: center; } .hero-texto { max-width: 620px; } .hero h1 { color: #fff; margin-bottom: 1.1rem; } .hero-texto p { color: var(--texto-claro-suave); font-size: 1.08rem; margin-bottom: 1.4rem; } .hero-selo { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); border: 1px solid var(--borda-sutil-escura); color: var(--ciano-marca); font-weight: 600; font-size: .85rem; padding: .45rem .9rem; border-radius: 999px; margin-bottom: 1.25rem; } .hero-selo .icone { width: 16px; height: 16px; } .hero-features { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.9rem; font-weight: 600; color: #fff; font-size: .95rem; } @media (min-width: 700px) { .hero { padding: 190px 0 5rem; } .hero-inner { min-height: 440px; } .pagina-status { padding-top: 190px; } } /* ══════════════════════════════════════════════════════════════════ 8. SEÇÕES DE CONTEÚDO PADRÃO, ALTERNATIVAS E ESCURAS ══════════════════════════════════════════════════════════════════ */ .secao { padding: var(--espaco-secao-mobile) 0; } .secao-alt { background: var(--fundo-claro); } .secao-escura { background: linear-gradient(160deg, var(--azul-profundo), var(--azul-noite)); color: var(--texto-claro); } .secao-escura h2, .secao-escura h3 { color: #fff; } .secao-escura p { color: var(--texto-claro-suave); } .secao-cabecalho { max-width: 640px; margin-bottom: 2.5rem; } .secao-cabecalho p { color: var(--texto-suave); font-size: 1.05rem; margin-top: .6rem; } .secao-escura .secao-cabecalho p { color: var(--texto-claro-suave); } @media (min-width: 900px) { .secao { padding: var(--espaco-secao) 0; } } /* ══════════════════════════════════════════════════════════════════ 9. NUNCA display:grid — SEMPRE display:flex ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ 10. COMPONENTES ESTRUTURAIS (grades flex, cards, benefícios, cta final) ══════════════════════════════════════════════════════════════════ */ /* -- Serviços (home / sobre) -- */ .servicos-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem; } .servico-item { /* largura fixa por card (não cresce pra preencher a linha) — assim, uma última linha incompleta (ex.: 2 de 5) fica do mesmo tamanho dos demais cards e centralizada, em vez de esticar. Basta adicionar mais um .servico-item depois pra "grade" continuar funcionando sozinha. */ flex: 0 1 100%; background: var(--fundo-branco); border: 1px solid var(--borda-sutil); border-radius: var(--radius-md); overflow: hidden; transition: transform var(--transicao), box-shadow var(--transicao); } .servico-item:hover { transform: translateY(-6px); box-shadow: var(--sombra-suave); } .servico-item-visual { aspect-ratio: 4 / 3; display: flex; align-items: flex-end; background-image: linear-gradient(190deg, rgba(10,37,64,.15) 40%, rgba(10,37,64,.85) 100%), var(--foto-servico); background-size: cover; background-position: center; } .servico-item-visual .icone-chip { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cor-acento, var(--laranja-urgencia)); margin: 0 0 -20px 1.3rem; box-shadow: 0 6px 14px rgba(0,0,0,.25); } .servico-item-visual .icone-chip .icone { width: 20px; height: 20px; color: #fff; } .servico-item-corpo { padding: 2rem 1.6rem 1.7rem; } .servico-item h3 { margin-bottom: .8rem; } .link-saiba-mais { display: inline-flex; align-items: center; font-weight: 700; font-size: .92rem; color: var(--ciano-texto); position: relative; padding-bottom: 2px; } .link-saiba-mais::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--ciano-texto); transform: scaleX(0); transform-origin: left; transition: transform var(--transicao); } .link-saiba-mais:hover::after { transform: scaleX(1); } .icone-circulo { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--fundo-claro); color: var(--cor-acento, var(--azul-profundo)); } .icone-circulo .icone { width: 26px; height: 26px; } /* -- Sobre (home seção 3) -- */ .sobre-flex { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; } .sobre-imagem { flex: 1 1 280px; max-width: 400px; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--sombra-suave); } .sobre-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; } .imagem-secao { flex: 1 1 280px; max-width: 400px; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--sombra-suave); } .imagem-secao img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Variante só para fotos de composição larga/simétrica (ex.: jato de hidrojateamento), onde o recorte vertical 4:5 corta os dois lados da imagem. Usar só quando a foto especificamente pedir. */ .imagem-secao-paisagem { aspect-ratio: 3 / 2; max-width: 460px; } .sobre-texto { flex: 2 1 420px; } .sobre-texto p { color: var(--texto-suave); margin-bottom: 1rem; } .sobre-atendimento-lista { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; margin: 1.4rem 0; } .sobre-atendimento-lista li { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--azul-profundo); font-size: .95rem; } .sobre-atendimento-lista .icone { width: 18px; height: 18px; color: var(--laranja-urgencia); } /* -- Diferenciais (lista editorial, não cards) -- */ .diferenciais-lista { display: flex; flex-wrap: wrap; } .diferencial-item { flex: 1 1 100%; display: flex; gap: 1.1rem; padding: 1.4rem 1.5rem 1.4rem 0; border-bottom: 1px solid var(--borda-sutil); } .secao-escura .diferencial-item { border-bottom-color: var(--borda-sutil-escura); } .diferencial-item .icone-circulo { flex-shrink: 0; } .diferencial-item h3 { margin-bottom: .35rem; font-size: 1.08rem; } .diferencial-item p { font-size: .93rem; color: var(--texto-suave); } .secao-escura .diferencial-item p { color: var(--texto-claro-suave); } /* Miniatura (foto real ou ícone de reserva) usada nas listas de serviço detalhadas, ex.: "O que desentupimos?" — mesmo tamanho para os dois casos para manter a lista visualmente consistente mesmo sem foto para todo item. */ .servico-media { width: 84px; height: 84px; flex-shrink: 0; } img.servico-media { border-radius: var(--radius-md); object-fit: cover; } span.icone-circulo.servico-media { width: 84px; height: 84px; border-radius: var(--radius-md); } span.icone-circulo.servico-media .icone { width: 34px; height: 34px; } /* -- CTA final de seção -- */ .cta-bloco { display: flex; flex-direction: column; gap: 1.6rem; align-items: flex-start; } .cta-bloco h2 { max-width: 640px; } .cta-bloco p { max-width: 560px; } .cta-selo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .92rem; color: var(--ciano-marca); margin-top: -.6rem; } .cta-selo .icone { width: 18px; height: 18px; } /* -- CTA com foto ao lado (Home) -- */ .cta-flex { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: center; } .cta-flex .cta-bloco { flex: 2 1 420px; } .cta-imagem { flex: 1 1 280px; max-width: 400px; aspect-ratio: 4 / 5; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 20px 45px rgba(0,0,0,.35); } .cta-imagem img { width: 100%; height: 100%; object-fit: cover; display: block; } /* -- Placeholder de imagem (até a foto definitiva chegar) -- */ .placeholder-imagem { flex: 1 1 280px; max-width: 400px; aspect-ratio: 4 / 5; border-radius: var(--radius-md); border: 2px dashed var(--borda-sutil); background: var(--fundo-claro); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: var(--texto-suave); text-align: center; padding: 1.5rem; } .placeholder-imagem .icone { width: 40px; height: 40px; opacity: .5; } .placeholder-imagem span { font-size: .85rem; font-weight: 600; opacity: .75; } .secao-escura .placeholder-imagem { border-color: var(--borda-sutil-escura); background: rgba(255,255,255,.04); color: var(--texto-claro-suave); } /* -- Linha genérica: conteúdo (texto/lista) + imagem ao lado -- */ .linha-com-imagem { display: flex; flex-wrap: wrap; gap: 2.5rem; align-items: flex-start; } .linha-com-imagem .conteudo { flex: 2 1 420px; } .conteudo-centralizado { align-self: center; } /* -- Listas com ícone (sinais / problemas / fatores) -- */ .lista-sinais { display: flex; flex-direction: column; gap: .9rem; max-width: 640px; } .lista-sinais li { display: flex; align-items: flex-start; gap: .8rem; font-size: .98rem; color: var(--texto-corpo); } .lista-sinais .icone { width: 20px; height: 20px; color: var(--laranja-urgencia); flex-shrink: 0; margin-top: 2px; } .secao-escura .lista-sinais li { color: var(--texto-claro); } /* -- Passo a passo numerado (sequência real: como funciona) -- */ .passos-flex { display: flex; flex-wrap: wrap; gap: 2rem; counter-reset: passo; position: relative; } .passo-item { flex: 1 1 220px; position: relative; padding-top: 3.4rem; } .passo-numero { position: absolute; top: 0; left: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--azul-profundo); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-weight: 700; font-size: 1.05rem; } .passo-item h3 { margin-bottom: .5rem; } .passo-item p { font-size: .93rem; color: var(--texto-suave); } /* -- Quem atendemos / públicos -- */ .publicos-flex { display: flex; flex-wrap: wrap; gap: 1.4rem; } .publico-item { flex: 1 1 220px; background: var(--fundo-branco); border: 1px solid var(--borda-sutil); border-radius: var(--radius-md); padding: 1.5rem; display: flex; flex-direction: column; gap: .8rem; } .publico-item h3 { font-size: 1rem; } .publico-item p { font-size: .9rem; color: var(--texto-suave); } /* -- Boxes grandes (limpeza de caixa de gordura – locais) -- */ .boxes-grandes { display: flex; flex-wrap: wrap; gap: 1.6rem; } .box-grande { flex: 1 1 320px; background: var(--fundo-branco); border: 1px solid var(--borda-sutil); border-radius: var(--radius-md); padding: 2rem; } .box-grande .icone-circulo { margin-bottom: 1rem; } .box-grande h3 { margin-bottom: .6rem; } .box-grande p { color: var(--texto-suave); font-size: .95rem; } /* -- Missão (sobre) -- */ .missao-bloco { max-width: 760px; } .missao-bloco p { color: var(--texto-suave); font-size: 1.05rem; margin-bottom: 1rem; } /* ══════════════════════════════════════════════════════════════════ 11. MODAL, OVERLAY E FORMULÁRIOS ══════════════════════════════════════════════════════════════════ */ html.scroll-travado, html.scroll-travado body { overflow: hidden !important; } .modal-overlay { position: fixed; inset: 0; background: rgba(10, 25, 38, .6); display: flex; align-items: center; justify-content: center; padding: 1.2rem; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity var(--transicao), visibility var(--transicao); } .modal-overlay.aberto { opacity: 1; visibility: visible; } .modal-caixa { position: relative; background: var(--fundo-branco); width: 100%; max-width: 460px; border-radius: var(--radius-md); padding: 1.8rem 1.7rem; max-height: 92vh; overflow-y: auto; transform: translateY(14px); transition: transform var(--transicao); } .modal-overlay.aberto .modal-caixa { transform: translateY(0); } @media (prefers-reduced-motion: no-preference) { @keyframes modalShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } .modal-caixa.shake { animation: modalShake .4s ease; } } .modal-fechar { position: absolute; top: .6rem; right: .6rem; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--texto-suave); transition: background var(--transicao-rapida), color var(--transicao-rapida); } .modal-fechar:hover { background: var(--fundo-claro); color: var(--azul-profundo); } .modal-fechar .icone-fechar { width: 20px; height: 20px; } .modal-titulo { font-size: 1.35rem; margin-bottom: .3rem; padding-right: 2rem; } .modal-subtitulo { color: var(--texto-suave); font-size: .9rem; margin-bottom: .9rem; } .campos-obrigatorios-nota { font-size: .78rem; color: var(--texto-suave); margin-bottom: 1rem; } .obrigatorio { color: var(--laranja-urgencia); } .campo-grupo { margin-bottom: .5rem; } .campo-grupo label { display: block; font-size: .85rem; font-weight: 600; color: var(--azul-profundo); margin-bottom: .3rem; } .campo-label-linha { display: flex; align-items: baseline; justify-content: space-between; } .campo-contador { font-size: .75rem; color: var(--texto-suave); } .campo-contador.limite { color: var(--alerta); font-weight: 700; } .campo-grupo input[type="text"], .campo-grupo textarea { width: 100%; border: 1.5px solid var(--borda-sutil); border-radius: var(--radius-sm); padding: .65rem .8rem; font-size: .95rem; background: var(--fundo-branco); transition: border-color var(--transicao-rapida); } .campo-grupo textarea { min-height: 60px; resize: vertical; } .campo-grupo input:focus, .campo-grupo textarea:focus { outline: none; border-color: var(--ciano-texto); } .campo-grupo input.invalido, .campo-grupo textarea.invalido { border-color: var(--alerta); } .campo-erro-msg { display: none; color: var(--alerta); font-size: .78rem; margin-top: .3rem; } .campo-erro-msg.visivel { display: block; } .campo-checkbox { display: flex; align-items: flex-start; gap: .55rem; } .campo-checkbox input { margin-top: .2rem; } .campo-checkbox label { font-size: .82rem; font-weight: 400; color: var(--texto-suave); } .campo-checkbox label a { color: var(--ciano-texto); font-weight: 600; } .campo-recaptcha { display: flex; justify-content: center; } .form-erro-geral { display: none; background: #FDEDEB; color: var(--alerta); border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .85rem; margin-bottom: .8rem; } .form-erro-geral.visivel { display: block; } .btn-enviar-wa { width: 100%; justify-content: center; background: #25D366; color: #fff; font-weight: 700; padding: .9rem; border-radius: var(--radius-sm); display: flex; align-items: center; gap: .6rem; transition: background var(--transicao-rapida), opacity var(--transicao-rapida); } .btn-enviar-wa:disabled { opacity: .5; cursor: not-allowed; } .btn-enviar-wa:not(:disabled):hover { background: #1EBE59; } /* ══════════════════════════════════════════════════════════════════ 12. FAB E BARRA MOBILE ══════════════════════════════════════════════════════════════════ */ .fab-topo, .fab-whatsapp { display: none; position: fixed; right: 1.8rem; width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center; box-shadow: var(--sombra-suave); z-index: 90; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity var(--transicao), transform var(--transicao), background var(--transicao-rapida); } .fab-topo { bottom: 1.8rem; background: var(--fundo-branco); color: var(--azul-profundo); border: 1px solid var(--borda-sutil); } .fab-topo.visivel { opacity: 1; transform: translateY(0); pointer-events: auto; } .fab-whatsapp { bottom: 6.2rem; background: #25D366; color: #fff; opacity: 1; transform: translateY(0); pointer-events: auto; } .fab-whatsapp:hover { background: #1EBE59; } .icone-fab { width: 22px; height: 22px; } .icone-fab-wa { width: 26px; height: 26px; } .mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--fundo-branco); border-top: 1px solid var(--borda-sutil); box-shadow: 0 -6px 20px rgba(10,37,64,.08); z-index: 90; } .mobile-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .6rem 0 .7rem; font-size: .72rem; font-weight: 600; color: var(--azul-profundo); } .mobile-bar-whatsapp { color: #119542; } .icone-mobile-bar { width: 21px; height: 21px; } @media (min-width: 1025px) { .fab-topo, .fab-whatsapp { display: flex; } } @media (max-width: 1024px) { .mobile-bar { display: flex; } body { padding-bottom: 62px; } } /* ══════════════════════════════════════════════════════════════════ 13. FOOTER ══════════════════════════════════════════════════════════════════ */ .site-footer { background: var(--azul-cabecalho-rodape); color: var(--texto-claro); } .footer-inner { display: flex; flex-wrap: wrap; gap: 2.5rem; padding-block: var(--espaco-secao-mobile) 2.5rem; } .footer-coluna { flex: 1 1 200px; } .footer-sobre { flex: 2 1 260px; } .logo-footer { height: 56px; width: auto; margin-bottom: 1rem; } .footer-tagline { color: var(--texto-claro-suave); font-size: .92rem; max-width: 34ch; } .footer-titulo { color: #fff; font-size: .95rem; margin-bottom: 1rem; } .footer-lista { display: flex; flex-direction: column; gap: .65rem; } .footer-lista a { color: var(--texto-claro-suave); font-size: .92rem; display: inline-flex; align-items: center; gap: .5rem; transition: color var(--transicao-rapida); } .footer-lista a:hover { color: var(--ciano-marca); } .footer-link-btn { color: var(--texto-claro-suave); font-size: .92rem; display: inline-flex; align-items: center; gap: .5rem; text-align: left; transition: color var(--transicao-rapida); } .footer-link-btn:hover { color: var(--ciano-marca); } .footer-contatos .icone { width: 16px; height: 16px; flex-shrink: 0; } .footer-horario { display: flex; align-items: flex-start; gap: .5rem; color: var(--texto-claro-suave); font-size: .92rem; } .footer-horario .icone { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--ciano-marca); } .footer-copy { border-top: 1px solid var(--borda-sutil-escura); } .footer-copy-inner { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; justify-content: center; align-items: center; padding-block: 1.2rem; font-size: .8rem; color: var(--texto-claro-suave); } .footer-dev { display: inline-flex; align-items: baseline; gap: .5rem; } .footer-dev-logo { height: 10px; width: auto; filter: brightness(0) invert(1); opacity: .85; display: block; } /* ══════════════════════════════════════════════════════════════════ 14. PÁGINAS DE CONFIRMAÇÃO E ERRO ══════════════════════════════════════════════════════════════════ */ .pagina-status { min-height: 60vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 150px 1.5rem 4rem; } .pagina-status-conteudo { max-width: 460px; } .pagina-status-icone { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; } .pagina-status-icone.sucesso { background: #E4F8ED; color: #1EBE59; } .pagina-status-icone.erro { background: #FDEDEB; color: var(--alerta); } .pagina-status-icone .icone { width: 42px; height: 42px; } .pagina-status h1 { margin-bottom: .8rem; } .pagina-status p { color: var(--texto-suave); margin: 0 auto 1.8rem; } /* ══════════════════════════════════════════════════════════════════ 15. MEDIA QUERIES CONSOLIDADAS ══════════════════════════════════════════════════════════════════ */ @media (min-width: 700px) { .diferencial-item { flex: 1 1 45%; } } @media (min-width: 860px) { .nav-desktop { display: block; } .nav-toggle, .nav-drawer { display: none; } } @media (max-width: 859px) { .site-header { top: 10px; left: 10px; right: 10px; border-radius: 16px; } .header-inner { height: 80px; } .logo-header { height: 56px; } } @media (min-width: 640px) { .container { padding-inline: 2rem; } .servico-item { flex-basis: calc((100% - 1.8rem) / 2); } } @media (min-width: 900px) { .servico-item { flex-basis: calc((100% - 3.6rem) / 3); } } @media (max-width: 599px) { .modal-caixa { padding: 1.4rem 1.2rem; } }