body{font-family:'Poppins',sans-serif;background-color:#f8f9fa;margin:0;padding:0;}
.section-title{text-align:center;font-size:2.5rem;font-weight:800;color:#111;margin:50px 0;position:relative;}
.section-title::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:50px;height:4px;background:#ff0000;}
.courses-grid{padding:40px 4% 80px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:30px;max-width:1200px;margin:0 auto;}
.course-card{position:relative;width:100%;aspect-ratio:1/1;border-radius:15px;overflow:hidden;background:#000;box-shadow:0 10px 30px rgba(0,0,0,0.15);cursor:pointer;}
.course-img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);opacity:0.7;}
.course-title-fixed{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:85%;text-align:center;color:#fff;font-size:1.6rem;font-weight:900;text-transform:uppercase;text-shadow:2px 2px 15px rgba(0,0,0,0.9);transition:all 0.5s ease;z-index:3;pointer-events:none;}
.course-card:hover .course-img{transform:scale(1.1);opacity:0.3;}
.course-card:hover .course-title-fixed{top:20%;font-size:1.2rem;}
.course-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to top,rgba(0,0,0,0.9) 40%,transparent);display:flex;flex-direction:column;justify-content:flex-end;padding:30px;opacity:0;transition:all 0.4s ease;z-index:2;}
.course-card:hover .course-overlay{opacity:1;}
.course-short-desc{color:#eee;font-size:0.9rem;margin-bottom:20px;text-align:center;line-height:1.5;height:4.5em;overflow:hidden;}
.price-btn{background:#ff0000;color:#fff;text-align:center;padding:12px;border-radius:8px;font-weight:700;text-decoration:none;font-size:0.95rem;transition:0.3s;border:2px solid #ff0000;}
.price-btn:hover{background:transparent;color:#fff;border-color:#fff;}
@media(max-width:480px){.courses-grid{grid-template-columns:1fr;}.course-title-fixed{font-size:1.3rem;}
}
.badge-nuevo {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #ff0000;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    z-index: 4; /* Para que quede por encima de la imagen y el overlay */
    box-shadow: 0 0 10px #ff0000;
    animation: brillo-rojo 1.2s infinite alternate;
    pointer-events: none;
}

@keyframes brillo-rojo {
    from { 
        box-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000; 
        transform: scale(1); 
    }
    to { 
        box-shadow: 0 0 15px #ff0000, 0 0 25px #ff4d4d; 
        transform: scale(1.08); 
    }
}