/* Contenedor de la sección horizontal de destacados (Se mantiene) */
.destacados-horizontal {
    max-width: 1200px;
    margin: 20px auto;
    padding: 10px;
}

/* Contenedor de la fila horizontal con desplazamiento (Se mantiene) */
.destacados-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Permite el scroll horizontal */
    -webkit-overflow-scrolling: touch;
    padding-bottom: 15px;
    gap: 15px; /* Añadimos espacio entre tarjetas para consistencia */
}

    /* Estilos para las tarjetas: CAMBIAMOS A FORMATO VERTICAL */
    .destacados-row .card {
        border: none;
        border-radius: 0.3rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        /* CLAVE 1: Formato vertical */
        display: flex;
        flex-direction: column;
        /* CLAVE 2: Cálculo de ancho para que quepan 4 por fila con un pequeño margen */
        /* 100% / 4 = 25%. Restamos 20px para el margen y el scroll. */
        width: calc(25% - 15px);
        min-width: 250px; /* Ancho mínimo para que no se vean demasiado pequeñas */

        height: auto; /* La altura se ajusta al contenido */

        margin-right: 0; /* Eliminamos el margin-right que manejaremos con gap */
        flex: 0 0 auto; /* Permite el scroll horizontal */
        padding: 0;
    }

        /* Estilo para la imagen: Ahora ocupa todo el ancho de la tarjeta */
        .destacados-row .card .card-img-left {
            width: 100%; /* Ocupa todo el ancho */
            height: 180px; /* Altura fija para la imagen */
            object-fit: cover;
            /* Bordes superiores redondeados, inferiores rectos */
            border-radius: 0.3rem 0.3rem 0 0;
            /* Renombramos la clase a card-img-top para ser más estándar */
        }

        /* Estilos del contenido: Ajustamos el padding y layout */
        .destacados-row .card .card-body {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1; /* Para empujar el botón al fondo si hay poco contenido */
            padding: 1rem; /* Padding uniforme */
        }

        .destacados-row .card .card-title {
            font-size: 1.2rem;
            margin-bottom: 5px;
            line-height: 1.2;
        }

        .destacados-row .card .card-subtitle {
            font-size: 0.75rem;
            margin-bottom: 5px;
            text-transform: uppercase;
            color: #495057;
        }

        .destacados-row .card .card-text {
            font-size: 0.9rem;
            margin-top: 5px;
            margin-bottom: 10px;
            flex-grow: 1; /* Para ocupar el espacio si hay más de una línea */
        }

        /* Estilo para el botón (Azul) */
        .destacados-row .card .destacados-button {
            background-color: #0d6efd;
            color: #fff;
            padding: 8px 10px; /* Ajustamos el padding para hacerlo más grande */
            border: none;
            border-radius: 4px;
            font-size: 1rem; /* Botón más grande */
            transition: background-color 0.2s;
            text-align: center;
            width: 100%;
            margin-top: auto; /* CLAVE: Empuja el botón al final de la tarjeta */
        }

            .destacados-row .card .destacados-button:hover {
                background-color: #0b5ed7;
            }


/* Ajuste para pantallas más pequeñas (Mantenido) */
@media (max-width: 1024px) { /* Cambiamos el breakpoint a 1024px para mejor control */
    .destacados-row .card {
        width: calc(33.33% - 15px); /* 3 por fila */
    }
}

@media (max-width: 768px) {
    .destacados-horizontal {
        max-width: 95%;
        margin: 15px auto;
    }

    .destacados-row .card {
        width: calc(50% - 15px); /* 2 por fila */
    }
}

@media (max-width: 480px) {
    .destacados-row .card {
        width: 100%; /* 1 por fila */
    }
}