/* 1. Reset básico para que todo se vea igual en todos los navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 2. Estilo Global (Fondo Negro y Texto Claro) */
body {
    background-color: #000000;
    color: #ffffff;
    line-height: 1.6;
}

/* 3. Header y Logo */
.main-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    background-color: #0a0a0a; /* Un negro ligeramente distinto para dar profundidad */
}

.logo {
    max-width: 250px; /* Ajusta el tamaño de tu logo aquí */
    height: auto;
    margin-bottom: 20px;
}

/* 4. Navegación */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 20px;
}

.main-nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: color 0.3s;
}

.main-nav a:hover {
    color: #00d4ff; /* Un azul brillante para el hover, puedes cambiarlo por el color de tu marca */
}

/* 5. Contenedor de Tarjetas (FLEXBOX) */
.cards-section {
    padding: 60px 20px;
    text-align: center;
}

.cards-container {
    display: flex;
    flex-wrap: wrap; /* Esto permite que las cartas bajen si no caben */
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
}

/* Estilo de cada Tarjeta */
.card {
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 30px;
    width: 280px; /* Ancho fijo para las cartas */
    transition: transform 0.3s, border-color 0.3s;
    background-image: url(Images/Icono_negro.png);
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: center;
}

.card:hover {
    transform: translateY(-10px);
    border-color: #00d4ff;
}

.card h3 {
    margin-bottom: 15px;
    color: #ffffff;
}

/* 6. Sección de Información */
.info-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 20px;
    text-align: center;
}

.divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #333, transparent);
    margin: 20px 0;
}

/* 7. RESPONSIVE (Para celulares) */
@media (max-width: 768px) {
    .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .cards-container {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 100%; /* Las cartas ocupan todo el ancho en celular */
        max-width: 350px;
    }
}

/* --- Estilos para Horarios e Imagen --- */
.schedule-hero {
    display: flex;
    flex-direction: column;
    align-items: center; /* Esto es lo que centra los elementos horizontalmente */
    text-align: center; /* Centra los textos de las descripciones */
    width: 100%;
}

.schedule-img {
    width: 100%;
    max-width: 900px;
    border-radius: 15px;
    margin: 20px 0;
    display: block;
}

.calendar-btn {
    display: inline-block;
    padding: 15px 30px;
    background-color: #00d4ff;
    color: black;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* --- Tarjetas de Maestras --- */
.teachers-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 40px 0;
}

.teacher-card {
    width: 250px;
    background: #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.teacher-header { padding: 10px; text-align: center; }
.teacher-img { width: 100%; height: 300px; object-fit: cover; }
.teacher-info {
    position: absolute;
    bottom: -100%;
    background: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: 0.4s;
    padding: 20px;
}

.teacher-card:hover .teacher-info, .teacher-card:focus .teacher-info {
    bottom: 0;
}

/* --- Flip Cards (Programa) --- */
.flip-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 40px 0;
}

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner, .flip-card:active .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    padding: 20px;
}

.flip-card-front { background-color: #1a1a1a; color: #00d4ff; border: 1px solid #333; }
.flip-card-back { background-color: #00d4ff; color: black; transform: rotateY(180deg); }

/* --- Reglas --- */
.rules-page {
    display: flex;
    flex-direction: column;
    align-items: center; /* Esto es lo que centra los elementos horizontalmente */
    text-align: center; /* Centra los textos de las descripciones */
    width: 100%;
}

.rules-list {
    text-align: left;
    max-width: 600px;
    margin: 40px auto;
}
.rules-list li { margin-bottom: 15px; border-bottom: 1px solid #333; padding-bottom: 5px; }