body { margin:0; font-family: 'Roboto', sans-serif; background:#0b0b0b; color:#fff; }
.hero { position:relative; height:80vh; display:flex; justify-content:center; align-items:center; text-align:center; overflow:hidden; }
.hero h1 { font-size:3rem; margin-bottom:15px; }
.hero p { font-size:1.3rem; margin-bottom:25px; }
.btn { padding:12px 25px; border-radius:12px; text-decoration:none; font-weight:bold; transition:0.3s; display:inline-block; margin:5px; }
.btn-primary { background:#00ffff; color:#000; }
.btn-primary:hover { background:#0ff; transform:scale(1.05); box-shadow:0 0 20px #0ff; }
.btn-secondary { background:#444; color:#fff; }
.btn-secondary:hover { background:#888; transform:scale(1.05); box-shadow:0 0 15px #fff; }

/* BLOQUES ANIMADOS */
.blocks { display:flex; justify-content:center; flex-wrap:wrap; gap:25px; margin:40px 0; }
.block { position:relative; text-align:center; background:#111; border-radius:20px; padding:25px; width:180px; transition: transform 0.3s, box-shadow 0.3s; }
.block img { width:100px; margin-bottom:15px; }
.block::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%); opacity:0; transition:0.4s; pointer-events:none; }
.block:hover::after { opacity:1; }
.block:hover { transform: scale(1.08) rotate(-1deg); box-shadow:0 0 35px #fff,0 0 50px #0ff; z-index:10; }

/* SECCIÓN CURSOS */
.section { padding:50px 20px; text-align:center; }
.course-cards { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.course-card { background:#111; border-radius:20px; width:250px; padding:20px; text-align:center; cursor:pointer; transition:0.3s; box-shadow:0 0 10px rgba(255,255,255,0.2); }
.course-card h3 { margin-bottom:10px; }
.course-card p { color:#ccc; margin-bottom:15px; }

/* MODAL */
.modal { display:none; position:fixed; z-index:100; left:0; top:0; width:100%; height:100%; overflow:auto; background: rgba(0,0,0,0.95); }
.modal-content { background:#222; margin:10% auto; padding:30px; border-radius:15px; width:90%; max-width:500px; text-align:center; color:#fff; position:relative; }
.modal-content .close { position:absolute; top:15px; right:20px; font-size:30px; cursor:pointer; }
.modal-content a.btn-primary { margin-top:20px; }

/* MINI-TEST */
.question { margin-bottom:20px; }
.question button { background:#222; color:#fff; font-weight:bold; border-radius:12px; padding:12px; margin:5px; transition:all 0.3s; position:relative; overflow:hidden; }
.question button::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background: radial-gradient(circle, #fff 0%, transparent 70%); opacity:0; transition:0.3s; }
.question button:hover::after { opacity:0.6; }
.question button:hover { transform:scale(1.05) rotate(-2deg); box-shadow:0 0 20px #0ff; }

/* FOOTER */
footer { background:#111; padding:25px; text-align:center; }
footer .socials img { width:30px; margin:0 10px; vertical-align:middle; }

/* RESPONSIVE */
@media(max-width:768px){ .blocks, .course-cards{ flex-direction:column; align-items:center; } }