/*
================================
  orden de las reglas de estilo:
  de lo general a lo particular,
  de arriba hacia abajo,
  de celular a tablet,
  de tablet a escritorio
================================
*/

/* 
  Solo para fines de enseñanza,
  las reglas de estilos para layout, es decir,
  la aplicación de "display: grid" y "display: flex"
  se encuentran al final de este archivo
*/


/*
reset:
selector universal --> TODOS los elementos
*/
* {
  /*
  para que el ancho de
  los elementos html
  se calculen hasta los bordes y
  NO sólo por sus contenidos */
  box-sizing: border-box;
}

/* ----------------
   reglas generales
   ---------------- */


/* selector "padre" de todo lo visible en la ventana del navegador:
algunas propiedades serán "heredadas" por sus elementos contenidos, otras no */
body {
  /* familia tipográfica general del proyecto
     (sus elementos contenidos la heredan) */
  font-family: serif;
  /* se retiran los 8 pixeles de margen que vienen predeterminados 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% 25%);
  /* color de fondo */
  background-color: whitesmoke;
}

/* selector múltiple: títulos y vínculos */
h1,
h2,
h3,
h4,
a {
  /* tipografía diferente a los otros elementos html */
  font-family: system-ui, sans-serif;
}

/* 
  Observación:
  por la "Cascada" de estilos,
  aunque se haya definido el color de los textos en el selector "body" ya que los títulos heredan el color,
  se le puede asignar después un color diferente.
  También por la "Cascada" de estilos,
  aunque ya haya una regla de estilos que se aplica a los títulos (cambiando la familia tipográfica),
  se puede crear otra regla de estilos para que otra propiedad NO se aplique a las etiquetas "a", que estaban incluidas en el selector de la regla anterior.
*/
h1,
h2,
h3,
h4 {
  /* títulos más oscuros que los otros textos */
  color: hsl(0 0% 10%);
}

/* para que "TODAS" las imágenes NO sean
   mayores que las cajas que las contienen
   para evitar "scroll" horizontal */
   img {
    /* medirán, como máximo, el tamaño
       del bloque html que las contiene */
    max-width: 100%;
  }
  
  /* "TODOS" los vínculos */
  a {
    /* no estarán subrayados */
    text-decoration: none;
    /* serán de un color diferente */
    color: hsl(30 92% 36%);
    /* negrita */
    font-weight: bold;
  }

  /* TODOS los vínculos al pasar el cursor sobre */
  a:hover,
  a:focus-visible {
    /* serán de un color diferente */
    color: hsl(30 92% 15%);
  }
  
  /* "TODAS" las listas */
  ul,
  ol {
    /* elimina bullets, números etc. */
    list-style: none;
    /* retira el relleno izquierdo predeterminado */
    padding: 0;
  }

  /*
caja contenedora centrada y con ancho máximo

selector de tipo "clase" pq 
elementos html diferentes 
tendrán características visuales en común
*/
.contenedora {
  /* ancho igual al valor mínimo entre 1200px (75rem) o el 100% del ancho disponible menos 2rem (32px). Esto garantiza margen en pantallas pequeñas sin usar padding */
  width: min( 75rem, calc(100% - 2rem) );
  /* centrado horizontal (si sobra espacio,
    lo distribuye a izquierda y derecha) */
  margin-inline: auto;
}

/* TODAS las figuras (imágenes, videos, etc. que acompañan textos) */
figure {
  margin: 0; /* elimina margen predeterminado */
}


/* -------------------
   componente superior
   y sus contenidos
   ------------------- */


header,
footer {
  /* color de fondo */
  background-color: hsl(30 92% 36%);
  /* color de texto */
  color: whitesmoke;
  /* relleno vertical */
  padding-block: 1rem;
}

header {
  /* encabezado con sombra difusa  */
  box-shadow: 0 4px 4px hsl(0 0% 0% / 25%);
}

/* sólo la/s imagen/es que está/n
dentro de una etiqueta cuyo id es "logo" */
#logo img {
  /* es transparente...
     se le puede asignar color de fondo */
  background-color: hsl(25 100% 95%);
  /* ...pero se le puede asignar
     un color de fondo */
  /* relleno: el color de fondo se extiende más allá de la imagen */
  padding: .5rem;
  /* tiene borde (tipo de borde - espesor - color) */
  border:  solid 4px hsl(25 100% 47% / 75%);
  /* bordes redondeados */
  border-radius: .5rem;
}

/* lista de items del menu */
header nav ul {
  /* se elimina márgenes superior e inferior predeterminados */
  margin-block: 0;
}

/* vínculos de la navegación */
header nav a {
  /* fondo */
  background-color: hsl(0 0% 100% / 85%);
  /* tipografía */
  color: hsl(30 92% 36%);

  /* por defecto, son elementos inline,
  se cambia para que sean block y usar las propiedades del modelo de caja */
  display: block;
  /* siendo ahora block, su ancho será todo el ancho disponible pero se puede usar la propiedad "width" y cambiarlo*/
  width: fit-content; /* hace que el ancho se ajuste al contenido en lugar de ocupar todo el ancho disponible */

  /* espacio entre el borde del elemento y su contenido */
  padding-block:.5rem;
  padding-inline: 1rem;

  /* borde redondeado */
  border-radius: .25rem;
}
/* cuando se pasa el cursor sobre los vínculos de la navegación
o se seleccionan con el teclado */
header nav a:hover,
header nav a:focus-visible {
  /* fondo */
  background-color: hsl(0 0% 100%);
}

/* --------------------
   componente principal
   y sus contenidos
   -------------------- */


/* TODAS las secciones */
section {
  /* relleno vertical */
  padding-block: 2rem;
}

/* Títulos de secciones */
section h1,
section h2 {
  /* "subrayado" a todo lo ancho */
  border-block-end: 4px solid hsl(25 100% 47% / 50%);
  /* color de fondo */
  background-color: hsl(25 100% 47% / 15%);
  /* relleno */
  padding: 1rem;
}

/*
sección comitente
*/

/* los textos serán más grandes */
.comitente > * {
  /* tamaño de fuente */
  font-size: 1.25em;
}

.instrucciones {
  color: hsl(25 100% 40%);
  font-family: monospace;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.5;
}


/*
sección equipo
*/

/* componente con todos los datos de CADA integrante */
.equipo article {
  /* color de fondo */
  background-color: hsl(15 29% 44% / 15%);
  /* "relleno" (distancia entre contenido y borde) */
  padding: 1em;
  /* borde redondeado */
  border-radius: .25em;  
}

/* SÓLO las imágenes del equipo */
.equipo img {
  /* borde violeta */
  border: solid .4em hsl(15 29% 44%);
  /* sombra */
  box-shadow: 0 4px 4px hsl(0 0% 0% / 25%);
  /* tamaño y proporción cuadrada */
  width: 8em;
  aspect-ratio: 1;
  /* imagen redonda */
  border-radius: 50%;
}

/* nombre de integrante del equipo */
.equipo_textos h3 {
  /* eliminar espacio superior predeterminado
  para que se alinee con la imagen */
  margin-block-start: 0;
}

/* vínculo "rótulo individual" */
.equipo_textos a,
.academicos a {
  background-color: hsl(15 29% 44% / .15);
  border-radius: .25rem;
  color: hsl(15 29% 44%);
  padding-block: .25em;
  padding-inline: 1em .75em;
}

/* cuando el cursor está sobre el vínculo "rótulo individual" */
.equipo_textos a:hover,
.academicos a:hover,
.equipo_textos a:focus-visible,
.academicos a:focus-visible {
  color: whitesmoke;
  background-color: hsl(15 29% 44%);
}

.equipo_textos a::after,
.academicos a::after {
  content: ' ▶';
  font-size: .7em;
}


/*
sección datos académicos
*/

/* imágenes SOLO en la sección académicos */
.academicos img {
  display: block;
  width: 8em;
  aspect-ratio: 1;
  object-fit: contain;
  background-color: white;
  padding: .5rem;
  border-radius: .25rem;
  box-shadow: 0 4px 4px transparent;
  transition: box-shadow .6s ease;
}

.academicos a:hover img {
  box-shadow: 0 4px 4px hsl(0 0% 0% / 20%);
  transition: box-shadow .3s ease;
}


/* -------------------
   componente inferior
   y sus contenidos
   ------------------- */

  footer p {
    /* elimina el margen inferior que viene predeterminado */
    margin-block: 0;
  }


/* ---------------------
   ---------------------
   reglas de estilo para
   layout del sitio web:

   ------> grid <-------
   ------> flex <-------

   ---------------------
   --------------------- */

/* para que el footer quede bien abajo siempre,
   estirando el main aunque tenga poco contenido,
   se requiere que el ascendente directo de main y footer (body)
   sea un contenedor DIFERENTE que lo predeterminado */
body {
  /* altura mínima igual a la altura del navegador */
  min-height: 100vh;
  /* aun definiendo esa altura, hay que transformarlo en contenedor grid */
  display: grid;
  /* dentro hay 3 filas: header, main y footer.
  Se define el tamaño de cada fila.
  header y footer deben tener la altura de su contenido,
  main debe "estirarse" */
  grid-template-rows: auto 1fr auto;
}

/* en el header, el diseño indica que el logo quede a la izquierda y el menú a la derecha,
   por lo que se requiere un contenedor flexible
   Ese contenedor debe ser el ascendente directo de ambos:
   la etiqueta div de la clase "contenedora" que está dentro de header */
header .contenedora {
  /* es caja flexible */
  display: flex;
  /* separa sus elementos hijos en la horizontal */
  justify-content: space-between;
  /* centra sus elementos hijos en la vertical */
  align-items: center;
  /* si los elementos hijos de "header .contenedora" no caben en una línea, van a la línea siguiente */
  flex-wrap: wrap;
  /* separación mínima de los elementos: 1 renglón */
  gap: 1em;
}

/* El menú debe ser horizontal,
   por lo que se requiere un contenedor flexible
   Ese contenedor debe ser el ascendente directo de los ítems de lista del menú
   porque ellos son los que hacen que hasta ahora el menu sea vertical:
   el ascendente directo de los <li> es la etiqueta ul que está dentro de nav, que está dentro de header */
header nav ul {
  /* caja flexible */
  display: flex;
  /* vínculos separados 1/2 renglón */
  gap: 0.5em;
}

/* 
  Sección equipo:
  se necesita un contenedor cuadrícula para que los integrantes del equipo se distribuyan horizontalmente, si caben. Y si no caben, se corran hacia abajo.
  Ese contenedor debe ser el ascendente directo de los artículos que contienen los datos de cada integrante del equipo: la etiqueta <div> de la clase "contenedora" que está dentro de la sección de la clase "equipo".

  Sección académicos:
  Igual diseño se requiere para las instituciones académicas, cuyo contenedor es la etiqueta <ul> de la clase "contenedora" que está dentro de la sección de la clase "academicos".
*/
.equipo .contenedora,
.academicos .contenedora {
  /* contenedor cuadrícula */
  display: grid;
  /* quedan en la misma línea, si caben,
  con ancho mínimo de 352px */
  grid-template-columns: repeat(auto-fill, minmax(min(22em, 100%), 1fr));
  /* separación de los artículos */
  gap: 1.5em;
}

/* La información de cada integrante del equipo debe tener la imagen (etiqueta <figure>) a la izquierda y los textos (etiqueta <div> de la clase "equipo-textos") a la derecha.
Su ascendente directo (etiqueta <article> dentro de la sección de la clase "equipo") debe ser un contenedor diferente a lo predeterminado */
.equipo article {
  /* se opta por definirlo como contenedor cuadrícula */
  display: grid;
  /* dos columnas: una para la imagen y otra para los textos,
  la imagen tiene medida fija, los textos se adaptan al espacio que "sobra" */
  grid-template-columns: auto 1fr;  
  /* separa sus elementos con una "calle" */
  gap: 1em;  
}

/* los vínculos a rótulos individuales deben quedar alineados en la parte inferior de la información de cada integrante. Su ascendente directo (la etiqueta <div> de la clase "equipo_textos") debe ser un contenedor "diferente" */
.equipo_textos {
  /* contenedor tipo cuadrícula */
  display: grid;
  /* en este caso hay 4 elementos,
  se requiere que el 3ª se "estire" para que el 4º elemento (el vínculo) quede abajo:
  se define la plantilla de filas */
  grid-template-rows: auto auto 1fr auto;
}

.equipo_textos a {
  /* dentro de un contenedor tipo cuadrícula, se puede hacer que el vínculo se emplace a la derecha especificando que el espacio que "sobra", en este caso a la izquierda del vínculo, se calcule automáticamente o que, dentro de celda, el botón se posicione a la derecha
  UNA DE LAS SIGUIENTES DOS DECLARACIONES SOBRA PERO SE MUESTRA PORQUE, EN ESTE CASO, SON EQUIVALENTES */
  justify-self: end;  
  margin-inline-start: auto;
}

/* En la sección de la clase "académicos" se quiere que con los vínculos acontezca lo mismo: alineados abajo.
Los vínculos son descendientes directos de las etiquetas <li> que son descendientes directas de la etiqueta <ul> de la clase "contenedora" que está dentro de la sección de la clase "academicos".
 */
.academicos ul.contenedora > li {
  /* contenedor cuadrícula */
  display: grid;
  /* separación vertical entre elementos (habrá que eliminar los márgenes predeterminados)*/
  gap: 1.5em;
  /* en este caso hay 3 elementos,
  se requiere que el 2º se "estire" para que el 3º elemento (el vínculo) quede abajo:
  se define la plantilla de filas */
  grid-template-rows: auto 1fr auto;
}
/* eliminación de márgenes verticales de los descendentes directos de cada <li> y de sus etiquetas <h3> ya que los espacios verticales se definieron en la regla anterior */
.academicos ul.contenedora > li > *,
.academicos ul.contenedora > li h3 {
  margin-block: 0;
}
.academicos ul.contenedora > li h3 + * {
  margin-block-start: 1lh;
}
.academicos ul.contenedora > li a {
  /* dentro de un contenedor tipo cuadrícula, se puede hacer que el vínculo se emplace a la izquierda especificando que el espacio que "sobra", en este caso a la derecha del vínculo, se calcule automáticamente o que, dentro de celda, el botón se posicione a la izquierda
  UNA DE LAS SIGUIENTES DOS DECLARACIONES SOBRA PERO SE MUESTRA PORQUE, EN ESTE CASO, SON EQUIVALENTES, HAY QUE ELEGIR UNA DE LAS DOS */
  justify-self: start;  
  margin-inline-end: auto;
}