* { font-family: "Plus Jakarta Sans", __Roboto_7247e5, __Roboto_Fallback_7247e5, sans-serif; } .page-body { font-family: "Plus Jakarta Sans", sans-serif; } .page-loader { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s step-end, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .page-loader.loader-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.02); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.7s step-end 0.7s, transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.1s; } .loader-backdrop { position: absolute; inset: 0; background: linear-gradient( 165deg, #0c1929 0%, #0f2744 18%, #0d3d5c 38%, #1a4a6e 55%, #0f2744 75%, #0c1929 100% ); background-size: 100% 400%; animation: loaderGradient 10s ease-in-out infinite; } .loader-backdrop::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse 100% 80% at 50% 120%, rgba(249, 115, 22, 0.12) 0%, transparent 50% ); pointer-events: none; } .loader-mountains { position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: linear-gradient( to top, rgba(15, 23, 42, 0.95) 0%, rgba(15, 39, 68, 0.6) 30%, transparent 100% ); clip-path: polygon( 0% 100%, 8% 60%, 15% 75%, 22% 50%, 30% 65%, 38% 40%, 45% 55%, 52% 35%, 60% 48%, 68% 30%, 75% 42%, 82% 25%, 90% 38%, 100% 100% ); opacity: 0.7; } .loader-gradient-overlay { position: absolute; inset: 0; background: radial-gradient( ellipse 60% 40% at 50% 30%, rgba(249, 115, 22, 0.06) 0%, transparent 60% ); pointer-events: none; } @keyframes loaderGradient { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 0% 100%; } } .loader-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .loader-particles span { position: absolute; width: 4px; height: 4px; background: rgba(255, 255, 255, 0.5); border-radius: 50%; animation: floatParticle 8s ease-in-out infinite; box-shadow: 0 0 12px rgba(249, 115, 22, 0.3); } .loader-particles span:nth-child(odd) { background: rgba(249, 115, 22, 0.5); box-shadow: 0 0 16px rgba(249, 115, 22, 0.4); } .loader-particles span:nth-child(1) { left: 12%; top: 25%; animation-delay: 0s; animation-duration: 7s; } .loader-particles span:nth-child(2) { left: 88%; top: 70%; animation-delay: 0.8s; animation-duration: 9s; } .loader-particles span:nth-child(3) { left: 45%; top: 12%; animation-delay: 1.6s; animation-duration: 6.5s; } .loader-particles span:nth-child(4) { left: 72%; top: 55%; animation-delay: 2.4s; animation-duration: 8s; } .loader-particles span:nth-child(5) { left: 25%; top: 80%; animation-delay: 0.4s; animation-duration: 7.5s; } .loader-particles span:nth-child(6) { left: 60%; top: 35%; animation-delay: 1.2s; animation-duration: 6s; } .loader-particles span:nth-child(7) { left: 5%; top: 50%; animation-delay: 2s; animation-duration: 8.5s; } .loader-particles span:nth-child(8) { left: 95%; top: 20%; animation-delay: 0.6s; animation-duration: 7.2s; } .loader-particles span:nth-child(9) { left: 35%; top: 60%; animation-delay: 1.8s; animation-duration: 6.8s; } .loader-particles span:nth-child(10) { left: 78%; top: 85%; animation-delay: 1s; animation-duration: 9.2s; } @keyframes floatParticle { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; } 25% { transform: translate(15px, -25px) scale(1.3); opacity: 0.9; } 50% { transform: translate(-20px, 10px) scale(0.8); opacity: 0.6; } 75% { transform: translate(10px, 20px) scale(1.2); opacity: 0.85; } } .loader-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; } .loader-rings { position: relative; width: 150px; height: 150px; } .loader-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; animation: spinRing 2.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; } .loader-ring-1 { border-top-color: #f97316; border-right-color: rgba(249, 115, 22, 0.15); animation-duration: 1.8s; animation-direction: reverse; } .loader-ring-2 { inset: 14px; border-right-color: #fb923c; border-bottom-color: rgba(251, 146, 60, 0.2); animation-duration: 2.2s; } .loader-ring-3 { inset: 28px; border-bottom-color: #ea580c; border-left-color: rgba(234, 88, 12, 0.15); animation-duration: 2.6s; animation-direction: reverse; } @keyframes spinRing { to { transform: rotate(360deg); } } .loader-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%); border-radius: 50%; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 4px rgba(249, 115, 22, 0.15), 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 2px 8px rgba(255, 255, 255, 0.8); animation: corePulse 2.5s ease-in-out infinite; } .loader-logo { width: 44px; height: auto; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08)); } @keyframes corePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 4px rgba(249, 115, 22, 0.15), 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 2px 8px rgba(255, 255, 255, 0.8); } 50% { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 0 8px rgba(249, 115, 22, 0.12), 0 12px 40px rgba(0, 0, 0, 0.25), inset 0 2px 12px rgba(255, 255, 255, 0.9); } } .loader-text { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; font-size: 1.85rem; font-weight: 800; letter-spacing: 0.1em; color: #fff; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3), 0 0 40px rgba(249, 115, 22, 0.25); } .loader-text-word { display: inline-block; opacity: 0; animation: textReveal 0.8s ease-out forwards, textGlow 2.2s ease-in-out 1s infinite; } .loader-text-word:nth-child(1) { animation-delay: 0.2s, 1s; } .loader-text-word:nth-child(2) { animation-delay: 0.4s, 1.2s; } @keyframes textReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes textGlow { 0%, 100% { text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3), 0 0 30px rgba(249, 115, 22, 0.35); } 50% { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25), 0 0 50px rgba(249, 115, 22, 0.5); } } .loader-tagline { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin: -0.5rem 0 0; animation: taglineFade 1s ease-out 0.8s both; } @keyframes taglineFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .loader-bar { position: relative; width: 200px; height: 5px; margin-top: 0.25rem; } .loader-bar-track { position: absolute; inset: 0; background: rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; } .loader-bar-fill { position: absolute; left: 0; top: 0; height: 100%; width: 40%; background: linear-gradient( 90deg, #f97316 0%, #fb923c 40%, #fdba74 70%, #f97316 100% ); background-size: 200% 100%; border-radius: 10px; box-shadow: 0 0 12px rgba(249, 115, 22, 0.5); animation: barFill 2s ease-in-out infinite; } @keyframes barFill { 0% { transform: translateX(-5%); width: 35%; opacity: 0.9; } 50% { width: 65%; opacity: 1; } 100% { transform: translateX(165%); width: 35%; opacity: 0.9; } } .site-header { background: linear-gradient(135deg, #374151 0%, #1f2937 50%, #111827 100%); border-bottom: 2px solid rgba(249, 115, 22, 0.3); } .header-call-btn { background: #ea580c; box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35); transition: all 0.25s ease; } .header-call-btn:hover { background: #c2410c; box-shadow: 0 4px 12px rgba(234, 88, 12, 0.4); transform: translateY(-1px); } .hero-image { min-height: 72vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .hero-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.5) 40%, rgba(15, 23, 42, 0.75) 100% ); z-index: 1; } .hero-content { z-index: 2; } .hero-badge { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); letter-spacing: 0.15em; } .hero-title { text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 4px 24px rgba(0, 0, 0, 0.3); line-height: 1.15; } .hero-subtitle { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); font-weight: 500; } .hero-cta-btn { animation: heroBtnFloat 3s ease-in-out infinite; } @keyframes heroBtnFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .hero-cta-btn:hover { animation: none; } .hero-section .review-overlay { z-index: 3; } .review-overlay { background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); } .review-overlay .container > div { justify-content: center !important; flex-wrap: nowrap !important; } .review-overlay .container > div > div { flex-shrink: 0; min-width: fit-content; } .gradient-btn { background: #ea580c; border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35); transition: all 0.25s ease; font-weight: 600; letter-spacing: 0.02em; border-radius: 12px; } .gradient-btn:hover { background: #c2410c; box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4); transform: translateY(-2px); } .gradient-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(234, 88, 12, 0.3); } .cta-primary.gradient-btn { animation: ctaPulse 2.5s ease-in-out infinite; } @keyframes ctaPulse { 0%, 100% { box-shadow: 0 2px 8px rgba(234, 88, 12, 0.35); } 50% { box-shadow: 0 4px 14px rgba(234, 88, 12, 0.45); } } .cta-primary:hover { animation: none; } .cta-trust p span { white-space: nowrap; } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; } .mobile-sticky-footer .cta-call { background: #2563eb; box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35); } .mobile-sticky-footer .cta-whatsapp { background: #22c55e; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35); } .mobile-sticky-footer .cta-call, .mobile-sticky-footer .cta-whatsapp { min-height: 48px; border-radius: 12px; transition: all 0.25s ease; } .mobile-sticky-footer .cta-call:hover { background: #1d4ed8; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4); } .mobile-sticky-footer .cta-whatsapp:hover { background: #16a34a; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4); } .mobile-sticky-footer .cta-call:hover, .mobile-sticky-footer .cta-whatsapp:hover { transform: translateY(-1px); } .mobile-sticky-footer .cta-call:active, .mobile-sticky-footer .cta-whatsapp:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .whatsapp-btn { background: #22c55e; border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35); transition: all 0.25s ease; font-weight: 600; letter-spacing: 0.02em; border-radius: 12px; } .whatsapp-btn:hover { background: #16a34a; box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4); transform: translateY(-2px); } .whatsapp-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3); } .limited-deal-btn { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); box-shadow: 0 4px 20px rgba(249, 115, 22, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; border: none; } .limited-deal-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); transition: left 0.5s; } .limited-deal-btn::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50% ); pointer-events: none; } .limited-deal-btn:hover::before { left: 100%; } .limited-deal-btn:hover { background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%); box-shadow: 0 6px 25px rgba(249, 115, 22, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .limited-deal-btn:active { transform: translateY(0); box-shadow: 0 2px 10px rgba(249, 115, 22, 0.4); } .strikethrough-price { text-decoration: line-through; opacity: 0.6; } .pricing-cta-section { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%); border-bottom: 1px solid #e2e8f0; } .section-title { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: -0.02em; } .section-heading { font-family: "Plus Jakarta Sans", sans-serif; letter-spacing: -0.02em; color: #1e293b; }