/* ===================================================== NAVBAR v2.1 — navbar-v2.css Carga DESPUÉS de fundev.css en el de index.php: ===================================================== */ :root { --nav-h: 68px; --nav-purple: #5b4ca7; --nav-pink: #ff9ad9; --nav-ease: 0.22s cubic-bezier(0.16,1,0.3,1); } /* ── BASE ── */ .navbar-mely { position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); background: transparent !important; box-shadow: none !important; transition: background var(--nav-ease), box-shadow var(--nav-ease); transform: none !important; /* anula translateX de fundev.css */ padding: 0 !important; } /* Scroll: fondo blanco frosted */ .navbar-mely.navbar-mely-scrolled { background: rgba(255,255,255,0.97) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 2px 20px rgba(91,76,167,0.10) !important; } /* Páginas interiores (navDark=false) siempre blanco */ .navbar-mely:not(.navbar-mely-dark) { background: rgba(255,255,255,0.97) !important; box-shadow: 0 2px 16px rgba(91,76,167,0.08) !important; } /* ── LOGO ── */ .navbar-logo-svg { width: 138px; height: auto; display: block; transition: opacity var(--nav-ease); } .navbar-brand:hover .navbar-logo-svg { opacity: 0.85; } .logo-word-1 { fill: var(--nav-purple); transition: fill var(--nav-ease); } .navbar-mely-dark:not(.navbar-mely-scrolled) .logo-word-1 { fill: #fff; } .navbar-mely-scrolled .logo-word-1 { fill: var(--nav-purple) !important; } /* ── NAV LINKS ── */ .nav-link-mely { font-size: 0.92rem !important; font-weight: 500 !important; color: var(--nav-purple) !important; padding: 0.45rem 0.9rem !important; border-radius: 999px; background: none; border: none; cursor: pointer; transition: background var(--nav-ease), color var(--nav-ease); white-space: nowrap; text-decoration: none; line-height: 1.4; } .nav-link-mely:hover { background: rgba(91,76,167,0.08) !important; color: var(--nav-purple) !important; opacity: 1 !important; } /* Sobre hero oscuro */ .navbar-mely-dark:not(.navbar-mely-scrolled) .nav-link-mely { color: rgba(255,255,255,0.92) !important; } .navbar-mely-dark:not(.navbar-mely-scrolled) .nav-link-mely:hover { background: rgba(255,255,255,0.14) !important; color: #fff !important; } .navbar-mely-scrolled .nav-link-mely { color: var(--nav-purple) !important; } /* Creador */ .nav-link-creador { color: var(--nav-purple) !important; font-weight: 600 !important; } .navbar-mely-dark:not(.navbar-mely-scrolled) .nav-link-creador { color: var(--nav-pink) !important; } /* ── DROPDOWN ── */ .nav-dropdown-mely { position: relative; } .nav-dd-arrow { transition: transform var(--nav-ease); } .nav-dropdown-mely.dd-open .nav-dd-arrow { transform: rotate(180deg); } .nav-dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); background: #fff; border-radius: 1rem; box-shadow: 0 8px 40px rgba(91,76,167,0.16); border: 1px solid rgba(91,76,167,0.08); padding: 0.5rem; min-width: 220px; opacity: 0; pointer-events: none; transition: opacity var(--nav-ease), transform var(--nav-ease); z-index: 200; } .nav-dropdown-mely.dd-open .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav-dd-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.8rem; border-radius: 0.6rem; color: #444; font-size: 0.88rem; font-weight: 500; text-decoration: none; transition: background var(--nav-ease), color var(--nav-ease); } .nav-dd-item:hover { background: rgba(91,76,167,0.07); color: var(--nav-purple); } .nav-dd-divider { height: 1px; background: rgba(91,76,167,0.08); margin: 0.35rem 0.6rem; } /* ── ICON BTN ── */ .nav-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; color: var(--nav-purple); background: none; border: none; cursor: pointer; transition: background var(--nav-ease), color var(--nav-ease); } .nav-icon-btn:hover { background: rgba(91,76,167,0.10); } .navbar-mely-dark:not(.navbar-mely-scrolled) .nav-icon-btn { color: rgba(255,255,255,0.9); } .navbar-mely-dark:not(.navbar-mely-scrolled) .nav-icon-btn:hover { background: rgba(255,255,255,0.14); } /* ── CARRITO BTN DESKTOP ── */ .nav-cart-btn { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--nav-purple); font-size: 0.88rem; font-weight: 600; text-decoration: none; padding: 0.4rem 0.8rem; border-radius: 999px; transition: background var(--nav-ease); } .nav-cart-btn:hover { background: rgba(91,76,167,0.08); color: var(--nav-purple); } .navbar-mely-dark:not(.navbar-mely-scrolled) .nav-cart-btn { color: rgba(255,255,255,0.9); } .navbar-mely-dark:not(.navbar-mely-scrolled) .nav-cart-btn:hover { background: rgba(255,255,255,0.14); color: #fff; } .nav-cart-badge { position: absolute; top: 0; right: 0; background: var(--nav-pink); color: #fff; font-size: 0.62rem; font-weight: 700; min-width: 1.1rem; height: 1.1rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 1.5px solid #fff; } /* ── PEDIR AHORA ── */ .btn-pedir-ahora { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--nav-purple); color: #fff !important; font-size: 0.85rem; font-weight: 600; padding: 0.5rem 1.25rem; border-radius: 999px; text-decoration: none !important; white-space: nowrap; box-shadow: 0 2px 10px rgba(91,76,167,0.3); transition: background var(--nav-ease), transform var(--nav-ease), box-shadow var(--nav-ease); } .btn-pedir-ahora:hover { background: #3d3280; transform: translateY(-1px); box-shadow: 0 4px 18px rgba(91,76,167,0.4); color: #fff !important; } .navbar-mely-dark:not(.navbar-mely-scrolled) .btn-pedir-ahora { background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.5); box-shadow: none; } .navbar-mely-dark:not(.navbar-mely-scrolled) .btn-pedir-ahora:hover { background: rgba(255,255,255,0.28); } /* ── BUSCADOR ── */ .nav-search-wrap { position: relative; } .nav-search-box { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; background: #fff; border: 2px solid var(--nav-purple); border-radius: 999px; overflow: hidden; box-shadow: 0 4px 16px rgba(91,76,167,0.12); z-index: 10; animation: search-in 0.2s ease; } @keyframes search-in { from { opacity:0; transform: translateY(-50%) scaleX(0.8); } to { opacity:1; transform: translateY(-50%) scaleX(1); } } .nav-search-input { border:none; outline:none; background:transparent; padding: 0.35rem 0.8rem; font-size: 0.88rem; font-family: 'Poppins', sans-serif; width: 200px; color: #333; } .nav-search-close { background:none; border:none; color:#aaa; cursor:pointer; padding: 0.35rem 0.75rem; font-size:0.85rem; transition:color 0.15s; } .nav-search-close:hover { color: var(--nav-purple); } /* ── HAMBURGER ── */ .nav-hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 2.3rem; height: 2.3rem; background: none; border: none; cursor: pointer; padding: 5px; border-radius: 50%; transition: background var(--nav-ease); } .nav-hamburger:hover { background: rgba(91,76,167,0.10); } .navbar-mely-dark:not(.navbar-mely-scrolled) .nav-hamburger:hover { background: rgba(255,255,255,0.14); } .nav-hamburger span { display: block; height: 2px; background: var(--nav-purple); border-radius: 2px; transition: transform var(--nav-ease), opacity var(--nav-ease), width var(--nav-ease); transform-origin: center; } .navbar-mely-dark:not(.navbar-mely-scrolled) .nav-hamburger span { background: #fff; } .navbar-mely-scrolled .nav-hamburger span { background: var(--nav-purple) !important; } .nav-hamburger span:nth-child(3) { width: 65%; margin-left: auto; } .nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.is-open span:nth-child(2) { opacity: 0; } .nav-hamburger.is-open span:nth-child(3) { width: 100%; transform: translateY(-7px) rotate(-45deg); } /* ── DRAWER MOBILE ── */ .nav-mobile-drawer { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: #fff; z-index: 999; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); overflow-y: auto; } .nav-mobile-drawer.is-open { transform: translateX(0); } .nav-drawer-inner { padding: 1.2rem 1rem 2rem; display: flex; flex-direction: column; gap: 0.15rem; min-height: 100%; } .nav-drawer-search { position: relative; margin-bottom: 1rem; } .nav-drawer-search-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); pointer-events: none; } .nav-drawer-search-input { width: 100%; border: 2px solid rgba(91,76,167,0.18); border-radius: 999px; padding: 0.6rem 1rem 0.6rem 2.6rem; font-family: 'Poppins', sans-serif; font-size: 0.9rem; outline: none; transition: border-color 0.2s; } .nav-drawer-search-input:focus { border-color: var(--nav-purple); } .nav-drawer-section { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #bbb; padding: 0.9rem 0.5rem 0.3rem; } .nav-drawer-link { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem; border-radius: 0.75rem; color: #444; font-size: 0.97rem; font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s; } .nav-drawer-link:hover { background: rgba(91,76,167,0.07); color: var(--nav-purple); } .nav-drawer-link--sub { padding-left: 1.1rem; font-size: 0.9rem; } .nav-drawer-link--highlight { background: rgba(255,154,217,0.12); color: var(--nav-purple); font-weight: 600; } .nav-drawer-badge { margin-left: auto; background: var(--nav-pink); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; } .nav-drawer-wa { display: flex; align-items: center; justify-content: center; gap: 0.55rem; background: #25d366; color: #fff; font-weight: 600; font-size: 0.95rem; padding: 0.85rem; border-radius: 999px; text-decoration: none; margin-top: auto; padding-top: 1.4rem; transition: background 0.18s; } .nav-drawer-wa:hover { background: #1ebe5d; color: #fff; } /* ── BODY OFFSET ── */ body { padding-top: var(--nav-h) !important; } .hero { margin-top: calc(-1 * var(--nav-h)) !important; padding-top: 0 !important; }