/*Productos*/


.flexProductosGen{
    display:flex;
    justify-content:center;
    gap:30px;padding-top:30px;
    flex-wrap:wrap;
}

.flexProductosGenRela{
    display:flex;
    justify-content:center;
    gap:30px;padding-top:50px;
    flex-wrap:wrap;
}

.flexProductosGen .productoOkGen{
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--primary);
    transition: all 0.3s ease;
}


        .productoOkGen{
            height: auto;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--white);
            width:336px;
        }



.flexProductosGenRela .productoOkGenRela{
     display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid var(--primary);
    transition: all 0.3s ease;

    height: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white);
    width:23%;
}





        .productoOkGen .product-image-containerOkGen {
            width: 100%;
            height: auto;
            transition: transform 0.3s ease;
        }

                .productoOkGenRela .product-image-containerOkGen {
                    width: 100%;
                    height: auto;
                    transition: transform 0.3s ease;
                }


        .productoOkGen:hover .product-image-containerOkGen{
            transform: scale(1.05);
            width:100%;
        }

                .productoOkGenRela:hover .product-image-containerOkGen{
                    transform: scale(1.05);
                    width:100%;
                }

        .productoOkGen .product-contentOkGen {
            padding:15px;
            padding-bottom:5px;
            flex-grow: 1;
            display: flex;
            justify-content: center;
            flex-direction: column;
        }

                .productoOkGenRela .product-contentOkGen {
                        padding:15px;
                        padding-bottom:5px;
                        flex-grow: 1;
                        display: flex;
                        justify-content: center;
                        flex-direction: column;
                    }

        .productoOkGen .product-name {
            font-size:18px;
            color: var(--black);
            font-weight: 500;
            margin-bottom: 0.5rem;
            line-height: 1.3;
            text-align: center;
        }

                .productoOkGenRela .product-name {
                    font-size:18px;
                    color: var(--black);
                    font-weight: 500;
                    margin-bottom: 0.5rem;
                    line-height: 1.3;
                    text-align: center;
                }


         /*Flex botones y stock*/
         .productoOkGen .product-gray-boxOkGen {
            display:flex;
            flex-direction: column;
            padding:10px;
            padding-bottom:20px;
        }

                .productoOkGenRela .product-gray-boxOkGen {
                    display:flex;
                    flex-direction: column;
                    padding:10px;
                    padding-bottom:20px;
                }

         .productoOkGen .stock-infoOkGen {
            display: flex;
            width:100%;
            justify-content:center;
            flex-wrap: wrap;
            gap:10px;
            margin-bottom: 8px;
            padding-bottom:5px;
        }

                .productoOkGenRela .stock-infoOkGen {
                    display: flex;
                    width:100%;
                    justify-content:center;
                    flex-wrap: wrap;
                    gap:10px;
                    margin-bottom: 8px;
                    padding-bottom:5px;
                }

         .productoOkGen .stock-label{
            font-size: 14px;
            color: var(--white);
            text-transform: uppercase;
            background-color:var(--primaryhover);
            padding:2px 15px;
            border-radius:5px;
            padding-top:4px;
        }

                .productoOkGenRela .stock-label{
                    font-size: 14px;
                    color: var(--white);
                    text-transform: uppercase;
                    background-color:var(--primaryhover);
                    padding:2px 15px;
                    border-radius:5px;
                    padding-top:4px;
                }


         .productoOkGen .stock-code {
            font-size: 14px;
            background-color: var(--grayextralight);
            border: 1px solid #DFDDDD;
            color: var(--black);
            padding:2px 7px;
            padding-top:4px;
            border-radius:5px;
        }


                .productoOkGenRela .stock-code {
                    font-size: 14px;
                    background-color: var(--grayextralight);
                    border: 1px solid #DFDDDD;
                    color: var(--black);
                    padding:2px 7px;
                    padding-top:4px;
                    border-radius:5px;
                }

         .productoOkGen .stock-code span{
            color:var(--primary);
        }

                .productoOkGenRela .stock-code span{
                    color:var(--primary);
                }

         .productoOkGen .actions-containerOkGen{
            display: flex;
            align-items: center;
            gap:10px;
        }

                .productoOkGenRela .actions-containerOkGen{
                    display: flex;
                    align-items: center;
                    gap:10px;
                }

         .productoOkGen .details-buttonOkGen {
            padding:13px 60px;
            background-color: var(--grayextralight);
            border: 1px solid #DFDDDD;
            color: var(--black);
            font-size: 16px;
            font-weight:600;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            flex-grow: 1;
            text-align: center;
            text-decoration:none;
        }

                .productoOkGenRela .details-buttonOkGen {
                    padding:13px 60px;
                    background-color: var(--grayextralight);
                    border: 1px solid #DFDDDD;
                    color: var(--black);
                    font-size: 16px;
                    font-weight:600;
                    border-radius: 4px;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    text-transform: uppercase;
                    flex-grow: 1;
                    text-align: center;
                    text-decoration:none;
                }


         .productoOkGen .details-buttonOkGen:hover {
            background-color: var(--primary);
            color: var(--white);
        }

                .productoOkGenRela .details-buttonOkGen:hover {
                    background-color: var(--primary);
                    color: var(--white);
                }

         .productoOkGen .whatsapp-icon {
            padding:3px 15px;
            border-radius:4px;
            background-color:#27A11A;
            color:var(--white);
            font-size:30px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

                .productoOkGenRela .whatsapp-icon {
                        padding:3px 15px;
                        border-radius:4px;
                        background-color:#27A11A;
                        color:var(--white);
                        font-size:30px;
                        cursor: pointer;
                        transition: all 0.3s ease;
                    }

         .productoOkGen .whatsapp-icon span{
            display:none;
        }


                .productoOkGenRela .whatsapp-icon span{
                    display:none;
                }


         .productoOkGen .whatsapp-icon:hover {
            background-color:#1dab0d;
        }

                .productoOkGenRela .whatsapp-icon:hover {
                    background-color:#1dab0d;
                }



/* Detalle de productos */

        .product-container {
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
            margin-bottom:60px;
            gap:25px;
        }

        .product-gallery {
            flex: 1;
            min-width: 300px;
            padding-right:25px;
        }

        .product-details {
            flex: 1;
            min-width: 300px;
        }

        .category-nameProdc {
            color: var(--white);
            font-size: 11px;
            margin-bottom:15px;
            font-weight:500;
            padding:5px 10px;
            border-radius:5px;
            display:inline-block;
            background-color:var(--primary);
            text-decoration:none;
            transition:all ease .3s;
        }

         .category-nameProdc:hover{
            background-color:var(--primaryhover);
            color:var(--white)
         }

        .main-image-container {
            position: relative;
            margin-bottom: 15px;
            cursor: zoom-in;
            display: flex;
            justify-content: center;
            align-items: center;
            width:100%;height: auto;
        }

        .main-image {
            width: 100%;
            height: auto;
            object-fit: contain;
            border:1px solid var(--graylight);
        }

        .thumbnail-container {
            display: flex;
            align-items: center;
            position: relative;
        }

        .thumbnails {
            display: flex;
            overflow: hidden;
            scroll-behavior: smooth;
            gap: 10px;
            padding: 5px 0;
            width: calc(100% - 56px);
            margin: 0 auto;
        }

        .thumbnail {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 4px;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            background-color: var(--grayextralight);
            padding: 5px;
            flex-shrink: 0;
        }

        .thumbnail:hover {
            border-color: var(--primary);
        }

        .thumbnail.active {
            border-color: var(--primary);
        }

        .thumbnail-nav {
            background: var(--white);
            border: 1px solid var(--graylight);
            border-radius: 50%;
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: absolute;
            z-index: 2;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            font-size: 12px;
        }

        .thumbnail-nav:hover {
            background: var(--graylight);
        }

        .thumbnail-nav.prev {
            left: 0;
        }

        .thumbnail-nav.next {
            right: 0;
        }

        .product-title {
            font-size: 24px;
            margin-bottom:4px;
            padding:10px 0px;
            color: var(--black);
            font-weight:700;
        }

        .product-code {
            color: var(--black);
            margin-bottom: 20px;
            padding:5px 10px;
            width: auto;
            background-color:var(--grayextralight);
            border-radius:4px;
            font-size: 14px;
            display:inline-block;
        }


        .availability {
            color: var(--primaryhover);
            font-weight: 600;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            font-size: 15px;
        }

        .availability::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            background-color: var(--primaryhover);
            border-radius: 50%;
            margin-right: 8px;
        }
        .availability.no-stock::before {
            background-color: #ff6b6b;
        }


        .section-title {
            font-size: 17px;
            margin: 20px 0 12px;
            color: var(--primary);
            font-weight: 500;
        }

        .product-description {
            margin-bottom: 15px;
            font-size: 15px;
            color: var(--black);
            line-height: 1.7;
        }

        .product-summary {
            margin-bottom: 20px;
            font-size: 15px;
            color: var(--black);
            line-height: 1.6;
        }



        .coverage-list {
            display: flex;
            flex-wrap: wrap;
            gap: 5px 15px;
            margin-top: 10px;
            font-size: 14px;
            color: var(--black);
        }

        /* WhatsApp button */
        .whatsapp-button {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #27A11A;
            color: var(--white);
            padding: 12px 20px;
            border-radius: 6px;
            text-decoration: none;
            font-weight:800;
            margin: 20px 0;
            transition: background-color 0.3s;
            width: 100%;
            text-align: center;
        }

        .whatsapp-button:hover {
            background-color: #13bb01;
        }

        .whatsapp-button i {
            margin-right: 8px;
            font-size: 20px;
        }

        /* Accordion styles */
        .accordion {
            margin: 20px 0;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.031);
        }

        .accordion-item {
            border-bottom: 1px solid var(--graylight);
        }

        .accordion-item:last-child {
            border-bottom: none;
        }

        .accordion-header {
            background-color: var(--grayextralight);
            padding: 15px 20px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 500;
            transition: all 0.3s;
            border-bottom: 1px solid var(--graylight);
        }

        .accordion-header:hover {
            background-color: var(--black);
            color: var(--white);
        }

        .accordion-header.active {
            background-color: var(--black);
            color: var(--white);
        }

        .accordion-header::after {
            content: '+';
            font-size: 20px;
            transition: transform 0.3s;
        }

        .accordion-header.active::after {
            content: '-';
        }

        .accordion-content {
            padding: 0px 20px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .accordion-content.active {
            padding: 15px 20px;
            max-height: 1000px;
            overflow-x: auto;
        }

        .accordion-content ul {
            margin-left: 18px;
        }

        .accordion-content li {
            margin-bottom: 8px;
            color: var(--dark-gray);
        }


        /* Responsive adjustments */
        @media (max-width: 768px) {
            .product-gallery, .product-details {
                flex: 100%;
                border-bottom: 1px solid var(--medium-gray);
                padding-right:0px;
            }
            .whatsapp-button{margin-bottom:0px;}

            .main-image {
                max-height: auto;
            }

            .thumbnail{
                width:80px;
                height:80px;
            }


        }











@media (max-width: 1460px) {
        .flexProductosGen .productoOkGen{
            width:32%;
        }
        .flexProductosGen{gap:15px;}
        .flexProductosGenRela{gap:15px;}

        .productoOkGenRela .details-buttonOkGen{
            padding: 13px 50px;
        }
}

@media (max-width: 1360px) {
 .productoOkGenRela .details-buttonOkGen{
            padding: 13px 40px;
        }
    }

@media (max-width: 1350px) {
    .cotizar-body a button{
        width:220px;
    }

    .productoOkGen .details-buttonOkGen {
            padding:13px 50px;
    }
}


@media (max-width: 1300px) {
    .cotizar-body a button{
        width:200px;
    }

    .productoOkGen .details-buttonOkGen {
            padding:13px 35px;
    }
}


@media (max-width: 1270px) {
 .productoOkGenRela .details-buttonOkGen{
            padding: 13px 30px;
        }
    }

@media (max-width: 1170px) {
 .productoOkGenRela .details-buttonOkGen{
            padding: 13px 20px;
        }
    }

    @media (max-width: 1155px) {
.flexProductosGenRela{
    flex-wrap: wrap;
}
.flexProductosGenRela .productoOkGenRela{
    width:30%;
}

    }


@media (max-width: 1150px) {
     .productoOkGen .details-buttonOkGen {
            padding:13px 70px;
    }

    .flexProductosGen{flex-wrap:wrap;}
       .flexProductosGen .productoOkGen{
            width:48%;
        }

     .cotizar-body a button{
        width:270px;
    }


    .flexCategoriesProducts .productsCaj .flexTituloproducto h1{
        font-size:30px;
    }

    .containerImgProductoGen{
        width:30%;
    }

    .containerTituloProductoGen{
        width:68%;
    }
    .flexCategoriesProducts .categoriesProduct{
        width:30%;
    }

    .flexCategoriesProducts .productsCaj{
        width:68%;
    }

    .productoOkGenRela .details-buttonOkGen{
        padding:13px 55px;
    }
}





@media (max-width: 1100px) {

      .productoOkGen .details-buttonOkGen {
            padding:13px 59px;
    }


    .cotizar-body a button{
        width:250px;
    }


    .flexCategoriesProducts .productsCaj .flexTituloproducto{
        flex-wrap:wrap;
    }

    .containerTituloProductoGen{
        width:100%;
    }

}


@media (max-width: 1065px) {
  .productoOkGenRela .details-buttonOkGen {
            padding:13px 40px;
    }
}



@media (max-width: 1025px) {

      .productoOkGen .details-buttonOkGen {
            padding:13px 50px;
    }

     .productoOkGenRela .details-buttonOkGen {
            padding:13px 30px;
    }


    .cotizar-body a button{
        width:230px;
    }
}

@media (max-width: 992px) {
     .productoOkGen .details-buttonOkGen {
            padding:13px 40px;
    }

      .productoOkGenRela .details-buttonOkGen {
            padding:13px 25px;
    }

    .flexCategoriesProducts .productsCaj .flexTituloproducto h1{
        font-size:25px;
    }
    .containerTituloProductoGen div{
        font-size:14px;
    }


}

@media (max-width: 920px) {
  .productoOkGen .details-buttonOkGen {
            padding:13px 30px;
    }

    .productoOkGenRela .details-buttonOkGen {
            padding:13px 20px;
    }
}


@media (max-width: 860px) {
  .productoOkGen .details-buttonOkGen {
            padding:13px 20px;font-size: 14px;
    }

      .productoOkGenRela .details-buttonOkGen {
            padding:13px 20px;font-size: 14px;
    }


     .productoOkGen .whatsapp-icon{
        padding:1px 15px;
    }

      .productoOkGenRela .whatsapp-icon{
        padding:1px 15px;
    }
}


/* Estilos para mobile */
@media (max-width: 768px) {
    .product-menu-header {
        cursor: pointer; /* Hace todo el header clickeable */
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
    }

    .product-menu-toggle-mobile {
        display: block;
        font-size: 20px;
        transition: transform 0.3s ease;
    }

    .product-menu-expanded .product-menu-toggle-mobile i {
        transform: rotate(180deg);
    }

    /* Cambiar ícono cuando está expandido */
    .product-menu-expanded .fa-bars:before {
        content: "\f00d"; /* Código de FontAwesome para times (X) */
    }

    .product-menu-items {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .product-menu-expanded .product-menu-items {
        max-height: 2000px;
    }

    .product-submenu {
        max-height: 0 !important;
    }

    .product-menu-has-subitems.product-menu-expanded .product-submenu {
        max-height: 500px !important;
    }

    .flexCategoriesProducts{
        flex-wrap:wrap;
        width: 100%;
    }

   .flexCategoriesProducts .categoriesProduct{
    width:100%;
   }

    .containerTituloProductoGen{
        order: 3;
        width:100%;
    }
    .containerImgProductoGen{
        width:47%;
    }

    .flexCategoriesProducts{
        gap:15px;
    }

    .btnCotizar{
        display:flex;
        align-items:center;
        justify-content:center;
        width:48%;
        order: 2;
    }

    .flexCategoriesProducts .productsCaj{
        width:100%;
    }


    .cotizar-body {
        max-height: 0;
        overflow: hidden;
        padding-top: 0;
        padding-bottom: 0;
    }

    .cotizar-menu{
        display:none;
    }

    .productoOkGen .details-buttonOkGen {
            padding:13px 60px;
    }

    .productoOkGenRela .details-buttonOkGen {
            padding:13px 60px;
    }

    .flexProductosGenRela .productoOkGenRela{
        width:48%;
    }
}


@media (max-width: 920px) {

    .cotizar-body a button{
        width:200px;
    }
}


@media (min-width: 775px) {
    .product-menu-toggle-mobile {
        display: none;
    }

    .product-menu-items {
        max-height: none !important;
        display: block !important;
    }
}


.product-menu-has-subitems.product-menu-expanded > .product-menu-link {
    background-color: var(--primarylight) !important;
    color: var(--primary) !important;
}



@media(max-width:700px){
 .productoOkGen .details-buttonOkGen {
     padding:13px 50px;
    }

     .productoOkGenRela .details-buttonOkGen {
     padding:13px 50px;
    }
}

@media(max-width:655px){
 .productoOkGen .details-buttonOkGen {
     padding:13px 40px;
    }

     .productoOkGenRela .details-buttonOkGen {
     padding:13px 40px;
    }
}

@media(max-width:590px){
 .productoOkGen .details-buttonOkGen {
     padding:13px 30px;
    }

     .productoOkGenRela .details-buttonOkGen {
     padding:13px 30px;
    }

    .productoOkGenRela .stock-code{
        width:auto;
    }
}

@media(max-width:555px){
 .productoOkGen .details-buttonOkGen {
     padding:13px 20px;
    }

     .productoOkGenRela .details-buttonOkGen {
     padding:13px 20px;
    }
}
@media(max-width:505px){
 .productoOkGen .details-buttonOkGen {
     padding:13px 10px;
    }

     .productoOkGenRela .details-buttonOkGen {
     padding:13px 10px;
    }
}



@media(max-width:485px){

 .flexProductosGen .productoOkGen{
            width:100%;
        }

          .flexProductosGenRela .productoOkGenRela{
        width:100%;
    }

        .productoOkGen .stock-code{
            width:auto !important;
        }
}


@media(max-width:460px){
 .productoOkGen .details-buttonOkGen {
     padding:13px 100px;
    }
}


@media(max-width:420px){
    .productoOkGen .product-name{
        font-size:14px;
    }
     .productoOkGenRela .product-name{
         font-size:14px;
     }

 .productoOkGen .details-buttonOkGen {
     padding:13px 80px;
    }

     .productoOkGenRela .details-buttonOkGen {
     padding:13px 80px;
    }
}

@media(max-width:390px){
 .productoOkGen .details-buttonOkGen {
     padding:13px 70px;
    }

     .productoOkGenRela .details-buttonOkGen {
     padding:13px 70px;
    }
}




@media(max-width:375px){
    .containerImgProductoGen{
        width:100%;
    }

    .btnCotizar{
        width:100%;
    }
}

@media(max-width:365px){
 .productoOkGen .details-buttonOkGen {
     padding:13px 60px;
    }

     .productoOkGenRela .details-buttonOkGen {
     padding:13px 60px;
    }
}

@media(max-width:345px){
 .productoOkGen .details-buttonOkGen {
     padding:13px 50px;
    }

     .productoOkGenRela .details-buttonOkGen {
     padding:13px 50px;
    }
}


/* Estilos específicos para mobile */
@media (max-width: 768px) {
    .mobile-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        padding-top: 0;
        padding-bottom: 0;
    }

    .cotizar-menuInside.expanded .mobile-body {
        max-height: 200px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .mobile-only {
        display: inline-block;
        margin-left: 8px;
        transition: transform 0.3s ease;
    }

    .cotizar-menuInside.expanded .mobile-only {
        transform: rotate(180deg);
    }

    .cotizar-menu {
        display: none;
    }

    .btnCotizar {
        display: flex !important;
    }
}

@media (min-width: 769px) {
    .btnCotizar {
        display: none !important;
    }

    .cotizar-menu {
        display: block;
    }

    .mobile-only {
        display: none !important;
    }
}

@media (max-width: 550px) {
    .btnCotizar{
        width:45%;
    }
    .cotizar-body a button{
        font-size:12px;
    }
}


@media (max-width: 520px) {
    .flexCategoriesProducts .productsCaj .flexTituloproducto{
        margin-top:10px;
    }
    .btnCotizar{
        width:70%;
        margin:auto;
        order:3;
    }
    .containerImgProductoGen{width:100%;}
    .cotizar-body a button{
        font-size:14px;
    }
}


@media (max-width:350px) {
    .btnCotizar{
        width:80%;
        margin:auto;
        order:3;
    }
    .cotizar-menuInside{
        margin-top:0px;
    }
}