/** * Menú móvil premium (off-canvas) — Auto Club Detailing * * ESTADO ABIERTO (controlado por JS + checkbox hamburguesa): * - #acr-mobile-offcanvas tiene la clase .acr-offcanvas--open * - tiene la clase .acr-offcanvas-nav-open (scroll bloqueado) * - Con menú abierto: #zr-theme-menu a ancho completo + z-index alto; #mainNav sin fondo opaco * (evita encoger la barra: en móvil angosto 100vw−82vw dejaba ~70px y la X “saltaba” junto al logo). * * AJUSTES RÁPIDOS (solo dentro del @media móvil): * --acr-offcanvas-duration → velocidad overlay + panel * --acr-offcanvas-panel-width → ancho del panel (usa 75%–85% vw) * --acr-offcanvas-panel-bg → fondo del panel * --acr-offcanvas-overlay-bg → overlay semitransparente * --acr-offcanvas-accent → rojo acento (botón / hover) * --acr-offcanvas-top-clear → padding superior del nav off-canvas con menú abierto (evita que el header tape “Inicio”) */ @media (min-width: 992px) { #acr-mobile-offcanvas { display: none !important; } } @media (max-width: 991.98px) { :root { --acr-offcanvas-duration: 0.35s; --acr-offcanvas-ease: ease-in-out; --acr-offcanvas-panel-width: min(82vw, 360px); --acr-offcanvas-panel-bg: #0d0d0d; --acr-offcanvas-overlay-bg: rgba(0, 0, 0, 0.58); --acr-offcanvas-accent: #c00113; --acr-offcanvas-text: #ffffff; --acr-offcanvas-muted: #b3b3b3; --acr-offcanvas-border: rgba(255, 255, 255, 0.08); /* Hueco bajo #zr-theme-menu (sticky): el header va z-index 10060 > panel 10050, hace falta empujar el primer ítem */ --acr-offcanvas-top-clear: max(5.5rem, 88px); } body.acr-offcanvas-nav-open { overflow: hidden; touch-action: none; } /* * Header por encima del offcanvas; ancho 100% (no recortar: en pantallas chicas el recorte * apretaba logo + hamburguesa en unos pocos px). */ body.acr-offcanvas-nav-open #zr-theme-menu.zr-theme-menu-header-navber-area { z-index: 10060 !important; width: 100% !important; max-width: none !important; right: auto; overflow: visible; } /* Barra del nav transparente: el panel se ve; logo y X con leve fondo para contraste */ body.acr-offcanvas-nav-open #mainNav.navbar-b { background: transparent !important; box-shadow: none !important; } body.acr-offcanvas-nav-open #mainNav .navbar-brand { padding: 3px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); } body.acr-offcanvas-nav-open #mainNav .navbar-toggler { padding: 4px; border-radius: 10px; background: rgba(0, 0, 0, 0.55); } body.acr-offcanvas-nav-open .acr-offcanvas__body { padding-top: calc(env(safe-area-inset-top, 0px) + var(--acr-offcanvas-top-clear)); } #acr-mobile-offcanvas.acr-offcanvas { position: fixed; inset: 0; z-index: 10050; pointer-events: none; } #acr-mobile-offcanvas.acr-offcanvas--open { pointer-events: auto; } .acr-offcanvas__overlay { position: absolute; inset: 0; background: var(--acr-offcanvas-overlay-bg); opacity: 0; transition: opacity var(--acr-offcanvas-duration) var(--acr-offcanvas-ease); -webkit-tap-highlight-color: transparent; } #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__overlay { opacity: 1; } .acr-offcanvas__panel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--acr-offcanvas-panel-width); max-width: 100%; background: var(--acr-offcanvas-panel-bg); color: var(--acr-offcanvas-text); display: flex; flex-direction: column; box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45); transform: translateX(100%); transition: transform var(--acr-offcanvas-duration) var(--acr-offcanvas-ease); -webkit-tap-highlight-color: transparent; } #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__panel { transform: translateX(0); } .acr-offcanvas__logo { display: flex; align-items: center; line-height: 0; } .acr-offcanvas__logo img { display: block; max-height: 58px; width: auto; max-width: 100%; border-radius: 50%; object-fit: contain; } /* Logo en el bloque inferior: primero en el foot, debajo del borde nav/pie y encima de WhatsApp */ .acr-offcanvas__logo.acr-offcanvas__logo--foot { justify-content: center; width: 100%; margin: 0; padding: 0; border-top: none; text-decoration: none; } .acr-offcanvas__logo.acr-offcanvas__logo--foot img { max-height: 72px; } .acr-offcanvas__body { flex: 1; overflow-y: auto; padding: 28px 20px 24px; -webkit-overflow-scrolling: touch; } .acr-offcanvas__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .acr-offcanvas__link { display: block; padding: 16px 4px; font-family: 'Poppins', 'Montserrat', sans-serif; font-size: 1.125rem; font-weight: 500; letter-spacing: 0.02em; color: var(--acr-offcanvas-text); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--acr-offcanvas-duration) var(--acr-offcanvas-ease), border-color var(--acr-offcanvas-duration) var(--acr-offcanvas-ease); } .acr-offcanvas__link:hover, .acr-offcanvas__link:focus-visible { /* !important: la animación de apertura usa fill-mode forwards y pisa el color sin esto */ color: var(--acr-offcanvas-accent) !important; border-bottom-color: rgba(192, 1, 19, 0.35) !important; outline: none; } .acr-offcanvas__foot { flex-shrink: 0; padding: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--acr-offcanvas-border); display: flex; flex-direction: column; gap: 14px; } .acr-offcanvas__btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 18px; font-family: 'Poppins', 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; text-decoration: none; text-align: center; color: #ffffff; background: var(--acr-offcanvas-accent); border: 2px solid var(--acr-offcanvas-accent); border-radius: 6px; transition: background-color var(--acr-offcanvas-duration) var(--acr-offcanvas-ease), color var(--acr-offcanvas-duration) var(--acr-offcanvas-ease), border-color var(--acr-offcanvas-duration) var(--acr-offcanvas-ease); } .acr-offcanvas__btn-wa:hover, .acr-offcanvas__btn-wa:focus-visible { background: #ffffff; color: #000000; border-color: #ffffff; outline: none; } .acr-offcanvas__btn-wa .acr-offcanvas__wa-icon { flex-shrink: 0; } .acr-offcanvas__secondary { font-family: 'Poppins', 'Montserrat', sans-serif; font-size: 0.9rem; color: var(--acr-offcanvas-muted); text-decoration: none; text-align: center; transition: color var(--acr-offcanvas-duration) var(--acr-offcanvas-ease); } .acr-offcanvas__secondary:hover, .acr-offcanvas__secondary:focus-visible { color: #ffffff; outline: none; } /* * Al abrir el panel: “pase” del estilo hover en los ítems (Inicio → Servicios → …). * Solo con .acr-offcanvas--open; delays escalonados por nth-child. */ #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__list > li .acr-offcanvas__link { animation: acr-offcanvas-link-open-scan 0.52s ease-in-out forwards; } #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__list > li:nth-child(1) .acr-offcanvas__link { animation-delay: 0.08s; } #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__list > li:nth-child(2) .acr-offcanvas__link { animation-delay: 0.2s; } #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__list > li:nth-child(3) .acr-offcanvas__link { animation-delay: 0.32s; } #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__list > li:nth-child(4) .acr-offcanvas__link { animation-delay: 0.44s; } #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__list > li:nth-child(5) .acr-offcanvas__link { animation-delay: 0.56s; } #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__list > li:nth-child(6) .acr-offcanvas__link { animation-delay: 0.68s; } #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__list > li:nth-child(7) .acr-offcanvas__link { animation-delay: 0.8s; } #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__list > li:nth-child(8) .acr-offcanvas__link { animation-delay: 0.92s; } } @keyframes acr-offcanvas-link-open-scan { 0% { color: #ffffff; border-bottom-color: transparent; } 42% { color: #c00113; border-bottom-color: rgba(192, 1, 19, 0.35); } 100% { color: #ffffff; border-bottom-color: transparent; } } @media (max-width: 991.98px) and (prefers-reduced-motion: reduce) { #acr-mobile-offcanvas.acr-offcanvas--open .acr-offcanvas__list > li .acr-offcanvas__link { animation: none !important; } }