/* ── AutoElegance Main Styles ── */ /* Prevent AOS from hiding content before JS loads — avoids blank hero flash. The 'no-js-aos' class is on from the start and removed once AOS.init() has run, so elements are visible until AOS takes over. */ .no-js-aos [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } :root { --navy: #0A1F44; --navy-dark: #071530; --navy-light: #142850; --cyan: #1E88E5; --cyan-light: #42A5F5; --silver: #C0C0C0; --silver-light: #E8E8E8; --wa-green: #25D366; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; /* iOS Safari: must be on html too, not just body */ } body { font-family: 'Poppins', sans-serif; color: #1a1a2e; overflow-x: hidden; overscroll-behavior-x: none; /* Prevent iOS horizontal rubber-band scroll */ } /* ── NAVBAR ── */ #navbar { background: transparent; } #navbar > div { align-items: center; min-height: 0; } #navbar.navbar-scrolled { background: rgba(7, 21, 48, 0.97); backdrop-filter: blur(12px); box-shadow: 0 4px 30px rgba(0,0,0,0.3); padding-top: 0.5rem; padding-bottom: 0.5rem; } /* ── NAVBAR LOGO CIRCULAR ── */ .navbar-logo-link { text-decoration: none; flex-shrink: 0; } .navbar-logo-circle { width: 54px !important; height: 54px !important; min-width: 54px; min-height: 54px; max-width: 54px; max-height: 54px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(66, 165, 245, 0.6); box-shadow: 0 0 0 3px rgba(66,165,245,0.12), 0 4px 16px rgba(0,0,0,0.5); transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), min-width 0.4s ease, min-height 0.4s ease, max-width 0.4s ease, max-height 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; flex-shrink: 0; } .navbar-logo-circle:hover { border-color: rgba(66, 165, 245, 1); box-shadow: 0 0 0 5px rgba(66,165,245,0.18), 0 0 24px rgba(30,136,229,0.55), 0 6px 20px rgba(0,0,0,0.4); } .navbar-logo-img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s ease; display: block; } .navbar-logo-circle:hover .navbar-logo-img { transform: scale(1.08); } /* Estado scrolled: logo se encoge */ #navbar.navbar-scrolled .navbar-logo-circle { width: 38px !important; height: 38px !important; min-width: 38px; min-height: 38px; max-width: 38px; max-height: 38px; border-width: 1.5px; box-shadow: 0 0 0 2px rgba(66,165,245,0.1), 0 2px 10px rgba(0,0,0,0.35); } .nav-link { color: rgba(255,255,255,0.85); font-family: 'Montserrat', sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.2s; position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #42A5F5; transition: width 0.3s; } .nav-link:hover { color: #fff; } .nav-link:hover::after { width: 100%; } /* ── HERO ── */ .hero-section { min-height: 100vh; background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 50%, #0d2d6b 100%); position: relative; overflow: hidden; } .hero-section::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(30, 136, 229, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 136, 229, 0.05) 1px, transparent 1px); background-size: 50px 50px; } /* ── GLASS CARD ── */ .glass-card { background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.1); border-radius: 1rem; transition: all 0.3s ease; } .glass-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(66, 165, 245, 0.4); transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.3), 0 0 20px rgba(30, 136, 229, 0.1); } /* ── SERVICE CARD ── */ .service-card { background: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.3s ease; border: 1px solid #f0f0f0; } .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(10, 31, 68, 0.15); border-color: var(--cyan-light); } .service-card .card-img { height: 220px; object-fit: cover; width: 100%; transition: transform 0.5s ease; } .service-card:hover .card-img { transform: scale(1.05); } /* ── PRODUCT CARD ── */ .product-card { background: white; border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 15px rgba(0,0,0,0.07); transition: all 0.3s ease; border: 1px solid #f0f0f0; } .product-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(10, 31, 68, 0.12); } /* ── SECTION HEADERS ── */ .section-tag { display: inline-block; background: linear-gradient(135deg, var(--cyan), var(--cyan-light)); color: white; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.25rem 0.9rem; border-radius: 99px; margin-bottom: 0.75rem; } .section-title { font-family: 'Montserrat', sans-serif; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } .section-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--cyan), var(--cyan-light)); border-radius: 99px; margin: 1rem auto; } /* ── BUTTONS ── */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, var(--cyan), var(--cyan-light)); color: white; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.05em; padding: 0.75rem 1.75rem; border-radius: 99px; border: none; cursor: pointer; transition: all 0.3s; text-decoration: none; box-shadow: 0 4px 15px rgba(30, 136, 229, 0.4); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(30, 136, 229, 0.5); } .btn-outline { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; color: white; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.05em; padding: 0.75rem 1.75rem; border-radius: 99px; border: 2px solid rgba(255,255,255,0.5); cursor: pointer; transition: all 0.3s; text-decoration: none; } .btn-outline:hover { border-color: white; background: rgba(255,255,255,0.1); transform: translateY(-2px); } .btn-wa { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--wa-green); color: white; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.875rem; padding: 0.75rem 1.75rem; border-radius: 99px; text-decoration: none; transition: all 0.3s; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35); } .btn-wa:hover { background: #1da851; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.5); } /* ── BRAND LOGOS ── */ .brand-logo { filter: grayscale(100%) opacity(0.5); transition: all 0.3s ease; } .brand-logo:hover { filter: grayscale(0%) opacity(1); transform: scale(1.1); } /* ── GALLERY GRID ── */ .gallery-item { overflow: hidden; border-radius: 0.75rem; cursor: pointer; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery-item:hover img { transform: scale(1.08); } /* ── TESTIMONIAL CARD ── */ .testimonial-card { background: white; border-radius: 1.25rem; padding: 2rem; box-shadow: 0 4px 20px rgba(0,0,0,0.06); border: 1px solid #f0f4f8; transition: all 0.3s; } .testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 15px 35px rgba(10, 31, 68, 0.1); } /* ── WHATSAPP FAB ── */ .whatsapp-fab { box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5); transition: all 0.3s ease; } .whatsapp-fab:hover { transform: scale(1.1); box-shadow: 0 12px 40px rgba(37, 211, 102, 0.7); } .whatsapp-fab.hide { opacity: 0; pointer-events: none; } .whatsapp-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--wa-green); animation: pulse-ring 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; z-index: -1; will-change: transform, opacity; /* GPU layer — prevents repaint flash on iOS */ } @keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.4); opacity: 0; } 100% { transform: scale(1.4); opacity: 0; } } /* ── PARALLAX BG ── */ .parallax-bg { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } /* ── DARK SECTION ── */ .dark-section { background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%); color: white; } .alt-section { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); color: white; } /* ── STATS ── */ .stat-card { text-align: center; padding: 2rem; } .stat-number { font-family: 'Montserrat', sans-serif; font-size: 3.5rem; font-weight: 900; background: linear-gradient(135deg, var(--cyan-light), white); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; } /* ── ALTERNATING SERVICE BLOCKS ── */ .service-block { padding: 5rem 0; } .service-block:nth-child(even) { background: #f8fafc; } /* ── FORM INPUTS ── */ .form-input { width: 100%; padding: 0.75rem 1rem; border: 2px solid #e5e7eb; border-radius: 0.5rem; font-family: 'Poppins', sans-serif; font-size: 0.9rem; transition: border-color 0.2s; background: white; } .form-input:focus { outline: none; border-color: var(--cyan); } input[type="date"].form-input, input[type="time"].form-input { height: 3rem; line-height: 1.5; -webkit-appearance: none; appearance: none; } .form-label { display: block; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.4rem; color: #374151; } /* ── DASHBOARD ── */ .dash-sidebar { background: var(--navy-dark); min-height: 100vh; width: 260px; position: fixed; top: 0; left: 0; overflow-y: auto; z-index: 100; } .dash-content { margin-left: 260px; min-height: 100vh; background: #f1f5f9; } .dash-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; color: rgba(255,255,255,0.65); font-family: 'Montserrat', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.03em; border-radius: 0.5rem; margin: 0.15rem 0.75rem; transition: all 0.2s; text-decoration: none; } .dash-nav-item:hover, .dash-nav-item.active { background: rgba(30, 136, 229, 0.15); color: #42A5F5; } .dash-card { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); } .stat-widget { background: white; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 2px 12px rgba(0,0,0,0.06); display: flex; align-items: center; gap: 1rem; transition: transform 0.2s; } .stat-widget:hover { transform: translateY(-2px); } @media (max-width: 768px) { .dash-sidebar { transform: translateX(-100%); } .dash-sidebar.open { transform: translateX(0); } .dash-content { margin-left: 0; } } /* ── TOAST ── */ .toast-msg { animation: slideInRight 0.3s ease; transition: opacity 0.4s, transform 0.4s; } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ── HERO TITLE – White/blue shimmer for AUTO ── */ .hero-title-auto { background: linear-gradient( 90deg, #ffffff 0%, #dbeafe 18%, #ffffff 35%, #f0f8ff 50%, #bfdbfe 65%, #ffffff 80%, #dbeafe 100% ); background-size: 250% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: elegance-shimmer 3.5s linear infinite; display: inline-block; filter: drop-shadow(0 0 18px rgba(191, 219, 254, 0.3)); } .hero-title-elegance { background: linear-gradient( 90deg, #D4AF37 0%, #FFD700 20%, #FFF3A3 40%, #FFD700 60%, #D4AF37 80%, #FFD700 100% ); background-size: 250% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: elegance-shimmer 3.5s linear infinite; display: inline-block; filter: drop-shadow(0 0 22px rgba(255, 215, 0, 0.35)); } @keyframes elegance-shimmer { 0% { background-position: 250% center; } 100% { background-position: -50% center; } } /* ── HERO PARTICLES ── */ .hero-car-shine { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(30, 136, 229, 0.15) 0%, transparent 70%); animation: shimmer 4s ease-in-out infinite; } @keyframes shimmer { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } /* ── GOLD "ELEGANCE" TITLE ── */ .gold-elegance { position: relative; display: inline-block; background: linear-gradient( 110deg, #5C3A00 0%, #A07010 8%, #C9920E 20%, #E0B84A 32%, #C9920E 42%, #9A6C0A 52%, #C9920E 64%, #E0B84A 76%, #C9920E 86%, #5C3A00 100% ); background-size: 250% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldFlow 2.8s linear infinite; filter: drop-shadow(0 0 18px rgba(180,130,10,0.55)); } @keyframes goldFlow { 0% { background-position: 0% center; } 100% { background-position: 250% center; } } /* ── SCROLL INDICATOR ── */ .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } } /* ── SHINE / GLASS HOVER EN IMÁGENES ── */ .shine-img-wrap { position: relative; overflow: hidden; } .shine-img { transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.55s ease; } .shine-img-wrap::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient( 105deg, transparent 20%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.06) 65%, transparent 80% ); transform: skewX(-20deg); transition: left 0.65s ease; pointer-events: none; z-index: 1; } .shine-img-wrap:hover::after { left: 140%; } .shine-img-wrap:hover .shine-img { transform: scale(1.06); filter: brightness(1.08) saturate(1.1); } /* ── BRAND LOGOS – usar PNG reales ── */ .brand-logo-img { transition: transform 0.3s ease, filter 0.3s ease, drop-shadow 0.3s ease; filter: grayscale(20%) opacity(0.85); } .group:hover .brand-logo-img { filter: grayscale(0%) opacity(1) drop-shadow(0 4px 8px rgba(30,136,229,0.25)); transform: scale(1.12); } /* ── WIPER ANIMATION (servicios) ── */ .wiper-wrap { position: relative; overflow: hidden; cursor: pointer; } /* Imagen: escala suave al hover */ .wiper-wrap img { transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.7s ease; } .wiper-wrap:hover img { transform: scale(1.04); filter: brightness(1.05); } /* Brazo del limpiaparabrisas */ .wiper-wrap::before { content: ''; position: absolute; bottom: -8%; left: 2%; width: 4px; height: 95%; background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0.15)); border-radius: 3px; transform-origin: bottom center; transform: rotate(-55deg); transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1); z-index: 3; box-shadow: 0 0 6px rgba(255,255,255,0.6), 2px 0 10px rgba(255,255,255,0.2); pointer-events: none; } .wiper-wrap:hover::before { transform: rotate(50deg); } /* Área barrida: brillo en arco */ .wiper-wrap::after { content: ''; position: absolute; bottom: -8%; left: 2%; width: 130%; height: 130%; background: conic-gradient( from 125deg at 0% 100%, rgba(255,255,255,0.13) 0deg, rgba(255,255,255,0.06) 50deg, transparent 65deg ); transform-origin: 0% 100%; transform: rotate(-55deg); transition: transform 0.75s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; pointer-events: none; } .wiper-wrap:hover::after { transform: rotate(50deg); } /* ── NAVBAR LOGO HOVER – lift + glow ── */ .navbar-logo-link:hover #navbarLogoCircle { transform: translateY(-6px) scale(1.07); box-shadow: 0 0 0 3px rgba(66,165,245,0.35), 0 12px 28px rgba(0,0,0,0.5), 0 0 22px rgba(66,165,245,0.28); } /* ── ARROW BOUNCE (botón Google Reviews) ── */ @keyframes arrow-ping { 0%, 100% { transform: translateX(0); opacity: 1; } 40% { transform: translateX(5px); opacity: 1; } 60% { transform: translateX(3px); opacity: 0.7; } } .arrow-bounce { animation: arrow-ping 1.4s ease-in-out infinite; display: inline-flex; align-items: center; } /* ── MOBILE MENU ANIMATION ── */ #mobile-menu { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; } #mobile-menu.is-open { max-height: 500px; opacity: 1; } /* Burger icon transition */ #burger { transition: transform 0.2s ease; } #burger:active { transform: scale(0.88); } /* ── MOBILE IMAGE ENTRANCE ANIMATIONS ── */ @keyframes shineSweepMobile { 0% { left: -120%; } 100% { left: 140%; } } @keyframes imgPopMobile { 0% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.08) saturate(1.1); } 100% { transform: scale(1); filter: brightness(1); } } @keyframes galleryEnter { 0% { transform: scale(0.95); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } /* ── MOBILE OPTIMIZATIONS ── */ @media (max-width: 767px) { /* Stat numbers more compact */ .stat-number { font-size: 2rem; } /* Testimonial card less padding */ .testimonial-card { padding: 1.25rem; } /* Service card image shorter on mobile */ .service-card .card-img { height: 160px; } /* Reduce decorative glows for performance */ .hero-car-shine { opacity: 0.2; width: 150px; height: 150px; } .hero-grid-bg { opacity: 0.4; } /* Shine sweep plays once when image enters viewport (JS adds .shine-played) */ .shine-img-wrap.shine-played::after { animation: shineSweepMobile 0.8s 0.15s ease forwards; } .shine-img-wrap.shine-played .shine-img { animation: imgPopMobile 0.55s 0.1s ease; } /* Gallery images entrance */ .gallery-item.shine-played img { animation: galleryEnter 0.45s ease forwards; } /* WhatsApp FAB smaller on mobile to avoid overlapping content */ .whatsapp-fab { width: 52px; height: 52px; bottom: 1rem; right: 1rem; } .whatsapp-fab svg { width: 26px; height: 26px; } /* Tap feedback — image presses down slightly */ .shine-img-wrap:active .shine-img { transform: scale(1.04); filter: brightness(1.06); transition: transform 0.15s ease, filter 0.15s ease; } .gallery-item:active img { transform: scale(1.06); transition: transform 0.15s ease; } .service-card:active { transform: translateY(-5px); box-shadow: 0 14px 28px rgba(10,31,68,0.2); transition: transform 0.15s ease, box-shadow 0.15s ease; } }