/* =============================================
   Clientes Actions — Grid CSS
   ============================================= */

.ca-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    width: 100%;
    padding: 20px 0;
}

/* Cada celda contiene la imagen actual y la siguiente apiladas */
.ca-grid__cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 95px;
    overflow: hidden;
}

.ca-grid__cell img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 95px;
    width: auto;
    max-width: 90%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.ca-grid__cell img.ca-active {
    opacity: 1;
}

/* Tablet: 4 columnas */
@media (max-width: 1024px) {
    .ca-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile: 2 columnas, 2 filas = 4 celdas visibles */
@media (max-width: 600px) {
    .ca-grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }
}