body {
   background: url(../img/areaAlumno/FondoAreaAlumnos.png);
   overflow: hidden;
   background-repeat: no-repeat;
   background-size: 120%;
   background-position: 0 7vw;
   background-repeat: repeat-y;
   /* overflow: hidden; */
}

body::before {
   content: "";
   position: absolute;
   inset: 100px 0px 0px 0px;
   pointer-events: none;
   /* para que no bloquee clics */
   background:
      linear-gradient(to bottom, hsla(245, 67%, 24%, 0.721), transparent 20%) top,
      linear-gradient(to top, hsla(245, 67%, 24%, 0.721), transparent 20%) bottom,
      linear-gradient(to right, hsla(245, 67%, 24%, 0.721), transparent 20%) left,
      linear-gradient(to left, hsla(245, 67%, 24%, 0.721), transparent 20%) right;
   background-repeat: no-repeat;
   background-size: 100% 1000px, 100% 400px, 400px 100%, 400px 100%;
   z-index: -1;
}

header {
   position: fixed;
   top: 0;
   background: var(--colorAzulUltraMarina);
   width: 100%;
   height: 15vh;
   z-index: 9999;
}

header nav {
   margin-top: 0.6rem;
   margin-left: 0.6rem;
   display: flex;
   align-items: center;
   width: 100%;
}

header nav button {
   margin-left: auto;
   /* forma interesante de pegarlo a la derecha */
   margin-right: 3rem;
   color: var(--colorAzulUltraMarina);
   background: var(--colorAzulIndigoClaro);
   border: none;
   border-radius: 8px;
   padding: 1rem 1.5rem;
   box-shadow: 5px 5px 3px hsla(0, 0%, 0%, 0.405);
   font-family: 'Orelega One';
   font-size: large;
   cursor: pointer;
}

header nav button:hover {
   scale: 1.1;
}

header nav a {
   margin-right: 1.5rem;
   font-family: 'Poppins';
   color: var(--colorBlanco);
   font-size: large;
}

header nav a:hover {
   color: var(--colorNaranjita);
}

header nav a img {
   width: 7vw;
}

main {
   margin-top: 15vh;
}

.cabecera {
   padding-top: 0.3vh;
   text-align: center;
   color: var(--colorNaranjita);
   font-family: 'Orelega One';
}

.cabecera h1 {
   font-weight: 100;
   margin-top: 3rem;
}

.cabecera figure {
   margin-top: -5vh;
   display: none;
}


section {
   width: 35vw;
   display: flex;
   flex-direction: column;
}

.rotate-180 {
   transform: rotate(180deg);
}

.Contenido {
   background: #FEE9CE;
   display: flex;
   justify-content: center;
   flex-direction: column;
   height: 48vh;
   border-radius: 16px;
}

.Contenido button {
   z-index: 99;
   width: fit-content;
   margin: 0 auto;
   color: var(--colorAzulUltraMarina);
   background: var(--colorRosita);
   border: none;
   border-radius: 8px;
   padding: 1rem 1.5rem;
   box-shadow: 5px 5px 3px hsla(0, 0%, 0%, 0.773);
   font-family: 'Orelega One';
   font-size: large;
   cursor: pointer;

   position: relative;
   top: -26%;
}

.Contenido button:hover {
   scale: 1.1;
}

.imagenDentro {
   width: auto;
   height: 25vw;
   margin: 0 auto;
   margin-bottom: 1rem;
}

.manita {
   padding-bottom: 1rem;
}

.punta {
   width: 45vw;
   margin: -0.2rem auto;
}



@media(max-width:768px) {

   section:last-of-type .Contenido img {
      height: 60vw;
      margin-bottom: -0.3rem;
   }

   body {
      overflow: scroll;
   }

   article section {
      margin: 0 auto;
      width: 80%;
   }

   .Contenido img {
      height: 50vw;
   }

   .cabecera figure img {
      width: 60vw;
   }

   header nav {
      display: flex;
      flex-wrap: wrap;
      height: 10vh;
   }

   header nav a {
      font-size: small;
      margin-bottom: 0.5rem;
   }

   header nav button {
      display: block;
      width: fit-content;
      margin-top: 1rem;
      font-size: small;
      position: fixed;
      top: 6%;
      left: 45%;
      padding: 0.3rem;
   }
}

#examenModal .modal-content {
   padding: 2rem 12rem;
   background: var(--colorAzulIndigoClaro);
   color: white;
   text-align: left;
   padding-left: 1rem;
   position: relative;
   padding-bottom: 3rem;
   width: 25vw;
}

#examenModal .modal-content h2 {
   width: 100ch;
   margin-left: 4rem;
   font-family: 'Orelega One';
   font-weight: 300;
   font-size: 1.7rem;
}

#examenModal .modal-content li {
   width: 48ch;
   font-family: 'Poppins';
   font-size: medium;
}

.ContenedorBotones {
   position: absolute;
   left: 50%;
   transform: translate(-50%);
   display: flex;
}

.ContenedorBotones button {
   border: none;
   font-family: 'Orelega One';
   font-size: large;
   padding: 0.5rem 1rem;
   border-radius: 8px;
   margin: 0 2rem;
   color: var(--colorAzulUltraMarina);
   background-color: var(--colorHuevo);
   box-shadow: 5px 5px 3px hsla(0, 0%, 0%, 0.459);
   cursor: pointer;
}

.modal-content {
   font-family: 'Poppins';
}

.modal-content button:hover {
   background: #fbb861;
   scale: 1.1;
}

.modal-content button {
   margin-top: 1rem;
}

.modal-content .title {
   font-size: 1.8rem;
   font-weight: 300;
   font-family: 'Orelega One';
   margin-bottom: 1rem;
   color: var(--colorAzulUltraMarina);
   text-align: center;
}

#modalTitle {
   font-family: 'Orelega One';
   color: var(--colorNaranjita);
}

@media(max-width:768px) {
   .modal-content {
      margin-top: 30vh;
      max-width: 40vw;
   }

   .modal-content li {
      width: 25ch !important;
   }

   .modal-content h2 {
      width: 10ch !important;
   }



   header nav {
      flex-wrap: nowrap;
      margin-left: 0.8rem;
   }

   header nav a {
      margin-right: 1rem;
   }

   header nav button {
      top: 8%;
      left: 42.5%;
   }

   .Contenido button {
      top: -15%;
   }

   .rotate-180 {
      padding-bottom: 2rem;
      margin-bottom: -0.3rem;
   }

   body {
      height: 125vh;
   }

   .cerrarSesion {
      width: 10vw;
      position: fixed;
      bottom: 10%;
      left: 5%;
      background: var(--colorAzulIndigoClaro);
      border: 2px solid var(--colorBlanco);
      border-radius: 50%;
      padding: 0.5rem;
   }
}

@media(min-width:768px) {
   .cabecera h1 {
      font-size: 2.5rem;
   }

   #examenModal .modal-content {
      padding-bottom: 5rem;
   }

   article {
      margin-top: -4rem;
   }

   #opinionModal .modal-content,
   .modalPDF {
      position: relative;
   }

   .cerrarOpinion,
   .cerrarPDF {
      font-family: 'Orelaga One';
      width: 1rem;
      height: 1rem;
      padding: 0.5rem;
      background: var(--colorHuevo);
      display: block !important;
      position: absolute;
      top: -5%;
      left: 0%;
      box-shadow: 2px 2px 0.5px black;
      font-size: large;
      color: var(--colorAzulUltraMarina);
   }
}

@media(max-width:768px) {
   #opinionModal .modal-content {
      width: 100vw;
      max-width: 80vw;
   }

   #examenModal .modal-content {
      padding-bottom: 5rem;
   }

   #examenModal .modal-content li {
      width: 35ch !important;
   }

   #examenModal .modal-content h2 {
      width: 18ch !important;
   }

   #opinionModal .modal-content,
   .modalPDF {
      position: relative;
   }

   .cerrarOpinion,
   .cerrarPDF {
      font-family: 'Orelaga One';
      width: 2rem;
      height: 2rem;
      padding: 0.5rem;
      background: var(--colorHuevo);
      display: block !important;
      position: absolute;
      top: -7%;
      left: 0%;
      box-shadow: 3px 3px 0.8px black;
      padding-bottom: 0.25rem;
   }

   .cerrarPDF {
      left: 0%;
   }

   body {
      background-size: 300vw !important;
   }

   .Contenido {
      height: 40vh !important;
   }
}

.modalPDF {
   background: var(--colorHuevo) !important;
}

#opinionModal .modal-content {
   background: var(--colorHuevo) !important;
}

.modal-content h3 {
   color: var(--colorNaranjita) !important;
}

.modal-content button[type="submit"] {
   background: var(--colorRosita);
}

.modal-content .title {
   color: var(--colorAzulIndigoClaro) !important;
}

@media(min-width:768px) {
   article {
      display: flex;
      gap: 7em;
      justify-content: center;
      margin-top: -3rem;
   }

   .punta {
      width: 20vw;
   }
}

.left-section .img-hover-container,
.right-section .img-hover-container,
.center-top .img-hover-container {
   margin-top: 2rem;
}

/* Compensar transformaciones de imágenes para centrar el texto hover */
.left-section .img-hover-text {
   transform: translate(-50%, -250%) translateX(15px);
}

.center-top .img-hover-text {
   transform: translate(-50%, -80%) translateY(7px);
}

.center-bottom .img-hover-text {
   transform: translate(-50%, -200%) translateY(30px);
}

.right-section .img-hover-text {
   transform: translate(-60%, -280%);
}