/* CSS PARA TARJETAS DE ANUNCIOS EN LA PATANLLA INICIO */
.anuncios-container {
    display: block; /* UNA SOLA COLUMNA HACIA ABAJO */
    padding: 10px;
}

.anuncio-card {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    padding: 12px;
    margin-bottom: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    /* EFECTO DE ESQUINA INFERIOR DERECHA */
    .anuncio-card::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        height: 0;
        /* Triángulo decorativo */
        border-bottom: 35px solid var(--colorTag, #007bff);
        border-left: 35px solid transparent;
        border-bottom-right-radius: 12px;
        opacity: 0.85;
    }

    .anuncio-card:hover {
        transform: scale(1.02);
        box-shadow: 0 6px 15px rgba(0,0,0,0.2);
    }

    .anuncio-card i {
        font-size: 28px;
        color: #007bff;
        transition: 0.3s;
    }

    .anuncio-card:hover i {
        color: #0056b3;
        transform: scale(1.2);
    }

/*====================================================== CSS PARA TARJETAS DE ANUNCIOS */