/* ==================================================================
   COLD2HORSE — submenú de Productos
   Hoja aparte, igual que lang.css: la cargan todas las páginas con
   navegación, y dos de ellas (home 04 y tecnología) todavía no usan
   base.css. Sólo aparece de 861px hacia arriba, que es donde .nav__links
   está visible.
   ================================================================== */

.menu { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }

/* Hereda color y transición de .nav__links a; aquí sólo el estado abierto. */
.menu[data-open='true'] .menu__top { color: var(--ice); }

/* El enlace navega siempre a la página de la gama. El botón es sólo para
   abrir el panel sin teclado apuntador (táctil) y con tabulador. */
.menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.3s var(--ease);
}

.menu__toggle:hover,
.menu[data-open='true'] .menu__toggle { color: var(--ice); }

.menu__chev {
  width: 0.4rem;
  height: 0.4rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.4s var(--ease);
}

.menu[data-open='true'] .menu__chev { transform: translateY(1px) rotate(-135deg); }

/* Puente invisible entre el enlace y el panel: sin él, el hueco de 0.6rem
   dispara el pointerleave al bajar el ratón hacia el panel. */
.menu::after {
  content: '';
  position: absolute;
  inset: 100% 0 auto 0;
  height: 0.9rem;
}

.menu__panel {
  position: absolute;
  top: calc(100% + 0.75rem);
  left: 50%;
  translate: -50% 0;
  width: 27rem;
  max-width: calc(100vw - var(--pad) * 2);
  padding: 0.45rem;
  background: var(--ink);
  border: 1px solid color-mix(in oklch, var(--paper) 16%, transparent);
  box-shadow: 0 18px 46px oklch(0 0 0 / 0.45);
  z-index: 5;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease), visibility 0.32s;
}

.menu[data-open='true'] .menu__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.menu__list { list-style: none; margin: 0; padding: 0; }

/* Miniatura · nombre y zona · precio. Tres columnas fijas para que los
   cuatro nombres arranquen a la misma altura. */
.menu__item {
  display: grid;
  grid-template-columns: 3.25rem 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0.6rem;
  text-decoration: none;
  transition: background 0.3s var(--ease);
}

.menu__item:hover,
.menu__item:focus-visible { background: color-mix(in oklch, var(--paper) 7%, transparent); }

.menu__thumb {
  width: 3.25rem;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--ink-2, oklch(0.19 0.014 240));
  border: 1px solid color-mix(in oklch, var(--paper) 12%, transparent);
  filter: saturate(0.85);
  transition: filter 0.4s var(--ease), border-color 0.4s var(--ease);
}

.menu__item:hover .menu__thumb,
.menu__item:focus-visible .menu__thumb { filter: saturate(1.1); border-color: var(--ice); }

.menu__name {
  display: block;
  font-size: calc(var(--s--1) * 1.15);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--paper);
  transition: color 0.3s var(--ease);
}

.menu__item:hover .menu__name,
.menu__item:focus-visible .menu__name { color: var(--ice); }

.menu__zone {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--s--1);
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.12em;
  color: var(--dimmer);
}

.menu__price {
  font-size: var(--s--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ice);
  white-space: nowrap;
}

/* Ficha en la que ya estamos. */
.menu__item[aria-current='page'] { box-shadow: inset 2px 0 0 var(--ice); }

.menu__all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.45rem;
  padding: 0.7rem 0.6rem 0.55rem;
  border-top: 1px solid color-mix(in oklch, var(--paper) 12%, transparent);
  font-size: var(--s--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-decoration: none;
  color: var(--dim);
  transition: color 0.3s var(--ease);
}

.menu__all:hover,
.menu__all:focus-visible { color: var(--ice); }

.menu__all span { transition: transform 0.4s var(--ease); }
.menu__all:hover span { transform: translateX(0.35rem); }

/* Con .nav__links oculto no hay dónde colgar el panel. */
@media (max-width: 860px) { .menu { display: none; } }