/* ================================================== */
/* ESTILO PROFESIONAL PARA EL BOTÓN "VER RECETA"      */
/* ================================================== */

/* Apuntamos de forma más específica al botón dentro de la tarjeta */
.receta-card .receta-card__footer a.receta-card__button {
    /* --- Apariencia de Botón --- */
    display: inline-block;
    /* Fundamental para que se comporte como un bloque */
    padding: 12px 28px;
    /* Espaciado interno generoso */
    border-radius: 50px;
    /* Bordes completamente redondeados para un look moderno */
    text-decoration: none;
    /* Quita el subrayado del enlace */
    font-weight: bold;
    /* Texto en negrita para mayor legibilidad */
    text-align: center;
    border: 2px solid transparent;
    /* Borde transparente para una transición suave */

    /* --- Colores y Transiciones --- */
    background-color: #c75b27;
    /* Un color terracota, inspirado en el fogón */
    color: #ffffff;
    /* Texto blanco */
    transition: all 0.3s ease;
    /* Animación suave para todos los cambios */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Sombra sutil */
}

/* --- Efecto al pasar el cursor (Hover) --- */
.receta-card .receta-card__footer a.receta-card__button:hover {
    background-color: #ffffff;
    /* Fondo cambia a blanco */
    color: #c75b27;
    /* Texto cambia al color terracota */
    border: 2px solid #c75b27;
    /* Aparece un borde del mismo color */
    transform: translateY(-3px);
    /* Eleva ligeramente el botón */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    /* Sombra más pronunciada */
}

/* --- Efecto al hacer clic (Active) --- */
.receta-card .receta-card__footer a.receta-card__button:active {
    transform: translateY(0);
    /* Vuelve a su posición original al hacer clic */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Sombra vuelve a la normalidad */
}