/* Especifica la codificación de caracteres utilizada en el archivo.
Asegura que los caracteres especiales y acentos se muestren correctamente.
Debe ser la primera regla de estilos */
@charset "utf-8";

/*
================================
  orden de las reglas de estilo:
  de lo general a lo particular,
  de arriba hacia abajo,
  de celular a tablet,
  de tablet a escritorio
================================
*/


/*  reset: selector universal */
* {
  /* para que las medidas de
  TODOS los elementos HTML
  se calculen hasta los bordes y
  NO solo por sus contenidos,
  para mejor control de diseño */
  box-sizing: border-box;
}

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

/* selector "padre" de todo lo visible
en la ventana del navegador:
algunas propiedades seran "heredadas" por sus
elementos contenidos, otras no */
body {
  /* familia tipografica general del proyecto
  (sus elementos contenidos la heredan) */
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;

  /* se retiran los 8 pixeles de margen que vienen predeterminados en body para que sus elementos contenidos "lleguen" hasta los bordes de la ventana del navegador */
  margin: 0;

  /* color general de los textos */
  color: hsl(0 0% 30%);

  /* color de fondo */
  background-color: hsl(0 0% 95%);
    
 
  /* los "puntitos" del fondo se construyen con "degradées"
  que CSS trata con la propiedad  "background-image" */
  background-image: 
    radial-gradient(
      #4aa636 1px,
      transparent 1px
    ),
    radial-gradient(
      #4aa636 1px,
      transparent 1px
    );
  /* tamaño de cada "elemento" del fondo con "puntitos" */
  background-size: 30px 30px;
  /* dónde se coloca el fondo de "puntitos" */
  background-position: 0 0, 15px 15px;
}

/* todos los párrafos */
p {
  /* se cambia la "interlinea" para dar más "aire" */
  line-height: 1.6;
}

/* selector multiple:
   parrafos,
   items de listas,
   epigrafes de figuras que ilustran el texto  */
p,
li,
figcaption {
  /* se evitan "huerfanos" */
  text-wrap: pretty;
}

/* parrafos e items de lista SOLO SI son
PRIMEROS elementos de un "componente" */
p:first-child,
li:first-child {
  /* se elimina el margen superior predeterminado */
  margin-block-start: 0;
}

/* parrafos e items de lista SOLO SI son
ULTIMOS elementos de un "componente" */
p:last-child,
li:last-child {
  /* se elimina el margen inferior predeterminado */
  margin-block-end: 0;
}

/* selector multiple: TODOS los titulos */
h1,
h2,
h3,
h4,
h5,
h6 {
  /* mas oscuros que los otros textos */
  color: hsl(0 0% 10%);

  /* parecido a interlineado, valor 1 equivale a interlineado igual al tamaño de la tipografia */
  line-height: 1.1;
  /* en web, generalmente, el interlineado en titulos es menor que el interlineado en parrafos */

  /* si ocupa más de una linea,
  se equilibran los anchos de esas lineas */
  text-wrap: balance;

  /* específico para ESTE diseño,
  para que no se vean los "puntitos" del fondo */
  background: hsl(0 0% 95%);
}

/*
TODAS las imagenes
USAR SIEMPRE
*/
img {
/* mediran, como maximo, el tamaño
   del bloque HTML que las contiene,
   evita "scroll" horizontal */
  max-width: 100%;
}

/* TODAS los bloques que contienen imagenes
    que ilustran un texto */
figure {
  /* elimina espacios exteriores que viene predeterminados */
  margin: 0;
}

/* imagenes dentro de etiqueta "figure" */
figure img {
  /* elimina espacio inferior predeterminado de las etiquetas "inline" */
  display: block;
}

/* "TODOS" los vinculos */
a {
  /* no estaran subrayados */
  text-decoration: none;

  /* seran de un color definido en la "paleta de diseño" */
  color: hsl(110 51% 35%);

  /* negrita */
  font-weight: bold;
}

/* "TODAS" las listas */
ul,
ol {
  /* elimina bullets, numeros etc. */
  list-style: none;

  /* retira el relleno izquierdo predeterminado */
  padding: 0;
}

/*
caja contenedora centrada y con ancho maximo

selector de tipo "clase" pq 
diferentes elementos HTML  
tendran caracteristicas visuales en comun
*/
.contenedora {
  /* el ancho será el menor de dos valores:
  1040px (65rem) o 
  todo el ancho disponible MENOS 3 renglones (para que en tabletas y celulares no queden pegados a los bordes de la ventana) */
  width: min(65rem, calc(100% - 3rem));
  /*
  la declaración anterior equivale a juntar
  dos declaraciones vistas en clase teorica:
  
  width: calc(100% - 3rem);
  (el ancho será todo el ancho disponible MENOS 1½ renglón de cada lado...)
  
  max-width: 65rem;
  (...PERO no será mayor que 1040px)
  */

  /* centrado horizontal (si sobra espacio,
    lo distribuye a izquierda y derecha por igual) */
  margin-inline: auto;
}

/*
bloques con bordes y sombras "duras"

selector de tipo "clase" pq 
diferentes elementos HTML  
tendran caracteristicas visuales en comun
*/
.con-sombra-grande {
  /* borde del bloque */
  border: 2px solid hsl(215 44% 41%);
  /* sombra del bloque */
  box-shadow: .5rem .5rem hsl(215 44% 41%);
}
.con-sombra-chica {
  /* borde del bloque */
  border: 2px solid hsl(215 44% 41%);
  /* sombra del bloque */
  box-shadow: .2rem .2rem hsl(215 44% 41%);
}


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

/* lo que tienen en común header y footer */
header,
footer {
  /* color de fondo: de la paleta de diseño */
  background-color: hsl(199 72% 44%);
  
  /* color de texto: de la paleta de diseño */
  color: hsl(0 0% 95%);
  
  /* espacio arriba y abajo */
  margin-block: 1.5rem;

  /* relleno (espacio entre contenidos y borde) */
  padding: 1rem;
}

/* solo el bloque HTML
  que tiene atributo "id" igual a "logo" */
#logo {
  /* ancho igual al valor menor entre:
   todo el ancho disponible y
   120px */
  width: min(100%, 7.5rem);

  /* color del fondo */
  background-color: hsl(0 0% 95%);

  /* PROVISORIAMENTE,
     centrado horizontal */
  margin-inline: auto;
}

/* solo la imagen contenida en el bloque HTML
  que tiene atributo "id" igual a "logo"  */
#logo img {
/* cambiar de
  etiqueta tipo en linea
  a etiqueta tipo bloque
  para darle propiedades de bloque */
  display: block;

  /* relleno (espacio entre la imagen y el borde) */
  padding: .5rem .75rem;
  /* si hay DOS valores,
  el 1er valor es el relleno arriba y abajo,
  el 2do valor es el relleno a izquierda y derecha */

  /* todo el ancho del bloque que la contiene */
  width: 100%;
}

/*
menu 
*/


/* la lista del menu de navegacion */
header nav ul {
  /* PROVISORIAMENTE,
     eliminamos margen abajo que viene predeterminado */
  margin-block-end: 0;
  /* en proximas clases se ocultara el menu en celulares */
  /* display: none; */
}

/* cada item de la lista del menu de navegacion */
header nav li {
  /* PROVISORIAMENTE,
     separamos los items que contienen los links */
  margin-block-start: .5rem;
}

/* vinculos, pero SOLO los del menu de navegacion */
header nav a {
  /* color del fondo */
  background-color: hsl(0 0% 95%);

  /* color del texto */
  color: hsl(215 44% 41%);

  /* para darle propiedades de caja (ancho, por ejemplo) */
  display: block;

  /* "relleno" arriba y abajo */
  padding-block: 0.25em .35em;

  /* texto centrado */
  text-align: center;

  /* borde redondeado con valor muuuuuuuy grande
     para producir apariencia de "pastilla" */
  border-radius: 100vw;
}

/* cuando se pasa el cursor por sobre
los vinculos del menu
o se accede a ellos por el teclado
(selectores de "pseudoclase") */

header nav a:hover,
header nav a:focus-visible,

/* y para diferenciar la apariencia
del boton de la pagina en la que se está
(selectores de "pseudoclase") */

.index nav li:first-of-type a,
.plan nav li:nth-of-type(2) a,
.mapa nav li:nth-of-type(3) a {
 
  /* cambia el color de fondo */
  background-color: hsl(210 92% 36%);
  /* cambia el color de texto */
  color: hsl(0 0% 95%);
  /* cambia el color de borde */
  border-color: hsl(0 0% 15%);
  /* cambia el color de sombra */
  box-shadow: .25rem .25rem hsl(0 0% 15%);

  outline: none;
}


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


/* TODAS las secciones */
section {
  /* distancia entre sus contenidos
  y sus bordes superior e inferior */
  padding-block: 2rem 4rem;
}

/* titulos de la secciones
  SOLO si son "descendientes directos" */
section > h1,
section > h2,
section > h3 {
  /* espacio inferior igual a dos "renglones" de cada título */
  margin-block-end: 2em;
  /* separa el contenido del borde */
  padding: .5em 1em;
}


/*
seccion comitente
*/

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

/* imagen contenida en titulo principal */
.comitente h1 img {
  /* ancho máximo:  288px (18rem) */
  width: min(100%, 18rem);
}

/* bloque contenido en la seccion "comitente"
   que tiene una imagen que ilustra el texto de la seccion */
.comitente figure {
  /* color de fondo, para ocultar los "puntitos" */
  background-color: hsl(0 0% 95%);

  /* ancho máximo:  320px (20rem) */  
  width: min(100%, 20rem);
}

/* epigrafe de imagen que ilustra un texto
   contenida en la seccion "comitente" */
.comitente figcaption {
  /* distancia entre contenidos y borde */
  padding: 1rem;
}

/* lista dentro de "figcaption" en la seccion "comitente" */
.comitente figcaption ul {
  /* elimina margenes predeterminados */
  margin: 0;
  /* "deshace" lo que se indico para estilo de lista
     (para que vuelvan a aparecer los "bullets") */
  list-style: unset;
  /* relleno izquierdo para que los bullets no queden "afuera" */
  padding-inline-start: 1.5em;
}

/* item de lista dentro de "figcaption" en la seccion "comitente" */
.comitente figcaption li {
  /* separacion vertical */
  margin-block-start: .75rem;
}

/* se mostrara en teorica de tipografia:
   bullets de listas pueden ser cambiados */
.comitente figcaption ::marker {
  content: "▶ ";
  color: hsl(41 86% 55%);
  font-size: larger;
}



/*
seccion equipo
componente con todos los datos de cada integrante
*/

/* la seccion */
.equipo {
  /* color de fondo */
  background: hsl(41, 86%, 55%);
}

/* cada integrante del equipo */
.equipo article,
/* y cada institucion de datos academicos */
.academicos > ul > li {
  /* color de fondo */
  background-color: hsl(0 0% 95%);

  /* PROVISORIAMENTE
     distancia vertical entre los integrantes
     se elimina al diagramar con "grid" */
  /* margin-block: 1rem; */

  /* "relleno" (distancia entre contenido y borde) */
  padding: 1em;
}

/* bloques con imagenes del equipo que ilustran texto */
.equipo figure,
/* y bloques con imagenes de datos academicos que ilustran texto */
.academicos figure {
  /* color de fondo */
  background-color: white;
  /* tamaño */
  width: min(100%, 10em);
  /* proporcion */
  aspect-ratio: 1;
}

/* nombre de integrante del equipo */
.equipo h3 {
  /* mas adelante eliminaremos el
  espacio superior predeterminado
  para que se alinee con la imagen */
  /* margin-block-start: 0; */
}

/* vinculo "rotulo individual" */
.equipo a,
.academicos a {
  background-color: hsl(0 0% 95%);
  color: hsl(199, 72%, 44%);
  font-size: .85em;
  padding-block: .125em .25em;
  padding-inline: 1em .75em;
  border-radius: 100vw;
}
/* icono del vinculo,
NO es contenido, ES apariencia,
va en el CSS */
.equipo a::after,
.academicos a::after {
  content: " 🡆";
}

/* cuando el cursor esta sobre el vinculo "rotulo individual"
o cuando se selecciona con el teclado */
:is(.equipo, .academicos) a:hover,
:is(.equipo, .academicos) a:focus-visible {
  color: hsl(0 0% 95%);
  background-color: hsl(199, 72%, 44%);
  outline: none;
  border-color: hsl(0 0% 15%);
  box-shadow: .25rem .25rem hsl(0 0% 15%);
}


/*
seccion datos academicos
*/

.academicos figure {
  aspect-ratio: 2;
  padding: .5rem;
}

.academicos img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}




/*
--------------------------------------
reglas de estilo para la clase de
layout con "display: grid;"
(estan separadas solo para esta clase)
--------------------------------------
*/

/* 
Cuando hay poco contenido en el documento,
"footer" aparece en el medio de la página.
La siguiente regla de estilos aplicada a "body"
(por ser el componente contenedor de "footer")
es para que "footer" quede bien abajo,
aun con poco contenido en el documento
*/
body {
  /* medira, como minimo, la altura del navegador */  
  min-height: 100dvh;

  /* contenedor tipo cuadri­cula */
  display: grid;

  /* plantilla de filas: dos filas definidas
  (si hubiera otras, mediran la altura de su contenido)...
  La primera fila definida, conteniendo "header",
  medirá la altura de su contenido...
  La segunda fila definida, conteniendo "main",
  se estirara para "llenar" el espacio restante */
  grid-template-rows: auto 1fr;
}


/* 
Componente "header"
*/


/* 
Se quiere que el logo quede a la izquierda y el menu de navegación a la derecha.
Para lograrlo, se necesita que el componente "header" (padre de ambos) tenga dos columnas.
*/
header {
  /* contenedor tipo cuadri­cula */
  display: grid;

  /* plantilla de columnas: dos columnas definidas.
  La primera columna definida, conteniendo "#logo",
  medira 8 "renglones" (128px) de ancho.
  La segunda columna definida, conteniendo "nav",
  se estirara para "llenar" el espacio restante */
  grid-template-columns: 8rem 1fr;

  /* espacio minimo entre las columnas */
  gap: 1rem;

  /* alineación vertical */
  align-items: center;
}

/*
En reglas de estilo definidas antes se habían especificado margenes para separar los elementos contenidos en "header".
ahora, los elementos se diagramaran con "grid" por lo que se los separará con la propiedad "gap" cuando sea necesario.
*/
header *,
/* todos los elementos contenidos en "header" */
/* y, como el selector de una regla de estilo definida antes tiene mas "especificidad" que el selector de la linea 584, se necesita un selector igual o mas especifico para que se aplique la regla de estilo definida a seguir */
header nav ul li {
  /* elimina los margenes definidos anteriormente */
  margin: 0;
}

/* 
El menu de navegacion es horizontal, es decir, los items de lista deben quedar alineados horizontalmente.
Para ello se debe definir como "grid" el componente que los contiene,
la lista dentro de "nav".
*/
header nav ul {
  /* contenedor tipo cuadri­cula */
  display: grid;

  /* plantilla de columnas
  --> que los elementos "llenen" todo el espacio horizontal con un ancho base de 80px por link (5rem) para que...
  en celulares quepan dos vinculos a lo ancho,
  en tabletas y en escritorio quepan 4, lado a lado  */
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));

  /* espacio minimo entre los items de la lista */
  gap: .5rem;

  /* 
  en una sola declaracion se resumen dos declaraciones:

  max-width: 30rem;
  width: 100%;
  
  es decir, se limita el ancho del menu de navegacion a 30rem (480px) y se hace que el componente ocupe todo el espacio horizontal disponible si es menor a 30rem
  */
  width: min(100%, 30rem);

  /* cuando el ancho de "nav" es mayor a 30rem, el espacio que sobra quedara a la izquierda y el menu se va a la derecha */
  margin-inline-start: auto;
}


/*
Componente de la clase "comitente"
*/


/* titulo principal,
se quiere que el logo quede a la izquierda y el texto a la derecha */
.comitente h1 {
  /* contenedor tipo cuadri­cula */
  display: grid;
  
  /* logo y texto centrados verticalmente */
  align-items: center;
  
  /* separacion entre el logo y el texto */
  gap: 1em;
  

  /* plantilla de columnas:
  En clases posteriores se definiran 2 columnas
  a partir del ancho de tablets y monitores de escritorio */

  /* grid-template-columns: 18rem 1fr; */
  
  /* 1a columna, 18rem (288px) de ancho
    2a columna, el resto del ancho */
  
}


/* en la seccion "comitente"
se quiere que "figure" quede a la izquierda y los textos a la derecha, por lo que el componente contenedor de "figure" y textos se define como "grid" */
.comitente > div {
  /* contenedor tipo cuadri­cula */
  display: grid;

  /* separacion entre "figure" y los textos */
  gap: 1.5em;

  
  /* plantilla de columnas:
  En clases posteriores se definiran 2 columnas
  a partir del ancho de tablets y monitores de escritorio */

  /* grid-template-columns: 20rem 1fr; */
  
  /* 1a columna, 20rem (320px) de ancho
    2a columna, el resto del ancho */

  /* alineación vertical: por la parte superior */
  align-items: start;
}


/*
Componentes de la clase "equipo" y "academicos"
*/


/* 
Se quiere que las unidades de información (integrante, datos académicos) se coloquen en una fila de tres columnas si caben y cuando no quepan en dos columnas o una.
Para lograrlo, se necesita que el componente contenedor de cada unidad de información (integrante, datos académicos) sea una cuadrícula.
*/
.equipo > div,
.academicos > ul {
  /* contenedor tipo cuadri­cula */
  display: grid;

  /* plantilla de columnas
  --> que los elementos "llenen" todo el espacio horizontal
  con un ancho base de 320px (20rem) para que...
  en celulares se muestre un elemento por fila,
  en tabletas, dos elementos por fila,
  en escritorio, tres elementos por fila */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));

  /* espacio minimo entre los elementos */
  gap: 1rem;
}

/* se quiere que la imagen del integrante se coloque a la izquierda y los textos a la derecha */
.equipo article {
  /* contenedor tipo cuadri­cula */
  display: grid;

  /* plantilla de columnas:
  1a columna, 6rem (96px) de ancho
  2a columna, el resto del ancho */
  grid-template-columns: 6rem 1fr;

  /* espacio minimo entre los elementos */
  gap: 1rem;
}

/* se quiere que el vinculo al rotulo individual se coloque en el borde inferior derecho de cada "article", por lo que su contenedor se define como "grid" */
.equipo article > div {
  /* contenedor tipo cuadri­cula */
  display: grid;

  /* plantilla de filas:
  se definen 3 filas
  (si hubiera otras despues de las definidas,
  mediran la altura de su contenido)...
  1a fila, altura definida por el contenido
  2a fila, altura definida por el contenido
  3a fila, se estirara para "llenar" el espacio restante */
  grid-template-rows: auto auto 1fr;
}

/* al ser un elemento de una cuadricula,
el vinculo se estira para ocupar toda la celda.
Hay que hacer que el vinculo se alinee a la derecha */
.equipo article > div a,
.academicos > ul > li a {
  /* si sobra espacio, este queda a la izquierda y el vinculo se va a la derecha */
  margin-inline-start: auto;
}

/* en la seccion "datos academicos"
se quiere que el vinculo al sitio de cada institucion
se coloque en el borde inferior derecho de cada item de la lista,
por lo que su contenedor se define como "grid" */
.academicos > ul > li {
  /* contenedor tipo cuadri­cula */
  display: grid;

  /* plantilla de filas:
  se definen 2 filas
  (si hubiera otras despues de las definidas,
  mediran la altura de su contenido)...
  1a fila, altura definida por el contenido
  2a fila, se estirara para "llenar" el espacio restante */
  grid-template-rows: auto 1fr;

  /* espacio minimo entre los elementos */
  gap: 1rem;
}