/* Megamenu Productos */
.mm-productos-container{
  display:flex;
  width:100%;
  min-height:500px;
  font-family: var(--awb-typography5-font-family);
}

/* Zona gris */
.mm-productos-left{
  width:60%;
  background:var(--awb-color7);
  padding:40px;
  box-sizing:border-box;
}

/* Zona blanca */
.mm-productos-right{
  width:40%;
  background:#fff;
  padding:40px;
  box-sizing:border-box;
  position:relative;
}

/* Categorías en 2 columnas */
.mm-categorias{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px 40px;
  margin:0;
  padding:0;
  list-style:none;
}

.mm-categorias a{
  text-decoration:none;
  color:var(--awb-color4);
  font-size:15px;
  font-weight:500;
  display:block;  
  transition:all 0.2s ease;
}

.mm-categorias a:hover{
  text-decoration:underline;
}

/* Contenidos ocultos */
.mm-cat-content{
  display:none;
}

.mm-cat-content img{
  width:auto;
  max-height:200px;
  height:auto;
  border-radius:8px;
  display:block;
  margin: 0 auto;
}

.mm-cat-content h3{
  font-size:20px;
  margin:20px 0 10px 0;
}

.mm-cat-content p{
  margin:0;
  font-size:15px;
  line-height:1.5;
  color:#333;
}

/* Mostrar por defecto el primero */
.mm-cat-content:first-child{
  display:block;
}

.mm-productos-container .mm-productos-left .mm-categorias{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: repeat(9, auto); /* ajusta según nº de items */
  gap: 12px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}




/* Megamenu Aplicaciones *//* Megamenu Aplicaciones */

.mm-aplicaciones-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;  
    /* Optional: limit width if needed, or keep 100% */
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.mm-aplicaciones-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
}

.megamenu-image-link {
    display: block;
    width: 100%;
    overflow: hidden;   
    transition: transform 0.3s ease;
}

.megamenu-image-link:hover {
    transform: scale(1.02);
}

.mm-aplicaciones-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 3;
    object-fit: cover;
    display: block;
}

.megamenu-title-link {
    margin-top: 10px;
    font-size: 19px;
    font-weight: 700;
    color: var(--awb-color4);
    text-decoration: none;
    transition: color 0.3s ease;
}



/* Responsive adjustments */
@media (max-width: 768px) {
    .megamenu-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .megamenu-container {
        grid-template-columns: 1fr;
    }
}