/* ================================================================ nav-pro.css — Mejoras al nav de Patricelli & Patricelli Agregá: en el NO modifica nada del CSS existente, solo agrega encima. ================================================================ */ /* ── Barra de progreso de scroll (arriba del todo) ── */ .pjl-nav-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: linear-gradient(90deg, var(--gold), #e8c97a, var(--gold)); z-index: 9999; transition: width .08s linear; pointer-events: none; } /* ── Nav scrolled: más compacto y más sólido ── */ nav.pjl-scrolled { height: 52px !important; background: rgba(10,10,10,.97) !important; border-bottom-color: rgba(201,168,76,.15) !important; box-shadow: 0 1px 32px rgba(0,0,0,.5); } nav.pjl-scrolled .nav-logo-sub { opacity: 0; max-height: 0; overflow: hidden; } /* ── Link activo según sección visible ── */ .nav-links a.pjl-active { color: var(--gold) !important; background: rgba(201,168,76,.07) !important; } /* Underline animado en hover */ .nav-links a:not(.nav-cta) { position: relative; } .nav-links a:not(.nav-cta)::after { content: ''; position: absolute; bottom: 2px; left: 50%; width: 0; height: 1px; background: var(--gold); transition: width .25s var(--ease), left .25s var(--ease); opacity: .7; } .nav-links a:not(.nav-cta):hover::after, .nav-links a:not(.nav-cta).pjl-active::after { width: 60%; left: 20%; } /* ── Hamburguesa premium ── */ .pjl-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; height: 38px; background: none; border: 1px solid rgba(201,168,76,.2); border-radius: 6px; cursor: pointer; z-index: 300; transition: border-color .2s; padding: 0; flex-shrink: 0; } .pjl-hamburger:hover { border-color: rgba(201,168,76,.5); } .pjl-hamburger span { display: block; width: 18px; height: 1.5px; background: var(--gold); border-radius: 2px; transition: transform .35s var(--ease), opacity .25s ease, width .3s ease; transform-origin: center; } .pjl-hamburger span:last-child { width: 12px; } .pjl-hamburger:hover span:last-child { width: 18px; } /* Hamburguesa abierta → X */ .pjl-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .pjl-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .pjl-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 18px; } /* ── Panel mobile ── */ .pjl-mobile-panel { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: min(300px, 85vw); background: #111213; border-left: 1px solid rgba(201,168,76,.15); padding: 80px 28px 40px; z-index: 250; flex-direction: column; gap: 4px; transform: translateX(100%); transition: transform .4s cubic-bezier(.22,1,.36,1); overflow-y: auto; } .pjl-mobile-panel.open { transform: translateX(0); } .pjl-mobile-panel a { display: flex; align-items: center; justify-content: space-between; font-size: .95rem; color: var(--text-soft); padding: .7rem .5rem; border-radius: 6px; border-bottom: 1px solid rgba(255,255,255,.04); transition: color .18s, background .18s, padding-left .2s; } .pjl-mobile-panel a:hover, .pjl-mobile-panel a.pjl-active { color: var(--gold); background: rgba(201,168,76,.06); padding-left: .9rem; } .pjl-mobile-panel a::after { content: '→'; font-size: .75rem; opacity: .35; transition: opacity .2s, transform .2s; } .pjl-mobile-panel a:hover::after { opacity: .8; transform: translateX(3px); } .pjl-mobile-panel .pjl-panel-cta { margin-top: 1.5rem; background: var(--gold); color: #0c0d0d; font-weight: 500; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; padding: .85rem 1.2rem; border-radius: 4px; justify-content: center; border-bottom: none; } .pjl-mobile-panel .pjl-panel-cta::after { display: none; } .pjl-mobile-panel .pjl-panel-cta:hover { background: #dab85a; padding-left: 1.2rem; } /* Overlay oscuro detrás del panel */ .pjl-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 240; opacity: 0; transition: opacity .35s ease; backdrop-filter: blur(2px); } .pjl-overlay.open { opacity: 1; } /* ── RESPONSIVE: mostrar hamburguesa ── */ @media (max-width: 900px) { .pjl-hamburger { display: flex; } .pjl-mobile-panel { display: flex; } /* ocultar nav-links nativo en mobile (ya lo hace el CSS existente, pero nos aseguramos que no interfiera) */ .nav-links { display: none !important; } nav { padding: 0 1.5rem !important; } } /* ══════════════════════════════════════════ FIX MOBILE — hamburguesa y panel Carga al final para tener mayor prioridad sobre cualquier CSS inline o externo ══════════════════════════════════════════ */ @media (max-width: 900px) { /* Nav: asegurar flex y que el hamburger sea visible */ nav, nav.nav-glass, body > nav, main > nav { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; padding: 0 1.25rem !important; } /* Ocultar links nativos — los reemplaza el panel */ .nav-links, nav .nav-links { display: none !important; position: static !important; width: 0 !important; height: 0 !important; overflow: hidden !important; padding: 0 !important; border: none !important; } /* Hamburguesa: forzar visibilidad */ .pjl-hamburger, nav .pjl-hamburger { display: flex !important; flex-shrink: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* Panel mobile: asegurar que pueda mostrarse */ .pjl-mobile-panel { display: flex !important; transform: translateX(100%); } .pjl-mobile-panel.open { transform: translateX(0) !important; } /* Overlay */ .pjl-overlay { display: block !important; opacity: 0; pointer-events: none; } .pjl-overlay.open { opacity: 1 !important; pointer-events: auto !important; } }