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

/* Paleta de diseño unificada */
:root {
  --color-principal: #3498db;
  --color-secundario: #e91e63;
  --fondo: #f5f5f5;
  --texto: #333333;

  /* Colores maderosos/marrones de la barra */
  --marron-fondo: #6e3c15;
  --marron-boton: #8c5222;
  --marron-hover: #a3612b;

  /* HSL y Tipografías */
  --color-principal-hsl: hsl(30 92% 36%); 
  --color-secundario-hsl: hsl(15 29% 44%);
  --color-texto-oscuro: hsl(0 0% 10%);
  --color-texto-medio: hsl(0 0% 25%);
  --color-claro: whitesmoke;

  --fuente-principal: 'Roboto', sans-serif;
  --fuente-titulos: system-ui, sans-serif;
  --altura-linea-textos: 1.6;
  --altura-linea-titulos: 1.1;

  --ancho-contenedor: min(75rem, calc(100% - 2rem));
  --espaciado-base: 1rem;
}

/* Estilos generales */
body {
  font-family: var(--fuente-principal);
  background-color: var(--fondo);
  color: var(--texto);
  line-height: var(--altura-linea-textos);
}



/* Componentes */
.card {
  background: #efddcb; 
  border-radius: 8px; 
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 16px;
}

/* Estados e interacciones */
.boton:hover {
  background-color: var(--color-secundario);
  color: #ffffff;
  transform: translateY(-2px);
}

/* ==========================================
   NAVEGACIÓN SUPERIOR CON BARRA MARRÓN
   ========================================== */

/* Contenedor principal de la barra que ocupa el 100% */
nav.navegacion-superior {
  background-color: var(--marron-fondo); /* Fondo marrón oscuro */
  padding: 25px 20px;
  width: 100%;
  text-align: center;
}

/* Lista horizontal de botones */
.navegacion-superior ul {
  list-style: none; /* Quita los puntos de la lista */
  padding: 0;
  margin: 0;
  display: flex; /* Alinea los botones horizontalmente */
  gap: 15px; /* Espaciado entre botones */
  justify-content: center; /* Centra el menú */
  flex-wrap: wrap;
}

/* Estilo de los botones en forma de pastilla */
.navegacion-superior a {
  display: inline-block;
  padding: 10px 24px;
  background-color: var(--marron-boton); /* Botón marrón claro */
  color: #ffffff; /* Texto blanco en negrita */
  text-decoration: none; /* Quita el subrayado */
  font-weight: 700;
  font-family: var(--fuente-principal);
  font-size: 0.95rem;
  border-radius: 25px; /* Bordes totalmente redondeados */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

/* Efecto al pasar el mouse por arriba (Hover) */
.navegacion-superior a:hover {
  background-color: var(--marron-hover); /* Se aclara ligeramente */
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Estado del botón activo o seleccionado */
.navegacion-superior a.activo {
  background-color: var(--marron-hover);
}

/* equipo, EL PADRE: Define la grilla de 3 columnas */
.comitente {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 1200px;
  margin: 3rem auto;
  margin-left: 3rem;
  margin-left: 3rem; /* Aumenta la distancia entre columnas */
  column-gap: 3rem; /* División de columnas */
  row-gap: 2rem;    /* Distancia vertical si hay más de 2 elementos */
  list-style: none; /* Quita los puntos de la lista */
} 

/* LOS HIJOS: proyecto dirigido a */
.accion {
  border: 2px solid #ffffff;
  padding: 1rem;
  background: #f9e4c4d6;
  border-radius: 5px;
  max-width: 340px;
  width: 100%;
  gap: 2rem; /* Espacio entre columnas */ 
  text-align: center;
}

/* equipo, EL PADRE: Define la grilla de 2 columnas */
.grupo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 550px;
  margin: 3rem auto;
  margin-left: 3rem;
  margin-left: 3rem; /* Aumenta la distancia entre columnas */
  column-gap: 3rem; /* División de columnas */
  row-gap: 2rem;    /* Distancia vertical si hay más de 2 elementos */
} 

/* equipo: Regla para que el título ocupe todo el ancho de la grilla */
.titulo {
  grid-column: 1 / -1; /* Se estira desde la columna 1 hasta la última */
  margin-bottom: 0.5rem;
  text-align: 4rem;    /* Asegura la alineación con el borde izquierdo del primer bloque */
}

/* LOS HIJOS: Estilo de cada rótulo individual */
.alumna {
  border: 2px solid #ffffff;
  padding: 1rem;
  background: #fcefd0ce;
  max-width: 1200px;
  width: 100%;
  gap: 4rem; /* Espacio entre columnas */ 
  list-style: none; /* Quita los puntos de la lista */
  text-align: center; 
}

/* DATOS ACADEMICOS, EL PADRE: Define la grilla de 4 columnas */
.datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 900px;
  margin: 1rem auto; 
  column-gap: 3rem; 
  row-gap: 2rem;    /* Distancia vertical si hay más de 4 elementos */
} 

/* Regla para que el título ocupe todo el ancho de la grilla */
.titulo {
  grid-column: 1 / -1; /* Se estira desde la columna 1 hasta la última */
  margin-bottom: 0.5rem;
  text-align: left;    /* Asegura la alineación con el borde izquierdo del primer bloque */
}

/* LOS HIJOS: Estilo de cada tarjeta individual */
.legal {
  border: 2px solid #ffffff;
  padding: 1rem;
  border-radius: 4px;
  background: #f7e0b2dc;
  color: #000000; 
  max-width: 460px;
  width: 100%;
  gap: 2rem; /* Espacio entre columnas */  
}
/* ==========================================
   ESTILOS GENERALES Y CONTENEDOR PRINCIPAL
   ========================================== */

main {
  width: var(--ancho-contenedor); /* Usa el ancho máximo definido */
  margin: 0 auto;                 /* Centra todo el bloque principal en la pantalla */
  padding: 2rem 1rem;
  text-align: center;             /* Centra títulos y textos descriptivos */
}

/* Alineación para el título Autentik y su bajada */
main h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}

main article h2 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  text-align: center;
}

main article p {
  max-width: 700px;
  margin: 0 auto 1.5rem auto; /* Centra el párrafo del texto */
  text-align: center;
}

/* ==========================================
   GRILLA COMITENTE (3 columnas centradas)
   ========================================== */
.comitente {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
  max-width: 1000px;
  margin: 2rem auto; /* Se elimina el margin-left que desencajaba todo */
  padding: 0;
  list-style: none;
} 

.accion {
  border: 2px solid #ffffff;
  padding: 1rem;
  background: #f9e4c4d6;
  border-radius: 5px;
  flex: 1 1 250px;
  max-width: 300px;
  text-align: center;
}

/* ==========================================
   GRILLA EQUIPO VM04 (2 columnas centradas)
   ========================================== */
.grupo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 600px;
  margin: 3rem auto; /* Centrado automático */
  padding: 0;
} 

.alumna {
  border: 2px solid #ffffff;
  padding: 1rem;
  background: #fcefd0ce;
  border-radius: 5px;
  width: 100%;
  list-style: none;
  text-align: center; 
}

/* ==========================================
   DATOS ACADÉMICOS (2x2 centrados)
   ========================================== */
.datos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  width: 100%;
  max-width: 800px;
  margin: 2rem auto; /* Centrado automático */
  padding: 0;
} 

.titulo {
  grid-column: 1 / -1;
  margin-bottom: 0.5rem;
  text-align: center; /* Centra los títulos "Equipo VM04" y "Datos académicos" */
  font-size: 1.8rem;
}

.legal {
  border: 2px solid #ffffff;
  padding: 1rem;
  border-radius: 4px;
  background: #f7e0b2dc;
  color: #000000; 
  width: 100%;
  text-align: center; /* Centra el texto interno de los bloques académicos */
}

header, footer {
    background-color:#6e3c15;;
    color: var(--color-claro);
    padding-block: var(--espaciado-base);
}