.productos-gallery {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 5px 0;
}

.title-prod {
    text-align: center;
    font-weight: bold;
    margin: 0;
    padding-top: 10px;
    font-size:medium;
    text-transform: uppercase;
}

.sub-title-prod {
    text-align: center;
    font-weight: 700;
    color: rgb(90, 90, 90);
    margin: 0;
    padding-top: 10px;
    font-size:small;
    text-transform:initial;
}

.párrafo-prod {
    text-align:initial;
    font-weight: 400;
    margin: 10px;
    padding-top: 0 8px;
    font-size: small;
}

.producto {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;    
    /* align-items: start; */
    margin-top: 40px;
}

.content-producto {
    width: 100%; 
    margin-right: 5px;   
    box-sizing: border-box;
    float: left;
    text-align: center;
    /* border-radius: 20px; */
    justify-content: center;    
    align-items:start;
    /* cursor: pointer; */
    /* padding-top: 10px; */
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22);
    transition: .4s;
    background: #f2f2f2;
}
.content-producto.original:hover {
    border-color: rgb(248, 3, 3);
    border: dotted 2px rgb(248, 3, 3);
    box-shadow: 2px 2px 2px rgb(248, 3, 3);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

#original-span{
    color:rgb(248, 3, 3);
}

.content-producto.fina:hover {
    border-color: rgb(248, 3, 3);
    border: dotted 2px rgb(199, 98, 3);
    box-shadow: 2px 2px 2px rgb(36, 115, 219);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

#fina-span{
    color: rgb(10, 77, 165);
}

.content-producto.ahumada:hover {
    border-color: rgb(10, 10, 10);
    border: dotted 2px rgb(10, 10, 10);
    box-shadow: 2px 2px 2px rgb(10, 10, 10);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

#ahumada-span{
    color:rgb(10, 10, 10);
}

.content-producto.pimientas:hover {
    border-color: rgb(10, 77, 165);
    border: dotted 2px rgb(10, 77, 165);
    box-shadow: 2px 2px 2px rgb(10, 77, 165);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

#pimientas-span{
    color:rgb(10, 77, 165);
}

.content-producto.suave:hover {
    border-color: rgb(36, 168, 3);
    border: dotted 2px rgb(36, 168, 3);
    box-shadow: 2px 2px 2px rgb(36, 168, 3);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

#suave-span{
    color: rgb(36, 168, 3)
}

.content-producto.especial:hover {
    border-color: rgb(199, 98, 3);
    border: dotted 2px rgb(199, 98, 3);
    box-shadow: 2px 2px 2px rgb(199, 98, 3);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

#especial-span{
    color: rgb(199, 98, 3);
}

#original-info{
    color:rgb(255, 255, 255);
}

#fina-info{
    color: rgb(255, 255, 255);
}

#ahumada-info{
    color:rgb(255, 255, 255);
}
#pimientas-info{
    color:rgb(255, 255, 255);
}

#suave-info{
    color: rgb(255, 255, 255)
}
#especial-info{
    color: rgb(255, 255, 255);
}

#marina-info{
    color: rgb(255, 255, 255);
}

.content-producto.marina:hover {
    border-color: #50988d;
    border: dotted 2px #50988d;
    box-shadow: 2px 2px 2px #50988d;
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

#marina-span{
    color: #50988d;
}

.marina:hover {
    border-color: #50988d;
    border: dotted 2px #50988d;
    box-shadow: 2px 2px 2px #50988d;
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}
.p-def-mar-esp{
    display: block;
    margin-bottom: 180px !important;
}
.btn-danger:hover {
    border-color: rgb(248, 3, 3);
    border: dotted 2px rgb(248, 3, 3);
    box-shadow: 2px 2px 2px rgb(248, 3, 3);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

.btn-warning:hover {
    border-color: rgb(248, 3, 3);
    border: dotted 2px rgb(199, 98, 3);
    box-shadow: 2px 2px 2px rgb(36, 115, 219);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

.btn-dark{
    z-index: 100;
    background-color: rgb(10, 10, 10);

}

.btn-dark:hover {
    border-color: rgb(10, 10, 10);
    border: dotted 2px rgb(255, 255, 255);
    box-shadow: 2px 2px 2px rgb(10, 10, 10);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

.btn-primary:hover {
    border-color: rgb(10, 77, 165);
    border: dotted 2px rgb(10, 77, 165);
    box-shadow: 2px 2px 2px rgb(10, 77, 165);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

.btn-success:hover {
    border-color: rgb(36, 168, 3);
    border: dotted 2px rgb(36, 168, 3);
    box-shadow: 2px 2px 2px rgb(36, 168, 3);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

.special:hover {
    border-color: rgb(199, 98, 3);
    border: dotted 2px rgb(199, 98, 3);
    box-shadow: 2px 2px 2px rgb(199, 98, 3);
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
    /* 0 3px 6px rgba(0, 0, 0, 0.23); */
    transform: translate(0px, -8px);
}

.img-producto{
    width: 100%;
    height: auto;
    text-align: left;
    margin: 0 auto;
    display: block;
    /* border-radius: 20px; */

}

.img-producto {
    /* filter: grayscale(100%); */
    transition: filter 0.3s ease-in-out; /* Transición suave para el filtro */
}

/* Cambia la imagen a color cuando se hace hover */
.img-producto:hover {
    filter: grayscale(0%);
}

/* ver mas productos */
.verMas{
    color: rgb(99, 99, 99);
    font-weight: 600;
    cursor: pointer;
}

.p-def{
    display: block;
    margin-bottom: 25px;
    color:rgb(56, 56, 56)
}

.p-def-esp{
    display: block;
    margin-bottom: 40px;
}

.text-hidden{
    color: rgb(82, 81, 81);
}


/* Estilos para pantallas más pequeñas (menos de 768px) */
@media screen and (max-width: 1000px) {
    .content-producto {
        width: 45%; /* Ajusta el ancho para mostrar dos imágenes por fila */
    }
    .productos-gallery {
        display: flex;
        flex-wrap: wrap;      
    }
    .img-producto{
        object-fit: cover;
    }

    .img-producto {
        /* filter: grayscale(100%); */
        transition: filter 0.3s ease-in-out; /* Transición suave para el filtro */
    }
    
    /* Cambia la imagen a color cuando se hace hover */
    .img-producto:hover {
        filter: grayscale(0%);
    }
    .content-producto {
        width: 100%; 
        margin-right: 5px;   
        box-sizing: border-box;
        float: left;
        text-align: center;
        /* border-radius: 20px; */
        justify-content: center;    
        align-items:start;
        /* cursor: pointer; */
        /* padding-top: 10px; */
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
        transition: .4s;
        background: #f2f2f2;
    }
    .content-producto.original:hover {
        border-color: rgb(248, 3, 3);
        border: dotted 2px rgb(248, 3, 3);
        box-shadow: 2px 2px 2px rgb(248, 3, 3);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    .content-producto.fina:hover {
        border-color: rgb(248, 3, 3);
        border: dotted 2px rgb(199, 98, 3);
        box-shadow: 2px 2px 2px rgb(36, 115, 219);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    .content-producto.ahumada:hover {
        border-color: rgb(10, 10, 10);
        border: dotted 2px rgb(10, 10, 10);
        box-shadow: 2px 2px 2px rgb(10, 10, 10);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    .content-producto.pimientas:hover {
        border-color: rgb(10, 77, 165);
        border: dotted 2px rgb(10, 77, 165);
        box-shadow: 2px 2px 2px rgb(10, 77, 165);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    .content-producto.suave:hover {
        border-color: rgb(36, 168, 3);
        border: dotted 2px rgb(36, 168, 3);
        box-shadow: 2px 2px 2px rgb(36, 168, 3);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    .content-producto.especial:hover {
        border-color: rgb(199, 98, 3);
        border: dotted 2px rgb(199, 98, 3);
        box-shadow: 2px 2px 2px rgb(199, 98, 3);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    
    
}

/* Estilos para pantallas aún más pequeñas (menos de 480px) */
@media screen and (max-width: 480px) {
    .content-producto {
        width: 90%; /* Muestra una imagen por fila */
    }
    .productos-gallery {
        display: flex;
        flex-wrap: wrap;      
    }
    .img-producto{
        object-fit: cover;
    }

    .img-producto {
        /* filter: grayscale(100%); */
        transition: filter 0.3s ease-in-out; /* Transición suave para el filtro */
    }
    
    /* Cambia la imagen a color cuando se hace hover */
    .img-producto:hover {
        filter: grayscale(0%);
    }
    .content-producto {
        width: 100%; 
        margin-right: 5px;   
        box-sizing: border-box;
        float: left;
        text-align: center;
        /* border-radius: 20px; */
        justify-content: center;    
        align-items:start;
        /* cursor: pointer; */
        /* padding-top: 10px; */
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
        0 10px 10px rgba(0, 0, 0, 0.22);
        transition: .4s;
        background: #f2f2f2;
    }
    .content-producto.original:hover {
        border-color: rgb(248, 3, 3);
        border: dotted 2px rgb(248, 3, 3);
        box-shadow: 2px 2px 2px rgb(248, 3, 3);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    .content-producto.fina:hover{
        border-color: rgb(248, 3, 3);
        border: dotted 2px rgb(199, 98, 3);
        box-shadow: 2px 2px 2px rgb(36, 115, 219);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    .content-producto.ahumada:hover {
        border-color: rgb(10, 10, 10);
        border: dotted 2px rgb(10, 10, 10);
        box-shadow: 2px 2px 2px rgb(10, 10, 10);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    .content-producto.pimientas:hover {
        border-color: rgb(10, 77, 165);
        border: dotted 2px rgb(10, 77, 165);
        box-shadow: 2px 2px 2px rgb(10, 77, 165);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    .content-producto.suave:hover {
        border-color: rgb(36, 168, 3);
        border: dotted 2px rgb(36, 168, 3);
        box-shadow: 2px 2px 2px rgb(36, 168, 3);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    .content-producto.especial:hover {
        border-color: rgb(199, 98, 3);
        border: dotted 2px rgb(199, 98, 3);
        box-shadow: 2px 2px 2px rgb(199, 98, 3);
        /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), */
        /* 0 3px 6px rgba(0, 0, 0, 0.23); */
        transform: translate(0px, -8px);
    }
    
    
    
}