* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', sans-serif; background: #f0f2f5; color: #333; line-height: 1.6; }

/* Header */
.header { background: #004080; color: white; padding: 1rem 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; }
nav a { color: white; text-decoration: none; margin-left: 15px; font-weight: bold; font-size: 0.9rem; }
.menu-toggle { display: none; cursor: pointer; font-size: 1.5rem; }

/* Contenedores */
.container { max-width: 1000px; margin: 20px auto; padding: 25px; background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }

/* Carrusel */
.carrusel { position: relative; width: 100%; height: 400px; overflow: hidden; border-radius: 8px; margin: 20px 0; background: #000; }
.slide { width: 100%; height: 100%; object-fit: cover; display: none; position: absolute; top: 0; left: 0; }
.slide.active { display: block; animation: fade 0.5s; }
@keyframes fade { from {opacity: 0.5} to {opacity: 1} }
.controles { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); z-index: 10; padding: 0 15px; }
.prev, .next { background: rgba(0,0,0,0.5); color: white; padding: 10px; cursor: pointer; border-radius: 50%; }

/* Tablas */
.tabla-scroll { width: 100%; overflow-x: auto; border: 1px solid #ddd; border-radius: 4px; }
.tabla-horarios { width: 100%; border-collapse: collapse; min-width: 600px; }
.tabla-horarios th { background: #004080; color: white; padding: 12px; text-align: left; }
.tabla-horarios td { padding: 10px; border-bottom: 1px solid #eee; font-size: 0.9rem; }

/* UI Elements */
.tag { padding: 3px 6px; border-radius: 4px; color: white; font-size: 0.75rem; font-weight: bold; }
.edu { background: #2c3e50; } .idiom { background: #27ae60; } .cult { background: #8e44ad; }
.grid-destacados { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 25px; }
.card, .card-contacto { padding: 20px; border: 1px solid #eee; border-radius: 8px; text-align: center; }
.boton { display: inline-block; background: #004080; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px; margin-top: 10px; font-weight: bold; }

/* Responsive */
@media (max-width: 768px) {
    .menu-toggle { display: block; }
    nav { display: none; flex-direction: column; width: 100%; background: #003366; position: absolute; top: 100%; left: 0; }
    nav.active { display: flex; }
    nav a { padding: 15px; border-top: 1px solid #004080; margin: 0; text-align: center; }
    .carrusel { height: 250px; }
}
footer { text-align: center; padding: 20px; color: #666; font-size: 0.85rem; }

.categoria-titulo {
    background-color: #f8f9fa;
    color: #004080;
    padding: 10px;
    margin-top: 30px;
    /*border-left: 5px solid #004080;*/
    font-size: 1.2rem;
}