/* ========================================================= V48 · Mobile menu top-layer fix The mobile drawer is moved to by main.js so it is never trapped inside the sticky/backdrop-filter header's compositing layer. ========================================================= */ @media (max-width:900px){ /* Keep the visible header above every page section while scrolling. */ .site-header, body.cinematic-home .site-header, body.cinematic-inner .site-header{ z-index:2147483200!important; overflow:visible!important; isolation:isolate; } .site-header .mobile-toggle{ position:relative!important; z-index:2147483300!important; } /* The backdrop is a direct body child, not part of page content. */ body > .mobile-nav-backdrop{ display:block!important; position:fixed!important; inset:64px 0 0!important; z-index:2147483000!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:rgba(8,31,48,.22)!important; backdrop-filter:blur(4px)!important; -webkit-backdrop-filter:blur(4px)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transition:opacity .24s ease,visibility .24s ease!important; } body > .mobile-nav-backdrop.open{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; } /* Actual menu: true viewport-fixed top layer. */ body > .nav-links.mobile-nav-portal-v48.is-mobile-portal-v48{ counter-reset:none!important; position:fixed!important; top:64px!important; right:0!important; bottom:0!important; left:0!important; inset:64px 0 0!important; z-index:2147483100!important; display:flex!important; flex-direction:column!important; align-items:stretch!important; gap:0!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:20px 18px max(24px,env(safe-area-inset-bottom))!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:contain!important; -webkit-overflow-scrolling:touch; border:0!important; border-radius:0!important; background: radial-gradient(circle at 100% 0,rgba(34,120,181,.11),transparent 31%), linear-gradient(180deg,#ffffff 0%,#f7fbfd 100%)!important; box-shadow:0 24px 70px rgba(7,31,48,.18)!important; white-space:normal!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transform:translate3d(0,-12px,0) scale(.992)!important; transform-origin:50% 0!important; transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility .34s ease!important; contain:layout paint; isolation:isolate; } body > .nav-links.mobile-nav-portal-v48.is-mobile-portal-v48.open{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; transform:translate3d(0,0,0) scale(1)!important; } body > .nav-links.mobile-nav-portal-v48::before{ content:"Navegación"!important; display:block!important; flex:0 0 auto; padding:3px 4px 13px!important; color:#196398!important; font-size:.68rem!important; line-height:1!important; font-weight:780!important; letter-spacing:.18em!important; text-transform:uppercase!important; } body > .nav-links.mobile-nav-portal-v48 > a{ counter-increment:none!important; position:relative!important; display:flex!important; align-items:center!important; gap:10px!important; flex:0 0 auto; min-height:52px!important; padding:10px 46px 10px 6px!important; overflow:visible!important; border:0!important; border-bottom:1px solid rgba(20,52,74,.08)!important; border-radius:0!important; color:#17384e!important; font-size:clamp(1.03rem,4.5vw,1.2rem)!important; line-height:1.2!important; font-weight:620!important; letter-spacing:-.02em!important; background:transparent!important; opacity:1!important; visibility:visible!important; transform:none!important; } body > .nav-links.mobile-nav-portal-v48 > a::before{ content:none!important; display:none!important; } body > .nav-links.mobile-nav-portal-v48 > a::after{ content:"↗"!important; position:absolute!important; top:50%!important; right:5px!important; bottom:auto!important; left:auto!important; display:grid!important; place-items:center!important; width:28px!important; height:28px!important; border-radius:9px!important; background:rgba(34,120,181,.08)!important; color:#2278b5!important; font-size:.78rem!important; line-height:1!important; opacity:1!important; transform:translateY(-50%)!important; } body > .nav-links.mobile-nav-portal-v48 > a.active{ color:#0c5e98!important; font-weight:760!important; } body > .nav-links.mobile-nav-portal-v48 > a.active::after, body > .nav-links.mobile-nav-portal-v48 > a:focus-visible::after{ background:#2278b5!important; color:#fff!important; } /* Icon rules used to depend on .site-header; duplicate the needed mobile styling because the portal intentionally lives outside the header. */ body > .nav-links.mobile-nav-portal-v48 .nav-icon-wrap{ display:grid!important; place-items:center!important; flex:0 0 auto!important; width:30px!important; height:30px!important; border-radius:10px!important; background:rgba(34,120,181,.075)!important; color:#2278b5!important; transform:none!important; } body > .nav-links.mobile-nav-portal-v48 .nav-icon{ width:16px!important; height:16px!important; stroke:currentColor!important; } body > .nav-links.mobile-nav-portal-v48 .mobile-nav-footer{ display:grid!important; gap:12px!important; margin-top:auto!important; padding:20px 0 0!important; } /* While open, prevent content beneath the drawer from becoming a competing touch/paint layer. The menu itself remains fully scrollable. */ body.menu-open{ overflow:hidden!important; touch-action:none!important; } body.menu-open main, body.menu-open footer{ pointer-events:none!important; } /* Do not let page-transition motion transform the header while the menu is open; transformed ancestors are a common source of fixed-layer glitches. */ body.menu-open .site-header{ transform:none!important; filter:none!important; } } @media (max-width:420px){ body > .nav-links.mobile-nav-portal-v48.is-mobile-portal-v48{ padding-inline:16px!important; } body > .nav-links.mobile-nav-portal-v48 > a{ min-height:50px!important; font-size:1.04rem!important; } } @media (prefers-reduced-motion:reduce){ body > .nav-links.mobile-nav-portal-v48, body > .mobile-nav-backdrop{ transition:none!important; } }