@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background-color: #1a1a2e;
    color: #e0e0e0;
    margin: 0;
    padding: 20px;
}
.container { max-width: 1000px; margin: 0 auto; }
.main-header { text-align: center; margin-bottom: 40px; }
.main-header h1 { font-size: 2.5em; color: #a259ff; }
.main-header p { font-size: 1.1em; color: #bdc3c7; }

.simulations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}
.simulation-card {
    background: #16213e;
    border: 2px solid #0f3460;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    text-decoration: none;
    color: #e0e0e0;
    transition: all 0.3s ease;
}
.simulation-card:hover {
    transform: translateY(-5px);
    border-color: #a259ff;
    box-shadow: 0 10px 20px rgba(162, 89, 255, 0.2);
}
.card-icon { font-size: 3em; }
.card-text h3 { margin: 0 0 5px; color: #e94560; }
.card-text p { margin: 0; font-size: 0.9em; }
.simulation-card.ransomware .card-text h3 { color: #e74c3c; } /* Estilo especial para WannaCry */

.final-test { margin-top: 40px; }
.quiz-button {
    display: block;
    background: linear-gradient(90deg, #e94560, #a259ff);
    color: white;
    text-decoration: none;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s ease;
}
.quiz-button:hover { transform: scale(1.02); }
.quiz-button h2 { margin: 0 0 10px; }
.quiz-button p { margin: 0; font-size: 1.1em; }