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

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

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

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

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

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

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