.header{position:relative;width:100%;box-sizing:border-box;display:flex;align-items:center;padding:1rem 2rem;background-color:var(--color-header);border-bottom-left-radius:50px;border-bottom-right-radius:50px;z-index:100;transition:box-shadow .3s ease,backdrop-filter .3s ease}.header{box-shadow:0 2px 2px #00000026;backdrop-filter:blur(6px)}.header:hover{box-shadow:0 15px 15px #00000026;backdrop-filter:blur(6px)}.header-left{flex:0 0 auto}.header-left .logo{height:55px;width:auto;object-fit:contain;opacity:1;transition:opacity .3s ease,transform .3s ease}.header-right{margin-left:auto;display:flex;gap:.5rem}.header-right img{height:50px;width:auto;object-fit:contain;opacity:1;transition:opacity .3s ease,transform .3s ease}.header-right img{animation:fadeIn .6s ease forwards}.header-center{position:absolute;left:46%;transform:translate(-50%);display:flex;gap:.75rem}.separator{margin:0 .75rem;opacity:.4}.header-center a{font-size:clamp(17px,1vw,20px);padding:.5rem;border-radius:999px}.header-center:hover a{transform:scale(.95);opacity:.8}.header-center a:hover{background-color:var(--color-secondary);color:var(--color-text);transform:scale(1.25) translateY(-4px);opacity:1}.menu-toggle{display:none;background:none;border:none;cursor:pointer;margin-left:auto}.menu-toggle span{display:block;width:24px;height:3px;background:#fff;margin:5px 0;transition:.3s}.menu-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.menu-toggle.open span:nth-child(2){opacity:0}.menu-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}.nav-item{position:relative}.nav-link{background:none;border:none;cursor:pointer;padding:.5rem 1rem;border-radius:999px;font:inherit;color:inherit;transition:background-color .3s ease}.nav-link:hover{background-color:var(--color-secondary);color:var(--color-text)}.submenu{position:absolute;top:120%;left:50%;transform:translate(-50%);background:#fff;border-radius:12px;padding:.5rem;min-width:180px;box-shadow:0 10px 30px #00000026;display:none;flex-direction:column;z-index:100}.submenu a{padding:.5rem 1rem;border-radius:8px;white-space:nowrap}.submenu a:hover{background-color:var(--color-secondary);color:var(--color-text)}.has-submenu:hover .submenu{display:flex}.dropdown{position:relative}.dropdown-toggle{cursor:pointer;display:flex;align-items:center}.dropdown-toggle:after{content:"▼";margin-left:.5rem;font-size:.7em;transition:transform .3s ease}.dropdown:hover .dropdown-toggle:after{transform:rotate(180deg)}.dropdown-content{position:fixed;top:calc(var(--header-top, 100%) + 10px);left:50%;transform:translate(-50%);background:var(--color-white);border-radius:12px;padding:2rem;width:1000px;max-width:90vw;box-shadow:0 10px 30px #0003;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;z-index:1000;margin-top:0;pointer-events:auto;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;overflow:visible}.dropdown:hover .dropdown-content{opacity:1;visibility:visible}.dropdown-column .dropdown-title{display:block;color:var(--color-primary);font-size:1rem;margin-bottom:1rem;font-weight:700;transform:none;background-color:transparent;border-left:4px solid var(--color-secondary);padding-left:.5rem}.dropdown-column .dropdown-title:hover{text-decoration:underline;color:var(--color-primary);transform:none;background-color:transparent;opacity:1}.dropdown-column a{display:block;color:var(--color-secondary);transform:none;background-color:transparent}.dropdown-column a:hover{text-decoration:underline;transform:none;background-color:transparent;color:var(--secondary-dark)}.dropdown-column img{width:100%;max-width:150px;height:100px;object-fit:contain;margin:0 auto 1rem;display:block;transition:transform .3s ease;opacity:1!important;backdrop-filter:none!important}.dropdown-column h5{text-align:center;margin-bottom:1rem;color:var(--color-white)}.submenu-wrapper{position:relative;display:block;width:100%}.submenu-toggle{display:block;color:var(--color-secondary);font-size:.9rem;background:none;border:none;cursor:pointer;padding:.4rem .6rem;text-align:left;transition:all .3s ease;width:100%;border-radius:6px;font-weight:500}.submenu-toggle:hover{background-color:#fff3;color:var(--secondary-dark);backdrop-filter:blur(6px);transform:translate(4px)}.submenu-toggle:after{content:" ▶";font-size:.7em;transition:transform .3s ease;margin-left:.3rem}.submenu-wrapper:hover .submenu-toggle:after{transform:rotate(90deg)}.submenu-content{position:absolute;top:-.5rem;left:100%;margin-left:-10rem;display:none;flex-direction:column;background:#fffffff2;border:1px solid rgba(0,0,0,.1);border-left:3px solid var(--color-secondary);padding:.6rem .8rem;gap:.4rem;border-radius:6px;box-shadow:0 5px 15px #0000001a;transition:opacity .3s ease,visibility .3s ease;opacity:0;visibility:hidden;white-space:nowrap;z-index:1001}.submenu-wrapper:hover .submenu-content{display:flex;opacity:1;visibility:visible;animation:slideRight .3s ease}.submenu-wrapper.open .submenu-content{display:flex;opacity:1;visibility:visible;animation:slideDown .3s ease}.submenu-wrapper.open .submenu-toggle:after{transform:rotate(90deg)}@keyframes slideDown{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideRight{0%{opacity:0;transform:translate(-5px)}to{opacity:1;transform:translate(0)}}.submenu-content a{color:var(--color-secondary);font-size:.85rem;padding:.35rem .6rem;transition:all .3s ease;border-radius:4px;text-decoration:none;display:block}.submenu-content a:hover{background-color:var(--color-secondary);color:#fff;padding-left:.8rem}.dropdown-column:hover img{transform:scale(1.05)}@media(max-width:768px){.menu-toggle{display:block}.header-right{display:none}.header-center.open+.header-right,.header-center.open~.header-right{display:flex;justify-content:center;align-items:center;gap:1rem;width:100%;margin-top:1rem}.header{flex-wrap:wrap;padding:1rem}.header-center{position:static;transform:none;display:none;width:100%;flex-direction:column;align-items:center;margin-top:1rem;gap:.5rem}.header-center.open{display:flex}.header-right{margin-left:0}.dropdown{width:100%}.dropdown-toggle{width:100%;justify-content:center}.dropdown-content{position:static;width:100%;max-width:100%;left:auto;transform:none;grid-template-columns:1fr;padding:1.5rem;gap:1.5rem;top:auto;display:none;background:#f0f0f0e6;margin-top:.5rem}.dropdown.open .dropdown-content{display:grid}.dropdown-column a{display:block;padding:.5rem .8rem;font-size:.9rem;margin:.2rem 0;border-radius:6px}.dropdown-column .dropdown-title{font-size:.95rem;margin-bottom:.5rem;padding:.5rem .8rem}.dropdown-column p{display:none}.submenu-wrapper{width:100%;margin:.3rem 0}.submenu-toggle{padding:.5rem .8rem;font-size:.9rem;background:#ffffff26;border-radius:6px;width:100%;border-left:3px solid var(--color-secondary);font-weight:600}.submenu-toggle:hover{background-color:#ffffff40}.submenu-content{position:static;transform:none;margin:.3rem 0;padding:.4rem 0;background:transparent;display:none;flex-direction:column;gap:0;border:none;border-left:none;box-shadow:none}.submenu-wrapper.open .submenu-content{display:flex}.submenu-content a{padding:.35rem 2.5rem;font-size:.85rem;width:100%;background:#ffffff1a;margin:.15rem 0;border-radius:4px;border-left:2px solid var(--color-secondary)}.submenu-content a:hover{background-color:var(--color-secondary);color:#fff;border-left:2px solid white}}.lola-bg{position:relative;background-image:url(/images/la-lola/fondo_producto_la_lola.jpeg);background-size:cover;background-position:center top;background-repeat:no-repeat;border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:24px;min-height:420px;overflow:hidden}.lola-bg:before{content:"";position:absolute;inset:0;z-index:0}.lola-bg .productos-lista a{backdrop-filter:none;background:transparent;border-radius:0;box-shadow:none;color:var(--color-white)}.lola-bg .productos-lista a:hover:after{width:100%}.almacen-bg{background-image:url(/images/almacen/fondo_producto_almacen.jpeg);background-size:cover;background-position:center top;background-repeat:no-repeat;border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:24px;min-height:420px}.almacen-bg .productos-lista a{backdrop-filter:none;background:transparent;border-radius:0;box-shadow:none;color:var(--color-white)}.almacen-bg .productos-lista a:hover{color:#fff;text-decoration:underline}.larueda-bg{background-image:url(/images/la-rueda/fondo_producto_la_rueda.jpeg);background-size:cover;background-position:center top;background-repeat:no-repeat;border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:24px;min-height:420px}.larueda-bg .productos-lista a{backdrop-filter:none;background:transparent;border-radius:0;box-shadow:none;color:var(--color-white)}.larueda-bg .productos-lista a:hover{color:#fff;text-decoration:underline}
