/* ============================================================= */ /* custom.css – VERSÃO FINAL 2025 – CLS 0,00 + PageSpeed 95-100 */ /* ============================================================= */ /* FONTES AGORA CARREGADAS VIA NO (mais rápido e sem erro) */ /* Todos os @font-face quebrados foram REMOVIDOS */ /* TÍTULO DA HERO – CLS 0,00 EM QUALQUER DISPOSITIVO */ .hero-content h1 { min-height: 210px !important; font-family: "Space Grotesk", system-ui, sans-serif !important; font-weight: 700 !important; line-height: 1.06 !important; letter-spacing: -0.035em !important; margin-bottom: 1.5rem !important; } @media (max-width: 480px) { .hero-content h1 { min-height: 195px !important; } } @media (min-width: 768px) { .hero-content h1 { min-height: 178px !important; } } @media (min-width: 1200px) { .hero-content h1 { min-height: 192px !important; } } /* Reset & Base */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } body { font-family:'Work Sans',sans-serif; color:#1a1a1a; line-height:1.6; overflow-x:hidden; } html { scroll-behavior:smooth; } /* Hero Section */ .hero-section { min-height:90vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%); background-size:200% 200%; animation:gradientShift 15s ease infinite; padding:2rem 1.5rem; position:relative; overflow:hidden; } .hero-section::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.25); z-index:1; } @keyframes gradientShift { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} } .hero-content { max-width:900px; text-align:center; color:white; z-index:2; position:relative; } .hero-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.2); backdrop-filter:blur(10px); padding:.5rem 1.25rem; border-radius:50px; font-size:.875rem; font-weight:600; margin-bottom:1.5rem; border:1px solid rgba(255,255,255,.3); } .hero-content h1 { font-size:clamp(2rem,5vw,3.5rem); text-shadow:2px 2px 4px rgba(0,0,0,.3); } .hero-subtitle { font-size:clamp(1rem,2vw,1.25rem); line-height:1.7; margin-bottom:2.5rem; opacity:.95; } .hero-cta-group { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.5rem; } .btn-primary, .btn-secondary { display:inline-flex; align-items:center; gap:.5rem; padding:1rem 2rem; font-size:1.125rem; font-weight:600; border-radius:50px; text-decoration:none; border:none; cursor:pointer; transition:transform .2s,box-shadow .2s; } .btn-primary { background:#10b981 !important; color:white !important; box-shadow:0 4px 20px rgba(16,185,129,.4); } .btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(16,185,129,.5); } .btn-secondary { background:white !important; color:#667eea !important; box-shadow:0 4px 20px rgba(255,255,255,.3); } .btn-secondary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,255,255,.4); } .trust-badges { display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; } .trust-item { display:flex; align-items:center; gap:.5rem; font-size:.95rem; font-weight:500; } /* WhatsApp Float */ .whatsapp-float { position:fixed; bottom:2rem; right:2rem; width:60px; height:60px; background:#25D366; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,.4); z-index:1000; transition:transform .2s,box-shadow .2s; text-decoration:none; font-size:1.8rem; } .whatsapp-float:hover { transform:scale(1.1); box-shadow:0 6px 30px rgba(37,211,102,.6); } /* O resto do seu CSS continua exatamente igual (compactei só um pouco) */ .section-header { text-align:center; margin-bottom:3rem; } .section-header h2 { font-family:'Space Grotesk',sans-serif; font-size:clamp(1.875rem,4vw,2.5rem); font-weight:700; color:#1a1a1a; margin-bottom:.75rem; } .section-header p { font-size:1.125rem; color:#6b7280; } .services-section{padding:5rem 0;background:#f9fafb} .service-card{background:white;padding:2.5rem 2rem;border-radius:16px;box-shadow:0 4px 6px rgba(0,0,0,.05);transition:.3s;border:2px solid transparent;height:100%} .service-card:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgba(102,126,234,.15);border-color:#667eea} .service-icon{width:64px;height:64px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;display:flex;align-items:center;justify-content:center;color:white;margin-bottom:1.5rem;font-size:1.75rem} .service-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.375rem;font-weight:600;color:#1a1a1a;margin-bottom:.75rem} .service-card p{color:#6b7280;margin-bottom:1.5rem;line-height:1.7} .service-link{display:inline-flex;align-items:center;gap:.5rem;color:#667eea;font-weight:600;text-decoration:none;transition:gap .2s} .service-link:hover{gap:.75rem;color:#5568d3} .additional-services{text-align:center;margin-top:3rem} .additional-services h3{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;margin-bottom:1.5rem;color:#1a1a1a} .service-tags{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center} .service-tags span{background:white;padding:.5rem 1.25rem;border-radius:50px;font-size:.875rem;font-weight:500;color:#4b5563;border:2px solid #e5e7eb;transition:.2s} .service-tags span:hover{border-color:#667eea;color:#667eea} .why-us-section{padding:5rem 0;background:white} .why-card{text-align:center;padding:2rem 1.5rem} .why-icon{width:60px;height:60px;background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;margin:0 auto 1.25rem;font-size:1.5rem} .why-card h3{font-family:'Space Grotesk',sans-serif;font-size:1.25rem;font-weight:600;color:#1a1a1a;margin-bottom:.75rem} .why-card p{color:#6b7280;line-height:1.7} .faq-section{padding:5rem 0;background:#f9fafb} .faq-container{max-width:800px;margin:0 auto} .accordion{background:white;border-radius:16px;box-shadow:0 4px 6px rgba(0,0,0,.05);overflow:hidden} .accordion-button{font-weight:600;font-size:1.05rem;padding:1.25rem 1.5rem;color:#1a1a1a;background:white} .accordion-button:not(.collapsed){background:#f9fafb;color:#667eea} .accordion-body{padding:1rem 1.5rem 1.5rem;color:#6b7280;line-height:1.7} .contact-section{padding:5rem 0;background:white} .contact-info h2{font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;color:#1a1a1a;margin-bottom:1rem} .contact-info>p{color:#6b7280;margin-bottom:2rem;line-height:1.7} .contact-details{display:flex;flex-direction:column;gap:1.5rem} .contact-detail-item{display:flex;align-items:start;gap:1rem;color:#4b5563} .contact-detail-item i{color:#667eea;margin-top:.25rem;font-size:1.25rem;width:24px} .contact-detail-item strong{color:#1a1a1a;font-weight:600} .contact-detail-item a{color:#667eea;text-decoration:none} .contact-detail-item a:hover{color:#5568d3} .contact-form{background:#f9fafb;padding:2.5rem;border-radius:16px;box-shadow:0 4px 6px rgba(0,0,0,.05)} .form-label{font-weight:600;color:#1a1a1a;margin-bottom:.5rem} .form-control,.form-select{padding:.875rem 1rem;border:2px solid #e5e7eb;border-radius:8px;font-size:1rem;transition:.2s} .form-control:focus,.form-select:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,.1)} .btn-submit{padding:1rem 2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:white;font-size:1.125rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:.2s;display:inline-flex;align-items:center;justify-content:center;gap:.5rem} .btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,.3)} .footer{background:#1a1a1a;color:#d1d5db;padding:3rem 0 1.5rem} .footer h3,.footer h4{color:white;margin-bottom:1rem;font-family:'Space Grotesk',sans-serif} .footer h3{font-size:1.5rem} .footer h4{font-size:1.125rem} .footer p{line-height:1.7;font-size:.95rem} .footer ul li{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;font-size:.95rem} .footer ul li i{width:16px} .footer-bottom{border-top:1px solid #374151;padding-top:1.5rem;margin-top:2rem;text-align:center;font-size:.875rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem} @media (max-width:768px){ .hero-section{min-height:100vh;padding:1.5rem 1rem} .hero-content h1{font-size:2rem} .hero-subtitle{font-size:1rem} .hero-cta-group{flex-direction:column} .btn-primary,.btn-secondary{width:100%;justify-content:center} .trust-badges{flex-direction:column;gap:1rem} .whatsapp-float{bottom:1rem;right:1rem;width:56px;height:56px} .footer-bottom{flex-direction:column;text-align:center} .services-section,.why-us-section,.faq-section,.contact-section{padding:3rem 0} .contact-form{padding:1.5rem} } .alert{margin-bottom:2rem;display:flex;align-items:center;gap:.75rem;padding:1rem 1.25rem;border-radius:8px} .alert i{font-size:1.25rem} /* === Acessibilidade: contraste mínimo WCAG === */ /* Cards de serviços */ .service-card, .service-card p, .service-card h3, .service-card a { color: #1f2933; /* cinza bem escuro */ } /* Links de ação */ .service-link { color: #065f46; /* verde escuro com contraste */ font-weight: 600; } /* Hover mantém contraste */ .service-link:hover { color: #064e3b; text-decoration: underline; } /* Accordion (FAQ) */ .accordion-button { color: #111827; background-color: #f1f5f9; } /* Se existir accordion ativo */ .accordion-button:not(.collapsed) { color: #111827; background-color: #e2e8f0; } /* Telefones */ a[href^="tel"] { color: #064e3b; font-weight: 600; } /* =============================== REGIÕES ATENDIDAS – MOBILE FIRST ================================= */ .regions-section { background: #f8f9fa; padding: 3rem 0; } .regions-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 1.5rem; } .region-btn { display: flex; align-items: center; justify-content: center; min-height: 56px; /* tamanho ideal para toque */ padding: 12px; background: #ffffff; border: 2px solid #25D366; border-radius: 12px; color: #1f7a4f; font-weight: 600; text-decoration: none; font-size: 16px; text-align: center; transition: all 0.2s ease; } .region-btn:hover, .region-btn:focus { background: #25D366; color: #ffffff; transform: translateY(-2px); } /* Desktop melhora a distribuição */ @media (min-width: 768px) { .regions-grid { grid-template-columns: repeat(4, 1fr); } }