/* 
<div id="resultsMiCarrusel">
    <div class="carta">
        <img src="url_de_la_imagen_1.jpg" alt="Descripción de la receta 1">
        <h4>Título de la Receta 1</h4>
        <p>Calorías: 200</p>
        <a href="url_de_la_receta_1" target="_blank">Ir a la receta</a>
    </div>
</div>
*/

#resultsMiCarrusel {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 10px;
    background-color: white; 
    border-radius: 8px; 
}

.carta {
    display: flex; /*nuevo*/
    flex-direction: column; /*nuevo*/
    justify-content: space-between; /*nuevo*/
    background-image: url(..//fotos/fondoparacartas.png);
    border-radius: 0px; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 15px; 
    text-align: center; 
    width: 40%; 
    margin: 20px;
    overflow: hidden;
    align-items: center;
    
}
.carta p{
    overflow-y: auto;
}
.carta:hover {
    transform: translateY(-15px);
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2); 
}

.carta img {
    max-width: 50%; 
    height: auto; 
    border-radius: 8px; 
}

.carta h4 {
    margin: 10px 0;
    font-size: 1em; 
    color: white;
    font-family: "Didot";
    letter-spacing: 0.3em;
    text-transform: uppercase;
    background-color: black;
}


.carta a {
    display: inline-block; 
    margin-top: 10px; 
    padding: 10px 15px; 
    background-color: black; 
    color: #dba634; 
    text-decoration: none; 
    border-radius: 5px; 
    width: 100%;
}

.carta a:hover {
    background-color: rgb(161, 38, 50); 
}

.botones {
    display: flex; /* nuevo */
    justify-content: space-between; /* nuevo */
    margin-top: 10px; /* nuevo */
    width: 100%;
}



.buttonFavorite {
    background-color: red;
    cursor: pointer; 
}