/* --- Estilos Generales --- */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
}
/* Contenedor para alinear los botones */
.button-group {
    display: flex;
    gap: 15px; /* Espacio entre botones */
    margin-top: 25px;
    flex-wrap: wrap; /* Para que en móviles se pongan uno abajo del otro */
}

/* Estilo base del botón (basado en el estilo de tu submit-btn) */
.btn-puea {
    display: inline-block;
    padding: 12px 24px;
    background-color: #0d1b4c; /* El azul oscuro de tus títulos */
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-align: center;
    border: none;
    cursor: pointer;
}

.btn-puea:hover {
    background-color: #1a2a6c; /* Azul un poco más claro al pasar el mouse */
    transform: translateY(-2px);
}

/* Estilo para el segundo botón (Horarios) */
.btn-secondary {
    background-color: #f1c40f; /* Un color dorado/amarillo para contrastar */
    color: #0d1b4c !important;
}

.btn-secondary:hover {
    background-color: #d4ac0d;
}

/* Ajuste para móviles */
@media (max-width: 600px) {
    .btn-puea {
        width: 100%; /* Botones de ancho completo en celular */
    }
}
/* Reduce el tamaño de fuente de todos los enlaces del menú */
.nav-menu li a {
    font-size: 14px; /* Ajusta este número (12px, 13px, etc.) hasta que se vea como deseas */
}

/* Opcional: Si quieres que los elementos del submenú sean aún más pequeños */
.dropdown-menu li a {
    font-size: 13px;
}
/* Estilos para el Contenedor de Contacto */
.contact-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-top: 30px;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Columnas */
.contact-info, .contact-form {
    flex: 1;
    min-width: 300px;
}

/* Directorio */
.directorio-item {
    margin-bottom: 25px;
    line-height: 1.6;
}

.directorio-item a {
    color: #003366; /* Azul UNAM */
    text-decoration: none;
}

/* Formulario */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.form-group input, 
.form-group select, 
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
}

.submit-btn {
    background-color: #d4af37; /* Dorado UNAM */
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s;
}

.submit-btn:hover {
    background-color: #b08d2b;
}

/* Mapa */
.map-section {
    margin-top: 50px;
}

.map-container {
    margin-top: 20px;
    border: 5px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Redes Sociales */
.social-icons-wrapper {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 20px 0;
}

.social-icon {
    padding: 10px 20px;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-instagram { background: #E1306C; }
.social-facebook { background: #4267B2; }
.social-linkedin { background: #0077b5; }
.social-tiktok { background: #000000; }
/* Estilos para el contenedor del botón (para alinearlo) */
.back-button-container {
    margin-bottom: 2rem;
    text-align: left; /* Alinea el botón a la izquierda (o usa center/right) */
    width: 90%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Estilos para el botón de regresar */
.back-btn {
    background-color: #f1f1f1; /* Gris claro */
    color: #34495e; /* Texto oscuro */
    border: 1px solid #bdc3c7;
    padding: 10px 15px;
    font-size: 1rem;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.back-btn:hover {
    background-color: #e0e0e0; /* Gris un poco más oscuro al pasar el ratón */
    color: #2c3e50;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* --- ESTILOS GENERALES Y LAYOUT PRINCIPAL --- */
.two-column-layout {
    /* 1. Activa el sistema Grid y define las columnas */
    display: grid;
    /* Crea dos columnas de igual ancho (1 fracción cada una) */
    grid-template-columns: 1fr 1fr; 
    
    /* Espacio entre las columnas */
    gap: 40px; 
    
    /* Configuración del contenedor principal (centrado y ancho) */
    width: 90%;
    max-width: 1200px;
    margin: 3rem auto;
    padding: 20px 0;
}

/* --- ESTILOS DEL TÍTULO Y DIVISOR (SPANNING) --- */
.main-section-title {
    /* Clave: Fuerza al título a abarcar todas las columnas (de la línea 1 a la última, -1) */
    grid-column: 1 / -1; 
    text-align: center;
    font-size: 2.5rem;
    color: #34495e; 
    margin-bottom: 10px;
}

.title-divider {
    /* Clave: Fuerza al divisor a abarcar todas las columnas */
    grid-column: 1 / -1; 
    border: 0;
    height: 3px; 
    background-color: #3498db; 
    width: 60%; 
    margin: 0 auto 30px auto; 
    border-radius: 2px;
}

/* --- ESTILOS DE LAS COLUMNAS --- */
.column-left,
.column-right {
    /* Se posicionan automáticamente debajo del título */
    padding: 20px;
    background-color: #f7f9fb;
    border-radius: 8px;
}

.column-right h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-top: 0;
}

/* --- ESTILOS DEL CONTENEDOR DE IMAGEN (PLACEHOLDER) --- */
.placeholder-box {
    height: 250px;
    width: 100%;
    background-color: #e6e9ee; 
    border: 1px dashed #c0c0c0; 
    border-radius: 8px;
    
    /* Centrado perfecto para el contenido (la imagen) */
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden; 
}

/* --- ESTILOS DE LA IMAGEN INSERTADA --- */
.inserted-image {
    max-width: 100%; 
    max-height: 100%; 
    object-fit: cover; /* Asegura que la imagen rellene el contenedor (ajusta a 'contain' si no quieres recorte) */
    border-radius: 5px; 
    display: block; 
}

/* --- RESPONSIVE: CÓMO SE VE EN MÓVILES Y TABLETAS --- */
@media (max-width: 768px) {
    .two-column-layout {
        /* Clave: Al alcanzar 768px o menos, cambia a una sola columna */
        grid-template-columns: 1fr; 
        gap: 20px; 
    }
    
    /* El título y el divisor ya están configurados para abarcar todo el ancho, por lo que no requieren cambios aquí. */
}
.back-btn i {
    margin-right: 8px; /* Espacio entre el ícono (si usas Font Awesome) y el texto */
}
/* --- Estilos del Contenedor General (Manteniendo el estilo anterior) --- */
.image-container {
    width: 50%;
    max-width: 600px;
    margin: 2rem auto;
    font-family: Arial, sans-serif;
    color: #333;
    padding: 20px 0;
}

.image-container h1 {
    text-align: center;
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.image-container .descripcion {
    text-align: center;
    font-size: 1.1rem;
    color: #7f8c8d;
    margin-bottom: 3rem;
}

/* --- Estilos de la Galería GRID (3 columnas) --- */
.gallery-grid-wrapper {
    /* 1. Usar display grid */
    display: grid;
    
    /* 2. Definir las 3 columnas */
    /* repeat(3, 1fr) crea 3 columnas con el mismo ancho */
    grid-template-columns: repeat(3, 1fr); 
    
    /* 3. Espacio entre las imágenes */
    gap: 20px; 
    
    margin-bottom: 40px;
}

.gallery-item {
    /* Asegura que la imagen ocupe todo el espacio de su celda */
    width: 100%; 
    /* Ajusta la altura de las imágenes para que tengan un aspecto uniforme */
    height: 250px; 
    /* Corta la imagen si es necesario para ajustarse a la altura */
    object-fit: cover; 
    
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* --- Estilos del Botón "Cargar Más" --- */
.gallery-load-more {
    text-align: center;
    padding-top: 20px;
}

.load-more-btn {
    display: inline-block;
    background-color: #3498db; /* Azul */
    color: #ffffff;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 50px; /* Estilo de botón pill */
    transition: background-color 0.3s ease;
}

.load-more-btn:hover {
    background-color: #2980b9; 
}

.load-more-btn i {
    margin-right: 8px;
}

.note-info {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #95a5a6;
}

/* --- Responsive: Diseño para dispositivos más pequeños --- */
@media (max-width: 768px) {
    .gallery-grid-wrapper {
        /* Cambiar a 2 columnas en tabletas */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 500px) {
    .gallery-grid-wrapper {
        /* Cambiar a 1 columna en móviles */
        grid-template-columns: 1fr;
    }
}
/* Estilos para el contenedor principal */
.image-container {
    width: 90%;
    max-width: 1000px; /* Ajusta el ancho máximo del contenido */
    margin: 2rem auto;
    font-family: Arial, sans-serif;
    color: #333;
    padding: 20px 0;
}

.image-container h1 {
    text-align: center;
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.image-container .descripcion {
    text-align: center;
    font-size: 1.1rem;
    color: #7f8c8d;
    margin-bottom: 3rem;
}

/* Estilos para la imagen y su contenedor */
.main-image-wrapper {
    /* El wrapper ayuda a gestionar el espacio alrededor de la imagen */
    text-align: center; 
}

.centered-main-image {
    max-width: 100%; /* Asegura que la imagen no se desborde en móviles */
    height: auto;    /* Mantiene la proporción */
    display: block;  /* Importante para eliminar espacios en línea */
    margin: 0 auto;  /* **Centra la imagen horizontalmente** */
    
    /* Estilos visuales opcionales */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); 
}
.map-container {
    height: 250px; /* Esta será la altura final visible */
    width: 100%;
}
.map-container iframe {
    height: 250px; 
    width: 100%;
}
/* --- Estilos para el Logo (Imagen) --- */
.nav-logo img {
  height: 60px; /* Ajusta esta altura como necesites */
  width: auto;  /* Mantiene la proporción de la imagen */
  display: block; /* Elimina cualquier espacio extra debajo de la imagen */
}
main {
  padding: 20px;
}

/* --- Estilos de la Barra de Navegación --- */
.navbar {
  background-color: #333;
  color: white;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.nav-logo {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
  text-decoration: none;
}

/* --- Estilos del Menú (para PC) --- */
.nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* Alinea los enlaces horizontalmente */
}

/* Margen derecho SÓLO a los elementos principales */
.nav-menu > li {
  margin-right: 20px;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
  display: block; /* Aseguramos que sea un bloque */
}

.nav-menu li a:hover {
  background-color: #575757;
}

/* --- Estilos para el Menú Desplegable (PC) --- */
.dropdown {
  position: relative; /* Necesario para posicionar el sub-menú */
}

.dropdown-menu {
  display: none; /* Oculto por defecto */
  position: absolute;
  top: 100%; /* Se posiciona justo debajo del enlace padre */
  left: 0;
  background-color: #555;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 250px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 1000;
}

/* Mostrar el sub-menú en PC al pasar el mouse */
.dropdown:hover .dropdown-menu {
  display: block;
}

/* Estilos de los enlaces del sub-menú (PC) */
.dropdown-menu li {
  margin: 0 !important; /* Sobreescribimos el margen */
}

.dropdown-menu li a {
  font-size: 11px; /* <-- Tu regla de tamaño para sub-menú */
  padding: 12px 15px;
  border-bottom: 1px solid #666;
  white-space: nowrap;
}

.dropdown-menu li:last-child a {
  border-bottom: none;
}

.dropdown-menu li a:hover {
  background-color: #777;
}

/* --- Ocultar el checkbox y el botón hamburguesa en PC --- */
.nav-toggle-checkbox {
  display: none;
}
.nav-toggle-label {
  display: none;
}


/* ================================================= */
/* --- ESTILOS RESPONSIVOS (para Móvil) --- */
/* ================================================= */
@media (max-width: 768px) {
  
  /* 1. Mostrar el botón hamburguesa */
  .nav-toggle-label {
    display: block;
    cursor: pointer;
  }
  .nav-toggle-label span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
  }

  /* 2. Ocultar el menú de PC y posicionarlo para móvil */
  .nav-menu {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #444;
    flex-direction: column; /* Apila los enlaces verticalmente */
    z-index: 100;
  }

  /* 3. La magia: Mostrar el menú cuando el checkbox está :checked */
  .nav-toggle-checkbox:checked ~ .nav-menu {
    display: flex;
  }

  /* 4. Estilos de items del menú en móvil */
  .nav-menu li {
    margin: 0;
    text-align: center;
  }

  .nav-menu li a {
    padding: 15px;
    border-bottom: 1px solid #555;
  }
  
  /* Tu regla de tamaño para el menú principal EN MÓVIL */
  .nav-menu > li > a {
    font-size: 10px;
  }

  /* 5. Ajustes para el Desplegable en Móvil */
  .dropdown {
    position: static; /* Quitar posicionamiento relativo */
  }

  /* Desactivar el hover en móvil */
  .dropdown:hover .dropdown-