.carousel {     /* Área total del carousel */
	margin: 0 auto;
	padding: 20px 0;
	width: 100%; /* Ancho total del carrusel */
	overflow: hidden;
	display: flex;

    &:hover .group {
		animation-play-state: paused;
    }

	> * {
		flex: 0 0 100%;	 /* Cada tarjeta ocupa el 100% del área visible del carrusel () )( __*/
    }
}

/* ... (tu código de .carousel y .group se mantiene igual) ... */

.card {
    display: flex;          /* Aseguramos que sea flex */
    flex-direction: row;    /* Foto a la izquierda, info a la derecha */
    gap: 20px;              /* Espacio entre foto e info */
    width: 100%;
    color: black;
    border-radius: 24px;
	
    box-shadow: rgba(0, 0, 0, 10%) 5px 5px 20px 0;
    padding: 20px;
	background-color: white;

    line-height: 1.1rem;
    
    /* Control de altura para evitar deformación */
    min-height: 150px;      
    height: 150px;          /* Altura fija para que todas sean iguales */
    box-sizing: border-box; /* Importante para que el padding no sume al tamaño */
    overflow: hidden;       /* Evita que el contenido se salga */
}

.card-photo {
    flex: 0 0 30%;         /* La foto ocupa el 30% del ancho y no se encoge */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

.card-photo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;   /* Mantiene la proporción del libro sin deformarlo */

	/* Estado inicial rotado */
    transform: rotate(-5deg); /* Rota 3 grados a la izquierda */

    /* Transición suave */
    /* Esto hace que cualquier cambio en 'transform' tome 0.3 segundos
       y tenga un efecto de aceleración/desaceleración (ease) */
    transition: transform 0.3s ease-in-out;

    /* Añadir una sombra ligera al libro para darle profundidad al rotar */
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

/* 2. AÑADE esta NUEVA regla para el HOVER */
/* Léase: "Cuando hago hover sobre .card, aplica esto a la img que está dentro de .card-photo" */
.card:hover .card-photo img {
    /* Vuelve a la posición original (0 grados) */
    transform: rotate(0deg) scale(1.05); /* Opcional: añadí un ligero zoom (scale) para mejor efecto */
}


.card-info {
    flex: 1;  /* La info ocupa el resto del espacio (70%) */
    display: flex;
    flex-direction: column; /* Título, autor y link uno sobre otro */
    justify-content: center;
    text-align: left;
}

.card-info h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    text-align: left;
    padding-bottom: 5px
}

.card-info p {
    margin: 0 0 15px 0;
    font-size: 1rem;
    opacity: 0.9;
}

.group {
	display: flex;
    gap: 20px;
    padding-right: 20px;

	will-change: transform;
	animation: scrolling 10s linear infinite;
}

@keyframes scrolling {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-100%);
	}
}