/* ============================================================
   MEGA-MENÚ (doc maestro §7.3) — BEM vce-mega
   Rediseño 2026: tarjetas de foto con overlay del sistema
   (.vce-img-overlay), nombre en blanco + contador de viajes.
   ============================================================ */
.vce-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--vce-blanco);
  border-top: 1px solid var(--vce-color-border);
  box-shadow: var(--vce-shadow-lg);
  z-index: var(--vce-z-mega);
  padding: var(--vce-spacing-xl) 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--vce-transition-base), transform var(--vce-transition-base);
}
.vce-mega.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.vce-mega[hidden] { display: block; } /* visibilidad por .is-open, no por hidden */

.vce-mega__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--vce-spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tarjeta = foto + overlay del sistema; texto blanco encima */
.vce-mega__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--vce-radius-card);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--vce-shadow-sm);
  background: linear-gradient(135deg, var(--vce-yale), var(--vce-indigo));
  transition: transform var(--vce-transition-base), box-shadow var(--vce-transition-base);
}
.vce-mega__card:hover { transform: translateY(-4px); box-shadow: var(--vce-shadow-lg); }
.vce-mega__card:focus-visible { outline: none; box-shadow: var(--vce-focus-ring), var(--vce-shadow-lg); }
.vce-mega__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transition: transform var(--vce-transition-base);
}
.vce-mega__card:hover .vce-mega__img { transform: scale(1.06); }

/* Contenido sobre la foto (usa .vce-img-overlay__content del sistema) */
.vce-mega__content { padding: var(--vce-spacing-md); display: flex; flex-direction: column; gap: 0.1rem; }
.vce-mega__name {
  font-family: var(--vce-font-display);
  font-weight: var(--vce-fw-bold);
  font-size: var(--vce-fs-md);
  line-height: var(--vce-lh-tight);
  color: var(--vce-blanco);
}
.vce-mega__count { font-size: var(--vce-fs-xs); font-weight: var(--vce-fw-semibold); color: var(--vce-naranja); }

/* Enlace "Ver todos" del panel */
.vce-mega__all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--vce-spacing-lg);
  font-family: var(--vce-font-display);
  font-weight: var(--vce-fw-semibold);
  font-size: var(--vce-fs-sm);
  color: var(--vce-indigo);
  text-decoration: none;
  transition: color var(--vce-transition-fast);
}
.vce-mega__all:hover { color: var(--vce-yale); }

.vce-mega__empty { color: var(--vce-color-text-muted); font-size: var(--vce-fs-sm); }

@media (max-width: 719px) {
  .vce-mega { display: none !important; } /* en móvil se usa el drawer */
}