*{
    box-sizing: border-box;
}

:root {--color-textos: #0c0a0b;
    --color-textos-secundarios: #464543;
    --color-textos-alfa: #6e675d;
    --color-fondos: #f4e8da;
    --color-1: #c19c81;
    --color-2: #dcd5cd;
    --color-3: #dbc3ab;
    --color-3-alfa: #ffffff;
    --color-4: #a4a174;
    
    --tipo-titulos: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --tipo-textos: 'Segoe UI';

  --sombras:
0
4px
2px
var(--color-1)
}

/*tema oscuro responsive*/
@media (prefers-color-scheme: dark) {
  :root {
    --color-textos: hsl(0 0% 85%);
    --color-textos-secundarios: rgba(255, 255, 255, 0.5);
    --color-textos-alfa: rgba(255, 255, 255, 0.553);
    --color-fondos: hsl(0 0% 10%);
    --color-1: #493c32;
    --color-2: #000000;
    --color-3: #000000;
    --color-3-alfa: hsl(280 29% 30% / .15);
    --color-4: #313022;
  }
}

/*reglas generales del cuerpo*/
body {
  font-family: var(--tipo-textos);
  margin: 0;
  background-color: var(--color-3-alfa);
}


 /*para todos los títulos*/
 h1,
 h2,
 h3,
 h4 {
   font-family: var(--tipo-titulos);
 }


 /*para todas las imagenes no sean mayores que las cajas contenedoras, evita scroll*/
 img {max-width: 100%;
 }


 /*todos los vinculos*/
 a {
  text-decoration: none;
  color: var(--color-textos-secundarios);
  font-family: var(--tipo-titulos);
  font-weight: bold;
  font-size: .8em;
  border-radius: 0.3em;
}

 /*todas las listas*/
 ul,
 ol {
   list-style: none;
 padding: 0;
 }

/*caja contenedora*/
.contenedora {
  width: min( 75rem, 100% );
margin-inline: auto;
text-align: left;
}

/*componente superior y sus contenidos*/
header,
footer {
background-color: #424242;
color: var(--color-fondos);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-inline: auto;
  width: 100%;
}


/*caja flex del header*/
header .contenedora {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;

}

/*controla espacio entre header y el banner*/
header div{
  width: 15em;
}


/*----------
todo el menu
-----------*/

/*limito al logo y al menu*/
header .contenedora {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
}

/*menu*/
nav{
  position: relative;
}

/*boton hamburguesa*/
.menu-btn,
.menu-fondo {
  padding: .75rem;
  width: 3rem;
  aspect-ratio: 1;cursor: pointer;
  transition: all 0.3s ease-out;
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 9000;
}

/* fondo del botón hamburguesa */
.menu-fondo {
  background: hsl(0 0% 100% / 0.25);
  box-shadow: -5px 5px 5px hsl(180 100% 4% / 0.2);
  z-index: 8000;
}


.menuVisible .menu-fondo {
  background: var(--color-3-alfa);
  width: 200vw;
  inset: -100vw -100vw auto auto;
}

/* cada barra de la "hamburguesa" */
.menu-btn .btn-linea {
  width: 25px;
  height: 3px;
  margin: 4px 0 4px 0;
  background: hsl(0 0% 90%);
  transition: all 0.3s ease-out;
  position: relative;
  z-index: 9000;
}

.menuVisible .menu-btn .btn-linea {
  transform: rotate(180deg);
}

.menuVisible .menu-btn .btn-linea:nth-child(1) {
  transform: rotate(45deg) translate(4px, 6px);
}
.menuVisible .menu-btn .btn-linea:nth-child(2) {
  opacity: 0;
}
.menuVisible .menu-btn .btn-linea:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

/* ahora si menú */
nav ul {
    opacity: 0; 
    visibility: hidden;  
    position: absolute;
    right: 1rem;
    top: calc(100% + 4rem);
    z-index: 9999;
    transition: all .5s ease;
}


.menuVisible ul {
  visibility: visible; 
  opacity: 100%; 
  transition: all .5s .2s ease; 
}

/* cada vínculo del menu */
nav ul li a {
  border-bottom: solid 4px transparent;
  color: white;
  display: block;
  font-size: 1.5rem;
  /* margin-block-end: .5rem; ver si aplica*/
  width: min(40vw, 15rem);
  text-align: end;
  padding: .5rem;
  text-decoration: none;
}

nav ul li a:hover {
  border-bottom: solid 4px hsl(0 0% 100% / 0.5);
  transition: all .3s;
}

.banner img{
width: 100%;
}

#bannergeneral {
  display: none;
}

/*para imagenes que estan dentro de una etiqueta id logo*/
#logo img {
  padding: .5rem;
  aspect-ratio: 2 / 1;
  text-align: center;
  display: flex;
	flex-direction: row;
	justify-content: center;
	text-align: center;
  }


.logos img{
	width: 10em;
	margin: 1em;
}


.menu-btn,
  .menu-fondo {
    border-radius: 50%;
    padding: .75rem;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
  }

  /*barra navegadora*/
  .btn-linea {
    width: 1.5em;
    height: 3px;
    margin-block: 0.25em;
    background: var(--color-fondos);
    transition: all 0.5s ease-out;
  }

header nav ul { 
  margin-block: 0;
  align-items: center;
  display: flex;
  flex-wrap:wrap;
  flex-direction: column;
  justify-content: center;
  }

  /*navegador*/
header nav a {
display: block;
/*ancho total*/
width: max-content;
margin: .125em;
padding-inline: 1.5em;
text-align: center;
border-radius: 0.25em;
}

/*cuando dse pasa el cursor sobre los vinculos del menu*/
header nav a:hover {
background-color:var(--color-textos-secundarios);
color: var(--color-1);
}


/*boton del menu seleccionado*/
.index .btn-index,
.plan .btn-plan,
.mapa .btn-mapa {
background-color: var(--color-3-alfa);
color: var(--color-2);
}


/*componente central y sus contenidos*/
/*todas las secciones*/
section {
  padding-bottom: 2rem;
}

/*secciones comitente*/
.comitente {
  font-size: 1.25em;
  padding: 2em;
  }

/*para diferentes titulos*/
  .titulo {
    border-block-end: 4px solid var(--color-textos-secundarios);
    padding-bottom: .25em;
    }

    /*seccion equipo*/
  /*solo imagenes del equipo*/
  
  .equipo article{
    margin-block: .5em;
    padding: 1em;
    text-align: center;
    border-radius: .25em;
   display: flex;
   gap: .2em;
   flex-wrap: wrap;
  }
  
  .equipo_img{
    border: solid .4em var(--color-3);
    border-radius: 50%;
    box-shadow:
    var(--sombras),
    var(--sombras) inset;
    width: 10em;
    aspect-ratio: 1;
    align-self: flex-start;
    }

    .equipo_textos {
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .equipo_textos a {
      margin: auto  0 0 auto;
    }

/*seccion rotulo individual*/
/*solo imagenes del rotulo*/
.integrantes h1{
	color: #FF4E4E;
	padding-top: 1em;
}

.integrantes {
	font-family: 'Roboto', sans-serif;
	text-align: center;
    padding-bottom: 1em;
    align-items: center;
    
}

.integrantes ul{
	display: flex;
	flex-direction: column;
	justify-content: center;
    flex-wrap: wrap;
}

.integrantes ul li{
	margin: 1em;
	font-size: 1em;
	list-style-type: none;
  
}

.integrantes ul li a{
	color: var(--color-textos-secundarios);
	transition: color .5s;
	text-decoration: none;
  border: 2px solid transparent
}

.integrantes ul li a:hover{
	color: var(--color-4);
	border-color: var(--color-3);
	border: 2px solid;
}


/*materias aprobadas*/
#datos1{
  /*si llego a querer cambiar la fuente font-family: 'Roboto', sans-serif; */
  list-style-type: disc;
  font-weight:300;
  text-align: left;
  background-color: var(--color-2);
  padding: 1em;
}


/*materias en curso*/
#datos2materias{
  /*si llego a querer cambiar la fuente font-family: 'Roboto', sans-serif; */
  list-style-type: disc;
  font-weight:300;
  text-align: left;
  background-color: var(--color-2);
  padding: 1em;
}


/*seccion academicos*/
   /*todos los ul y li hijos director menos el ultimo li*/ 
.academicos > ul > li:not(:last-of-type) {
  border-bottom: var(--color-2);
  padding-block-end: 1.5em;
  /*espacio entre los diferentes academicos en tamaño tablet o celu*/
  margin-block-end: 2em;
}

/*imagenes solo de la seccion academicos*/
.academicos_img { 
  width: 8em;
  text-align: left;
}

/*parrafo contenidos en footer*/
footer p {
  margin-block-end: 1em;
}

/*cambiar apariencia en la medida en que el navegador se ensancha*/

/*cambios a partir de los 480px*/
@media(min-width:30em) {
  .comitente img {
    width: 10em;
    float: left;
    margin-inline-end: 1em;
  }
}

/*cambios a partir de los 640px*/
@media(min-width: 40em) {


  /*seccion equipo como caja flexible, integrantes en la misma linea*/
  .equipo {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    background-color:var(--color-2);
    justify-content: center;
  }

  /*se elimininan los margenes establecidos para celu*/
  .equipo article { 
    margin: 0;
    width: calc(50% - .5em)
  }

  .equipo h2 {
    text-align: center;
    width: 100%;
  }

  .equipo_textos {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* el espacio que sobra queda arriba y a la izquierda */
  .equipo_textos a {
    margin: auto  0 0 auto;
  }

  /*menu y banner*/
  header{
    flex-direction: row;
}

header nav ul {
flex-direction: row;
}

#bannermobile {
    display: none;
}

#bannergeneral {
display: block;
}

  /* en academicos que el logo quede a la izquierda y los textos a la derecha */
  .academicos > ul > li {
    display: flex;
    gap: 1em;
    align-items: flex-start;
  }

  .academicos h3 {
    margin-block-start: 0;
  }

}

/* cambios a partir de los 700px */
@media (min-width:700px){


  .integrantes ul{
     flex-direction: row;
 }

  /* datos academicos en una linea */
  .academicos > ul {
    display: flex;
    gap: 1em;
  }

  .academicos > ul > li {
    width: calc(33% - .7em);
  }

   /* el menú deja de ser fijo */
   header nav {
    /* para que esté en capa superior pero que no parezca */
    position: relative;
  }
    
  /* botón "hamburguesa" oculto */
  .menu-btn {
    display: none;
  }

  /* menu visible */
  header nav ul {
    /* caja flexible para menu horizontal*/
    display: flex;
    position: relative;
    opacity: 1;
    visibility: visible;
  }
    
  /* items de lista  que contienen los vínculos del menu */
  header nav ul li {
    min-width: 4em; /* que no midan menos de: */
    margin: .25em 0 .25em .25em; /* separación */
  }

  /* vínculos del menu principal */
  header nav ul li a {
    border-radius: .25em ;
    color: white;
    font-size: 1rem;
    width: auto;
    padding: .25em .5em .15em;
    text-align: center;
    display: block; /* para que sean "cajas" */
  }
}

/*para menu*/
@media (min-width:1080px) {
  header nav ul{
    display: flex;
  }

  /*se oculta el boton*/
  .menu-btn {
    display: none;
  }
  
  /*menu horizontal solo a partir de cierto ancho*/
  header nav,
  header nav ul{
    display: contents;
  }

  /* para que el menú se vaya a la derecha, le digo al primer li que sobre quede solo a la izq*/
  header nav ul li:first-of-type {
    margin-inline-start: auto;
  }
}