:root{ --bg: #f8fbfd; --card: #ffffff; --text: #05141a; --muted: #283a43; --link: #0e1b5d; --accent: #00664d; --accent-dark: #004d39; --radius: 12px; --maxw: 1100px; } /* Dark mode variables (will be toggled with .dark on ) */ :root.dark{ --bg: #071016; --card: #08161c; --text: #e6f6f4; --muted: #bfd4ce; --link: #7897dd; --accent: #058a5e; --accent-dark: #007040; } *{box-sizing:border-box} html,body{height:100%} body{ font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.5; } .container{width:94%;max-width:var(--maxw);margin:0 auto} header{background:linear-gradient(90deg,var(--card),var(--bg));padding:18px 0;position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(0,0,0,0.04)} .brand{display:flex;align-items:center;gap:14px} .logo{width:52px;height:52px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;color:white;font-weight:700} nav{display:flex;align-items:center;gap:18px} .nav-links{display:flex;gap:14px} a{color:var(--link)} .cta{background:linear-gradient(90deg,var(--accent),var(--accent-dark));color:white;padding:10px 14px;border-radius:10px;font-weight:600} /* Hero */ .hero{display:grid;grid-template-columns:1fr 420px;gap:34px;align-items:center;padding:60px 0} .hero h1{font-size:2.1rem;margin-bottom:10px} .hero p{color:var(--muted);margin-bottom:18px} /* Acerto de estilo inline */ .hero .cta-button { margin-top: 18px; } /* Força texto escuro no modo claro */ .card.cta-button { color: var(--text); /* mantém branco no dark e escuro no light */ } .header-flex { display: flex; justify-content: space-between; align-items: center; position: relative; gap: 12px; } .font-bold { font-weight: 700; margin:0; } .menu-btn { background: none; border: none; } .whatsapp-container { display: flex; gap: 10px; margin-top: 18px; } .call-container { display: flex; gap: 10px; margin-top: 18px; } .call-link { padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.04); } .card { margin-top: 12px; display: grid; gap: 18px; } .card -flex{ display: flex; gap: 18px; flex-wrap: wrap; align-items: center; } .text-container { margin-top: 12px; display: flex; gap: 8px; align-items: center; justify-content: space-between; } .muted-text { font-size: 13px; } .flex-container { display: flex; gap: 14px; align-items: center; } .flex-container-small { display: flex; gap: 10px; margin-top: 18px; } .logo-area { display: flex; align-items: center; gap: 14px; } .image-rounded { border-radius: 10px; object-fit: cover; } .flex-item { flex: 1; min-width: 220px; } .review-link { text-decoration: none; color: inherit; display: block; } /* Acerto de estilo inline fim */ /* Card with image */ .card{background:var(--card);padding:20px;border-radius:var(--radius);box-shadow:0 6px 20px rgba(2,6,23,0.06)} .service-list{display:grid;gap:14px} /* Images grid */ .images{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px} .images img{width:100%;height:79px;object-fit:cover;border-radius:8px} /* Local SEO box */ .local{display:flex;gap:16px;align-items:center} /* FAQ */ .faq{margin-top:22px} .faq details{margin-bottom:10px;background:transparent;border-radius:10px;padding:12px} /* Footer */ footer{padding:40px 0;margin-top:40px;color:var(--muted)} /* Responsive */ @media (max-width:980px){ .hero{grid-template-columns:1fr} .images{grid-template-columns:repeat(2,1fr)} } @media (max-width:520px){ .images img{height:79px} header{padding:12px 0} } /* small helpers */ .muted{color:var(--muted)} .badge{display:inline-block;background:rgba(10,143,111,0.12);color:var(--accent);padding:6px 10px;border-radius:999px;font-weight:600} /* image placeholder technique */ .img-lazy{filter:blur(12px);transform:scale(1.02);transition:filter .5s,transform .5s} .img-lazy.loaded{filter:none;transform:none} /* dark mode toggle */ .toggle{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:6px 8px;border-radius:8px;cursor:pointer} :root.dark .toggle{border-color:rgba(255,255,255,0.08)} /* carrossel */ .carousel { position: relative; max-width: 900px; margin: 40px auto; } .carousel-viewport { position: relative; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; } .carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; } .carousel-slide.is-active { opacity: 1; z-index: 1; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .carousel-slide figcaption { position: absolute; bottom: 12px; left: 12px; background: rgba(0,0,0,0.6); color: #fff; padding: 6px 10px; border-radius: 6px; font-size: 14px; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.55); color: #fff; border: none; font-size: 2rem; padding: 6px 14px; cursor: pointer; border-radius: 50%; } .carousel-btn.prev { left: 10px; } .carousel-btn.next { right: 10px; } .carousel-btn:hover { background: rgba(0,0,0,0.75); } /* Botão Whatsapp */ .whatsapp-float { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; align-items: center; justify-content: center; } .whatsapp-float-icon { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #3b7b43, #2b4d2f); padding: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } /* Opcional: esconder em desktop, mostrar só em mobile */ @media (min-width: 768px) { .whatsapp-float { /* Para mostrar também no desktop, comente a próxima linha */ /* display: none; */ } } /* Botão Whatsapp fim */ /************* BOTÕES COLORIDOS *************/ .button { display: inline-block; padding: 15px 30px; font-size: 16px; font-weight: bold; text-align: center; color: #fff; text-decoration: none; border-radius: 5px; cursor: pointer; transition: background 0.3s ease; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .button:hover { opacity: 0.9; } .facebook { background: linear-gradient(135deg, #3b5998, #1c2a70); } .google { background: linear-gradient(135deg, #2d333d, #212121); } .whatsapp { background: linear-gradient(135deg, #3b7b43, #2b4d2f); } .telefone { background: linear-gradient(135deg, #212121, #333333); } /* ===== BOTÃO HAMBÚRGUER ===== */ .menu-btn { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; } .menu-btn span { width: 26px; height: 3px; background: var(--text); border-radius: 2px; } /* ===== MENU LATERAL ===== */ .nav-links { position: fixed; top: 0; right: -100%; width: 320px; max-width: 80%; height: 100%; background: var(--card); padding: 90px 20px; transition: right 0.3s ease; z-index: 1000; display: block !important; } .nav-links.open { right: 0; } /* ===== OVERLAY ===== */ #overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: none; z-index: 999; } #overlay.active { display: block; } /* ===== ESTRUTURA DO MENU ===== */ .menu-root, .submenu { list-style: none; padding: 0; margin: 0; } .menu-root > li { margin-bottom: 12px; } /* ===== LINKS ===== */ .nav-links a, .submenu-toggle { display: block; width: 100%; padding: 10px 8px; font-weight: 600; background: none; border: none; text-align: left; cursor: pointer; color: var(--text); } /* ===== SUBMENU ===== */ .submenu { display: none; padding-left: 12px; } .has-submenu.open .submenu { display: block; } /* ===== RODAPÉ ===== */ .site-footer { background-color: var(--bg) border-top: 1px solid #e0e0e0; padding: 24px 16px; font-size: 14px; color: var(--text); } .footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; } .footer-info { display: flex; flex-wrap: wrap; gap: 8px 24px; } /* Desktop */ @media (min-width: 768px) { .footer-container { flex-direction: row; justify-content: space-between; align-items: center; } }