/**
 * DES MENU — MEGA-MENÚ
 *
 * Nodos del diseño:
 *   2238:36031  «Mega-menú · Tienda»    1440x431  → variante por defecto
 *   2238:37167  «Mega-menú · Universos» 1440x509  → variante .desmenu-mega--compact
 *
 * REGLAS DE ESTA HOJA (y por qué)
 *   · Selectores planos de UNA clase, todos bajo el prefijo `.desmenu-mega`.
 *     Nada de selectores de ID: el `front.css` de este módulo estila el menú
 *     con `#header .des-menu__link` (36 reglas) y eso obligó al tema a subir
 *     sus propias reglas a (1,2,0) para poder aplicar el diseño. El CSS de
 *     módulo se encola después del tema, así que con una clase ya gana: no
 *     hace falta más.
 *   · Variables propias `--desmenu-mega-*`, y el valor del diseño va SIEMPRE
 *     como reserva dentro del propio var(). Así la hoja se sostiene sola en
 *     cualquier tienda, y un tema que quiera reskinear solo tiene que
 *     declarar esas variables (no hay ninguna variable de otro proyecto).
 *   · Sin fuentes de iconos: la flecha del pie es un glifo de texto.
 *
 *  @author David Escudero Digital Studio
 *  @license AFL 3.0
 */

/* ==========================================================================
   Caja de posición
   ==========================================================================
   El panel mide el ancho del CONTENEDOR de la página, no el del <ul> del
   menú: en el diseño el fondo llega a los dos bordes del contenedor y el
   contenido arranca a 64px, alineado con el resto de la página. Por eso se
   posiciona contra la <nav> del menú (que lleva `.desmenu-mega-nav`) y se
   desborda `--desmenu-mega-bleed` a cada lado, que es el padding lateral del
   contenedor del tema.

   `padding-top` en vez de `top: calc(100% + N)`: el hueco entre la banda del
   menú y el panel tiene que ser zona sensible al ratón, o el panel se cierra
   al bajar hacia él. Con padding transparente el hueco pertenece al panel.
   ========================================================================== */
.desmenu-mega-nav { position: relative; }

.desmenu-mega {
  position: absolute;
  top: 100%;
  right: calc(-1 * var(--desmenu-mega-bleed, 64px));
  left: calc(-1 * var(--desmenu-mega-bleed, 64px));
  z-index: var(--desmenu-mega-z, 200);
  padding-top: var(--desmenu-mega-gap, 8px);
  visibility: hidden;
  opacity: 0;
  transition:
    opacity var(--desmenu-mega-transition, 150ms ease),
    visibility 0s linear var(--desmenu-mega-transition-ms, 150ms);
}

/* Abierto: por ratón (sin JS), por foco de teclado y por la clase que pone
   views/js/megamenu.js, que es quien mantiene aria-expanded al día.

   EMPAREJAMIENTO. Con varios paneles hay que abrir el panel del disparador
   sobre el que está el ratón, y CSS no puede comparar el atributo de un
   elemento con el de otro. La plantilla numera los dos lados (el disparador
   lleva --N y su panel --N) y aquí va un selector por número. Se cubren
   ocho, que son más items de los que tiene una banda de navegación; a partir
   del noveno el panel solo abre por JS, que sí empareja por dato. */
.desmenu-mega-nav:has(.desmenu-mega__trigger--1:hover) .desmenu-mega--1,
.desmenu-mega-nav:has(.desmenu-mega__trigger--2:hover) .desmenu-mega--2,
.desmenu-mega-nav:has(.desmenu-mega__trigger--3:hover) .desmenu-mega--3,
.desmenu-mega-nav:has(.desmenu-mega__trigger--4:hover) .desmenu-mega--4,
.desmenu-mega-nav:has(.desmenu-mega__trigger--5:hover) .desmenu-mega--5,
.desmenu-mega-nav:has(.desmenu-mega__trigger--6:hover) .desmenu-mega--6,
.desmenu-mega-nav:has(.desmenu-mega__trigger--7:hover) .desmenu-mega--7,
.desmenu-mega-nav:has(.desmenu-mega__trigger--8:hover) .desmenu-mega--8,
.desmenu-mega:hover,
.desmenu-mega:focus-within,
.desmenu-mega.is-open {
  visibility: visible;
  opacity: 1;
  transition:
    opacity var(--desmenu-mega-transition, 150ms ease),
    visibility 0s linear 0s;
}

/* Por debajo del corte de navegación manda el panel móvil del módulo, que
   tiene su propia mecánica. El mega-menú es de escritorio. */
@media (max-width: 992px) {
  .desmenu-mega { display: none; }
}

/* ==========================================================================
   Panel
   ========================================================================== */
.desmenu-mega__panel {
  padding:
    var(--desmenu-mega-pad-y, 40px)
    var(--desmenu-mega-pad-x, 64px);
  font-family: var(--desmenu-mega-font, "Poppins"), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--desmenu-mega-bg, #08080f);
  border-bottom: 1px solid var(--desmenu-mega-border, #2a2a2e);
  box-shadow: var(--desmenu-mega-shadow, 0 18px 40px rgba(0, 0, 0, .55));
}

/* ==========================================================================
   Fila de columnas
   ==========================================================================
   Las columnas de enlaces reparten el sobrante a partes iguales y la pieza
   destacada mantiene sus 330px del diseño. `min-width: 0` para que una
   descripción larga no estire la columna.
   ========================================================================== */
.desmenu-mega__columns {
  display: flex;
  gap: var(--desmenu-mega-col-gap, 40px);
  align-items: flex-start;
}

.desmenu-mega__col {
  flex: 1 1 0;
  min-width: 0;
}

.desmenu-mega__col-title {
  margin: 0 0 var(--desmenu-mega-title-gap, 16px);
  font-size: var(--desmenu-mega-title-size, 10px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--desmenu-mega-title-color, #c6873f);
  text-transform: uppercase;
  letter-spacing: var(--desmenu-mega-title-tracking, 2px);
}

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

.desmenu-mega__link {
  display: flex;
  flex-direction: column;
  gap: var(--desmenu-mega-link-gap, 3px);
  padding-block: var(--desmenu-mega-link-pad, 9px);
  text-decoration: none;
}

.desmenu-mega__link-row {
  display: flex;
  gap: var(--desmenu-mega-count-gap, 9px);
  align-items: center;
}

.desmenu-mega__link-name {
  font-size: var(--desmenu-mega-name-size, 12px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--desmenu-mega-name-color, #f2f1ee);
  transition: color var(--desmenu-mega-transition, 150ms ease);
}

.desmenu-mega__link-count {
  font-size: var(--desmenu-mega-count-size, 11px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--desmenu-mega-count-color, #55555c);
}

.desmenu-mega__link-desc {
  max-width: var(--desmenu-mega-desc-width, 260px);
  font-size: var(--desmenu-mega-desc-size, 11px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--desmenu-mega-desc-color, #8a8a90);
}

.desmenu-mega__link:hover .desmenu-mega__link-name,
.desmenu-mega__link:focus-visible .desmenu-mega__link-name {
  color: var(--desmenu-mega-name-color-hover, #c6873f);
}

.desmenu-mega__link:focus-visible {
  outline: 2px solid var(--desmenu-mega-focus, #faa711);
  outline-offset: 2px;
}

/* ==========================================================================
   Pieza destacada
   ==========================================================================
   Tarjeta de 330x300 con la foto del producto al 85% y un degradado encima,
   que es lo que deja legible el copy del pie de la tarjeta.
   ========================================================================== */
.desmenu-mega__featured {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--desmenu-mega-card-width, 330px);
  height: var(--desmenu-mega-card-height, 300px);
  overflow: hidden;
  text-decoration: none;
  background: var(--desmenu-mega-card-bg, #101014);
  border: 1px solid var(--desmenu-mega-border, #2a2a2e);
  border-radius: var(--desmenu-mega-card-radius, 3px);
}

.desmenu-mega__featured-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--desmenu-mega-card-img-opacity, .85);
}

.desmenu-mega__featured-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    var(--desmenu-mega-veil-top, rgba(10, 10, 18, .1)) 0%,
    var(--desmenu-mega-veil-mid, rgba(10, 10, 18, .6)) 50%,
    var(--desmenu-mega-veil-bottom, rgba(10, 10, 18, .97)) 100%
  );
}

.desmenu-mega__featured-copy {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--desmenu-mega-card-copy-gap, 6px);
  padding: var(--desmenu-mega-card-pad, 22px);
}

.desmenu-mega__featured-kicker {
  font-size: var(--desmenu-mega-kicker-size, 10px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--desmenu-mega-title-color, #c6873f);
  text-transform: uppercase;
  letter-spacing: var(--desmenu-mega-kicker-tracking, 1.8px);
}

.desmenu-mega__featured-title {
  max-width: var(--desmenu-mega-card-title-width, 286px);
  font-size: var(--desmenu-mega-card-title-size, 14px);
  font-weight: 600;
  line-height: 1.28;
  color: var(--desmenu-mega-name-color, #f2f1ee);
}

.desmenu-mega__featured-meta {
  font-size: var(--desmenu-mega-desc-size, 11px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--desmenu-mega-desc-color, #8a8a90);
}

.desmenu-mega__featured:focus-visible {
  outline: 2px solid var(--desmenu-mega-focus, #faa711);
  outline-offset: 2px;
}

/* ==========================================================================
   Pie del panel
   ========================================================================== */
.desmenu-mega__foot {
  display: flex;
  gap: var(--desmenu-mega-col-gap, 40px);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--desmenu-mega-foot-gap, 28px);
  padding-top: var(--desmenu-mega-foot-gap, 28px);
  border-top: 1px solid var(--desmenu-mega-border, #2a2a2e);
}

.desmenu-mega__foot-text {
  margin: 0;
  font-size: var(--desmenu-mega-desc-size, 11px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--desmenu-mega-desc-color, #8a8a90);
}

.desmenu-mega__foot-link {
  display: inline-flex;
  gap: var(--desmenu-mega-count-gap, 9px);
  align-items: center;
  font-size: var(--desmenu-mega-foot-link-size, 11px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--desmenu-mega-name-color, #f2f1ee);
  text-decoration: none;
  letter-spacing: var(--desmenu-mega-foot-link-tracking, 1.4px);
  white-space: nowrap;
  transition: color var(--desmenu-mega-transition, 150ms ease);
}

.desmenu-mega__foot-link:hover,
.desmenu-mega__foot-link:focus-visible {
  color: var(--desmenu-mega-name-color-hover, #c6873f);
}

.desmenu-mega__foot-link:focus-visible {
  outline: 2px solid var(--desmenu-mega-focus, #faa711);
  outline-offset: 2px;
}

.desmenu-mega__foot-arrow { line-height: 1; }

/* ==========================================================================
   Zona de universos destacados (panel de Universos)
   ==========================================================================
   Tira de tarjetas con el logotipo de la franquicia y su nº de piezas. Los
   datos son del módulo `desuniverses`; aquí solo se colocan.

   La tira reparte el ancho a partes iguales en vez de fijar los 208px del
   diseño: con 1312px de contenido y gap 12, seis tarjetas dan justo 208. Si
   el comerciante configura cinco o siete, siguen cuadrando en lugar de
   dejar un hueco o desbordar.
   ========================================================================== */
.desmenu-mega__universes {
  margin-bottom: var(--desmenu-mega-universes-gap, 32px);
}

.desmenu-mega__universes-title {
  margin: 0 0 var(--desmenu-mega-universes-title-gap, 16px);
  font-size: var(--desmenu-mega-title-size, 10px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--desmenu-mega-title-color, #c6873f);
  text-transform: uppercase;
  letter-spacing: var(--desmenu-mega-title-tracking, 2px);
}

.desmenu-mega__universes-list {
  display: flex;
  gap: var(--desmenu-mega-universes-card-gap, 12px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.desmenu-mega__universes-item {
  flex: 1 1 0;
  min-width: 0;
}

.desmenu-mega__universe {
  position: relative;
  display: flex;
  height: var(--desmenu-mega-universes-card-height, 110px);
  padding-bottom: var(--desmenu-mega-universes-card-pad, 12px);
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none;
  background: var(--desmenu-mega-card-bg, #101014);
  border: 1px solid var(--desmenu-mega-border, #2a2a2e);
  border-radius: var(--desmenu-mega-card-radius, 3px);
  transition: border-color var(--desmenu-mega-transition, 150ms ease);
}

.desmenu-mega__universe:hover,
.desmenu-mega__universe:focus-visible {
  border-color: var(--desmenu-mega-title-color, #c6873f);
}

.desmenu-mega__universe:focus-visible {
  outline: 2px solid var(--desmenu-mega-focus, #faa711);
  outline-offset: 2px;
}

/* El logotipo va centrado en la tarjeta y subido 10px, que es donde lo pone
   el diseño para dejar respirar al contador de abajo. */
.desmenu-mega__universe-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: 100%;
  padding-inline: var(--desmenu-mega-universes-card-pad, 12px);
  align-items: center;
  justify-content: center;
  transform: translate(-50%, calc(-50% - var(--desmenu-mega-universes-logo-rise, 10px)));
}

/* Alto fijo del diseño y ancho natural de cada logotipo: son de proporciones
   muy distintas (MARVEL es apaisado, DC casi cuadrado) y una anchura común
   los deformaría. */
.desmenu-mega__universe-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--desmenu-mega-universes-logo-height, 40px);
  object-fit: contain;
}

.desmenu-mega__universe-name {
  font-size: var(--desmenu-mega-name-size, 12px);
  font-weight: 500;
  line-height: 1.3;
  color: var(--desmenu-mega-name-color, #f2f1ee);
  text-align: center;
}

.desmenu-mega__universe-count {
  font-size: var(--desmenu-mega-universes-count-size, 10px);
  font-weight: 400;
  line-height: 1.4;
  color: var(--desmenu-mega-desc-color, #8a8a90);
}

/* ==========================================================================
   Variante compacta (panel de Universos)
   ==========================================================================
   Mismo bloque, otro ritmo: el panel respira algo menos, los títulos de
   columna van en gris en vez de bronce y los enlaces son solo el nombre.
   Se activa con la clase del panel, que pone la plantilla según el campo
   `variant` del panel.
   ========================================================================== */
.desmenu-mega--compact .desmenu-mega__panel {
  padding:
    var(--desmenu-mega-pad-y-compact, 36px)
    var(--desmenu-mega-pad-x, 64px);
}

.desmenu-mega--compact .desmenu-mega__columns,
.desmenu-mega--compact .desmenu-mega__foot {
  gap: var(--desmenu-mega-col-gap-compact, 36px);
}

.desmenu-mega--compact .desmenu-mega__foot {
  margin-top: var(--desmenu-mega-foot-gap-compact, 26px);
  padding-top: var(--desmenu-mega-foot-gap-compact, 26px);
}

.desmenu-mega--compact .desmenu-mega__col-title {
  margin-bottom: var(--desmenu-mega-title-gap-compact, 14px);
  color: var(--desmenu-mega-title-color-compact, #8a8a90);
  letter-spacing: var(--desmenu-mega-title-tracking-compact, 1.8px);
}

.desmenu-mega--compact .desmenu-mega__link {
  padding-block: var(--desmenu-mega-link-pad-compact, 7px);
}

.desmenu-mega--compact .desmenu-mega__link-name {
  font-weight: 400;
}

/* ==========================================================================
   Adaptación a anchos intermedios
   ==========================================================================
   El diseño solo cubre 1440. Entre el corte de navegación y ~1200px las
   cuatro zonas en fila no caben, así que la tarjeta pasa a ocupar la fila
   completa por debajo de las columnas en vez de estrujarlas.
   ========================================================================== */
@media (min-width: 993px) and (max-width: 1199px) {
  .desmenu-mega__columns { flex-wrap: wrap; }

  .desmenu-mega__col { flex: 1 1 var(--desmenu-mega-col-min, 200px); }

  .desmenu-mega__featured {
    width: 100%;
    height: var(--desmenu-mega-card-height-narrow, 220px);
  }

  /* Seis logotipos en fila no caben: la tira pasa a dos filas. */
  .desmenu-mega__universes-list { flex-wrap: wrap; }

  .desmenu-mega__universes-item {
    flex: 1 1 var(--desmenu-mega-universes-card-min, 150px);
  }
}