@charset "utf-8";

* {
  box-sizing: border-box;
}

body, html {
    overflow-x: hidden; /* elimina el desplazamiento horizontal general */
    margin: 0;
    padding: 0;
}

header {
    background-color: #0f352e;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.logo {
    /* ancho igual al valor menor entre:
     todo el ancho disponible y
     120px */
    width: min(100%, 5.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: 0rem 0rem;
      /* 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;
    list-style: none;
    /* 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: #0c302a;
  
    /* color del texto */
    color: #eeebe4;
  
    /* 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: #282828;
  /* cambia el color de texto */
  color: #eeebe4;
  /* cambia el color de borde */


  outline: none;
}

/* 
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;
  }



main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #282828;
    background-color: #eeebe4;
    margin: 0;
    /* 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;
}

h1, h2, h3, h4 {
    color: #14463d;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
    text-wrap: balance;
    max-width: 100%; /* limita el ancho del texto */
    overflow: visible; /* evita barras de desplazamiento innecesarias */
    white-space: normal; /* asegura que el texto se ajuste y no cause desbordamiento */
}

a {
    text-decoration: none;
    color: #14463d;
    font-weight: bold;
}

._materias {
    text-align: center;
}

.contenedor_materias h3 {
    /* "subrayado" o línea en todo lo ancho */
  border-block-end: 3px solid #0c302a;
  
  /* separa el "subrayado" del texto */
  padding-block-end: .27rem;
    margin: 0;
    font-size: x-large;
}

.materias_aprobadas {
    display: inline-block;
    vertical-align: top;
    max-width: 30rem;
    padding: 1rem;
}

.materias_encurso {
    display: inline-block;
    vertical-align: top;
    max-width: 30rem;
    padding: 1rem;
}

ul {
    list-style-type: disc; /* vuelve a mostrar los puntitos de las listas */
    padding-left: 20px; /* agrega un pequeño espacio a la izquierda */
    text-align: left;
}

.contenedor_bocetos h2 {
  background-color: #EEEBE4;
  border-block-end: 3px solid #0c302a;
  /* separa el "subrayado" del texto */
  padding-block-end: .27rem;
  margin: 0;
  font-size: x-large;

  display: inline-block;
    vertical-align: top;
    max-width: 30rem;

  box-sizing: content-box;
}

.boton_boceto, .boton_equipo {
 
    list-style-type: none;
    padding: 0; 
    text-align: center; 
    padding: 1rem;
}

.boton_boceto li, .boton_equipo li {
    display: inline-block;
    margin: 10px 50px;
}

.boton_boceto li a, .boton_equipo li a {
    display: block;
    padding: 10px 20px;
    background-color: #14463d;
    color: #eeebe4;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    text-align: center;
}

.boton_boceto li a:hover, .boton_equipo li a:hover {
    background-color: #0c302a;
}

.sobre_mi {
    text-align: center;
    margin-inline: auto;
    max-width: 50rem;
        /* 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;
   
}

.sobre_mi img {
    width: 300px;  
}

.sobre_mi p {
    padding: 1rem;
}

.contenedor_equipo {
  text-align: center;
}

/* Estilos para cada botón dentro de los elementos del equipo */
.contenedor_equipo li {
  text-align: center;
}

footer p {
    background-color: #0f352e;
    color: #eeebe4;
    padding: 20px;
    text-align: center;
    font-size: 0.9em;
    width: 100%;
    margin: 0;
}

p:first-child,
li:first-child {
    margin-block-start: 0;
}

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

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

.academicos figure {
    width: min(100%, 10em);
    aspect-ratio: 1;
    width: 15em;
}

.link_imagen {
    display: inline-block; 
    text-decoration: none;
}

.imagen_logo {
    width: 150px;
    height: auto;
    transition: transform 0.3s ease;
}

.imagen_logo:hover {
    transform: scale(1.1);
}

.academicos > ul {
    /* contenedor tipo cuadricula */
    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 una institucion 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));
  
    /* separacion entre instituciones 1 renglon */
    gap: 1em;
  }
  
.academicos ul {
    list-style: none;
}

  /* cada institucion */
  .academicos > ul > li {
    /* caja flexible */
    display: flex;
    /* si el texto no cabe, se va para abajo */
    flex-wrap: wrap;
    /* espacio entre foto y texto: 1 renglon */
    gap: 1em;
    /* elementos alineados a la izquierda */
    justify-content: flex-start;
    /* elementos alineados por arriba, en la vertical */
    align-items: flex-start;
    /* si hay mas de una linea de elementos, los elementos de CADA linea alineados por arriba,    en la vertical */
    align-content: flex-start;
    max-width: 30rem;
    padding: 2rem;
  }
  
  .academicos img {
    text-align: center;
    width: 250px;
  }

  /* para eliminar márgenes superiores predeterminados de los titulos */
  .academicos h3 {
    text-align: left;
    margin-block-start: 0;
  }

h2 {
    background-color: white;
    width: 100vw;
    padding: 15px;
}

h1 {
    font-size: 2em;
    padding: 15px;
}

h4 {
    text-align: left;
    padding: 15px;
}