/* ==========================================================
   OMAFAKA CUSTOM CSS
   HITO 4 - MEGA MENÚ PRODUCTOS2
========================================================== */

/* El LI será el punto de referencia del desplegable */
.nav-item.dropdown{
    position:relative;
}

/* Mega menú */
.mega-menu-productos{

    position:absolute;

    top:100%;

    left:50%;

    transform:translateX(-50%);

    width:900px;

    max-width:90vw;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#fff;

    border-radius:12px;

    padding:20px 25px;

    box-shadow:0 10px 25px rgba(0,0,0,.15);

    opacity:0;

    visibility:hidden;

    transition:.25s;

    z-index:9999;

}

/* Mostrar menú */

.nav-item.dropdown:hover .mega-menu-productos{

    opacity:1;

    visibility:visible;

}

/* Links */

.mega-menu-productos a{

    flex:1;

    text-align:center;

    color:#333;

    font-weight:700;

    font-size:20px;

    text-decoration:none;

    transition:.25s;

}

.mega-menu-productos a:hover{

    color:#57c49a;

}

/* Responsive */

@media (max-width:991px){

    .mega-menu-productos{

        position:static;

        transform:none;

        width:100%;

        display:flex;

        flex-direction:column;

        box-shadow:none;

        opacity:1;

        visibility:visible;

        padding:0;

        margin-top:10px;

    }

    .mega-menu-productos a{

        padding:15px;

        border-bottom:1px solid #eee;

        text-align:left;

        width:100%;

    }

}

/* ==========================================================
   BOTÓN COMPRAR POR WHATSAPP
========================================================== */

.product-information .comprar-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    width:100%;

    padding:18px 20px;

    background:#25D366;

    color:#fff !important;

    border-radius:40px;

    font-size:20px;

    font-weight:700;

    text-decoration:none !important;

    letter-spacing:.5px;

    transition:.25s;

    box-shadow:0 8px 18px rgba(0,0,0,.15);

    cursor:pointer;

}

.product-information .comprar-btn:hover{

    background:#218838;

    color:#fff !important;

    text-decoration:none !important;

    transform:translateY(-2px);

    box-shadow:0 12px 25px rgba(0,0,0,.18);

}

/* ==========================================================
   PRECIO ACTUAL DEL PRODUCTO
========================================================== */

.product-information .precio-actual{

    color:#0F766E;

    font-weight:700;

}