/* ============================================================================
 *  Centro Óptico Sicuani — MÓVIL: drawer ultra-premium + burger→X (Ray-Ban)
 *  Carga al final. El open/close (opacity/visibility) lo maneja premium.css.
 * ========================================================================== */

/* Quitar "Desliza para descubrir" del hero */
.hp-hero__scroll { display: none !important; }

/* ===== Drawer móvil premium ===== */
.mobile-drawer {
  background: radial-gradient(135% 100% at 50% 0%, #1a2349 0%, #0b1020 58%, #06080f 100%) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: flex !important; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.3rem; padding: 5rem 1.5rem 2.5rem; text-align: center;
}
.mobile-drawer-close { color: rgba(255,255,255,.85) !important; font-size: 2.4rem !important; top: 1.3rem !important; right: 1.5rem !important; line-height: 1; }

.md-logos { display: flex; align-items: center; gap: .9rem; margin-bottom: .4rem; opacity: 0; transform: translateY(-16px); transition: opacity .6s ease .05s, transform .6s ease .05s; }
.md-logos img { height: 44px; width: auto; border-radius: 8px; background: #fff; padding: 3px 5px; }
.md-x { color: rgba(255,255,255,.5); font-size: 1.1rem; }
.mobile-drawer.open .md-logos { opacity: 1; transform: none; }

.mobile-drawer-links { display: flex; flex-direction: column; gap: .15rem; width: 100%; max-width: 440px; }
.mobile-drawer-link { font-family: 'Newsreader', Georgia, serif !important; font-size: 2.1rem !important; font-weight: 400 !important; color: #fff !important; padding: .45rem 0 !important; position: relative; letter-spacing: 0; }
.mobile-drawer-link > span { display: inline-block; transform: translateY(115%); opacity: 0; transition: transform .75s cubic-bezier(.2,.85,.2,1), opacity .6s ease; }
.mobile-drawer.open .mobile-drawer-link > span { transform: none; opacity: 1; }
.mobile-drawer.open .mobile-drawer-link:nth-child(1) > span { transition-delay: .16s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(2) > span { transition-delay: .23s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(3) > span { transition-delay: .30s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(4) > span { transition-delay: .37s; }
.mobile-drawer.open .mobile-drawer-link:nth-child(5) > span { transition-delay: .44s; }
.mobile-drawer-link::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 0; height: 1.5px; background: #ffd9a8; transform: translateX(-50%); transition: width .4s ease; }
.mobile-drawer-link:hover { color: #ffd9a8 !important; }
.mobile-drawer-link:hover::after { width: 54px; }

.md-cta { display: flex; flex-direction: column; gap: .65rem; width: 100%; max-width: 340px; margin-top: 1rem; opacity: 0; transform: translateY(18px); transition: opacity .7s ease .52s, transform .7s ease .52s; }
.mobile-drawer.open .md-cta { opacity: 1; transform: none; }
.md-cta .hp-btn { width: 100%; justify-content: center; }
.md-foot { font-family: 'Inter', system-ui, sans-serif; font-size: .74rem; letter-spacing: .12em; color: rgba(255,255,255,.45); margin-top: .7rem; opacity: 0; transition: opacity .7s ease .62s; }
.mobile-drawer.open .md-foot { opacity: 1; }

/* ===== Burger → X (morph cinemático) ===== */
.nav-burger { position: relative; z-index: 10000; }
.nav-burger span { transition: transform .42s cubic-bezier(.2,.85,.2,1), opacity .3s ease, background .3s ease; transform-origin: center; }
body.drawer-open .nav-burger span { background: #fff !important; }
body.drawer-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.drawer-open .nav-burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.drawer-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* mientras el drawer está abierto, el body no scrollea */
body.drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .md-logos, .mobile-drawer-link > span, .md-cta, .md-foot { transition: none !important; opacity: 1 !important; transform: none !important; }
  .nav-burger span { transition: none !important; }
}