/*General*/
/* Estilos principales del slider */

.products-text-container{
    background-color: #000000ed;
    border-radius: 10px;
    padding: 1rem;
    color: #FFF;
}

.product-image-container {
    background-color: #ffffffeb;
}

.product-subtitle{
    font-size: 1.5rem;
}

.individual-product{
    background-color: #d6d4d4;
    color: #000;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra el contenido horizontalmente */
    justify-content: center; /* Centra el contenido verticalmente */
    text-align: center;
    height: 100%; /* Asegura que tome el alto completo */
}

.individual-product:hover {
    background-color: #0C4A86; /* Fondo oscuro */
    color: #fff; /* Texto claro */
  }

/*Dispositivos de escritorio*/
@media (min-width: 992px) {
    .products-body {
        height: 100vh; /* Ocupa toda la pantalla */
        display: flex;
        align-items: center; /* Asegura que el contenido esté alineado verticalmente */
        justify-content: center;
        overflow: auto; /* Evita que el contenedor padre sea scrolleable */
        padding:1rem;
    }

    .products-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        height: 100%; /* Ocupa toda la altura del contenedor padre */
        width: 100%; /* Mantiene el ancho completo */
    }

    .product-text-container, .product-image-container {
         /* Activa scroll solo si es necesario */
        padding: 10px;
    }

    .product-text {
        font-size: 0.8rem;
    }
    
}


/*Dispositivos móviles*/
@media (max-width: 990px){
    .products-body {
        display: flex;
        height: 93.3vh; /* Hace que el contenedor ocupe toda la altura de la pantalla */
        padding: 10px; /* Espaciado interno */
        overflow: auto;
      }
}


/* Scrollbar del texto (blanco) */
.products-text-container::-webkit-scrollbar {
    width: 0.4rem; /* Ancho del scrollbar */
}

.products-text-container::-webkit-scrollbar-track {
    background: #989898; /* Color de fondo del track */
    border-radius: 10px; /* Bordes redondeados */
}

.products-text-container::-webkit-scrollbar-thumb {
    background: #dbd7d7; /* Color del thumb */
    border-radius: 10px; /* Bordes redondeados */
}

.products-text-container::-webkit-scrollbar-thumb:hover {
    background: #fafafa; /* Cambio de color al pasar el mouse */
}

/* Scrollbar de la imagen (negro) */
.product-image-container::-webkit-scrollbar {
    width: 0.4rem;
}

.product-image-container::-webkit-scrollbar-track {
    background: #777777; 
    border-radius: 10px;
}

.product-image-container::-webkit-scrollbar-thumb {
    background: #393939; 
    border-radius: 10px;
}

.product-image-container::-webkit-scrollbar-thumb:hover {
    background: #000000; /* Cambio de color al pasar el mouse */
}