:root {
  --color-principal: var(--color-acento);
  --color-fondo-pagina: #f1f5f9;
  /* Gris suave */
  --color-tarjeta: #ffffff;
  /* Blanco */
  --color-texto-principal: #0f172a;
  /* Azul noche oscuro */
  --color-texto-secundario: #475569;
  /* Gris medio */
  --color-acento: #2563eb;
  /* Azul profesional para links/bordes */
  --color-menu: #1e293b;
  /* Oscuro para la barra superior */
  --fuente-base: 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sombra-tarjeta: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* Espaciado y Estructura */
  --ancho-contenedor: min(75rem, calc(100% - 2rem));
  /* ancho igual al valor mínimo entre 1200px (75rem) o el 100% del ancho disponible menos 2rem (32px).
  Esto último garantiza margen en pantallas pequeñas sin usar padding */
  --espaciado-base: 1rem;
  /* Sombras */
  --sombra-caja: 0 4px 4px hsl(0 0% 0% / 25%);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--fuente-base);
  background-color: var(--color-fondo-pagina);
  color: var(--color-texto-principal);
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

main {
  max-width: 1200px;
  margin-inline: auto;
  padding: 0 20px 20px 20px;
}

img {
  /* medirán, como máximo, el tamaño
       del bloque html que las contiene */
  max-width: 100%;
  height: auto;
}

a {
  /* no estarán subrayados */
  text-decoration: none;
  /* serán de un color diferente */
  color: var(--color-principal);
  /* negrita */
  font-weight: bold;
}

/* TODAS las figuras (imágenes, videos, etc. que acompañan textos) */
figure {
  margin: 0;
  /* elimina margen predeterminado */
}


/* ==========================================
   Header y menú de navegación
   ========================================== */
.main-header {
  background-color: var(--color-menu);
  padding: 12px 24px;
  display: block;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 30px;
}

/* Contenedor principal del Header */
.main-header .contenedor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-shadow: none;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
  box-sizing: border-box;
}

.main-header .menu ul {
  display: flex;
  flex-wrap: wrap;
  /* EVITA QUE SE SALGAN DE LA PANTALLA: acomoda los botones si falta espacio */
  justify-content: center;
  /* Mantiene la alineación a la derecha */
  align-items: center;
  gap: 0.5rem 1rem;
  /* Espaciado vertical y horizontal flexible */
  list-style: none;
  padding: 0;
  margin: 0;
}

#logo {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-header .menu li {
  margin: 0;
  /* Limpia márgenes fijos antiguos */
}

/* Estilo flexible para los botones/enlaces */
.main-header .menu a {
  background-color: var(--color-texto-principal);
  display: inline-block;
  white-space: nowrap;
  /* Evita que el texto de un botón individual se parta en dos líneas */
  padding: 0.5rem 0.8rem;
  font-size: clamp(0.875rem, 2vw, 1rem);
  /* Escala suavemente el texto según el zoom/pantalla */
  text-decoration: none;
}

.menu ul {
  display: flex;
  gap: 15px;
  list-style: none;
  justify-content: center;
}

.menu a {
  color: #f8fafc;
  text-decoration: none;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.menu a:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

/* ==========================================
   Sección presentación
   ========================================== */
.presentacion {
  display: flex;
  background-color: var(--color-tarjeta);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: var(--sombra-tarjeta);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
  margin-bottom: 30px;
  border-left: 6px solid var(--color-acento);
  margin-inline: auto;
  width: 100%;
  /* Evita que la tarjeta desborde */
  box-sizing: border-box;
  /* Incluye el padding en el ancho total */
}

.presentacion img {
  max-width: 100%;
  /* Impide que la imagen sea más ancha que la pantalla */
  width: 460px;
  /* Tamaño base deseado */
  border-radius: 50%;
  object-fit: cover;
  /* Evita que la foto se deforme o estire */
  border: 4px solid var(--color-acento);
  box-shadow: var(--sombra-caja, 0 4px 6px rgba(0, 0, 0, 0.1));
}

.presentacion h1 {
  font-size: 1.8rem;
  color: var(--color-texto-principal);
}

.presentacion p {
  max-width: 650px;
  color: var(--color-texto-secundario);
}

/* ==========================================
   Sección materias
   ========================================== */
.materias {
  margin-bottom: 30px;
}

.materias h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 2px solid #cbd5e1;
}

.materias h3 {
  color: var(--color-acento);
  font-size: 1.1rem;
  margin-top: 20px;
  margin-bottom: 10px;
}

.materias ul {
  background-color: var(--color-tarjeta);
  padding: 20px 20px 20px 35px;
  border-radius: 8px;
  box-shadow: var(--sombra-tarjeta);
  margin-bottom: 15px;
}

.materias li {
  margin-bottom: 6px;
  color: var(--color-texto-secundario);
}

/* ==========================================
   Equipo y datos de cátedra
   ========================================== */
.resto-equipo,
.datos-docentes {
  background-color: var(--color-tarjeta);
  padding: 25px;
  border-radius: 10px;
  box-shadow: var(--sombra-tarjeta);
  margin-bottom: 25px;
}

.resto-equipo ul {
  list-style: none;
  display: grid;
  gap: 15px;
}

.resto-equipo ul li {
  align-items: center;
}

.resto-equipo ul figure {
  margin: 0;
}

.resto-equipo img {
  max-width: 100%;
  width: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--color-acento);
  box-shadow: var(--sombra-caja, 0 4px 6px rgba(0, 0, 0, 0.1));
}

.resto-equipo h2,
.datos-docentes h2 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: var(--color-texto-principal);
}

.resto-equipo ul {
  list-style: none;
  display: grid;
  gap: 15px;
}

.resto-equipo a {
  display: inline-block;
  background-color: #e2e8f0;
  color: var(--color-texto-principal);
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

.resto-equipo a:hover {
  background-color: var(--color-acento);
  color: #ffffff;
}

.datos-docentes p {
  margin-bottom: 8px;
  color: var(--color-texto-secundario);
}

.datos-docentes strong {
  color: var(--color-texto-principal);
}

footer {
  padding: 20px;
  background-color: var(--color-menu);
  color: var(--color-tarjeta);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  margin-top: 30px;
  width: 100%;
}

footer p {
  max-width: 900px;
  margin-inline: auto;
  line-height: 1.5;
}