/* Reset de contraste — garante texto visível em fundo claro */ html, body { background: #fff; } body { color: #222 !important; -webkit-text-fill-color: currentColor !important; /* corrige casos de texto transparente no Safari */ text-shadow: none !important; } /* Herdar cor para containers comuns */ main, section, article, #app, .content, .container { color: inherit !important; } /* Se alguma classe global pintou tudo de branco (ex.: Tailwind .text-white no ) */ body.text-white, body .text-white { color: #222 !important; } /* Evita “misturas” que apagam o texto */ *[style*="mix-blend-mode"], *[class*="blend-"] { mix-blend-mode: normal !important; } /* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #2c2c2c; overflow-x: hidden; scroll-behavior: smooth; background: #ffffff; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Typography - Clean and Modern */ h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; } h1 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 800; } h2 { font-size: clamp(2rem, 4vw, 3rem); } h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); } .highlight { color: #FFA539; position: relative; } /* Floating WhatsApp Button - Always Visible */ .floating-whatsapp { position: fixed; bottom: 24px; right: 24px; z-index: 9999; background: linear-gradient(135deg, #25D366, #128C7E); color: white; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; text-decoration: none; box-shadow: 0 8px 32px rgba(37, 211, 102, 0.4); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: pulse-whatsapp 2s infinite; } .floating-whatsapp:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(37, 211, 102, 0.6); } @keyframes pulse-whatsapp { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* Modern Buttons - Focused on Conversion */ .btn-primary, .btn-secondary, .btn-whatsapp { display: inline-flex; align-items: center; gap: 12px; padding: 18px 36px; border: none; border-radius: 12px; font-weight: 600; text-decoration: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 16px; text-align: center; justify-content: center; position: relative; overflow: hidden; min-width: 200px; } .btn-primary { background: linear-gradient(135deg, #FFA539, #c97d21); color: white; box-shadow: 0 8px 32px rgb(246 195 0 / 30%); font-size: 18px; font-weight: 700; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgb(246 195 0 / 30%); } .btn-whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); color: white; box-shadow: 0 8px 32px rgba(37, 211, 102, 0.3); font-size: 18px; font-weight: 700; } .btn-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(37, 211, 102, 0.4); } .btn-secondary { background: transparent; color: #FFA539; border: 2px solid #FFA539; font-weight: 600; } .btn-secondary:hover { background: #FFA539; color: white; transform: translateY(-2px); } /* Minimal Header */ .header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 20px 0; transition: all 0.3s ease; } .header.scrolled { padding: 16px 0; box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08); } .header .container { display: flex; justify-content: space-between; align-items: center; } .logo img { height: 80px; width: auto; } .link-produtos{ text-decoration:none; color:#666; } .link-produtos:hover{ color:#FFA539; } .btn-phone { background: #25D366; color: white; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; font-size: 14px; } .btn-phone:hover { background:#000; } .btn-whatsapp2 { display: inline-flex; align-items: center; /* alinha verticalmente ao centro */ justify-content: center; background-color: #25D366; /* Cor oficial do WhatsApp */ color: white; padding: 6px 20px; border-radius: 25px; font-size: 16px; font-weight: 600; text-decoration: none; box-shadow: 0 4px 8px rgba(37, 211, 102, 0.4); transition: background-color 0.3s ease, box-shadow 0.3s ease; margin-top:10px; } .btn-whatsapp2 i { margin-right: 10px; font-size: 20px; line-height: 1; /* evita desalinhamento por linha */ display: inline-flex; /* garante alinhamento flexível */ align-items: center; /* centraliza o ícone */ justify-content: center; /* centraliza o ícone */ } .btn-whatsapp2:hover { background-color: #1ebe57; box-shadow: 0 6px 12px rgba(30, 190, 87, 0.6); } /* Hero Section - Minimal and Impactful */ .hero { background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); padding: 140px 0 100px; position: relative; min-height: 100vh; display: flex; align-items: center; } .hero-content { display: grid; grid-template-columns: 1fr 400px; gap: 80px; align-items: center; } .hero-text { max-width: 600px; } .badges { display: flex; gap: 8px; margin-bottom: 32px; flex-wrap: wrap; } .badge { background: #FFA539; color: white; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; } .hero-title { margin-bottom: 24px; color: #1a1a1a; line-height: 1.1; } .hero-subtitle { font-size: 20px; color: #666; margin-bottom: 40px; line-height: 1.5; font-weight: 400; } .hero-benefits { display: flex; gap: 32px; margin-bottom: 48px; } .benefit { display: flex; align-items: center; gap: 8px; color: #FFA539; font-weight: 500; font-size: 14px; } .benefit i { font-size: 16px; } /* Minimal Form Container */ .form-container { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.05); } .form-container h3 { color: #1a1a1a; margin-bottom: 8px; font-size: 24px; font-weight: 700; } .form-subtitle { color: #666; margin-bottom: 32px; font-size: 14px; } .contact-form { display: flex; flex-direction: column; gap: 20px; } .form-group input, .form-group select { font-family: 'Inter', sans-serif; width: 100%; padding: 16px 20px; border: 2px solid #e5e5e5; border-radius: 8px; font-size: 16px; transition: all 0.3s ease; background: #fafafa; } .form-group input:focus, .form-group select:focus { outline: none; border-color: #FFA539; background: white; box-shadow: 0 0 0 3px rgba(246, 0, 0, 0.1); } .form-guarantee { display: flex; align-items: center; gap: 8px; color: #666; font-size: 12px; margin-top: 16px; justify-content: center; } /* Section Headers - Clean Typography */ .section-header { text-align: center; margin-bottom: 80px; max-width: 800px; margin-left: auto; margin-right: auto; } .section-header h2 { margin-bottom: 16px; color: #1a1a1a; } .section-header p { font-size: 18px; color: #666; line-height: 1.6; } /* Minimal Problem/Solution */ .problem-solution { padding: 120px 0; background: white; } .comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1000px; margin: 0 auto; } .comparison-item { padding: 48px; border-radius: 16px; background: #fafafa; border: 1px solid #f0f0f0; transition: all 0.3s ease; } .comparison-item:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08); } .problems { border-left: 4px solid #FFA539; } .solutions { border-left: 4px solid #25D366; } .comparison-item h3 { margin-bottom: 24px; font-size: 20px; display: flex; align-items: center; gap: 12px; } .problems h3 { color: #FFA539; } .solutions h3 { color: #25D366; } .comparison-item ul { list-style: none; } .comparison-item li { padding: 12px 0; position: relative; padding-left: 24px; color: #555; line-height: 1.5; } .problems li::before { content: '✗'; position: absolute; left: 0; color: #FFA539; font-weight: bold; } .solutions li::before { content: '✓'; position: absolute; left: 0; color: #25D366; font-weight: bold; } /* Minimal Benefits */ .benefits { padding: 120px 0; background: #fafafa; } .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; } .benefit-card { background: white; padding: 40px 32px; border-radius: 16px; text-align: center; border: 1px solid #f0f0f0; transition: all 0.3s ease; } .benefit-card:hover { transform: translateY(-8px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08); } .benefit-icon { width: 64px; height: 64px; background: #FFA539; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; } .benefit-icon i { font-size: 24px; color: white; } .benefit-card h3 { margin-bottom: 16px; color: #1a1a1a; font-size: 18px; } .benefit-card p { color: #666; line-height: 1.6; font-size: 14px; } /* Minimal Services */ .services { padding: 50px 0; background: white; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; } .service-card { background: #fafafa; padding: 32px 24px; border-radius: 12px; text-align: center; transition: all 0.3s ease; border: 1px solid #f0f0f0; } .service-card:hover { background: white; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); transform: translateY(-4px); } .service-card i { font-size: 32px; color: #FFA539; margin-bottom: 16px; } .service-card h3 { margin-bottom: 12px; color: #1a1a1a; font-size: 16px; } .service-card p { color: #666; font-size: 14px; line-height: 1.5; } /* Coverage */ .coverage { padding: 120px 0; background: #fafafa; } .coverage-content { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .cities-list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 32px 0; } .city-group h4 { margin-bottom: 16px; color: #1a1a1a; font-size: 16px; } .city-group ul { list-style: none; } .city-group li { padding: 8px 0; color: #666; font-size: 14px; } /* Testimonials */ .testimonials { padding: 120px 0; background: white; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 32px; } .testimonial-card { background: #fafafa; padding: 32px; border-radius: 16px; border: 1px solid #f0f0f0; transition: all 0.3s ease; } .testimonial-card:hover { background: white; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08); } .stars { color: #ffc107; margin-bottom: 16px; font-size: 16px; } .testimonial-content p { font-style: italic; color: #555; line-height: 1.6; margin-bottom: 20px; font-size: 15px; } .testimonial-author h4 { color: #1a1a1a; font-weight: 600; font-size: 14px; } /* CTA Section - Highly Focused on Conversion */ .final-cta { background: #1a1a1a; padding: 120px 0; text-align: center; position: relative; } .cta-content h2 { color: white; margin-bottom: 24px; max-width: 800px; margin-left: auto; margin-right: auto; } .cta-content p { color: #ccc; font-size: 18px; margin-bottom: 48px; max-width: 600px; margin-left: auto; margin-right: auto; } .urgency-banner { background: linear-gradient(135deg, #FFA539, #c97d21); color: white; padding: 16px 32px; border-radius: 50px; display: inline-flex; align-items: center; gap: 12px; margin-bottom: 48px; font-weight: 600; animation: pulse-banner 2s infinite; } @keyframes pulse-banner { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } } .guarantees { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin: 48px 0; max-width: 800px; margin-left: auto; margin-right: auto; } .guarantee { display: flex; align-items: center; gap: 12px; color: white; padding: 16px; background: rgba(255, 255, 255, 0.1); border-radius: 8px; font-size: 14px; } .guarantee i { color: #25D366; font-size: 16px; } .cta-actions { display: flex; gap: 24px; justify-content: center; margin-top: 48px; flex-wrap: wrap; } /* Footer */ .footer { background: #f8f9fa; padding: 80px 0 40px; color: #666; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 48px; margin-bottom: 48px; } .footer-section h3, .footer-section h4 { color: #1a1a1a; margin-bottom: 20px; font-size: 16px; } .footer-section p, .footer-section li { font-size: 14px; line-height: 1.6; margin-bottom: 8px; } .footer-section ul { list-style: none; } .social-links a { color: #25D366; font-size: 24px; margin-top: 16px; display: inline-block; } .footer-bottom { border-top: 1px solid #e5e5e5; padding-top: 32px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 14px; } .footer-links { display: flex; gap: 24px; } .footer-links a { color: #666; text-decoration: none; } /* Responsive Design */ @media (max-width: 768px) { .container { padding: 0 16px; } .hero-content { grid-template-columns: 1fr; gap: 48px; text-align: center; } .comparison { grid-template-columns: 1fr; gap: 24px; } .coverage-content { grid-template-columns: 1fr; gap: 48px; } .cities-list { grid-template-columns: 1fr; gap: 24px; } .hero-benefits { flex-direction: column; gap: 16px; } .form-container { padding: 32px 24px; } .cta-actions { flex-direction: column; align-items: center; } .floating-whatsapp { width: 56px; height: 56px; font-size: 24px; bottom: 16px; right: 16px; } .footer-bottom { flex-direction: column; text-align: center; } } /* Scroll Animations */ .fade-in { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Loading States */ .loading { opacity: 0; animation: fadeIn 0.6s ease-out forwards; } @keyframes fadeIn { to { opacity: 1; } }