/* ========================================================= GEEK V19.4 — INTERCAMBIO COMPLETO A 55 % - La barra de progreso permanece fija arriba. - Al alcanzar el 55 %, la cabecera completa baja. - Las burbujas Geek y WhatsApp suben simultáneamente. - Cada burbuja conserva su esquina y solo cambia en el eje Y. - El intercambio funciona en escritorio, tablet y móvil. ========================================================= */ :root { --geek-anchor-offset: calc(var(--header-height, 80px) + 28px); } .geek-page-progress { position: fixed; inset: 0 0 auto 0; width: 100%; height: 3px; z-index: 11000; overflow: hidden; pointer-events: none; background: transparent; opacity: 1; transform: translateZ(0); } .geek-page-progress-bar { display: block; width: 100%; height: 100%; background: var(--color-teal, #2e5e55); transform: scaleX(0); transform-origin: left center; will-change: transform; } .main-header { top: var(--geek-nav-top, 0px) !important; left: var(--geek-nav-inset, 0px) !important; right: var(--geek-nav-inset, 0px) !important; width: auto !important; border: 1px solid transparent; border-radius: var(--geek-nav-radius, 0px) !important; box-sizing: border-box; transform: translate3d(0, 0, 0); will-change: transform; transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease; } body.is-page-nav-ready .main-header { transition: transform .88s cubic-bezier(.22, 1, .36, 1), left .72s cubic-bezier(.22, 1, .36, 1), right .72s cubic-bezier(.22, 1, .36, 1), border-radius .72s cubic-bezier(.22, 1, .36, 1), padding-left .72s cubic-bezier(.22, 1, .36, 1), padding-right .72s cubic-bezier(.22, 1, .36, 1), background-color .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease; } body.is-nav-swapped .main-header { transform: translate3d(0, var(--geek-nav-swap-y, 0px), 0); } @media (min-width: 769px) { .main-header { padding-left: var(--geek-nav-padding, 40px) !important; padding-right: var(--geek-nav-padding, 40px) !important; } } .main-header.is-floating { background-color: rgba(255, 255, 255, .78) !important; border-color: rgba(46, 94, 85, .14); box-shadow: 0 16px 38px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .78) !important; -webkit-backdrop-filter: blur(12px) saturate(128%); backdrop-filter: blur(12px) saturate(128%); } .main-header.is-post-story { background-color: rgba(255, 255, 255, .84) !important; border-color: rgba(46, 94, 85, .17); box-shadow: 0 18px 44px rgba(15, 23, 42, .15), inset 0 1px 0 rgba(255, 255, 255, .84) !important; } body.dark-mode .main-header.is-floating, body.dark-mode .main-header.is-post-story { background-color: rgba(22, 28, 26, .82) !important; border-color: rgba(94, 200, 170, .17); box-shadow: 0 18px 42px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .06) !important; } /* --------------------------------------------------------- BURBUJAS FLOTANTES Mantienen izquierda/derecha y solo cambian en el eje Y. --------------------------------------------------------- */ .byte-launcher { --geek-byte-shift-y: 0px; --geek-byte-hover-y: 0px; z-index: 1005 !important; transform: translate3d( 0, calc(var(--geek-byte-shift-y) + var(--geek-byte-hover-y)), 0 ) !important; will-change: transform; transition: box-shadow .28s ease, opacity .2s ease !important; } .whatsapp-fab { --geek-whatsapp-shift-y: 0px; --geek-whatsapp-hover-scale: 1; z-index: 1005 !important; transform: translate3d(0, var(--geek-whatsapp-shift-y), 0) scale(var(--geek-whatsapp-hover-scale)) !important; transform-origin: center; will-change: transform; transition: background-color .3s ease, box-shadow .28s ease !important; } body.is-page-nav-ready .byte-launcher, body.is-page-nav-ready .whatsapp-fab { transition: transform .88s cubic-bezier(.22, 1, .36, 1), background-color .3s ease, box-shadow .28s ease, opacity .2s ease !important; } .byte-launcher:hover { --geek-byte-hover-y: -3px; } .whatsapp-fab:hover { --geek-whatsapp-hover-scale: 1.05; } body.is-nav-swapped .byte-launcher { box-shadow: 0 18px 46px rgba(46, 94, 85, .30), 0 0 0 1px rgba(255, 255, 255, .36); } body.is-nav-swapped .whatsapp-fab { box-shadow: 0 16px 38px rgba(37, 211, 102, .30), 0 0 0 1px rgba(255, 255, 255, .30); } body.is-nav-swapped .byte-nudge { opacity: 0 !important; pointer-events: none !important; } html { scroll-padding-top: var(--geek-anchor-offset); } #inicio, #quienes-somos, #servicios, #resenas, #contactanos, #catalogo-ecommerce { scroll-margin-top: var(--geek-anchor-offset); } @media (max-width: 1100px) and (min-width: 769px) { .main-header.is-floating, .main-header.is-post-story { -webkit-backdrop-filter: blur(10px) saturate(122%); backdrop-filter: blur(10px) saturate(122%); } } @media (max-width: 768px) { .geek-page-progress { height: 2px; } .main-header.is-floating, .main-header.is-post-story { background-color: rgba(255, 255, 255, .90) !important; border-color: rgba(46, 94, 85, .13); box-shadow: 0 12px 28px rgba(15, 23, 42, .13), inset 0 1px 0 rgba(255, 255, 255, .82) !important; -webkit-backdrop-filter: blur(9px) saturate(122%); backdrop-filter: blur(9px) saturate(122%); } body.dark-mode .main-header.is-floating, body.dark-mode .main-header.is-post-story { background-color: rgba(22, 28, 26, .90) !important; border-color: rgba(94, 200, 170, .15); } .main-header.is-floating .main-nav, .main-header.is-post-story .main-nav { left: 0 !important; width: 100% !important; border: 1px solid rgba(46, 94, 85, .12); border-radius: 1rem; overflow: hidden; background-color: rgba(255, 255, 255, .96); box-shadow: 0 16px 34px rgba(15, 23, 42, .14); } /* Cuando la cabecera está abajo, el menú móvil se abre hacia arriba. */ body.is-nav-swapped .main-header .main-nav { top: auto !important; bottom: calc(100% + 8px) !important; transform-origin: bottom center; } body:not(.is-nav-swapped) .main-header.is-floating .main-nav { top: calc(100% + 8px) !important; bottom: auto !important; transform-origin: top center; } body.dark-mode .main-header.is-floating .main-nav, body.dark-mode .main-header.is-post-story .main-nav { background-color: rgba(31, 31, 31, .97); border-color: rgba(94, 200, 170, .14); box-shadow: 0 18px 38px rgba(0, 0, 0, .34); } } @media (prefers-reduced-motion: reduce) { .main-header, .geek-page-progress-bar, .byte-launcher, .whatsapp-fab { transition: none !important; } }