/* Hotfix: Mega menú Productos (Trifuego)
   - Tipografía igual a Servicios/Garantías
   - El panel negro derecho se ajusta al contenido
   - El dropdown deja de tapar todo el banner (fondo transparente; fondo solo en cajas)
*/

/* 1) Tipografía + compactar lista de categorías */
.tf-mega .tf-mega-cat-item{
  font-size: .95rem !important;            /* igual que .mega-menu a */
  padding: 7px 10px !important;           /* menos alto por item */
  line-height: 1.15 !important;
}

.tf-mega .tf-mega-label{
  font-size: .90rem !important;
  margin-bottom: 8px !important;
}

/* Reduce cuánto “invade” en pantalla */
.tf-mega .tf-mega-cats,
.tf-mega .tf-mega-panels{
  max-height: 46vh !important;            /* antes 60vh */
}

/* 2) Que el bloque negro NO sea una sábana sobre el banner */
@media (min-width: 992px){
  .tf-mega .dropdown-menu.tf-mega-menu{
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }

  .tf-mega .tf-mega-inner{
    padding: 12px !important;
  }

  /* Que las columnas no se estiren a la altura de la lista izquierda */
  .tf-mega .tf-mega-grid{
    align-items: start !important;
    grid-template-columns: 330px max-content !important; /* derecha “wrap content” */
  }
}

/* Fondo SOLO en cajas (izq/der) */
.tf-mega .tf-mega-left,
.tf-mega .tf-mega-right{
  background: rgba(0,0,0,.86) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}

/* 3) Panel derecho al tamaño del contenido */
.tf-mega .tf-mega-right{
  width: max-content !important;
  max-width: min(700px, calc(100vw - 420px)) !important; /* evita desbordes */
  height: fit-content !important;
}

.tf-mega .tf-mega-panels{
  min-height: 0 !important;               /* antes 240px */
  height: fit-content !important;
  overflow: visible !important;            /* si son pocas, no muestres scroll */
}

/* Cambiar el layout de subcategorías a grid (wrap real) */
.tf-mega .tf-mega-subgrid{
  column-count: unset !important;
  column-gap: unset !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
  gap: 8px 12px;
}

.tf-mega .tf-mega-subitem{
  width: auto !important;
  margin: 0 !important;
  white-space: nowrap;
}

/* Si el texto es muy largo, no rompas el layout */
.tf-mega .tf-mega-subitem{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}