/* ==========================================
   VARIABLES GLOBALES Y RESET
   ========================================== */
:root {
  /* Paleta de colores principal */
  --color-principal: #1a365d;
  /* Azul oscuro */
  --color-secundario: #2b6cb0;
  /* Azul medio */
  --color-acento: #f56f3d;
  /* Naranja / Coral */
  --color-fondo: #f5f0ea;
  /* Crema de fondo */
  --color-blanco: #fffbf6;
  --color-texto-oscuro: #1a1a1a;

  /* Tipografía y maquetación */
  --fuente-base: Arial, sans-serif;
  --altura-linea-textos: 1.6;
  --altura-linea-titulos: 1.1;
  --ancho-contenedor: min(75rem, calc(100% - 2rem));
  --espaciado-base: 1rem;
  --sombra-caja: 0 4px 6px rgba(0, 0, 0, 0.15);
}

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

html {
  scrollbar-gutter: stable;
}

body {
  font-family: var(--fuente-base);
  color: var(--color-texto-oscuro);
  background-color: var(--color-fondo);
  line-height: var(--altura-linea-textos);
  text-wrap: pretty;
  margin: 0;
  padding: 0;
}

main {
  max-width: 1200px;
  margin-inline: auto;
  padding: 20px 1rem;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
a {
  /* tipografía diferente a los otros elementos html */
  font-family: var(--fuente-titulos);
  /* líneas de texto balanceadas */
  text-wrap: balance;
  /* altura de línea reducida */
  line-height: var(--altura-linea-titulos);
}

h1,
h2,
h3,
h4 {
  /* títulos más oscuros que los otros textos */
  color: var(--color-texto-oscuro);
}

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

a {
  text-decoration: none;
  color: var(--color-principal);
  font-weight: bold;
}

/* Oculta el elemento en pantalla pero lo mantiene accesible para lectores de pantalla y SEO */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

figure {
  margin: 0;
}

/* ==========================================
   ENCABEZADO Y CONTENEDOR (HEADER)
   ========================================== */
.main-header {
  background-color: var(--color-secundario);
}

.main-header .contenedor {
  background-color: transparent;
  border-bottom: none;
  border-radius: 0;
  position: static;
  padding: 15px var(--espaciado-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 1200px;
  margin-inline: auto;
  box-shadow: none;
}

#logo {
  width: 140px;
  background-color: var(--color-blanco);
  border-radius: var(--borde-redondeado, 8px);
  padding: 0.5rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

#logo a {
  display: block;
  /* Asegura que el enlace ocupe todo el espacio de la imagen */
  line-height: 0;
  /* Elimina espacios no deseados debajo de la imagen */
}

#logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

.menu ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* Evita que se rompa en pantallas pequeñas */
  gap: 15px;
  list-style: none;
}

.menu li {
  transition: transform 0.2s ease;
}

.menu li a {
  background-color: #535353;
  color: var(--color-blanco);
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 20px;
  display: block;
  transition: background-color 0.2s ease, filter 0.2s ease;
}

/* Primer enlace del menú destacado */
.menu li:first-child a {
  background-color: var(--color-acento);
}

.menu li:hover {
  transform: translateY(-3px);
}

.menu li a:hover {
  background-color: var(--color-acento);
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25));
}

/* ==========================================
   SECCIONES GENERALES Y TITULARES
   ========================================== */
section {
  padding-block: calc(var(--espaciado-base) * 2);
}

section h1,
section h2 {
  border-block-end: 4px solid var(--color-secundario);
  background-color: rgba(43, 108, 176, 0.15);
  padding: var(--espaciado-base);
  margin-block-end: var(--espaciado-base);
  border-radius: 4px;
}

.comitente article>*:not(h2) {
  font-size: 1.1em;
  margin-block-end: 0.8em;
}

/* ==========================================
   SECCIÓN COMITENTE (PRESENTACIÓN PROYECTO)
   ========================================== */
.comitente {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centra horizontalmente poster, títulos y texto */
  text-align: center;
  /* Centra el texto de párrafos y encabezados */
  max-width: 900px;
  /* Evita que los párrafos se estiren demasiado a lo ancho */
  margin-inline: auto;
  /* Centra todo el bloque en la página */
  padding-inline: 1rem;
}

/* Ajustes del contenido interno de comitente */
.comitente article {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.comitente figure {
  margin-block-end: 1.5rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

.comitente img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--sombra-caja, 0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Titular h2 con estética .contenedor (barra azul con borde negro) */
.comitente h2 {
  width: 100%;
  text-align: center;
  background-color: var(--color-secundario, #0f67ed);
  padding: 15px 1rem;
  margin-block-end: 1.5rem;
  border-bottom: 5px solid #000000;
  border-radius: 8px;
  box-shadow: var(--sombra-caja, 0 4px 6px rgba(0, 0, 0, 0.15));
}

/* Caja/Tarjeta enmarcada para h3 y p */
.comitente .tarjeta-info {
  background-color: rgba(43, 108, 176, 0.1);
  border: 2px solid var(--color-secundario, #0f67ed);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: var(--sombra-caja, 0 4px 6px rgba(0, 0, 0, 0.1));
  text-align: center;
  width: 100%;
}

.comitente h3 {
  color: var(--color-principal, #1a365d);
  font-size: 1.25rem;
  margin-block-end: 1rem;
}

.comitente p {
  line-height: var(--altura-linea-textos, 1.6);
  color: var(--color-texto-oscuro, #1a1a1a);
  text-align: left;
  margin: 0;
  hyphens: auto;
}

/* Bloque azul contenedor del título y subtítulo del comitente */
.comitente .titulo-comitente {
  color: var(--color-blanco);
  width: 100%;
  text-align: center;
  background-color: var(--color-secundario, #0f67ed);
  padding: 1.25rem 1rem;
  margin-block-end: 1.5rem;
  border-bottom: 5px solid #000000;
  border-radius: 8px;
  box-shadow: var(--sombra-caja, 0 4px 6px rgba(0, 0, 0, 0.15));
}

/* Reset y jerarquía de texto interno (h1 principal) */
.comitente .titulo-comitente h1,
.comitente .titulo-comitente h2 {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--color-blanco);
  font-size: 1.6rem;
  line-height: 1.2;
}

/* Subtítulo institucional (ONU) */
.comitente .titulo-comitente .subtitulo,
.comitente .titulo-comitente .onu,
.comitente .titulo-comitente p {
  color: var(--color-blanco);
  text-align: center;
  margin: 0;
  margin-block-start: 0.45rem;
  font-size: 1.05rem;
  font-weight: 500;
  opacity: 0.95;
}

/* ==========================================
   SECCIÓN EQUIPO
   ========================================== */
.equipo div {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
  /* Centra las tarjetas si la pantalla es muy ancha */
}

.equipo .rotulo-individual {
  background-color: rgba(43, 108, 176, 0.1);
  padding: var(--espaciado-base);
  border-radius: calc(var(--espaciado-base) / 2);
  flex: 1 1 250px;
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centra la foto, textos y botón verticalmente */
  text-align: center;
}

.equipo .rotulo-individual a {
  margin-top: auto;
  /* Empuja el botón "Ver perfil" al fondo para que queden alineados a la misma altura */
}

.equipo img {
  border: solid 0.3em var(--color-secundario);
  box-shadow: var(--sombra-caja);
  width: 8em;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
  margin-block-end: 0.5rem;
}

.equipo a,
.datos-academicos a {
  display: inline-block;
  margin-block-start: 0.5rem;
  background-color: rgba(43, 108, 176, 0.15);
  border-radius: 4px;
  padding: 6px 12px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.equipo a:hover,
.datos-academicos a:hover {
  color: var(--color-blanco);
  background-color: var(--color-secundario);
}

/* ==========================================
   SECCIÓN DATOS ACADÉMICOS
   ========================================== */

.datos-academicos {
  flex-direction: column;
  align-items: center;
  /* Centra los títulos y tarjetas horizontalmente */
  margin-inline: auto;
}

/* Contenedor flexible para los 3 artículos */
.datos-academicos-contenedor,
.datos-academicos {
  width: 100%;
}

/* Si tienes un contenedor wrapper rodeando los article o si están directos en section */
.datos-academicos {
  text-align: center;
}

/* Layout de las 3 tarjetas alineadas y centradas */
.datos-academicos article {
  background-color: #ffffff;
  padding: var(--espaciado-base, 1.5rem);
  margin-block-end: 1.5rem;
  border-radius: 8px;
  box-shadow: var(--sombra-caja, 0 4px 6px rgba(0, 0, 0, 0.1));
  border: 1px solid rgba(0, 0, 0, 0.08);

  /* Ancho para centrar */
  width: 100%;
  max-width: 800px;
  /* Controla el ancho de las tarjetas para que no se desparramen */
  margin-inline: auto;
  /* Centra cada tarjeta en el eje horizontal */
  text-align: center;
  /* Centra los contenidos internos (títulos, listas, botones) */
}

.datos-academicos ul,
.datos-academicos dl {
  margin-block: 0.5rem;
}

.datos-academicos li,
.datos-academicos dl div {
  margin-block-end: 0.25rem;
}

.datos-academicos dt {
  display: inline;
  font-weight: bold;
  color: var(--color-texto-oscuro, #1a1a1a);
}

.datos-academicos dd {
  display: inline;
  margin: 0;
}

/* Resalta automáticamente el rol en negrita antes del texto */
.datos-academicos li[data-label]::before {
  content: attr(data-label) " ";
  font-weight: bold;
  color: var(--color-texto-oscuro, #1a1a1a);
}

.datos-academicos .boton-sitio {
  display: inline-block;
  margin-block-start: 0.5rem;
}

/* ==========================================
   FOOTER Y ACCESIBILIDAD
   ========================================== */
footer {
  background-color: var(--color-principal);
  color: var(--color-blanco);
  padding-block: var(--espaciado-base);
  text-align: center;
  padding-inline: 1.5rem;
  width: 100%;
  margin-top: 30px;
}

.catedra-footer {
  margin-bottom: 1rem;
}

.legal-footer {
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
  max-width: 900px;
  margin-inline: auto;
}

/* ==========================================
   SECCIÓN MAPA DE SITIO (CENTRADOS)
   ========================================== */
.mapa-sitio,
main section {
  display: flex;
  flex-direction: column;
  text-align: center;
  /* Centra los textos internos */
  margin-inline: auto;
  /* Centra todo el bloque en la página web */
  padding-inline: 1rem;
}

/* Título h2 centrado estilo barra */
.mapa-sitio h2,
main section h2 {
  width: 100%;
  text-align: center;
}

/* Figura contenedora del diagrama/imagen */
.mapa-sitio figure,
main section figure {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-block-start: 1.5rem;
}

/* Imagen responsiva centrada */
.mapa-sitio img,
main section figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--sombra-caja, 0 4px 6px rgba(0, 0, 0, 0.1));
}