/* Megamenú */
/* CONTENEDOR GENERAL */
header .elementor-nav-menu--main{
    position: relative;
}
header .elementor-nav-menu--main > ul{
width:100%;
}
.menu-item.mega-menu-product-cats {
    position: static;
}
.menu-item.mega-menu-product-cats > .mega-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
}

/* Contenedor del megamenú */
.mega-menu {
    z-index: 999;
    background: #ffffff;
    padding: 1rem 2rem 2rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

/* Mostrar al hacer hover sobre el elemento de menú padre (desktop) */
.menu-item.mega-menu-product-cats:hover > .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Estructura interna */
.mega-menu__inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* NIVEL 1: barra horizontal superior */
.mega-menu__level1 {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.mega-menu__level1-item {
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 3px;
    transition: background 0.15s ease, color 0.15s ease;
}

.mega-menu__level1-item:hover {
    background: #f5f5f5;
}

.mega-menu__level1-item.is-active {
    background: #111;
    color: #fff;
}

/* Paneles de nivel 1 */
.mega-menu__panels {
    position: relative;
}

.mega-menu__panel {
    display: none;
    max-height: 70vh;
    flex-direction: column;
}

.mega-menu__panel.is-active {
    display: flex;
}

/* GRID de nivel 2 */
.mega-menu__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    overflow-y: auto;
    flex: 1;
    padding-right: 6px;
}

.mega-menu__grid::-webkit-scrollbar {
    width: 6px;
}

.mega-menu__grid::-webkit-scrollbar-track {
    background: transparent;
}

.mega-menu__grid::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
}

.mega-menu__grid::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.4);
}

/* Tarjeta de categoría de segundo nivel */
.mega-menu__level2-item {
    position: relative;
    display: block;
    min-height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    overflow: hidden;
}

/* overlay oscuro para legibilidad */
.mega-menu__level2-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.7));
    transition: opacity 0.2s ease;
}

#mega-panel-287 .mega-menu__level2-item::before {
	background:none;
    border:1px solid #ccc;
}

.mega-menu__level2-item:hover::before {
    opacity: 1;
}

/* Enlace principal de nivel 2 */
.mega-menu__level2-mainlink {
    position: absolute;
    inset: 0 0 auto 0; /* ocupa parte superior si quieres; puedes ajustar */
    padding: 0.75rem;
    text-decoration: none !important;
    color: #fff;
    z-index: 2;
}

/* Nombre de la categoría (nivel 2) */
.mega-menu__level2-name {
    font-weight: 600;
    font-size: 1rem;
    color:#fff;
}

/* NIVEL 3: subcategorías sobre el fondo */
.mega-menu__level3 {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.75rem;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    transform: translateY(100%);
    opacity: 0;
    transition: all 0.2s ease;
}

/* Mostrar nivel 3 al hacer hover sobre el nivel 2 */
.mega-menu__level2-item:hover .mega-menu__level3 {
    transform: translateY(0);
    opacity: 1;
}

/* Links de nivel 3 */
.mega-menu__level3-link {
    display: inline-block;
    background: rgba(255,255,255,0.9);
    padding: 0.4rem 0.5rem !important;
    border-radius: 3px;
    font-size: 0.8rem;
    text-decoration: none !important;
    color: #fff;
    width:100%;
}

.mega-menu__level3-link:hover {
    background: rgba(255,255,255,0.7);
}

#mega-panel-287 .mega-menu__level2-item{
	background-color:#fff;
    position:relative;
    background-size: contain;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
#mega-panel-287 .mega-menu__level2-item .mega-menu__level2-mainlink{
	position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}
#mega-panel-287 .mega-menu__level2-item .mega-menu__level2-mainlink span{
	color:transparent;
}

/* -----------------------
   VERSIÓN MÓVIL
   ----------------------- */

@media (max-width: 768px) {

    header .elementor-nav-menu--main,
    header .elementor-nav-menu--main > ul,
    header .elementor-nav-menu--main .menu-item {
        overflow: visible;
    }

    .menu-item.mega-menu-product-cats {
        position: relative;
    }
    
    .elementor-nav-menu{
    	max-height: 75vh;
    }

    /* El megamenú en móvil ya no es una capa desktop */
    .menu-item.mega-menu-product-cats > .mega-menu {
        position: static;
        width: 100%;
        max-width: none;

        background: #fff;
        padding: 12px;
        margin-top: 8px;
        box-shadow: none;
        border-radius: 0;

        opacity: 1;
        visibility: visible;
        transform: none;

        display: none;
        z-index: auto;
	}
    
    .mega-menu a{
    	overflow-wrap: anywhere;
  		hyphens: auto;
    }

    .menu-item.mega-menu-product-cats.is-megamenu-open > .mega-menu {
        display: block;
        max-width: 100%;
    }

    /* En móvil quitamos la experiencia de tabs horizontal desktop */
    .mega-menu__level1 {
        display: none;
    }

    .mega-menu__panels {
        position: static;
    }

    .mega-menu__panel {
        display: none;
        max-height: none;
        flex-direction: column;
    }

    .mega-menu__panel.is-active {
        display: block;
    }

    /* Grid a una sola columna */
    .mega-menu__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        overflow: visible;
        padding-right: 0;
    }

    /* Tarjetas de segundo nivel simplificadas */
    .mega-menu__level2-item {
        min-height: 0;
        background-image: none !important;
        background-color: #f7f7f7;
        border-radius: 8px;
        overflow: hidden;
    }

    .mega-menu__level2-item::before {
        display: none;
    }

    .mega-menu__level2-mainlink {
        position: static;
        display: block;
        padding: 12px 14px;
        color: #111;
        background: transparent;
    }

    .mega-menu__level2-name {
        color: #111;
        font-size: 0.95rem;
        font-weight: 600;
    }

    /* Tercer nivel siempre visible y debajo */
    .mega-menu__level3 {
        position: static;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 0 12px 12px;
        transform: none;
        opacity: 1;
        background: transparent;
    }

    .mega-menu__level3-link {
        width: 100%;
        background: #fff;
        color: #333;
        border: 1px solid #e5e5e5;
        border-radius: 6px;
        padding: 8px 10px !important;
        font-size: 0.85rem;
    }

    .mega-menu__level3-link:hover {
        background: #f2f2f2;
    }

    /* Ajuste de tu caso especial */
    #mega-panel-287 .mega-menu__level2-item {
        background-image: none !important;
        background-color: #f7f7f7;
    }

    #mega-panel-287 .mega-menu__level2-item .mega-menu__level2-mainlink {
        position: static;
    }

    #mega-panel-287 .mega-menu__level2-item .mega-menu__level2-mainlink span {
        color: #111;
    }
}
/* Fin Megamenú */