.contenedor-kits{
            position: relative;box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
        }
        .container-flex-kits-prod{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            padding: 10px 0px;
        }
        .container-kits-prod{
            padding: 10px 0px;
            line-height: 1.2;
        }
        .container-kits-prod h2{
            color: var(--color-secondary);
            font-size: 20px;
            padding-bottom:5px;

        }
        .container-kits-prod p{
            color: var(--color-secondary);
            font-weight: 400;
        }

        .container-kits-prod .description-kit p{
            font-weight: 400;
        }

        .description-kit{
          padding-top:15px;
          padding-bottom:20px;
        }

        .container-flex-kits-prod span{
            font-size: 12px;
            background-color: #F3F4F6;
            padding: 5px ;
            border-radius: 5px;
            color: var(--color-secondary);
            font-style: italic;
        }
        .flex-precio-kits{
            display: flex;
            align-items: center;
            justify-content: space-between;
           padding-bottom: 15px;
        }
        .flex-precio-kits p{
            font-style: italic;
        }
        .flex-precio-kits p:nth-child(1){
            color: var(--color-primary);
        }
        .flex-precio-kits p:nth-child(2){
            text-decoration: line-through;
            color: var(--color-secondary);
            font-weight: 500;
        }
        .img-kits-prod{
            margin-top: 20px ;
        }



/*DETALLE KITS PRODUCTOS*/
   .product-container {
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
            margin-bottom:80px;
            gap:25px;
        }

        .product-gallery {
            flex: 1;
            min-width: 300px;
            padding-right:25px;
            border-right: 1px solid var(--color-gray-light);
        }

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

        /*esto le agregamos es para el titulo*/
        .product-details h2{
            color: var(--color-primary);
            font-weight:600;
            font-size:35px;
        }

        .containerCodProd{
            display:flex;
            justify-content:start;
        }
        .product-details .button-marca-productos{
            border: none;
            padding: 6px 10px;
            border-radius: 5px;
            background-color: var(--color-primary);
            color: var(--color-white);
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .product-details .button-profesional{
            background-color: var(--color-secondary);
        }
        .product-details .cod-prod {
            color: var( --color-secondary);
            padding: 3px 5px;
            border-radius: 8px;
            margin:15px 0px;
            background-color:#fafafa;
            font-size:16px;
        }
        .product-details .cod-prod span{
            color: var( --color-primary);
        }
        .title-kit{
            color: var( --color-secondary);
            padding: 5px 0px;
            font-weight: 500;
            margin-top:5px;
        }
        .flex-kit-detalle{
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 10px 0px;
        }
        .kit-detalle-caracteristicas{
            display: flex;
            justify-content: space-between;
            gap: 10px;
            border: 1px solid var(--color-gray-light);
            padding: 6px 10px;
            border-radius: 10px;
            flex-wrap: wrap;
        }
        .kit-detalle-caracteristicas p:nth-child(1){
            color: var(--color-secondary);
            font-weight: 400;
        }
        .kit-detalle-caracteristicas p:nth-child(2){
            color: var(--color-secondary);
            font-weight: 400;
            text-decoration: line-through;
        }

        .kit-flex-dsc{
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 0px;
        }
        .kit-flex-dsc p{
            padding: 4px 15px;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 500;
            background-color: var(--color-primary-light);
    color: var(--color-primary);
        }
       .kit-flex-dsc .discount-badge {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.kit-flex-dsc .offer-badge {
    color: var(--color-white);
}

        .kit-flex-precio{
            display: flex;
            gap: 10px;
            align-items: center;
            padding: 10px 0px;
        }
        .kit-flex-precio{
            color: var(--color-secondary);
        }
        .kit-flex-precio p:nth-child(1){
            font-weight: 700;
        }
        .kit-flex-precio p:nth-child(2){
            text-decoration: line-through;
            font-weight: 400;
        }

        .container-flex-añadir-cart{
            display: flex;
            align-items: center;
            gap: 20px;
            margin-top: 20px;
            padding-bottom: 25px;
            border-bottom: 1px solid var(--color-gray-light);
            flex-wrap: wrap;
        }
        .cantidad input{
            border: none;
            text-align: center;
            width: 60px;
        }
        .cantidad button{
            width: 30px;
            height: 30px;
            background-color: var(--gris-claro);
            color: var(--color-secondary);
            border: none;
            border-radius: 5px;
            font-size: 20px;
            cursor: pointer;
        }
        .btn-carrito{
            background-color: var(--color-primary);
            border: none;
            padding: 8px 70px;
            border-radius: 20px;
            color: var(--color-white);
            font-size: 16px;
            cursor: pointer;
            transition: all ease .3s;
        }

        .btn-carrito:hover{
            background-color:var(--color-primary-hover);
        }


        .flex-container-metodo-pagos{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
        }
        .flex-container-metodo-pagos .metodo{
            border: 1px solid var(--color-secondary);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 8px 10px;
            border-radius: 10px;
            width: 200px;
        }
        .flex-container-metodo-pagos .metodo p{
            color: var(--color-secondary);
            font-weight: 400;
            font-size: 14px;
        }
        .flex-container-metodo-pagos .metodo i{
            font-size: 30px;
            color: var(--color-secondary);
        }
        .title-metodo-entrega{
            padding: 20px 0px;
            text-align: center;
            color: var(--color-secondary);
            font-weight: 600;
        }
        .main-image-container{
            display: flex;
            justify-content: center;
        }
          .main-image {
            max-width: 100%;
            object-fit: contain;
        }

        /*
        .flex-pestañas-prod{
            display: flex;
            align-items: center;
            gap: 5px;
            width: 100%;
        }
        .flex-pestañas-prod button{
            border: 2px solid var(--color-primary);
            background-color: var(--color-white);
            width: 16%;
            padding: 10px 10px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            cursor: pointer;
            transition: all ease .3s;
            font-weight: 600;
        }
        .flex-pestañas-prod button:hover{
            background-color: var(--color-primary);
            color: var(--color-white);
        }*/
        .flex-pestañas-prod {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    flex-wrap: wrap; /* permite que los botones bajen de línea */
}

.flex-pestañas-prod button {
    border: 2px solid var(--color-primary);
    background-color: var(--color-white);
    padding: 10px 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: pointer;
    transition: all ease .3s;
    font-weight: 600;
    font-size: 14px;
    color:var(--color-secondary);

    /* responsive: crece y se adapta en lugar de width fijo */
    flex: 1 1 calc(16% - 5px); /* 3 columnas en tablet */
    min-width: 120px;
}

.flex-pestañas-prod button:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.flex-pestañas-prod button.active {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.tab-panel {
    display: none;
}



.tab-panel.active {
    display: block;
}

.tab-panel ul li,.tab-panel ol li{
    margin-left:30px;
}

.tab-panel ul li{
    list-style: disc;
}
.tab-panel ol li{
    list-style: decimal;
}

.container-info-pestañas{
    margin: 10px 0px;
}

.container-flex-session{
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
    color: var(--color-secondary);
}
.container-flex-session a:not(:last-child)::after {
  content: "/";
  margin-left: 8px;
  color: var(--color-secondary);
  transition: all ease .3s;
}
.container-flex-session .session-avtiva{
    color: var(--color-primary);
}
.container-flex-session a:hover{
    color: var(--color-primary);
}


/*esto es para detalle producto*/
.position-relative{
    position: relative;
}

.position-relative .position-title-absolute{
    position: absolute;
    top: -22px;
     left: 50%;
    transform: translateX(-50%);
}

.position-relative .padding-detalle{
    margin-top: 20px;
}
.container-title-prod-detalle .subtitle{
        padding: 14px 30px;
        line-height: 1.1;
}

/**/


        .thumbnail-container {
            display: flex;
            align-items: center;
            position: relative;
            margin-top: 20px;
        }

        .thumbnails {
            display: flex;
            justify-content:center;
            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(--gris-claro);
            padding: 5px;
            flex-shrink: 0;
        }

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

        .thumbnail.active {
            border-color: var(--color-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;
        }



        /* Lightbox styles */
        .lightbox {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .lightbox.active {
            display: flex;
            opacity: 1;
        }

        .lightbox-content {
            position: relative;
            max-width: 90%;
            max-height: 90%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lightbox-img {
            max-width: 100%;
            max-height: 90vh;
            object-fit: contain;
            animation: lightboxFadeIn 0.3s;
        }

        @keyframes lightboxFadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }

        .lightbox-nav {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--color-white);
            color: var(--color-secondary);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1001;
            opacity: 0.8;
            transition: all 0.3s;
        }

        .lightbox-nav:hover {
            opacity: 1;
            background-color: var(--color-primary);
            color: var(--color-white);
        }

        .lightbox-nav.prev {
            left: 20px;
        }

        .lightbox-nav.next {
            right: 20px;
        }

        .lightbox-close {
            position: fixed;
            top: 20px;
            right: 20px;
            color: var(--color-white);
            font-size: 30px;
            cursor: pointer;
            z-index: 1001;
            opacity: 0.8;
            transition: opacity 0.3s;
        }

        .lightbox-close:hover {
            opacity: 1;
        }


        /**/
        .stock{
            color: var(--color-primary);
            font-weight: 600;
        }
        .stock::before {
        content: "";
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: var(--color-primary);
        border-radius: 50%;
        margin-right: 8px;
        }


         @media (max-width: 900px) {
            .product-gallery, .product-details {
                flex: 100%;
                border-right: none;
                /*border-bottom: 1px solid var(--color-secondary);*/
                padding-right:0px;
            }
            .whatsapp-button{margin-bottom:0px;}

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

            .product-container{
                margin-top:-40px;
            }

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

            .lightbox-nav {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }

            .lightbox-close {
                font-size: 25px;
            }
            .flex-pestañas-prod button{
                flex: 1 1 calc(33% - 5px);
            }


    .btn-carrito{
        width:100%;padding:15px 70px;
    }
        }







        /* ── Tablet (hasta 768px) ── */
@media (max-width: 768px) {
    .flex-pestañas-prod button {
        flex: 1 1 calc(50% - 5px); /* 2 columnas */
        font-size: 13px;
    }
    .flex-container-metodo-pagos .metodo{
            width: auto;
    }
    .flex-container-metodo-pagos .metodo i{
        font-size:20px;
    }
    .flex-container-metodo-pagos .metodo p{
        font-size:12px;
    }

    .kit-detalle-caracteristicas{
        font-size:15px;
    }

      .product-details h2{
        font-size:25px;
      }
}





@media (max-width: 550px) {
        .kit-detalle-caracteristicas{
         font-size:12px;
        }
}





/* ── Móvil (hasta 480px) ── */
@media (max-width: 480px) {
    .flex-pestañas-prod {
        gap: 4px;
    }

    .flex-pestañas-prod button {
       /* flex: 1 1 100%;*/ /* 1 columna, botón ancho completo */
        /*border-radius: 8px;*/ /* redondeo completo en móvil */
        font-size: 14px;
        padding: 12px 10px;
    }

    .flex-container-metodo-pagos{
        justify-content: space-around;
    }
    .flex-container-metodo-pagos .metodo{
       max-width:100px;
       text-align:center;
    }

     .flex-container-metodo-pagos .metodo i{
        font-size:18px;
    }
    .flex-container-metodo-pagos .metodo p{
        font-size:11px;
    }

}

@media (max-width: 350px) {
    .flex-container-metodo-pagos .metodo{
       max-width:90px;
    }

}