/* Desplegable de categorias del menu principal.
   Archivo aparte para que ningun navegador pueda servir una version vieja. */

.mainmenu{position:relative}

.cat-panel{
  position:absolute;top:100%;left:0;right:0;z-index:60;
  background:#000;
  border-top:1px solid rgba(255,255,255,.08);
  box-shadow:0 26px 50px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}
.cat-panel.abierto{opacity:1;visibility:visible;transform:translateY(0)}

.cat-panel-grid{
  /* minmax(0,…): sin esto las bajadas largas (que no se cortan) ensanchan
     las columnas y la página entera se corre hacia el lado. */
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.4rem;padding:1.4rem 0 1.7rem;
}

.cat-item{
  display:flex;align-items:center;gap:.85rem;
  padding:.85rem .95rem;border-radius:14px;
  color:rgba(255,255,255,.9);text-decoration:none;
  border:1px solid transparent;transition:.18s ease;
}
.cat-item:hover,.cat-item:focus-visible{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14);
  color:#fff;transform:translateY(-1px);
}
.cat-item:focus-visible{outline:2px solid #fff;outline-offset:2px}

.cat-ico{
  flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;
  border-radius:12px;background:rgba(255,255,255,.09);color:#fff;
}
.cat-ico svg{width:22px;height:22px}

.cat-txt{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.cat-txt strong{font-weight:700;font-size:.98rem;line-height:1.2}
.cat-txt small{
  font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* «Ver todos» cierra la lista, se separa apenas del resto. */
.cat-item-todos{background:rgba(255,255,255,.05)}
.cat-item-todos .cat-ico{background:rgba(255,255,255,.14)}

/* Las tres rayitas se cruzan cuando esta abierto. */
.burger.abierto span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.abierto span:nth-child(2){opacity:0}
.burger.abierto span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

@media (prefers-reduced-motion:reduce){
  .cat-panel{transition:none}
  .burger span{transition:none}
}

@media (max-width:900px){
  .cat-panel-grid{grid-template-columns:minmax(0,1fr);padding:1rem 0 1.2rem;max-height:70vh;overflow-y:auto}
  .cat-txt small{white-space:normal}
}