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


/*  reseteo: selector universal */
* {
    /* para que el ancho de
    los elementos html
    se calculen hasta los bordes y
    NO solo por sus contenidos,
    cambiando lo que viene predeterminado */
    box-sizing: border-box;
  }
  
  
  /* ----------------
     reglas generales
     ---------------- */
  
  /* selector "padre" de todo lo visble 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: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    /* 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: 9px;
    /* color general de los textos */
    color: hsl(0, 0%, 0%);
    /* color de fondo */
    background-color: hsl(189, 74%, 75%);
  }
  
  /* selector múltiple: los tí­tulos */
  h1,
  h2,
  h3 {
    /* más oscuros que los otros textos */
    color: hsl(192, 53%, 24%);
    /* parecido a interlineado, valor 1 equivaldría a interlineado igual al tamaño de la tipografía */
    line-height: 1.1;
    /* en web, generalmente, el interlineado en títulos es menor que el interlineado en párrafos */
  }
  
  /* 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 definido en la "paleta de diseño" */
    color: hsl(0, 0%, 0%);
    /* negrita */
    font-weight: bold;
  }
  
  /* "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 máximo 1040px */
    max-width: 90rem;
    /* centrado horizontal (si sobra espacio,
      lo distribuye a izquierda y derecha) */
    margin-inline: 9px;
    /* espacio entre el borde del elemento y su contenido
    para que estos no queden "pegados" a los bordes */
    padding: 5rem;
  }
  
  /* -------------------
     componente superior
     y sus contenidos
     ------------------- */
  
  
  header,
  footer {
    /* color de fondo: de la paleta de diseño */
    background-color: hsla(0, 0%, 0%, 0.568);
    /* color de texto: de la paleta de diseño */
    color: hsl(0 0% 95%);
  }
  
  header {
    /* sombra difusa  */
    box-shadow:
      4px   /* desplazamiento horizontal */
      4px /* desplazamiento vertical */
      4px /* desenfoque */
      hsla(0, 0%, 0%, 0.418) /* color */
  
  }
  
  
  /* sólo el enlace al grupo */
  #logo a {
    /* cambiar de etiqueta tipo en linea
    a etiqueta tipo bloque para poder darle
    propiedades de bloque */
    display: block;
    /* redondeo de bordes */
    border-radius: 50%;
    /* ancho */
    width: 8rem;
    /* proporción */
    aspect-ratio: 1;
    /* centrar contenidos */
    text-align: center;
    /* tamaño de la tipografía */
    font-size: 1.9rem;
    /* color del fondo */
    background-color: hsl(192, 53%, 24%);
    /* borde */
    border: solid 4px hsl(0, 0%, 0%);
  }
  
  /* cuando se pasa el cursor sobre el logo
  o se usa el teclado para llegar */
  #logo a:hover,
  #logo a:focus-visible {
    /* se invierten los colores de fondo y borde */
    background-color: hsl(0 0% 95%);
    border:  solid 4px hsl(182, 81%, 25%);
  }
  
  
  /*
  El diseño de este sitio prevé que:
  En celulares se ve un botón que, al cliquear,
  muestra u oculta el menú...
  En tablets y escritorio se ve el menú -> el botón no hará  que se vea.
  
  En futuras clases veremos cómo lograr lo descripto arriba
  pero ya debemos tener la estructura HTML necesaria
  y la apariencia definida en el css
  */
  
  
  /* botón del menu */
  
  .menu-btn {
    /* color de fondo */
    background-color: hsla(180, 75%, 44%, 0.404);
    /* se retiran borde y "outline" que los botones tienen asignados de forma predeterminada */
    border: none;
    outline: none;
    /* ancho */
    width: 2rem;
    /* proporcion ancho/alto */
    aspect-ratio: 1;
    /* círculo */
    border-radius: 30%;
    /* cursor transformado en mano */
    cursor: pointer;
  }
  
  /* Cada línea del "icono" del botón".
  En este caso no se utilizó un ícono real
  porque se prevé efecto de animación de
  cada "liñita" cuando el botón sea cliqueado */
  
  .menu-btn .btn-linea {
    /* ancho de cada "liñita" */
    width: 2em;
    /* altura de cada "liñita" */
    height: 4px;
    /* distancia entre las liñitas y con los bordes */
    margin: 6px;
    /* el color de las liñitas será el color de su fondo */
    background-color: hsl(0 0% 95%);
  
    /* para uso futuro, se prevé que
    las liñitas se van a mover
    durante 300 milisegundos
    variando la velocidad */
    transition: all 0.3s ease-out;
  }
  
  
  /*
  menu 
  */
  
  /* la lista del menú en el encabezado */
  header nav ul {
    /* elimina los márgenes arriba y abajo que vienen predeterminados */
    margin-block: 0;
    /* en próximas clases se ocultará el menú en celulares */
    /* display: none; */
  }
  
  /* ví­nculos, pero SÓLO los del menú superior */
  header nav a {
    /* color del texto */
    color: hsl(0, 100%, 100%);
    /* color de fondo */
    background-color: hsl(189, 68%, 50%);
    /* para darle propiedades de caja (ancho, por ejemplo) */
    display: block;
    /* ancho igual para todos */
    width: 5em;
    /* "relleno" arriba y abajo */
    padding-block: .25em;
    /* border redondeado */
    border-radius: 0.25em;
    /* texto centrado */
    text-align: center;
  }
  
  /* cuando se pasa el cursor por sobre los ví­nculos del menú
  o se accede a ellos por el teclado (selectores de "pseudoclase") */
  
  header nav a:hover,
  header nav a:focus-visible {
    /* cambia el color de fondo */
    background-color: hsl(0 0% 95%);
    /* cambia el color de texto */
    color: hsl(189, 68%, 50%);
    outline: none;
  }
  
  
  
  /* ------------------
     componente central
     y sus contenidos
     ------------------ */
  
  
  /* TODAS las secciones */
  
  section {
    /* distancia entre sus contenidos
    y su borde inferior */
    padding-block-end: 2rem;
  }
  
  /*
  sección comitente
  */
  
  .comitente {
    /* textos 25% mayores */
    font-size: 1.25em;
  }
  
  /* clase para diferentes tí­tulos */
  
  .titulo {
    /* "subrayado" a todo lo ancho */
    border-block-end: 4px solid hsl(0, 0%, 0%);
    /* separa el "subrayado" del texto */
    padding-block-end: .35rem;
  }
  
  /* frase "Mi sitio en ACUMAR */
  
  .comitente h4 {
    /* sin margen inferior */
    margin-block-end: 0;
    /* texto menor */
    font-size: smaller;
    /* se retiran las negritas (predeterminadas) */
    font-weight: normal;
    /* se reduce la entrelínea para "acercarse" al H1 */
    line-height: 1;
  }
  
  /* título principal en el rótulo */
  
  .comitente h1 {
    /* se elimina el margen superior predeterminado para "acercarse" a la frase "Mi sitio en ACUMAR" */
    margin-block-start: 0;
  }
  
  
  /*
  sección equipo
  */
  
  /* componente con todos los datos de cada integrante */
  
  .equipo article {
    /* color de fondo */
    background-color: hsla(189, 52%, 32%, 0.747);
    /* distancia vertical entre los integrantes */
    margin-block: .5em;
    /* "relleno" (distancia entre contenido y borde) */
    padding: 1em;
    /* borde redondeado */
    border-radius: .25em;
  }
  
  /* SOLO las imágenes del equipo */
  .equipo img {
    /* fondo de color (si son transparentes) */
    background: hsl(187, 59%, 43%);
    /* tamaños */
    width: 8em;
    aspect-ratio: 1;
    /* borde violeta */
    border: solid .4em hsl(0, 0%, 0%);
    /* imagen redonda */
    border-radius: 50%;
    /* sombra interna y externa */
    box-shadow:
      0 4px 2px hsl(0 0% 0% / 20%),
      0 4px 2px hsl(0 0% 0% / 20%) inset;
  }
  
  /* nombre de integrante del equipo */
  .equipo_textos h3 {
    /* más adelante eliminaremos el espacio superior predeterminado
    para que se alinee con la imagen */
    /* margin-block-start: 0; */
  }
  
  /* ví­nculo "rótulo individual" */
  .equipo_textos a {
    background-color: hsla(0, 0%, 0%, 0.15);
    border-radius: .25rem;
    color: hsl(189, 68%, 50%);
    padding-block: .25em;
    padding-inline: 1em;
  }
  
  /* cuando el cursor está sobre el ví­nculo "rótulo 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(192, 53%, 24%);
    outline: none;
  }
  
  
  /*
  sección datos académicos
  */
  
  
  /* í­tems de lista "descendientes directos"
  de listas "descendientes directas"
  de la seccion de datos académicos"
  MENOS el último */
  
  .academicos > ul > li:not(:last-of-type) {
    /* lí­nea divisoria*/
    border-bottom: solid 1px hsla(280, 51%, 21%, 0.76);
    /* espacio antes de la lí­nea */
    padding-block-end: 1.5em;
    /* espacio después de la lí­nea*/
    margin-block-end: 1.5em;
  }
  
  /* imágenes SOLO en la sección académicos */
  .academicos img {
    display: block;
    width: 8em;
    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 hsla(0, 10%, 10%, 0.2);
    transition: box-shadow .3s ease;
  }
  
  
  /* -------------------
     componente inferior
     y sus contenidos
     ------------------- */
  
  
  /* párrafo/s contenidos en la etiqueta "footer" */
  footer p {
    /* elimina el margen inferior que viene predeterminado */
    margin-block-end: 0;
  }
  
  
  
  
  /* --------------------------
     media queries,
     para cambiar la apariencia
     en la medida en que el
     navegador se ensancha
     (mobile first)
     -------------------------- */
  
  
  /* cambios a partir de los 480px */
  
  
  /* cambios a partir de los 640px */
  
  
  /* cambios a partir de los 960px */