@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  --clr-bg-header: #004aad;
  --clr-btn: #004aad;
  --clr-dropdown: #06469b;
  --clr-nav-hover: #1d4172;
  --clr-dropdown-hov: #27589b;
  --clr-dropdown-link-hov: #2e6fc5;
  --clr-light: #fafafa;
  --clr-white: #ffff;
  --clr-light-body: #f5f5f5;
  --clr-azul-fuerte: #001d67;
}

html {
  scroll-behavior: smooth;
}

.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

.fade-in.loaded {
  opacity: 1;
}

body {
  margin: 0;
  background-color: var(--clr-light-body);
  /*overflow: auto;*/
  /*transition: scroll 0.5s ease;*/
  /* Oculta el scrollbar mientras el preloader está activo */
}

/*Pagina - Servicios*/
.container-servicios {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: auto;
}

.content-servicios>h1 {
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-size: 40px;
}

.content-servicios span {
  color: #004aad;
}

.navlist {
  display: flex;
  max-width: 1400px;
  margin: auto;
  width: 100%;
      font-family: 'Poppins';
}

.navlist ul {
  width: 100%;
  padding: 0 10px;
  display: flex;
  flex-direction: row;
  text-decoration: none;
  list-style: none;
}

.navlist ul li {
  padding: 10px 10px 10px 0px;
  & a{
          color: #5f5f5f;

  }
}

.content-servicios {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.items-servicios {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item-servicio {
  display: flex;
  height: 100%;
  min-height: 300px;
  flex-wrap: wrap;
  justify-content: center;
  box-shadow: 0px 0px 1px 0px;
  margin: 20px auto;
  background-color: var(--clr-light);
}

.item-txt {
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.item-txt h2 {
  color: var(--clr-azul-fuerte);
}

.item-txt p {
  margin: 15px 0;
  color: var(--clr-nav-hover);
  text-align: justify;
}

.btn-verMas {
  padding: 10px 15px;
  background-color: var(--clr-azul-fuerte);
  color: var(--clr-light);
}

.btn-verMas:hover {
  background-color: var(--clr-dropdown);
  cursor: pointer;
}

.reverse {
  flex-direction: row-reverse;
}

.item-img {
  max-width: 500px;
  width: 100%;
}

.item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left;
}

/*PARA ACERCA DE*/
.container-acerca {
  display: flex;
  flex-direction: column;
}

.banner-acerca {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 300px;
  overflow: hidden;
  position: relative;
  justify-content: flex-start;
  align-items: center;
  user-select: none;
}

.banner-acerca h1 {
  font-family: "Poppins";
  width: 100%;
  position: absolute;
  font-size: 30px;
  color: var(--clr-light);
  display: block;
  text-align: center;
  font-size: 2.5em;
  padding: 20px;
  z-index: 2;
  filter: drop-shadow(1px 1px 3px black);
}

.banner-acerca img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.7);
}

.content-acerca {
  display: flex;
  /* width: 100%; */
  /* max-width: 900px; */
  justify-items: center;
  /* margin: 20px auto; */
  justify-content: center;
  flex-wrap: wrap;
}

.info-acerca {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  max-width: 800px;
}

.acerca-main {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  width: 100%;
  box-shadow: 0 0 1px 0px;
  padding: 15px 20px;
}

.acerca-main h1 {
  font-size: 30px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  margin: 10px 0;
}

.acerca-main h2 {
  font-family: "Poppins";
}

.span-c-blue {
  color: #004aad;
}

.acerca-main p {
  font-family: "Poppins", sans-serif !important;
  font-size: 20px;
}

.span-bold-rigth {
  text-align: right;
  font-weight: bold;
  font-size: 16px;
  font-family: "Poppins";
  padding: 20px 0;
}

.acerca-aside {
  display: flex;
  width: 100%;
  max-width: 200px;
  flex-direction: column;
  box-shadow: 0 0 1px 0px;
  height: fit-content;
  margin: 0 20px;
  position: sticky;
  top: 115px;
}

.acerca-aside ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 20px;
}

.acerca-aside ul li {
  padding: 10px;
  font-family: "Poppins";
  font-size: 18px;
}

.acerca-aside ul li a {
  display: block;
  width: 100%;
}

.acerca-aside ul li a::after {
  display: block;
  content: "";
  border-bottom: solid 3px var(--clr-bg-header);
  transform: scaleX(0);
  transition: transform 400ms ease-in-out;
}

.acerca-aside ul li a:hover::after {
  transform: scaleX(1);
}

@media (max-width: 1042px) {
  .content-acerca {
    flex-direction: column-reverse;
    width: auto;
  }

  .acerca-aside {
    flex-direction: column;
    box-shadow: 0 0 1px 0px;
    height: fit-content;
    background: var(--clr-light);
    position: static;
    margin: 0;
    max-width: 100%;
  }

  .acerca-aside ul {
    align-items: center;
  }

  .info-acerca {
    max-width: 100%;
  }
}

@media (max-width: 920px) {
  .content-acerca {
    flex-direction: column-reverse;
    width: auto;
  }

  .acerca-aside {
    flex-direction: column;
    box-shadow: 0 0 1px 0px;
    height: fit-content;
    background: var(--clr-light);
    position: static;
    margin: 0;
    max-width: 100%;
  }

  .acerca-aside ul {
    align-items: center;
  }
}

.valores-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.valores-content img {
  width: 100%;
}

#promotoria h2 {
  text-align: center;
}

/*Enlaces de Nosotros*/
#presentacion {
  scroll-margin-top: 100px;
}

#resena {
  scroll-margin-top: 100px;
}

#mision {
  scroll-margin-top: 100px;
}

#vision {
  scroll-margin-top: 100px;
}

#valores {
  scroll-margin-top: 100px;
}

#promotoria {
  scroll-margin-top: 100px;
  gap: 20px;
}

/*BIENESTAR*/
.container-bienestar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.banner-bienestar {
  display: flex;
  width: 100%;
  height: 100%;
  max-height: 300px;
  overflow: hidden;
  position: relative;
  user-select: none;

}

.banner-bienestar h1 {
  font-family: "Poppins";
  width: 100%;
  height: 100%;
  position: absolute;
  font-size: 30px;
  color: var(--clr-light);
  /* display: block; */
  text-align: center;
  font-size: 3em;
  z-index: 2;
  display: grid;
  filter: drop-shadow(1px 1px 3px black);
  justify-items: stretch;
  align-items: center;
  justify-content: center;
}

.banner-bienestar img {
  width: 100%;
  object-position: top;
  object-fit: cover;
  filter: brightness(0.7);
}

.main-bienestar {
  display: flex;
  width: 100%;
  justify-items: center;
  margin: 20px auto;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px 0;
  flex-direction: column;
  align-items: center;
}

.menu-bienestar {
  display: flex;
  gap: 10px;
  max-width: 1500px;
  width: 100%;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.item-bienestar {
  width: 300px;
  height: 250px;
  flex: 1;
  flex-basis: 200px;
  flex-grow: 1;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 0 2px 0;
}

.item-bienestar:hover {
  cursor: pointer;
  transform: scale(1.02);
}

.item-bienestar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
}

.item-bienestar h2 {
  position: absolute;
  bottom: 0;
  padding: 10px;
  color: white;
  font-family: "Poppins";
}

.content-bienestar {
  display: flex;
  width: 100%;
  /*max-width: 1200px;*/
  justify-items: center;
  margin: 20px auto;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px 0;
  flex-direction: column;
  gap: 20px;
}

.item-content-bienestar {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
}

.img-content-bienestar {
  max-width: 700px;
  width: 100%;
  position: relative;
  box-shadow: 0 0 2px 0;
}

.img-content-bienestar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9);
}

.img-content-bienestar h2 {
  position: absolute;
  bottom: 0;
  padding: 20px;
  color: white;
  font-size: 35px;
  font-family: "Poppins";
  text-shadow: 0px 0px 10px black;
}

.txt-content-bienestar {
  max-width: 700px;
  box-shadow: 0 0 2px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.txt-content-bienestar p {
  padding: 15px;
  font-family: "Poppins";
  text-align: justify;
  white-space: pre-line;
}

.horario-content-bienestar {
  width: 100%;
  padding: 20px;
  background-color: #efefef;
  display: flex;
  gap: 10px;
  flex-direction: column;
  box-shadow: 0 0 2px 0;
}

.horario-content-bienestar h2 {
  font-family: "Poppins";
  color: var(--clr-dropdown);
  text-align: center;
}

.horario-content-bienestar .txt-horario {
  font-family: "Poppins";
  text-align: justify;
  color: rgb(0, 0, 0);
  display: flex;
  flex-direction: column;
}

.btn-reservar {
  margin: 10px auto;
  padding: 15px 20px;
  font-family: "Poppins";
  border: 0;
  font-weight: bold;
  color: white;
  background-color: var(--clr-btn);

  &:hover {
    background-color: var(--clr-nav-hover);
    cursor: pointer;
  }
}

.horario-content-bienestar a {
  color: var(--clr-btn);
  font-family: "Poppins";
  text-align: right;

  &:hover {
    text-decoration: underline;
  }
}

#psicologia {
  scroll-margin-top: 100px;
}

#tutoria {
  scroll-margin-top: 200px;
  flex-direction: row-reverse;
}

#asistencia-social {
  scroll-margin-top: 100px;
}

#comite-defensa {
  scroll-margin-top: 100px;
  flex-direction: row-reverse;
}

#menu-bienestar {
  scroll-margin-top: 200px;
}

/*Secretaria*/
.lista-secretaria {
  display: flex;
  flex-direction: column;
  font-family: "Poppins";
  padding-right: 10px;
  text-align: justify;
}

/*Insercion Laboral*/
.main-insercion {
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-content: center;
}

.content-insercion {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1000px;
  justify-content: center;
  align-content: center;
  margin: auto;
  padding: 20px 0;
  gap: 40px;
}

.item-insercion {
  gap: 20px;
  padding: 0 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.item-insercion h2 {
  font-family: "Poppins";
  font-size: 40px;
}

.item-insercion .txt {
  font-family: "Poppins";
  text-align: justify;
}

.item-container-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.item-card {
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 10px;
  gap: 10px;
  border-radius: 15px;
  box-shadow: 0 0 1px 0;
  background-color: var(--clr-white);
  justify-content: space-between;
}

.txt-item-card {
  font-family: "Poppins";
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.txt-item-card h3 {
  text-align: center;
  padding: 10px 0;
}

.txt-item-card .txt-inter {
  text-align: justify;
  padding: 0 10px;

}

.img-item-card {
  width: 100%;
  padding: 0 10px;

}

.img-item-card img {
  width: 100%;
}

/*ASESORIA*/
.txt-asesoria {
  text-align: center;
  padding: 10px;
  font-size: 25px;
  color: var(--clr-bg-header);
  font-family: "Poppins";
  font-weight: bold;
}

.btn-cv {
  width: 50%;
  margin: auto;
  padding: 10px;
  box-shadow: inset 0 0 1px 0;
  color: var(--clr-azul-fuerte);
  font-family: "Poppins";
  font-weight: bold;
  text-align: center;
}

.btn-cv:hover {
  cursor: pointer;
  background-color: #d0cdcd;
}

.img-item-acceso {
  height: 200px;
  width: 200px;
  filter: brightness(1);
  object-fit: contain;
  margin: auto;
}

/*SEGUIMIENTO EGRESADO*/
.container-inser {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  gap: 20px;
  padding: 20px;
  font-family: "Poppins";
}

.container-inser {
  padding: 10px;
}

.container-inser h2 {
  font-size: 30px;
}

.txt-inser {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  box-shadow: 0 0 1px 0;
  border-radius: 15px;
}

.txt-inser h2 {
  text-align: left;
}

.txt-inser p {
  text-align: justify;
  padding: 10px;
  /* white-space: pre-line; */
  display: flex;
  flex-direction: column;
}

.contenedor-encuesta-egre {
  display: flex;
  width: 100%;
  gap: 20px;
  max-width: 1200px;
  margin: auto;
  justify-content: center;
  padding: 20px;
  flex-wrap: wrap;

}

.tittle-encuesta {
  padding: 0 20px;
}

.cont-item-graf {
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 1px 0;
  padding: 20px 0;
  gap: 20px;
  border-radius: 18px;
  align-items: center;
  justify-content: space-between;
}

.cont-grafico {
  display: flex;
  /*width: 350px;
  height: 350px;*/
  padding: 10px 0;
  justify-content: center;
}

.contenido-aseso {
  display: flex;
  width: 100%;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.tarjeta-aseso {
  padding: 10px;
  width: 180px;
  box-shadow: 0 0 1px 0;
  border-radius: 10px;
}

#egre2024 {
  width: 100%;
  height: 100%;
}

#myPieChart {
  width: 100%;
  height: 100%;
}

#egre2024:hover {
  cursor: pointer;
}

#myPieChart {
  cursor: pointer;

}

.btn-actualiza-datos {
  background-color: var(--clr-bg-header);
  color: var(--clr-white);
  padding: 20px 15px;
  width: 200px;
}

/*CARRERA - DSI -GADM -CONTA*/
.main-carrera {
  display: flex;
  width: 100%;
  max-width: 1400px;
  justify-items: center;
  margin: 20px auto;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  flex-direction: column;
  align-items: center;
}

.campo-laboral {
  display: flex;
  flex-direction: column;
}

.txt-campo-laboral {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1500px;
  width: 100%;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.campo-laboral h2 {
  font-size: 40px;
  font-family: "Poppins";
}

.campo-laboral p {
  font-size: 18px;
  text-align: justify;
  font-family: "Poppins";
}

.menu-carrera {
  display: flex;
  gap: 10px;
  max-width: 1500px;
  width: 100%;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.item-carrera {
  width: 200px;
  height: 200px;
  flex: 1;
  flex-basis: 200px;
  flex-grow: 2;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 0 2px 0;
}

.item-carrera:hover {
  cursor: pointer;
  transform: scale(1.02);
}

.item-carrera img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5);
}

.item-carrera h2 {
  position: absolute;
  bottom: 0;
  padding: 10px;
  color: white;
  font-family: "Poppins";
  font-size: 1.3rem;
}

.perfil-egresado {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1500px;
  width: 100%;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.txt-perfil-egresado {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.txt-perfil-egresado p {
  font-size: 18px;
  padding: 10px 20px;
  font-family: "Poppins";
  text-align: justify;
}

/*MALLA CURRICULAR*/
.malla-curricular {
  width: 100%;
  font-family: "Poppins";
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0;


}

.txt-malla {
  width: 100%;
  padding: 10px;
}

.txt-malla h2 {
  font-size: 40px;
  font-family: "Poppins";
}

.txt-malla p {
  font-size: 18px;
  font-family: "Poppins";
  text-align: justify;
}

.content-malla {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    display: flex;
    height: 100%;
    align-items: center;
    flex-wrap: wrap;
}

.center-item {
  border: solid var(--clr-bg-header);
  height: 80%;
}

.content-items {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  height: 100%;
  justify-content: space-evenly;
}

.item-left {
  display: flex;
  flex-direction: column;
  padding: 10px;

}

.item-left details {
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: ease-in(200ms);
  box-shadow: 0 0 1px 0;
  padding: 10px;
  width: 350px;

}
.item-left details[open]{
  height: -webkit-fill-available;
}
.item-left summary {
  display: flex;
  padding: 10px;
  align-items: center;
  gap: 10px;
  transition: ease-in(200ms);
  cursor: pointer;
}

.item-left img {
  height: 20px;
  transform: rotate(-90deg);
  transition: ease-in(200ms);
}

.item-left details:open img {
  transform: rotate(0);

}

.item-left ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}




/*MALLA CURRICULAR BOX*/
.container-malla {
  width: 100%;
  display: flex;
  justify-content: center;
}

.items-malla {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 20px;
  gap: 20px;
  flex-wrap: wrap;
}

.item-malla {
  display: flex;
  flex-direction: column;
  width: 300px;
  max-width: 350px;
  height: 320px;
  transition: all 200ms;
  justify-content: space-around;
  text-align: center;
  padding: 10px;
  box-shadow: 0 0 1px 0;
  border-radius: 15px;
background-color: var(--clr-gris);
  img {
    mix-blend-mode: multiply;
    padding: 10px;
    width: 150px;
    margin: 0 auto;
  }
}

.item-malla:hover {
  cursor: pointer;
  transform: scale(1.01);
  background-color: var(--clr-light);
}
.btn-container{
  width: 100%;
  padding: 20px;
}
.btn-malla{
  padding: 20px 15px;
  background-color: #001d67;
  color: white;
  &:hover{
    cursor: pointer;
    background-color: var(--clr-bg-header);
  }
}

/*PERFIL EGRESADO GOD*/
#perfil-egre h3 {
  color: #017440;
}
#icon-conta h3 , #perfil-conta h3{
  color: #b90000;
}