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

body {
font-family: "Arial", sans-serif;
margin: 0;
color: hsl(0 0% 30%);
background-color: hsla(67, 100%, 87%, 0.227);
}


a{
  text-decoration: none;
  color: hsl(210 92% 36%);
  font-weight: bold;
}

ul{
list-style: none;
padding: 0;
}

p,
li {
text-wrap: pretty;
}

span {
  font-weight: bold;
}


h1,
h3,
h4,
h5 {
color: hsl(196, 100%, 17%);
line-height: 1.1;
text-wrap: balance;
}

h2{
  color: hsl(40, 100%, 25%);
  text-wrap: balance;
  font-size: 3em;
  padding-block: 1em;
}


img{
max-width: 100%;

}

.contenedora{
max-width: 75rem;
margin-inline: auto;
padding: 3rem;
}


footer {
   background-color: rgb(28, 49, 43);
   color: hsl(0 0% 95%);
}


.subtitulo{
  font-size: 2em;

  

  
}






/*MENU -------------------------------------------*/
#logodgpc {
  display: block;
  margin-right: auto; /* Empuja el logotipo a la izquierda */
  width: 6rem;
}

header{
 position: absolute;
  width: 100%;
  justify-content: space-around;
  z-index: 10;
}

.menu{
  max-width: 75rem;
  margin-inline: auto;
  padding: 2rem;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

header .menu{
  display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}



header nav ul {
  display: flex;
  flex-wrap: wrap;
  
}

header nav a {
  color: #013e2b;
  align-items: center;
  }



.banner{
  position: relative;
  width: 100%;
  height: 100vh;
  background: url(../imagenes/banner.jpg);
  background-size: cover;
  background-position: center center;
  max-width: 100%;
}







header nav ul {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}



header nav a {
color: rgb(0, 51, 75);
align-items: center;
}


header nav a:hover,
header nav a:focus-visible,

.index nav li:first-of-type a,
.plan nav li:nth-of-type(2) a,
.mapa nav li:nth-of-type(3) a {
  outline: none;
  /* Agrega una línea de color en la parte inferior */
  border-bottom: 3px solid hsl(171, 100%, 31%); 
}

nav ul li{
  border-left: 2px solid #013e2b;
  line-height: 1.1;
  padding: 1rem;
  
}










/*PRIMER BLOQUE IMG + TITULO -------------------------------------------*/


.banner img{
    max-width: 100%;
    height: auto;
  }

.banner {
    position: relative; /* Establece el contexto de posición para los elementos hijos */
  }
  
 
.banner h1 {
    position: absolute; /* Coloca el título de forma absoluta */
    top: 50%; /* Lo coloca en la mitad vertical del contenedor padre */
    left: 50%; /* Lo coloca en la mitad horizontal del contenedor padre */
    transform: translate(-50%, -50%); /* Lo centra exactamente, trasform me funciona tambien para rotar */
    color: white; /* Color del texto */
    text-align: center; /* Centra el texto horizontalmente */
    font-size: 7vw;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Sombra del texto */  
  }
  




/*INFO PERSONAL -------------------------------------------*/



.cuadro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-block: .5em;
  padding: 1em;
  gap: 3em;
}

.mifoto{
  margin-inline: auto;
  max-width: 100%;
  width: 26em;
}

.mifoto img{
  border-radius: 52% 48% 24% 76% / 71% 77% 23% 29%  ;
  object-fit: cover;
  box-shadow: 3px 3px 5px #ccc, 6px 6px 10px #bbb, 9px 9px 15px #aaa;
}



.mifoto img:hover {
  transform: translateY(-10px); 
}



.textos{
  display: grid; 
}

.textos h3{
  border-block-end: 2px solid rgb(0, 88, 96);
  font-size: 1.5em;
}


.textos a{
  background-color:  rgb(0, 88, 96);
  border-radius: 100vw;
  color: hsl(0, 0%, 100%);
  font-size: .85em;
  float: right; /* Alinea el tx a la derecha */
  border-radius: 100vw;
  padding: 1em;
  border: 2px solid transparent;
}

.textos a:hover,
.textos a:focus-visible {
  color:  rgb(0, 88, 96); /* Cambia el color del texto al color del fondo inicial */
  background-color: hsl(0, 0%, 100%); /* Fondo blanco */
  border-color: rgb(0, 82, 86); /* Color del borde */
  outline: none;
}


.presentación {
  display: 0,
}


.adobe img{
  padding: 1em;
  width: 5em;
}

.adobe img:hover {
  transform: rotate(10deg); 
}

.contacto img{
  display: block;
  width: 5em;
  height: 4em;
  object-fit: contain;
  padding: .5rem;
  box-shadow: 0 10px 10px hsl(0 0% 0% / 0.593);
  transition: box-shadow .6s ease;

  border-radius: 2emx;
  object-fit: cover;
  box-shadow: 3px 3px 5px #ccc, 6px 6px 10px #bbb, 9px 9px 15px #aaa;
}

.contacto a:hover img {
  box-shadow: 0 4px 4px hsl(0 0% 0% / 20%);
  transition: box-shadow .3s ease;
}




  
/*INFO MATERIAS -------------------------------------------*/

.color{
  background-color:hsla(185, 30%, 46%, 0.605);
}

.materias{
   color: hsl(0 0% 95%);
}

.materias h4{
  color: rgb(237, 184, 113);
}

.cursadas span{
  color: rgb(0, 167, 153);
}

.cursadas ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1em;
  padding: 2em 0px 4em 0px;
}

.encurso ul{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(70rem, 100%), 0fr));
  padding: 2em 0px 4em 0px;
  
}

.materias ul li{
  padding-left: 2em;
  border-left: dashed 4px  rgb(214, 133, 3);
  background-color: rgb(28, 49, 43);
  padding-bottom: 4em;
  border-radius: 2em;
  box-shadow: 0 10px 10px hsl(0 0% 0% / 0.593);
 }

 





.materias li {
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.materias li:hover {
  background-color: #00383a9a;
  opacity: 0.8; 
  transform: translateY(-10px); 

}

.materias li.selected {
  background-color: #0242854b;
  color: white;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.materias li.selected {
  animation: pulse 0.5s;
}















 

/*GALERIA DE TPS -------------------------------------------*/

.tp h4{
  /*border-bottom: 2px solid rgb(0, 73, 59);*/
  /*display: inline-block;  Esto me asegura que la línea no se extienda por todo el contenedor */
  margin: 1em 0;
  background-color:  2em #175b534f;
}



.galeria{
  padding-bottom: 3em; 
}

.galeria1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 0.2em;
  
}

.galeria2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 0.2em;
}

.galeria3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 0.2em;
}

.galeria4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
  gap: 0.2em;
}

.tp img{
  border-radius: 2em;
box-shadow: 0 10px 10px hsl(0 0% 0% / 0.593);
}


.tp img:hover {
  opacity: 0.8; 
  background-color: #00738061;
  
}


.tp img:hover {
  transform: translateY(-10px); 
}


/*JT26 -------------------------------------------*/


.separa{
  padding-block: 2em;
  background-color: hsla(163, 27%, 30%, 0.623);
  padding-bottom: 4em;
  border-radius: 52% 48% 24% 76% / 71% 77% 23% 29%  ;
  box-shadow: 0 10px 10px hsl(0 0% 0% / 0.593);
}

.equipo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  padding-block: 2em;
  gap: 1rem;
  margin-inline: auto;
  text-align: center;
  border-radius: 2em;
  object-fit: cover;
  
}

section .equipo :hover img {
  box-shadow: 0 20px 20px hsla(166, 58%, 19%, 0.648);
  transition: box-shadow .10s ease;
}

.equitextos{ 
  margin-block: 2em;
}

.imgperfiles{
  text-align: center;
 
}

.equipo img {
  width: 13em;
  aspect-ratio: 1;
  border-radius: 50%;
  border: solid .4em  rgb(0, 88, 96);
}

.equitextos p {
  margin-bottom: 3em; /* Ajusta este valor según el espacio que desees entre el párrafo y el botón */
}

.equitextos a {
  background-color:  rgb(0, 88, 96);
  border-radius: 100vw;
  color: hsl(0, 0%, 100%);
  font-size: .85em;
  padding: 1em;
  text-align: center;
  border: 2px solid transparent; /* Añade una línea de borde inicialmente transparente */
}

.equitextos a:hover,
.equitextos a:focus-visible {
  color:  rgb(0, 88, 96); /* Cambia el color del texto al color del fondo inicial */
  background-color: hsl(0, 0%, 100%); /* Fondo blanco */
  border-color: rgb(0, 82, 86); /* Color del borde */
  outline: none;
}





/*INFO ACADEMICO -------------------------------------------*/

.contenedoraacademicos ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: 1em;
}

.contenedoraacademicos > ul > li:not(:last-of-type) {
  /* linea divisoria*/
  border-bottom: solid 1px hsl(280 29% 44% / .15);
  
  /* espacio antes de la linea */
  padding-block-end: 1.5em;
  
  /* espacio despues de la linea*/
  margin-block-end: 1.5em;
  font-size: 0.8em;
}
 
.materias{
  font-size: 0.9em;
}


.contenedoraacademicos img {
  display: block;
  width: 8em;
  aspect-ratio: 1;
  object-fit: contain;
  padding: .5rem;
  border-radius: 50%;
  box-shadow: 0 10px 10px hsl(0 0% 0% / 0.593);
  transition: .6s ease;
  background-color: hsla(67, 100%, 91%, 0.841);
}

.logosIE img {
  margin-inline: auto;
}



.contenedoraacademicos img:hover {
  opacity: 0.8; 
  background-color: #00738061;
  
}


.contenedoraacademicos img:hover {
  transform: translateY(-10px); 
}





.textosA {
  text-align: center;
  font-size: 0.8em;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
} 


.aca{
  padding: 1em 0 1em 0;
  background-color: #006f6a66;
  border-radius: 2em;
  box-shadow: 0 10px 10px hsl(0 0% 0% / 0.593);
  transition: box-shadow .6s ease;
}


  footer{
    padding: 4rem;
    color: white;
    font-size: 1rem;
  }
  

  /*BOCETOS -------------------------------------------*/



.bocetos{
    text-align: center;
    padding: 2em;
  }

 .bocetos img{
  width: 30em;
 }