/*
================================
  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 --> 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(101, 37%, 51%);
      /* 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(210 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
  */
a{
  float:left;
}
  .contenedoraheader {
    /* 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;
    
  }
  .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 */
  }
  
  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 25%;
    border:  solid 4px hsla(115, 100%, 27%, 0.75);
    border-radius: .5rem;
  }
  /* -------------------
     componente superior
     y sus contenidos
     ------------------- */
  
  
  header,
  footer {
    /* color de fondo */
    background-color: hsl(98, 37%, 52%);
    /* 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%);
  }

  header {
    background-image: url(bg_green.jpg);

  }
  header{
    display: flex;
    align-items: center; /* Alinea los elementos verticalmente */
    justify-content: space-between; /* Distribuye los elementos horizontalmente */
    flex-wrap: nowrap; /* Evita que los elementos se vayan a la siguiente línea */
  }
  
  /* 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(38 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(38 100% 47% / 75%);
    /* bordes redondeados */
    border-radius: .5rem;
  }
  
  /* vínculos de la navegación */
  header nav a {
    /* fondo */
    background-color: hsl(0 0% 100% / 85%);
    /* tipografía */
    color: hsl(210 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*/
     /* 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 hsla(110, 100%, 33%, 0.5);
    /* color de fondo */
    background-color: hsla(103, 100%, 47%, 0.15);
    /* relleno */
    padding: 1rem;
  }
  
  /*
  sección equipo
  */
  
  /* componente con todos los datos de CADA integrante */
  .equipo article {
    /* color de fondo */
    background-color: hsl(280 29% 44% / 15%);
    /* "relleno" (distancia entre contenido y borde) */
    padding: 1em;
    /* borde redondeado */
    border-radius: .25em;  
  }
  
  .article__intereses {
    padding: 20px 18px;
    border: 1px solid #000000;
    border-radius: 18px;
  }


  contenedoramaterias{
    width: min( 15rem, calc(100% - 2rem) );
    /* centrado horizontal (si sobra espacio,
      lo distribuye a izquierda y derecha) */
      float:left;
    margin-inline: auto;
    display: grid;
   

  }
  .article__materias {
    padding: 20px 18px; 
  width: 500px;
  margin-bottom: 20px;
    border: 1px solid #000000;
    border-radius: 18px;
    
  }

  /* SÓLO las imágenes del equipo */
  .equipo img {
    /* borde violeta */
    border: solid .4em hsl(280 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%;
  }
  
 
  .academicos a {
    background-color: hsl(280 29% 44% / .15);
    border-radius: .25rem;
    color: hsl(280 29% 44%);
    padding-block: .25em;
    padding-inline: 1em;
  }
  
  /* 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(280 29% 44%);
  }
  
  .equipo_textos a::after,
  .academicos a::after {
    content: ' â–¶';
    font-size: .7em;
  }
  
  
  /*
  seccion datos academicos
  */
  
  
  /* items de lista "descendientes directos"
  de listas "descendientes directas"
  de la seccion de datos academicos"
  MENOS el ultimo */
  
  .academicos > ul > li {
    /* li­nea divisoria*/
    padding: 20px 18px;
    border: 1px solid #000000;
    border-radius: 18px;
  
    /* espacio antes de la li­nea */
    padding-block-end: 1.5em;
    /* espacio despues de la li­nea*/
    margin-block-end: 1.5em;
  }
  
  /* imagenes SOLO en la seccion academicos */
  .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;
    }