@charset "utf-8";

/* Fuentes Montserrat */
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

/* Fuentes Raleway */
@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);


/* --------------------------- propiedades generales ------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

body {
  min-height: 100dvh;

}

a {
  text-decoration: none;
  font-weight:700;
}

ul,
ol {
  list-style: none;
}

.contenedor {
  max-width: 68rem;
  margin-inline: auto;
  padding: 1rem;
}

footer, header {
  background-color: #abcc37;
  color: #fff;
}

/* menu responsive */
.menu-btn {
  background-color: #abcc37;
  border: none;
  outline: none;
  width: 3rem;
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}

.menu-btn .btn-linea {
  width: 1.5em;
  height: 3px;
  margin: 4px auto;
  background-color: #fff;
  transition: all 0.3s ease-out;
}


/* --------------------------- menu header ------------------------------- */
header {
  display: flex;
  justify-content:space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1.5rem;
}

header .menu {
  display: flex;
  gap: 1.5rem;
}

header nav ul {
  margin-block: 0;
  /* para ocultar en celulares */
  /* display: none; */
}

header nav a {
  font-family: "Raleway", sans-serif;
  font-size: 1.2em;
  color: #fff;
}

header nav a:hover,
header nav a:focus-visible {
  color:#000;
  outline: none;
}


/* --------------------------- secciones ------------------------------- */

h1 {
  font-family: "Raleway", sans-serif;
  font-weight:300;
  padding-top: 1.5rem;
  color: #000;
}

h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 3em;
  text-transform: uppercase;
  padding-top: .5rem;
  padding-bottom: 1rem;
}

h3 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1.5em;
  text-transform: uppercase;
  padding-top: .5rem;
  padding-bottom: 1rem;
}

h4 {
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  padding-top: .2em;
}

.miselanea {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 4em;
  color: #abcc37;
  padding-top: 2rem;
  text-align: center;
}

p {
  font-family: "Raleway", sans-serif;
  font-weight:300;
  font-size: .9em;
  padding-bottom: .5rem;
  line-height: 1.5;
}


/* --------------------------- seccion proyecto ------------------------------- */
#proyecto {
  text-align: center;
}


/* --------------------------- seccion rotulos ------------------------------- */
.integrantes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: .8em;
  margin-right: 1.5em;
  margin-left: 1.5em;
}

#rotulos h3 {
  text-align: center;
}

.rotulos {
  font-family: "Montserrat", sans-serif;
  font-size: 1.2em;
}

.info {
  padding-left: .8em;
}

/* imagen en escala de grises */
.grises img {
  filter: url('#grayscale');
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: none; 
  
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  }
  .grises img:hover {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(100%);
  filter: Gray();
  
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* borde articulo */
#rotulos article {
  border: 1px solid #abcc37;
}

#rotulos article p {
  padding-right: 1rem;
}


.integrantes a {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  color: #fff;
  background-color: #abcc37;
  border: solid 2px #abcc37;
  width: 6rem;
  padding-block: 0.3rem 0.3rem;
  border-radius: 0.25rem;
  text-align: center;
  margin-left: .5rem;  
  margin-bottom: 1rem;
}

.integrantes a:hover,
.integrantes a:focus-visible {
  background-color: #fff;
  border: solid 2px #abcc37;
  color: #abcc37;
}


/* --------------------------- seccion datos academicos ------------------------------- */
#datosacad h1, h2, h5 {
  text-align: center;
}

#datosacad>ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: .8rem;
  margin-top: 1rem;  
  margin-bottom: 2rem;
}

#datosacad a {
  opacity: .7;  
}

.sec-acad {
  text-align: center;  
}

li {
  font-family: "Raleway", sans-serif;
  font-weight:300;
  font-size: .9rem;
  line-height: 1.5;
} 

.li-aca {
  margin-left: 1rem;
  list-style: none;
} 

.li-aca::before {
  content: "●";
  color:#abcc37;
  margin-left: -1rem;
  padding-right: .5rem;
}


/* --------------------------- seccion footer ------------------------------- */
footer div {
  display: grid;
  grid-template-rows: 50% 50%;
  padding-top: 2rem;
  text-align: center;
  gap: 1rem;
}

footer img {
  max-width: 40%;
}

.acad {
  border-bottom: solid 1px #abcc37;
  padding: 1rem;
}