* {
  box-sizing: border-box;
}

/* ----------------
   reglas generales
   ---------------- */

body {
  font-family: "vt323", sans-serif;
  margin: 0;
  color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: rgb(0, 0, 0);
  /* permite ser visualizada en pantallas diferentes */
  min-height: 100dvh;
  }

/* para evitar la italic*/
em {
 font-style: normal;
}

p,
li{
  text-wrap: pretty;
  text-align:start;
}

h1,h2,h3,h4 {
  text-align: start;
  color: rgb(255, 110, 52);
  line-height: 1.1;
  text-wrap: balance;
}

img {
  max-width: 100%;
  height: auto;
  align-content: center;
}

a{
  /* no subrayados */
  text-decoration: none;
  /* negrita */
  font-weight: bold
}

ul,
ol
{
  /* elimina bullets etc. */
  list-style: none;
  /* retira el relleno izquierdo predeterminado */
  padding: 0;
}

.contenedora {
  /* ancho maximo 1040px */
  max-width: 65rem;
  /* centrado horizontal (si sobra espacio,lo distribuye a izquierda y derecha por igual) */
  margin-inline: auto;
  padding: 1rem; 
}

/* -------------------
   componente superior
   y sus contenidos
   ------------------- */

header, footer {
  background-color: black;
  color: rgb(159, 253, 82);
}s

header {
  /* sombra difusa  */
  box-shadow:
    0   /* desplazamiento horizontal */
    4px /* desplazamiento vertical */
    4px /* desenfoque */
    hsl(0 0% 0% / 20%)
}

#logo {
  /* cambiar de etiqueta tipo en linea a etiqueta tipo bloque para darle propiedades de bloque */
  display: block;
  border-radius: .35em;
  /* medidas */
  width: 8rem;
  padding: .1rem .1rem;
  /* si hay DOS valores,
  el 1er valor es el relleno arriba y abajo,
  el 2do valor es el relleno a izquierda y derecha */
  background-color: rgb(159, 253, 82, 0.775);
  border: solid 3px rgb(255, 255, 255);
} 
/* a la imagen del logo se le dio un tamaño particular y un borde de color*/ 

/* ---------
     menu 
   --------- */

/* la lista del menu en el encabezado */
header nav ul {
display:flex;
gap: .25rem;
flex-wrap: wrap;
justify-content: flex-end;

/* elimina los margenes que vienen predeterminados */
margin-block: 0;
} 
/*sirve para ordenar los links de forma horizontal*/

header nav a {

/* color del texto */
color: rgb(0, 0, 0);
 
/* para darle propiedades de caja (ancho, por ejemplo) */
display: block;

/* ancho igual para todos */
width: 5em;

/* "relleno" arriba y abajo */
padding-block: 0.25em .5em;
  
/* se alineo los textos en el centro, horizontal.*/
text-align: center;
} 
/* al poner nav solo afectara a esa etiqueta y no todas las a */

header nav ul li {
  width: 5em;
  height: 2em;
  margin-left: .30em;
  
  /* agrega espacio vertical entre la lista del menu*/
  margin-right: 10px;

 /*separa los contenedores los cuales envuelven a los link, se les dio separacion
 y tamaño adecuado para que quede prolijos*/
}

header nav {
  padding: 1em;
  border-radius: 1em;
  margin: 1em;
  gap: 1em;
}

header .contenedora{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  text-align: justify;
  gap: 1rem;
} 
/* se organizo al final la navegacion principal, se centro para que 
  quede mas prolijo*/
/*---------------------botones--------------------*/
header nav ul li a {
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  color:rgb(255, 255, 255);
  text-decoration: none;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*se coloco la navegacion principal al final(end), se le dio tamaño, forma al fondo y colores*/

header nav ul li a:hover{
  background-color: rgb(255, 110, 52);
  color: white;
  transition: background-color 0.7s ease, color 0.3s ease; /* Transiciones suaves para el cambio de color */

  }

/* ------------------
   componente central
   y sus contenidos
   ------------------ */

/* Titulos de "comitente" / "equipo vm22" y "academicos" */

.titulos {
  /* "subrayado" a todo lo ancho */
  border-block-end: 4px solid rgba(250, 252, 138, 0.775);
  /* separa el "subrayado" del texto */
  padding-block-end: .35rem;
  border-bottom: .1em solid rgba(138, 144, 252, 0.775);
  color: rgb(94, 253, 72);
  /* Transforma el texto a Mayuscula*/
  text-transform: uppercase;
}

/* centramos el titulo principal */
h1 {
  text-align: center;
}

section .contenedora {
  padding-block: 2em;
}



/* ------------------
    seccion comitente
   ------------------ */

.comitente {
    /* textos 25% mayores */
    font-size: 1.25em;
}

/* imagen del comitente, la foto de FADU*/


.comitente img {
  /* bordes redondeados */
  border-radius: .15rem;
  max-width: 100%;
  width: 50;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  align-content: center;
}

header h1 {
  background-color: antiquewhite;
  color: black;
  border: solid 0 black;
  padding: 1em;
  width: 50%;
  box-sizing: border-box;
  border-radius: 1em;
  margin: 1em;
}

.comitente a {
  color: chocolate;
}

/* --------------------
   seccion equipo vm22
   -------------------- */
 
.equipo article {
  background-color:rgba(255, 255, 255, 0.123);
  /* distancia vertical entre los integrantes */
  margin-block: .5em;
  /* "relleno" (distancia entre contenido y borde) */
  padding: 2em;
  border-radius: .25em;
}
/*----------------------caja equipo, botones etc---------*/
.equipo img {
  /* tamaños */
  width: 10em;
  aspect-ratio: 1;
  /* borde morado */
  border: solid .3em  rgb(255, 255, 255);
  /* imagen redonda */
  border-radius: 40%;
  /* sombra interna y externa */
  box-shadow:
    0 4px 4px rgb(0, 0, 0);
}

/* nombre de integrante del equipo */
.equipo_textos h3 {
  margin-block-start: 0;
}

/* vinculo "rotulo individual" */
.equipo_textos a {
/* se va a la derecha, poniendo margen a la izquierda */
  margin-inline-start: auto;
  background-color: hsl(120, 100%, 62%);
  border-radius: 100vw;
  color: rgba(0, 0, 0, 0.775);
  font-size: .85em;
  padding-block: .125em .25em;
  padding-inline: 1em .75em;
}

.equipo_articulos {
  display: grid;
  /* plantilla de columnas:
  --> que los elementos "llenen" todo el espacio horizontal con un ancho base de 320px (20rem) para que...
  en celulares quepa un integrante a lo ancho,
  en tabletas quepan 2, lado a lado,
  y en escritorio quepan 3, lado a lado  */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1rem;
}

h5{
  color: rgb(255, 247, 244);
 
}

.equipo_articulos article {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 2rem;
}

/* cuando el cursor esta sobre el vinculo "rotulo individual"
o cuando se selecciona con el teclado 
.equipo_textos a:hover,
.equipo_textos a:focus-visible {
  color: hsl(0 0% 95%);
  background-color: hsl(280 29% 44%);
  outline: none;
} */

.equipo_textos {
  /* contenedor tipo cuadri­cula */
  display: grid;
  grid-template-rows: auto auto 1fr;
  /* separacion minima entre textos: 1.25 renglones */
  gap: 1.25em;
}

.equipo_textos > * {
  /* se eliminan los márgenes predeterminados para que
  se separen solo con la propiedad "gap" de la caja contenedora */
  margin: 0;  
}


/* ------------------------
   seccion datos academicos
   ------------------------ */

.academicos > ul > li{
  display: flex;
  flex-wrap: wrap;
  text-align: start;
  gap: 1em;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  }
  /*alinear las listas y los parrafos uno debajo del otro prolijamente*/
  
.academicos > ul > li:not(:last-of-type){
      border-bottom: .2rem solid rgba(0, 0, 0, .30);
      padding-bottom: .9em;
      margin-bottom: .9em;
}
  /*linea que separa cada lista y el margen para que no se junten demaciado los 
  parrafos*/
  
.academicos img{
  display: block;
  width: 6em;
  object-fit: contain;
  border-radius: 20%;
 aspect-ratio: 1;
  height: auto;   
    background-color: rgb(159, 253, 82, 0.775);
  box-shadow:
    0 4px 4px rgba(255, 255, 255, 0.123);
} 
  /*cambio de tamaño de las imagenes de la seccion de datos academicos*/
  
.academicos > ul > li >*:first-child{
      margin-right: 2em;
      height: auto;
}
  /* acomoda las listas, dandole margen y que quede mas centrado y prolijo*/
  
.academicos h3 {
      margin-top: inherit;
      margin-inline-start: 0;
}
  /* acomoda los textos hacia arriba*/


/* ------------------
   componente inferior
   y sus contenidos
   ------------------- */

footer p {
  margin: 0;
}