/* Confia Hidro — página inicial (complemento ao Tailwind). Mobile hero: defina --hero-mobile-bg no (cfg hero_mobile_fallback_bg). */ :root { --hero-mobile-bg: url("https://images.unsplash.com/photo-1585128792020-803d29415281?w=1200"); } html { scroll-behavior: smooth; } body { font-family: "Inter", sans-serif; overflow-x: hidden; } #preloader { position: fixed; inset: 0; background: white; z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease; } .drop-loader { width: 60px; height: 60px; border: 5px solid #f5f5f5; border-top-color: #4B5563; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .red-underline::after { content: ""; display: block; width: 60px; height: 4px; background: #1E6FB8; margin: 12px auto 0; border-radius: 2px; } .diagonal-stripe { background: linear-gradient(135deg, rgba(0, 0, 0, 0.15) 0%, transparent 50%), repeating-linear-gradient( 45deg, #4B5563 0px, #4B5563 60px, #374151 60px, #374151 120px ); } .btn-primary { background: #4B5563; position: relative; overflow: hidden; transition: all 0.3s ease; } .btn-primary::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.6s; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { background: #374151; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(75, 85, 99, 0.4); } .btn-outline { border: 2px solid #1E6FB8; color: #1E6FB8; transition: all 0.3s ease; } .btn-outline:hover { background: #1E6FB8; color: white; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(30, 111, 184, 0.3); } .service-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-top: 4px solid #4B5563; position: relative; overflow: hidden; } .service-card::after { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 4px; background: #374151; transition: width 0.4s ease; } .service-card:hover { transform: translateY(-12px); box-shadow: 0 25px 50px rgba(75, 85, 99, 0.15); } .service-card:hover::after { width: 100%; } .service-card:hover .service-icon { background: #4B5563; transform: rotateY(360deg); } .service-card:hover .service-icon i { color: white; } .service-icon { transition: all 0.6s ease; } .service-icon i { transition: color 0.3s ease; } .testimonial-card { transition: transform 0.3s ease; } .testimonial-card:hover { transform: translateY(-6px); } .floating-whatsapp { position: fixed; bottom: 30px; right: 30px; z-index: 999; background: #25d366; width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.6); } 50% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); } } .floating-whatsapp::before { content: "Fale conosco!"; position: absolute; right: 75px; background: white; padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; color: #2c2c2c; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateX(10px); transition: all 0.3s ease; pointer-events: none; } .floating-whatsapp:hover::before { opacity: 1; transform: translateX(0); } .back-to-top { position: fixed; bottom: 110px; right: 30px; z-index: 998; background: #4B5563; color: white; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .back-to-top.show { opacity: 1; pointer-events: auto; } .back-to-top:hover { background: #374151; transform: translateY(-4px); } .gallery-item { position: relative; overflow: hidden; border-radius: 16px; cursor: pointer; aspect-ratio: 4/3; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; } .gallery-item:hover img { transform: scale(1.15); } .gallery-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(75, 85, 99, 0.95) 0%, rgba(75, 85, 99, 0) 60% ); display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: white; opacity: 0; transition: opacity 0.4s ease; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; } .lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); z-index: 9998; display: none; align-items: center; justify-content: center; padding: 40px; } .lightbox.active { display: flex; } .lightbox img { max-width: 90%; max-height: 90%; border-radius: 12px; animation: zoomIn 0.4s ease; } @keyframes zoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } .lightbox-close { position: absolute; top: 30px; right: 30px; color: white; font-size: 2rem; cursor: pointer; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .lightbox-close:hover { background: #4B5563; transform: rotate(90deg); } .faq-item { border: 2px solid #f5f5f5; transition: all 0.3s ease; } .faq-item.active { border-color: #4B5563; box-shadow: 0 8px 20px rgba(75, 85, 99, 0.1); } .faq-question { cursor: pointer; padding: 20px 24px; display: flex; justify-content: space-between; align-items: center; } .faq-icon { transition: transform 0.3s ease; } .faq-item.active .faq-icon { transform: rotate(180deg); color: #4B5563; } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 24px; } .faq-item.active .faq-answer { max-height: 300px; padding: 0 24px 24px; } .counter-card { transition: all 0.3s ease; } .counter-card:hover { transform: translateY(-6px); } .process-step { position: relative; } .process-step:not(:last-child)::after { content: ""; position: absolute; top: 40px; left: 100%; width: 100%; height: 2px; border-top: 3px dashed #4B5563; z-index: 0; } @media (max-width: 768px) { .process-step::after { display: none; } } header { transition: all 0.3s ease; } header.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); } .mobile-menu { transform: translateX(-100%); transition: transform 0.4s ease; } .mobile-menu.open { transform: translateX(0); } .hero-image-wrap { animation: float 4s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .ticker { overflow: hidden; white-space: nowrap; background: #2c2c2c; color: white; } .ticker-track { display: inline-block; animation: ticker 30s linear infinite; padding-left: 100%; } @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } } .ticker-item { padding: 0 40px; } .ticker-item i { color: #4B5563; margin-right: 8px; } /* HERO VIDEO */ .hero-video-section { position: relative; overflow: hidden; isolation: isolate; } .hero-video-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .hero-video-overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(75, 85, 99, 0.35) 100% ); } .hero-video-overlay::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient( circle at 1px 1px, rgba(75, 85, 99, 0.15) 1px, transparent 0 ); background-size: 30px 30px; opacity: 0.4; } .video-control { position: absolute; bottom: 20px; right: 20px; z-index: 5; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border: 2px solid #4B5563; color: #4B5563; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .video-control:hover { background: #4B5563; color: white; transform: scale(1.1); } @media (max-width: 768px) { .hero-video-bg { display: none; } .hero-video-section { background-image: var(--hero-mobile-bg); background-size: cover; background-position: center; } }