/* ===== Tabs deslizables ===== */ #bvTabs{ position: relative; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* iOS touch flash mitigation: while .bv-touching is present on , reduce backdrop-filter and force backgrounds to prevent white flash on tap */ html.bv-touching .glass-panel, html.bv-touching .btn-glass, html.bv-touching .modal-content, html.bv-touching .guest-dd, html.bv-touching .filter-bar-mobile, html.bv-touching #bvTabs, html.bv-touching .glass-modal{ transition: none !important; } /* Promote only visual elements with backdrop-filter to compositor layers and avoid tap highlight Exclude .navbar and top-level layout elements to prevent layout shifts on Android */ html.bv-touching .glass-panel, html.bv-touching .btn-glass, html.bv-touching .modal-content, html.bv-touching .guest-dd, html.bv-touching .filter-bar-mobile, html.bv-touching .bv-tab, html.bv-touching .bv-tab .bv-lbl, html.bv-touching .bv-tab .bv-ico{ -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-tap-highlight-color: transparent; transition: none !important; outline: none !important; } /* Specific fixes for iOS where taps produce a white flash */ html.is-ios .bv-tab{ -webkit-tap-highlight-color: transparent; } html.is-ios .bv-tab:active, html.is-ios .bv-tab.touch-active{ transition: none !important; } /* Also avoid focus outlines or native link highlighting */ html.is-ios a.bv-tab, html.is-ios button.bv-tab{ -webkit-tap-highlight-color: transparent; } /* iOS safety: disable heavy decorative pseudo-elements only on selected containers (previously we removed all pseudo-elements globally which also hid icon fonts). Keep this list minimal to avoid breaking icon fonts and other content that uses ::before/::after for icons. */ html.is-ios .glass-panel::before, html.is-ios .glass-panel::after, html.is-ios .modal-content::before, html.is-ios .modal-content::after, html.is-ios .guest-dd::before, html.is-ios .guest-dd::after{ content: none !important; display: none !important; } html.is-ios .glass-panel, html.is-ios .btn-glass, html.is-ios .modal-content, html.is-ios .guest-dd{ background-image: none !important; background-blend-mode: normal !important; box-shadow: none !important; transition: none !important; } /* Apply only when iOS is in light mode (fixes: behavior differs between dark/light) */ @media (prefers-color-scheme: light) { html.is-ios .glass-panel, html.is-ios .btn-glass, html.is-ios .modal-content, html.is-ios .guest-dd, html.is-ios body, html.is-ios body::before, html.is-ios body::after{ animation: none !important; background-image: none !important; box-shadow: none !important; transition: none !important; } } body.modal-open .filter-bar-mobile, body.modal-open #floatingMapBtn{ display:none !important; } /* === GLOBAL: Disable background animations and decorative pseudo-elements === */ #bvTabs .swiper{ --gap: 26px; padding: 10px calc(var(--gap) - 6px); /* ← tu padding; el JS ya lo descuenta */ touch-action: pan-x; -webkit-overflow-scrolling: touch; } #bvTabs .swiper-wrapper{ align-items: center; } .bv-tab{ width: auto !important; appearance: none; background: transparent; border: 0; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 1px 8px; margin: 4px 6px; border-radius: 16px; color: #fff; font-weight: 700; letter-spacing:.1px; user-select: none; transition: transform .12s ease, background .12s ease; -webkit-tap-highlight-color: transparent; } .bv-tab .bv-ico{ font-size: 28px; line-height: 1; margin-bottom: 6px; opacity: .95; } .bv-tab .bv-lbl{ font-size: 14px; color: #ffffff; } .bv-tab:hover{ background: rgba(255,255,255,.06); transform: translateY(-1px); } .bv-tab.active .bv-lbl{ color: rgba(255,255,255,.28); } /* ≈ #ffffff48 */ /* Subrayado animado bajo el activo */ #bvTabsUnderline{ position: absolute; left: 0; bottom: 0; height: 3px; width: 48px; min-width: 48px; border-radius: 999px; background: #000000; opacity: .9; transition: transform .18s ease, width .18s ease, opacity .18s ease; will-change: transform, width; transform: translateZ(0); } /* Formularios: ocultar sin display:none (evita flash en iOS) */ .bv-form{ opacity: 1; visibility: visible; transition: opacity .18s ease; } .bv-form:not(.active){ opacity: 0; visibility: hidden; pointer-events: none; height: 0; overflow: hidden; } /* Accesibilidad foco */ .bv-tab:focus-visible{ outline: 2px solid color-mix(in srgb, var(--color-primary, #ffffff) 70%, #fff); outline-offset: 2px; border-radius: 18px; } /* Móvil: que sea claramente deslizable */ @media (max-width: 767.98px){ #bvTabs .swiper { padding: 8px 8px; } .bv-tab{ padding: 1px 8px; margin: 2px 4px; } .bv-tab .bv-ico{ font-size: 26px; } .bv-tab .bv-lbl{ font-size: 13px; } } /* Always pin the mobile filter bar to the top on small screens */ @media (max-width: 991.98px){ .filter-bar-mobile{ position: fixed !important; left: 0px !important; right: 0px !important; width: calc(100%) !important; margin: 0 auto !important; z-index: 1100 !important; box-shadow: 0 8px 20px rgba(0,0,0,.18) !important; top: 0px !important; } /* add a spacer below the host to keep layout from jumping; the JS will set its height */ /* spacer removed: layout uses --mobile-filter-height */ } /* when filters overlay navbar (mobile-only), animate transforms for smooth swap */ @media (max-width: 991.98px) { /* root flag when filters are active - classes on elements handle visuals */ .navbar { transition: transform 220ms cubic-bezier(.2,.9,.3,1), opacity 180ms ease; will-change: transform, opacity; } .navbar.hidden-by-filters { transform: translateY(-100%); opacity: 0; pointer-events: none; } .filter-bar-mobile.bv-overlay { position: fixed !important; top: 0 !important; left: 0; right: 0; z-index: 1110; /* above navbar */ transform: translateY(0); transition: transform 220ms cubic-bezier(.2,.9,.3,1), opacity 180ms ease; will-change: transform, opacity; height: var(--mobile-filter-height, 56px) !important; display: flex !important; align-items: center !important; } /* Auto-hide styles: when user scrolls down we add .hidden-on-scroll to retract the bar */ .filter-bar-mobile { transition: transform 240ms cubic-bezier(.2,.9,.3,1), opacity 180ms ease; transform-origin: top center; } .filter-bar-mobile.hidden-on-scroll { transform: translateY(calc(-100% - 8px)); opacity: 0; pointer-events: none; } .filter-bar-mobile.visible { transform: translateY(0); opacity: 1; pointer-events: auto; height: 73px; } /* initial hidden state: keep off-screen until user slides up */ .filter-bar-mobile.hidden-init{ transform: translateY(calc(-100% - 8px)); opacity: 0; pointer-events: none; } /* when overlay is active we want the bar pinned to top with 3px offset */ .filter-bar-mobile.bv-overlay.visible{ top: 2px !important; z-index: 1120; } /* spacer removed: height is controlled by --mobile-filter-height */ /* floating map button should hide when overlay active; we'll also respect inline hide done by JS */ #floatingMapBtn { transition: opacity 180ms ease; } html.bv-filters-active #floatingMapBtn { opacity: 0; pointer-events: none; } } /* Mobile filter bar: when user scrolls down, pin the bar to the top of the viewport so filters are always accessible. The host `.mobile-filter-host` holds the normal flow and `.filter-bar-mobile.visible-top` becomes fixed at top. */ .mobile-filter-host{ position: relative; } .filter-bar-mobile{ transition: transform .22s ease, opacity .22s ease; } .filter-bar-mobile.visible-top{ /* override any inline sticky rules coming from templates */ position: fixed !important; top: 58px !important; /* below navbar */ left: 8px !important; right: 8px !important; width: calc(100% - 16px) !important; max-width: 980px !important; margin: 0 auto !important; z-index: 1105 !important; box-shadow: 0 8px 20px rgba(0,0,0,.28) !important; transform: translateY(0) !important; opacity: 1 !important; } /* Floating map button (mobile) */ .floating-map-btn{ position: fixed !important; left: 50% !important; transform: translateX(-50%) !important; bottom: 16px !important; min-width: 140px !important; height: 48px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center; justify-content: center; padding: 0 14px !important; font-size: 16px !important; z-index: 1205 !important; box-shadow: 0 12px 30px rgba(0,0,0,.35) !important; background: rgba(38, 39, 39, 0.493); } .floating-map-btn i{ font-size: 18px !important; } .floating-map-btn .fm-label{ font-weight:700 !important; display: inline-block !important; } @media (min-width: 992px){ .floating-map-btn{ display: none !important; } } /* ===== Barra móvil de filtros con blur agresivo (iPhone-safe) ===== */ /* El contenedor se mueve; el blur vive en el hijo .filter-bar-veil */ .filter-bar-mobile{ position: fixed !important; left: 0 !important; right: 0 !important; z-index: 1100 !important; border-radius: 12px !important; overflow: hidden !important; /* recorta el velo */ box-shadow: 0 8px 20px rgba(0,0,0,.18) !important; /* NO pongas transform aquí si puedes evitarlo; si lo usas, el blur sigue yendo en el hijo */ } /* Capa interna que aplica el blur (no recibe eventos) */ .filter-bar-veil{ position: absolute !important; inset: 0 !important; pointer-events: none !important; border-radius: inherit !important; /* Fondo y blur agresivos */ background: rgba(10,14,22,.58) !important; /* más oscuro para separar texto */ -webkit-backdrop-filter: saturate(1.15) blur(22px) !important; backdrop-filter: saturate(1.15) blur(22px) !important; } /* En iOS, fuerzo el blur incluso si hay flags anti-flicker activos */ html.is-ios .filter-bar-mobile .filter-bar-veil{ background: rgb(61 82 132 / 96%) !important; /* más oscuro para separar texto */ -webkit-backdrop-filter: saturate(1.15) blur(24px) !important; backdrop-filter: saturate(1.15) blur(24px) !important; } /* Si durante toques/cambios activas .bv-touching o .switching, no apagues el blur de la barra */ html.bv-touching .filter-bar-mobile .filter-bar-veil, html.switching .filter-bar-mobile .filter-bar-veil{ -webkit-backdrop-filter: saturate(1.1) blur(22px) !important; backdrop-filter: saturate(1.1) blur(22px) !important; } /* Asegura contraste del texto/chips sobre el blur */ .filter-bar-mobile .filter-chip{ position: relative; /* por encima del velo */ z-index: 1; } /* Mantén tus animaciones de mostrar/ocultar, pero aplícalas al contenedor, nunca al .filter-bar-veil (el hijo con blur no debe animarse con transform). */ @media (max-width: 991.98px){ .filter-bar-mobile{ transition: transform 240ms cubic-bezier(.2,.9,.3,1), opacity 180ms ease; transform-origin: top center; } .filter-bar-mobile.hidden-on-scroll{ transform: translateY(calc(-100% - 8px)); opacity:0; pointer-events:none; } .filter-bar-mobile.visible{ transform: translateY(0); opacity:1; pointer-events:auto; border-radius: 0px !important; } .filter-bar-mobile.hidden-init{ transform: translateY(calc(-100% - 8px)); opacity:0; pointer-events:none; } }