/* style.css */ /* raiz/assets/css/style.css */ /* ------------------------------------------------------------------- Folha de estilos completa do site. As regras de header/hero que já existem no critical.css (inline no ) são repetidas aqui de forma completa — a cascata do CSS resolve duplicidades sem conflito, e este arquivo cobre TUDO (inclusive o que está abaixo da dobra). Organização: 1. Reset & variáveis 2. Tipografia utilitária 3. Header + menu mobile 4. Hero 5. Rodapé + botão flutuante do WhatsApp 6. Acessibilidade / utilidades ------------------------------------------------------------------- */ /* 1. RESET & VARIÁVEIS ------------------------------------------------ */ :root{ --color-white:#ffffff; --color-mist:#eef6fc; --color-primary:#0B72C4; --color-primary-light:#3FA9F5; --color-ink:#16222e; --color-gray:#5b6672; --color-gray-light:#e3e8ec; --color-whatsapp:#25D366; --color-whatsapp-dark:#1ebe57; --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --container:1220px; --radius:12px; --shadow-sm:0 2px 10px rgba(22,34,46,.06); --shadow-md:0 12px 32px rgba(22,34,46,.12); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; font-family:var(--font-sans); color:var(--color-ink); background:var(--color-white); line-height:1.5; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ul{margin:0;padding:0;list-style:none} h1,h2,h3,p{margin:0} .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:20px} /* 2. TIPOGRAFIA UTILITÁRIA -------------------------------------------- */ .hero-eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--color-primary);background:#fff;border:1px solid #d7e9f8; padding:7px 14px;border-radius:999px;margin-bottom:16px; } /* 3. HEADER + MENU MOBILE -------------------------------------------- */ .site-header{ position:sticky;top:0;z-index:100; background:var(--color-white); border-bottom:1px solid var(--color-gray-light); transition:box-shadow .2s ease; } .site-header.is-scrolled{box-shadow:var(--shadow-sm)} .header-inner{ display:flex;align-items:center;justify-content:space-between; gap:16px;padding-block:12px; } .logo-link{display:flex;align-items:center;gap:10px} .logo-link svg{height:60px;width:auto} .nav-list{display:flex;align-items:center;gap:28px} .nav-list a{ font-weight:600;font-size:.95rem;color:var(--color-ink); padding:6px 2px;border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease; } .nav-list a:hover, .nav-list a:focus-visible{color:var(--color-primary);border-color:var(--color-primary)} .header-actions{display:flex;align-items:center;gap:10px} .phone-link{ display:none; align-items:center;gap:8px; font-weight:700;font-size:.92rem;color:var(--color-ink); padding:10px 4px; } .phone-link svg{color:var(--color-primary)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-weight:700;text-decoration:none;border-radius:10px; padding:12px 18px;font-size:.95rem;border:2px solid transparent; white-space:nowrap;cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, background-color .15s ease; } .btn:active{transform:translateY(1px)} .btn-whatsapp{background:var(--color-whatsapp);color:#fff} .btn-whatsapp:hover,.btn-whatsapp:focus-visible{background:var(--color-whatsapp-dark)} .btn-outline{background:#fff;border-color:var(--color-gray-light);color:var(--color-ink)} .btn-outline:hover,.btn-outline:focus-visible{border-color:var(--color-primary);color:var(--color-primary)} .btn-lg{padding:15px 24px;font-size:1.02rem;border-radius:12px} .nav-toggle{ display:inline-flex;background:none;border:none;padding:8px;cursor:pointer;border-radius:8px; } .nav-toggle:hover,.nav-toggle:focus-visible{background:var(--color-mist)} /* Drawer mobile: nav some da tela e "desliza" quando .is-open é adicionado via JS */ @media (max-width:899.98px){ .main-nav{ position:fixed;inset:0 0 0 auto;top:0; width:min(320px,86vw);height:100vh; background:#fff; box-shadow:var(--shadow-md); transform:translateX(100%); transition:transform .28s ease; padding:88px 24px 24px; z-index:99; display:flex; } .main-nav.is-open{transform:translateX(0)} .nav-list{flex-direction:column;align-items:flex-start;gap:6px;width:100%} .nav-list a{display:block;width:100%;padding:14px 6px;font-size:1.05rem;border-bottom:1px solid var(--color-gray-light)} .nav-overlay{ position:fixed;inset:0;background:rgba(22,34,46,.45); opacity:0;visibility:hidden;transition:opacity .2s ease;z-index:98; } .nav-overlay.is-open{opacity:1;visibility:visible} body.nav-is-open{overflow:hidden} } @media (min-width:900px){ .phone-link{display:flex} .nav-toggle{display:none} } /* 4. HERO -------------------------------------------------------------- */ .hero{ position:relative;overflow:hidden; background:linear-gradient(180deg,var(--color-mist) 0%,#ffffff 100%); } .hero-inner{ display:grid;grid-template-columns:1fr;gap:32px; padding-block:36px 56px;position:relative;z-index:2; } .hero h1{ font-size:clamp(2rem,7vw,2.9rem); line-height:1.08;letter-spacing:-.02em;font-weight:800;margin:0 0 14px; } .hero h1 span{color:var(--color-primary)} .hero-sub{font-size:clamp(1rem,2.4vw,1.15rem);color:var(--color-gray);margin:0 0 22px;max-width:52ch} .hero-trust{ display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin-bottom:28px; } .hero-trust li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem} .hero-trust svg{flex-shrink:0} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:20px} .hero-social-proof{ display:flex;flex-wrap:wrap;align-items:center;gap:6px; font-size:.9rem;color:var(--color-gray); } .hero-social-proof .stars{color:#F6B92B;letter-spacing:1px} .hero-social-proof strong{color:var(--color-ink)} .hero-social-proof .dot{opacity:.5} .hero-media{position:relative;display:flex;justify-content:center} .hero-swoosh{ position:absolute;inset:-8% -10% -8% -10%; width:120%;height:116%;z-index:-1; } .hero-media img{width:100%;max-width:520px;height:auto;position:relative;z-index:1} .hero-badge{ position:absolute;background:#fff;color:var(--color-ink); font-size:.82rem;font-weight:700;padding:9px 14px;border-radius:999px; box-shadow:var(--shadow-md);z-index:3;border:1px solid var(--color-gray-light); } .hero-badge strong{color:var(--color-primary)} .hero-badge--top{top:6%;right:4%} .hero-badge--bottom{bottom:8%;left:2%} .hero-wave{display:block;width:100%;height:auto;position:relative;z-index:1;margin-top:-2px} @media (min-width:900px){ .main-nav{display:flex} .hero-inner{grid-template-columns:1.05fr .95fr;align-items:center;padding-block:56px 90px} .hero-trust{grid-template-columns:1fr 1fr;max-width:480px} } @media (max-width:480px){ .hero-badge{font-size:.72rem;padding:7px 11px} .hero-trust{grid-template-columns:1fr} } /* 5. RODAPÉ + BOTÃO FLUTUANTE ----------------------------------------- */ .site-footer{ background:#fff;border-top:1px solid var(--color-gray-light); padding-block:56px 0;font-size:.9rem; } .footer-grid{ display:grid;grid-template-columns:1fr;gap:36px;padding-bottom:40px; } .footer-logo{height:40px;width:auto;margin-bottom:16px} .footer-brand p{color:var(--color-gray);line-height:1.6;font-size:.88rem;max-width:340px} .footer-col h3{ font-size:.95rem;font-weight:800;color:var(--color-ink);margin-bottom:16px; } .footer-col ul{display:flex;flex-direction:column;gap:10px} .footer-col ul a{ color:var(--color-gray);font-size:.9rem;transition:color .15s ease; } .footer-col ul a:hover,.footer-col ul a:focus-visible{color:var(--color-primary)} .footer-col .btn-whatsapp{margin-bottom:16px;padding:11px 18px;font-size:.9rem} .footer-contact-line{ display:flex;align-items:center;gap:10px; color:var(--color-gray);font-size:.9rem;margin-bottom:10px; } .footer-contact-line svg{color:var(--color-primary);flex-shrink:0} .footer-contact-line:hover{color:var(--color-primary)} .footer-bottom{ border-top:1px solid var(--color-gray-light); padding-block:20px; display:flex;flex-direction:column;align-items:center;gap:6px; text-align:center; } .footer-bottom p{color:var(--color-gray);font-size:.85rem} .footer-bottom a{color:var(--color-gray);font-weight:700;text-decoration:underline} .footer-bottom a:hover,.footer-bottom a:focus-visible{color:var(--color-primary)} @media (min-width:640px){ .footer-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:980px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px} } .whatsapp-float{ position:fixed;bottom:20px;right:20px;z-index:200; width:58px;height:58px;border-radius:50%; background:var(--color-whatsapp);color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-md); animation:pulse 2.4s ease-in-out infinite; } .whatsapp-float:hover{background:var(--color-whatsapp-dark)} @keyframes pulse{ 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.45), var(--shadow-md)} 50%{box-shadow:0 0 0 10px rgba(37,211,102,0), var(--shadow-md)} } /* Placeholder de demonstração (remover ao adicionar a seção real de Serviços) */ .section-placeholder{height:1px} /* SERVIÇOS ------------------------------------------------------------- */ .services{padding-block:64px 80px;background:#fff} .services-head{max-width:720px;margin:0 auto 40px;text-align:center} .services-head h2{ font-size:clamp(1.7rem,4.2vw,2.3rem);font-weight:800;letter-spacing:-.01em; line-height:1.15;margin-bottom:14px;color:var(--color-ink); } .services-sub{color:var(--color-gray);font-size:1.02rem;line-height:1.6} .services-grid{ display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:40px; } .service-card{ background:#fff;border:1px solid var(--color-gray-light);border-radius:var(--radius); overflow:hidden;transition:transform .15s ease, box-shadow .15s ease; } .service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .service-card-media{ aspect-ratio:4/3;background:var(--color-mist);overflow:hidden; } .service-card-media img{width:100%;height:100%;object-fit:cover} .service-card-body{padding:18px 18px 20px} .service-card-body h3{ font-size:1.05rem;font-weight:700;line-height:1.3;margin-bottom:8px;color:var(--color-ink); } .service-card-body p{font-size:.9rem;color:var(--color-gray);line-height:1.5} .services-cta{display:flex;justify-content:center} @media (min-width:620px){ .services-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:980px){ .services-grid{grid-template-columns:repeat(4,1fr);gap:24px} } /* 6. ACESSIBILIDADE / UTILIDADES -------------------------------------- */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } :focus-visible{outline:3px solid var(--color-primary-light);outline-offset:2px} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} } /* DIFERENCIAIS ---------------------------------------------------------- */ .diferenciais{ padding-block:64px 76px; background: radial-gradient(ellipse 900px 500px at 50% 0%, #1e3a56 0%, transparent 70%), linear-gradient(180deg, #0f1f30 0%, #0a1522 100%); color:#fff; } .diferenciais-head{max-width:760px;margin:0 auto 44px;text-align:center} .diferenciais-badge{ display:inline-flex;align-items:center; font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:#bfe0fb;background:rgba(63,169,245,.14); border:1px solid rgba(63,169,245,.35); padding:8px 16px;border-radius:999px;margin-bottom:20px; } .diferenciais-head h2{ font-size:clamp(1.7rem,4.4vw,2.4rem);font-weight:800;line-height:1.2; letter-spacing:-.01em;color:#fff; } .diferenciais-grid{ display:grid;grid-template-columns:1fr;gap:18px; } .diferencial-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:var(--radius); padding:26px 22px; } .diferencial-card svg{margin-bottom:18px} .diferencial-card h3{ font-size:1.08rem;font-weight:700;color:#fff;margin-bottom:10px; } .diferencial-card p{ font-size:.9rem;line-height:1.6;color:#aab8c6; } @media (min-width:620px){ .diferenciais-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:980px){ .diferenciais-grid{grid-template-columns:repeat(4,1fr);gap:22px} } /* ATENDIMENTO ------------------------------------------------------------ */ .atendimento{padding-block:64px 80px;background:#fff} .section-badge{ display:inline-flex;align-items:center; font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--color-primary);background:var(--color-mist); border:1px solid #d7e9f8; padding:7px 14px;border-radius:999px;margin-bottom:18px; } .atendimento-grid{ display:grid;grid-template-columns:1fr;gap:40px; } .atendimento-copy h2{ font-size:clamp(1.7rem,4.2vw,2.3rem);font-weight:800;line-height:1.15; letter-spacing:-.01em;color:var(--color-ink);margin-bottom:18px; } .atendimento-copy p{color:var(--color-gray);line-height:1.65;margin-bottom:14px} .atendimento-copy strong{color:var(--color-ink)} .atendimento-subtitle{ font-size:.98rem;font-weight:700;color:var(--color-ink); margin:26px 0 12px; } .location-grid{ display:grid;grid-template-columns:1fr 1fr;gap:10px 18px; } .location-grid li{ display:flex;align-items:center;gap:8px; font-size:.92rem;font-weight:600;color:var(--color-ink); } .location-grid--compact li{ font-size:.86rem;font-weight:500;color:var(--color-gray); } .atendimento-side{display:flex;flex-direction:column;gap:16px} .highlight-card{ background: radial-gradient(ellipse 500px 300px at 30% 0%, #1e3a56 0%, transparent 70%), linear-gradient(180deg,#0f1f30 0%,#0a1522 100%); border-radius:var(--radius); padding:30px 26px;color:#fff; } .highlight-card h3{font-size:1.3rem;font-weight:800;margin-bottom:12px} .highlight-card p{font-size:.94rem;color:#c3cedb;line-height:1.6;margin-bottom:20px} .mini-card{ display:flex;align-items:flex-start;gap:14px; background:var(--color-mist);border:1px solid #d7e9f8; border-radius:var(--radius);padding:18px 20px; } .mini-card svg{flex-shrink:0;margin-top:2px} .mini-card h4{font-size:.96rem;font-weight:700;color:var(--color-ink);margin-bottom:4px} .mini-card p{font-size:.85rem;color:var(--color-gray);line-height:1.5} @media (min-width:980px){ .atendimento-grid{grid-template-columns:1.1fr .9fr;gap:56px;align-items:start} } /* DEPOIMENTOS ------------------------------------------------------------ */ .depoimentos{padding-block:64px 80px;background:var(--color-mist)} .depoimentos-head{max-width:640px;margin:0 auto 44px;text-align:center} .depoimentos-badge{ display:inline-flex;align-items:center;gap:8px; font-size:.86rem;font-weight:700;color:var(--color-primary); margin-bottom:16px; } .depoimentos-head h2{ font-size:clamp(1.7rem,4.2vw,2.3rem);font-weight:800;letter-spacing:-.01em; color:var(--color-ink);margin-bottom:12px; } .depoimentos-head p{color:var(--color-gray);line-height:1.6} .depoimentos-grid{ display:grid;grid-template-columns:1fr;gap:20px; } .depoimento-card{ background:#fff;border:1px solid var(--color-gray-light);border-radius:var(--radius); padding:26px 24px;display:flex;flex-direction:column; } .depoimento-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .depoimento-stars{color:#F6B92B;letter-spacing:2px;font-size:1rem} .depoimento-quote-icon{color:var(--color-gray-light)} .depoimento-texto{ color:var(--color-ink);line-height:1.6;font-size:.96rem; margin-bottom:20px;flex-grow:1; } .depoimento-footer{ display:flex;align-items:center;gap:12px; padding-top:16px;border-top:1px solid var(--color-gray-light); } .depoimento-footer strong{display:block;font-size:.92rem;color:var(--color-ink)} .depoimento-footer span{display:block;font-size:.8rem;color:var(--color-gray)} .depoimento-avatar{ flex-shrink:0;width:44px;height:44px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-weight:700;font-size:.86rem;color:#fff; } .depoimento-avatar--a{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light))} .depoimento-avatar--b{background:linear-gradient(135deg,#0f7a8c,#3fc1c9)} .depoimento-avatar--c{background:linear-gradient(135deg,#3a4bd1,#6f7bea)} @media (min-width:620px){ .depoimentos-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:980px){ .depoimentos-grid{grid-template-columns:repeat(3,1fr);gap:24px} } /* FAQ --------------------------------------------------------------------- */ .faq{padding-block:64px 84px;background:#fff} .faq-container{max-width:820px} .faq-head{text-align:center;margin-bottom:36px} .faq-head h2{ font-size:clamp(1.7rem,4.2vw,2.2rem);font-weight:800;letter-spacing:-.01em; line-height:1.2;color:var(--color-ink);margin-bottom:12px; } .faq-head p{color:var(--color-gray);line-height:1.6} .faq-list{display:flex;flex-direction:column;gap:10px} .faq-item{ background:var(--color-mist);border-radius:10px;overflow:hidden; } .faq-item summary{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px 20px;cursor:pointer;list-style:none; font-weight:700;font-size:.98rem;color:var(--color-ink); } /* remove o marcador triangular padrão do navegador */ .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::marker{content:''} .faq-chevron{flex-shrink:0;transition:transform .2s ease} .faq-item[open] .faq-chevron{transform:rotate(180deg)} .faq-answer{padding:0 20px 20px} .faq-answer p{color:var(--color-gray);line-height:1.65;font-size:.92rem} /* CTA FINAL ---------------------------------------------------------------- */ .cta-final{ padding-block:72px 80px;text-align:center;color:#fff; background: radial-gradient(ellipse 900px 500px at 50% 0%, #1e3a56 0%, transparent 70%), linear-gradient(180deg, #0f1f30 0%, #0a1522 100%); } .cta-final-inner{max-width:680px;margin:0 auto} .cta-final h2{ font-size:clamp(1.8rem,4.6vw,2.5rem);font-weight:800;letter-spacing:-.01em; line-height:1.18;margin-bottom:16px;color:#fff; } .cta-final p{color:#b8c4d0;font-size:1.02rem;line-height:1.6;margin-bottom:32px} .cta-final-buttons{ display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-bottom:22px; } /* Variante "ghost": contorno branco translúcido, pensada para fundo escuro (a .btn-outline já existente tem contorno cinza-claro, feito para fundo branco — não teria contraste suficiente aqui). */ .btn-ghost{ background:transparent;border-color:rgba(255,255,255,.35);color:#fff; } .btn-ghost:hover,.btn-ghost:focus-visible{ border-color:#fff;background:rgba(255,255,255,.06); } .cta-final-trust{font-size:.86rem;color:#8b99a8} .cta-final-trust span{margin:0 6px;opacity:.6} /* PÁGINA DE ERRO (404) ---------------------------------------------------- */ .error-page{padding-block:80px 100px;background:var(--color-mist);min-height:50vh} .error-page-inner{max-width:560px;margin:0 auto;text-align:center} .error-code{ display:block;font-size:5rem;font-weight:800;color:var(--color-primary-light); line-height:1;margin-bottom:8px; } .error-page h1{ font-size:clamp(1.5rem,4vw,2rem);font-weight:800;color:var(--color-ink); margin-bottom:14px; } .error-page p{color:var(--color-gray);line-height:1.6;margin-bottom:28px} .error-page-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}