.gallery-item {
    padding: 5px;
    transition: transform 0.2s ease-in-out;
}

.gallery-item:hover {
    transform: scale(1.05);
}

.gallery-item img {
    max-width: 100%;
    max-height: 200px;
    object-fit: cover;
}

    /* Imágenes alineadas */
.image.image-style-side {
    float: right;
    margin-left: 15px;
    max-width: 50%;
}

.image.image-style-align-left {
    float: left;
    margin-right: 15px;
}

.image.image-style-align-right {
    float: right;
    margin-left: 15px;
}

/* Columnas */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col {
    flex: 1;
    padding: 0 15px;
}

.post-content img {
    max-width: 100%; /* Ajusta la imagen al contenedor */
    height: auto; /* Mantiene la proporción */
    display: block;
    margin: 0 auto; /* Centra la imagen */
}
/* -------------------------------------- */
/* Contenedor de los productos */
#sidebar-productos {
position: fixed; /* Fijo a la izquierda o derecha de la pantalla */
top: 50%; /* Centrado verticalmente */
left: 0; /* Aparece en la parte izquierda de la página */
transform: translateY(-50%); /* Centrado en el eje vertical */
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px; /* Espacio entre los productos */
padding: 10px;
}
.no-cursor {
cursor: default;
}

/* Estilo para los productos */
.producto {
background: #fff; /* Fondo blanco */
border-radius: 10px; /* Bordes redondeados */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
overflow: hidden;
width: 200px; /* Ancho del cuadro */
position: relative;
padding: 10px;
opacity: 0;
animation: fadeInRight 0.5s ease-out forwards;
}

/* Animación para los productos */
@keyframes fadeInRight {
0% {
    opacity: 0;
    transform: translateX(100%);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}

/* Imagen del producto */
.producto-imagen {
width: 100%; /* Imagen ocupa todo el ancho del cuadro */
height: auto;
border-radius: 5px;
}

/* Información del producto */
.producto-info {
padding: 10px;
text-align: center;
}

.producto-info h4 {
font-size: 16px;
font-weight: bold;
margin-bottom: 5px;
color: #34495e; /* Color gris oscuro */
}

.producto-info p {
font-size: 14px;
margin-bottom: 10px;
color: #7f8c8d; /* Color gris suave */
}

/* Botones */
.comprar-btn,
.cerrar-btn {
padding: 8px 12px;
font-size: 14px;
background-color: #3498db; /* Color azul */
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

/* Botón comprar */
.comprar-btn:hover {
background-color: #2980b9; /* Azul más oscuro */
}

/* Botón cerrar */
.cerrar-btn {
background-color: #e74c3c; /* Color rojo */
}

.cerrar-btn:hover {
background-color: #c0392b; /* Rojo más oscuro */
}

/* Agregar estilo para cuando el producto está en la derecha */
.producto.right {
left: auto;
right: 0;
transform: translateY(-50%) translateX(100%);
animation: fadeInLeft 0.5s ease-out forwards;
}

/* Animación para los productos que entran desde la derecha */
@keyframes fadeInLeft {
0% {
    opacity: 0;
    transform: translateX(100%);
}
100% {
    opacity: 1;
    transform: translateX(0);
}
}

/* Estilos para la "X" de cierre */

.producto-contenedor {
    position: relative;
    padding: 10px;
    margin-bottom: 15px;
}

.producto-imagen {
    width: 80px; 
    height: 80px; 
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 5px;
    display: block; /* Hace que la imagen sea un bloque */
margin-left: auto; /* Centra la imagen horizontalmente */
margin-right: auto; /* Centra la imagen horizontalmente */
}

.producto-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.producto-info h4 {
    margin: 5px 0;
}

.comprar-btn {
    margin-top: 10px;
    padding: 5px 10px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

/* Estilo para el botón de cerrar (la X) */
.cerrar-x {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: #888;
    transition: color 0.2s;
}

.cerrar-x:hover {
    color: #f00;
}