#divContenedorAnuncioPopup {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100dvh;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1000;
   display: none;
   justify-content: center;
   align-items: center;
   padding: 1em;

   &.on {
      display: flex;
   }

   .div-imagen {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: auto;
      box-shadow: 0px 0px 10px 1px var(--color-terciario-transparente-5);
      border-radius: 20px;
      overflow: hidden;

      #btnCerrarAnuncioPopup {
         position: absolute;
         display: flex;
         justify-content: center;
         align-items: center;
         top: 1em;
         right: 1em;
         width: 2em;
         height: 2em;
      }

      a {
         cursor: default;

         &.tiene-enlace {
            cursor: pointer;
         }

         img {
            width: 100%;
            height: 100%;
            object-fit: contain;
         }
      }
   
      
   }
}

@media (orientation: landscape) {
   #divContenedorAnuncioPopup {
      .div-imagen {
         width: auto;
         height: 100%;
      }
   }
}

.seccion-portada {
   h1 {
      display: none;
   }
}

.seccion-anuncios {
   height: 100dvh;
   width: 100%;

   .div-contenedor-tablet {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 3%;

      .tablet {
         display: flex;
         justify-content: center;
         align-items: center;
         width: 100%;
         gap: 2%;
         background-color: var(--color-blanco);
         padding: 2%;
         border-radius: 1em;
         border: 3px solid var(--color-blanco);


         &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: inset -10px -10px 40px 0px hsla(0, 0%, 0%, 0.5);
            border-radius: 1em;
            pointer-events: none;
         }

         .camara {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 2%;
            aspect-ratio: 1/1;
            background-color: var(--color-negro);
            border-radius: 50%;

            .lente {
               width: 60%;
               aspect-ratio: 1/1;
               background-color: rgb(80, 80, 80);
               border-radius: 50%;

               .reflejo {
                  width: 40%;
                  aspect-ratio: 1/1;
                  background-color: rgb(198, 198, 198);
                  border-radius: 50%;
               }
            }
         }

         .div-pantalla {
            display: flex;
            width: 100%;
            aspect-ratio: 16/9;
            overflow: hidden;
            background-color: black;
            border-radius: 1em;

            .img-banner-tablet {
               width: 100%;
               height: 100%;
               aspect-ratio: 16/9;
               object-fit: contain;
               transform: translateX(-100%);
            }

            .img-banner-tablet.con-animacion {
               transition: transform 1s;
            }

            .img-banner-tablet.ir-izquierda {
               transform: translateX(0%);
            }

            .img-banner-tablet.ir-derecha {
               transform: translateX(-200%);
            }

            .div-botones-cambiar-imagenes {
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               display: flex;
               justify-content: space-between;
               align-items: center;
               pointer-events: none;

               .btn-cambiar-imagenes {
                  width: fit-content;
                  height: 100%;
                  background-color: black;
                  pointer-events: all;
                  border: none;
                  opacity: 0;
                  padding: 0.3em;
                  font-size: 1rem;
                  transition: opacity .5s ease;
               }

               #btnIzquierdaBannerTablet {
                  rotate: 180deg;
               }
            }

            .reflejos {
               position: absolute;
               top: -50%;
               left: -50%;
               width: 30%;
               height: 200%;
               background: linear-gradient(90deg,
                     rgba(255, 255, 255, 0.5) 0%,
                     transparent 100%);
               transform: rotate(15deg);
               pointer-events: none;
            }

            .reflejos.izquierda {
               left: 150%;
               background: linear-gradient(90deg,
                     rgba(255, 255, 255, 0.5) 0%,
                     transparent 100%);
               animation: animacion-freflejo-pantalla-tablet-izquierda 10s infinite ease-in-out;
            }

            .reflejos.derecha {
               left: -50%;
               background: linear-gradient(90deg,
                     transparent 0%,
                     rgba(255, 255, 255, 0.5) 100%);
               animation: animacion-freflejo-pantalla-tablet-derecha 10s infinite ease-in-out;
            }

            &:hover {
               .div-botones-cambiar-imagenes {
                  .btn-cambiar-imagenes {
                     opacity: .4;
                     color: white;

                     &:hover {
                        opacity: .8;
                     }
                  }
               }
            }
         }

         .circulo-tactil {
            width: 5%;
            aspect-ratio: 1/1;
            background-color: var(--color-negro-menos-intenso-1);
            box-shadow: 0px 0px 0px 0px var(--color-blanco);
            border-radius: 50%;
            transition: background-color 0.4s, box-shadow 0.4s;
         }

         .circulo-tactil.encendido {
            background-color: var(--color-terciario);
            box-shadow: 0px 0px 50px 1px var(--color-terciario);
         }
      }

      .lapiz {
         display: none;
      }
   }
}

.seccion-por-que-colegio {
   gap: 1em;

   .mensaje-introduccion {
      background-color: var(--color-primario);
      color: var(--color-blanco);
      margin: 0 auto;
      padding: 1em 2em;
      border-radius: 1em;
      text-align: center;
   }

   .div-contenedor-mensajes {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-areas: "";
      width: 100%;
      max-width: 2000px;
      margin-top: 2em;
      gap: 2em;

      .div-mensaje {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: 1em;
         background-color: var(--color-cuaternario-transparente-9);
         padding: 1em;
         width: 100%;
         border-radius: 1em;
         /* animation: animacion-subir-bajar 2s ease infinite alternate; */

         .div-icono {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            left: 0;
            translate: -50% -50%;
            background-color: var(--color-terciario);
            width: 2em;
            height: 2em;
            border-radius: 50%;

            span {
               font-size: 1.5rem;
               color: var(--color-blanco);
               text-shadow: 0px 0px .5em var(--color-negro);
            }
         }

         h3 {
            font-size: 1.3rem;

            color: var(--color-blanco-menos-intenso);

            span {
               color: var(--color-terciario);
               font-size: 1.7rem;
            }
         }

         p {
            font-size: 1rem;
            color: var(--color-blanco);
         }

         img {
            border-radius: 2em;
            rotate: -2deg;
            width: 80%;
            transition: rotate 0.5s ease;
         }
      }

      .div-mensaje:nth-child(2),
      .div-mensaje:nth-child(3) {
         /* animation: animacion-subir-bajar 2s ease infinite alternate 1s; */

         .div-icono {
            left: auto;
            right: 0;
            translate: 50% -50%;
         }

         img {
            rotate: 2deg;
         }
      }

      .div-mensaje:hover {
         rotate: 0deg;

         img {
            rotate: 0deg;
         }
      }
   }
}

.seccion-valores {
   gap: 2em;

   .div-valores {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      justify-items: center;
      align-items: center;
      gap: 2em;

      .div-valor {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         border-radius: 2em;
         background-color: var(--color-blanco);
         padding: 1em;
         height: 100%;
         gap: 1em;

         img {
            width: 100%;
            max-width: 200px;
            border-radius: 1em;
         }

         .separador {
            width: 100%;
            height: 4px;
            background-color: var(--color-terciario);
         }

         .div-texto {
            display: flex;
            flex-direction: column;
            gap: 1em;
            width: 100%;
            padding: 0.5em 1em;

            h3 {
               font-size: 1.3rem;
               color: var(--color-secundario);
            }
         }
      }
   }
}

.seccion-propuestas-academicas {
   h2 {
      margin-bottom: .5em;
   }

   .div-propuestas {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 2em;

      .propuesta {
         background-color: var(--color-cuaternario-transparente-9);
         padding: 1em;
         border-radius: 1em;
         display: flex;
         flex-direction: column;
         gap: 1em;
         /* animation: animacion-aumentar-disminuir-tamanio 3s ease infinite alternate; */

         h3 {
            color: var(--color-terciario);
            font-size: 1.5rem;
         }

         p {
            height: 100%;
            padding-bottom: 1em;
            color: var(--color-blanco);
         }

         a {
            position: absolute;
            right: 0;
            bottom: 0;
            transform: translateX(10%) translateY(50%);
            margin-left: auto;
            color: var(--color-blanco);
            background-color: var(--color-terciario);
            z-index: 10;
            text-shadow: 0px 0px 5px var(--color-negro);
            padding: 0.5em;
            transition: rotate 0.5s ease;
            border-radius: 1em;
         }
      }

      .propuesta:nth-child(1),
      .propuesta:nth-child(3) {

         a {
            rotate: -4deg;
         }
      }

      .propuesta:nth-child(2),
      .propuesta:nth-child(4) {

         a {
            rotate: 4deg;
         }
      }

      .propuesta:hover {
         a {
            rotate: 0deg;
         }
      }
   }
}

.seccion-instagram {
   .div-instagram {
      display: flex;
      flex-direction: column;
      gap: 2em;
      max-height: 100dvh;
      padding-block-start: 2em;

      .div-portada {
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: 1em;

         .div-imagen {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            padding: 15px;
            background-color: var(--color-blanco);
         }

         .div-informacion {
            display: flex;
            flex-direction: column;
            gap: 1em;

            .cuenta {
               font-size: 1.3rem;
               color: var(--color-terciario);
               text-shadow: 0px 0px 2em white;
            }

            .div-detalles {
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;

               span {
                  display: flex;
                  align-items: center;
                  gap: 0.5em;
                  color: var(--color-terciario);
                  text-shadow: 0px 0px 2em white;

                  b {
                     color: var(--color-terciario);
                     font-size: 1.2rem;
                  }
               }
            }
         }

         a {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: .4em;
            background-color: var(--color-terciario);
            font-size: 1.2rem;
            color: var(--color-blanco);
            text-shadow: 0px 0px 10px hsla(0, 0%, 0%, 0.5);
            rotate: -4deg;
            border-radius: .6em;
         }
      }

      .div-fotos-videos {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
         gap: 1em;
         overflow: hidden;
         overflow-y: auto;
         border-radius: 3em;
         padding: 1em;
         background-color: var(--color-quintenario);
         max-height: min(60dvh, 660px);

         img, video {
            width: 150px;
            height: 150px;
            border-radius: 30px;
            cursor: pointer;
            scale: .9;
            object-fit: cover;
            transition: scale 0.5s ease, border-radius 0.5s ease;

            &:hover {
               scale: 1;
               border-radius: 10px;
            }
         }
      }
   }
}

@media (min-width: 768px) {
   .seccion-anuncios {

      .div-contenedor-tablet {

         .tablet {
            border-radius: 2em;

            &::after {
               border-radius: 2em;
            }

            .div-pantalla {
               border-radius: 2em;

               .div-botones-cambiar-imagenes {

                  .btn-cambiar-imagenes {
                     font-size: 2rem;
                  }
               }
            }

         }

         .lapiz {
            display: block;
            width: 2.8%;
            animation: animacion-subir-bajar 1s ease alternate infinite;

            .cuerpo {
               width: 100%;
               aspect-ratio: 1/16;
               background-color: var(--color-blanco);
               border: 3px solid var(--color-blanco);

               &::after {
                  content: "";
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  box-shadow: inset -5px -5px 10px 0px hsla(0, 0%, 0%, 0.5);
               }
            }

            .punta {
               width: 100%;
               aspect-ratio: 1/2;
               background-color: var(--color-blanco);
               clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
               box-shadow: inset -5px -5px 10px 0px hsla(0, 0%, 0%, 0.5);
               border: 3px solid var(--color-blanco);
            }
         }
      }
   }

   .seccion-por-que-colegio {
      .div-contenedor-mensajes {

         .div-mensaje:nth-child(1),
         .div-mensaje:nth-child(3) {
            rotate: 1deg;
         }

         .div-mensaje:nth-child(2) {
            rotate: -1deg;
         }

         .div-mensaje:hover {
            rotate: 0deg;

            img {
               rotate: 0deg;
            }
         }
      }
   }

   .seccion-valores {
      .div-valores {

         .div-valor:nth-child(1),
         .div-valor:nth-child(3) {
            rotate: 1deg;
         }

         .div-valor:nth-child(2),
         .div-valor:nth-child(4) {
            rotate: -1deg;
         }

         .div-valor:hover {
            rotate: 0deg;
         }
      }
   }

   .seccion-propuestas-academicas {
      .div-propuestas {
  
         .propuesta:nth-child(1),
         .propuesta:nth-child(3) {
            rotate: 1deg;

            a {
               rotate: -5deg;
            }
         }

         .propuesta:nth-child(2),
         .propuesta:nth-child(4) {
            rotate: -1deg;

            a {
               rotate: 5deg;
            }
         }

         .propuesta:hover {
            rotate: 0deg;
            scale: 1.02;

            a {
               rotate: 0deg;
            }
         }
      }
   }

   .seccion-instagram {
      .div-instagram {
         .div-portada {
            flex-direction: row;

            .div-informacion {
               gap: 0;

               .cuenta {
                  font-size: 1.6rem;
               }

               .div-detalles {
                  flex-direction: row;
                  gap: 1.5em;
               }
            }
         }
      }
   }
}

@media (min-width: 1024px) {

   .seccion-anuncios {

      .div-contenedor-tablet {

         .tablet {
            width: 70%;
         }

         .lapiz {
            width: 2%;
         }
      }
   }

   .seccion-por-que-colegio {

      .div-contenedor-mensajes {
         grid-template-columns: 1fr 1fr 1fr;
         grid-template-areas:
            "mensaje1 mensaje2 mensaje3";
         gap: 2em;

         .div-mensaje {
            rotate: 2deg;

            .div-icono {
               width: 3em;
               height: 3em;

               span {
                  font-size: 2rem;
               }
            }
         }

         .div-mensaje:nth-child(1) {
            grid-area: mensaje2;
            z-index: 10;
         }

         .div-mensaje:nth-child(2) {
            grid-area: mensaje1;
         }

         .div-mensaje:nth-child(3) {
            grid-area: mensaje3;
         }

         .div-mensaje:nth-child(2),
         .div-mensaje:nth-child(3) {
            rotate: -2deg;
            scale: 0.9;
         }

         .div-mensaje:hover {
            rotate: 0deg;

            img {
               rotate: 0deg;
            }
         }
      }
   }

   .seccion-valores {
      .div-valores {
         grid-template-columns: repeat(2, 1fr);
      }
   }

   .seccion-propuestas-academicas {
      .div-propuestas {
         grid-template-columns: repeat(3, 1fr);

         .propuesta:nth-child(1),
         .propuesta:nth-child(3) {
            rotate: 2deg;

            a {
               rotate: -6deg;
            }
         }

         .propuesta:nth-child(2),
         .propuesta:nth-child(4) {
            rotate: -2deg;

            a {
               rotate: 6deg;
            }
         }

         .propuesta:hover {
            rotate: 0deg;
            scale: 1.02;

            a {
               rotate: 0deg;
            }
         }
      }
   }

   .seccion-instagram {
      .div-instagram {
       
         .div-fotos-videos {
            img, video {
               width: 200px;
               height: 200px;
            }
         }
      }
   }
}

@media (min-width: 1200px) {
   .seccion-valores {
      .div-valores {
         .div-valor {
            flex-direction: row;

            .separador {
               width: 4px;
               height: 100%;
            }
         }

         .div-valor:nth-child(2),
         .div-valor:nth-child(4) {
            flex-direction: row-reverse;
         }
      }
   }
}

@keyframes animacion-freflejo-pantalla-tablet-derecha {
   0% {
      transform: translateX(-100%) rotate(15deg);
   }

   10% {
      transform: translateX(600%) rotate(15deg);
   }

   10.1% {
      transform: translateX(-100%) rotate(15deg);
   }

   100% {
      transform: translateX(-100%) rotate(15deg);
   }
}

@keyframes animacion-freflejo-pantalla-tablet-izquierda {
   0% {
      transform: translateX(0%) rotate(-15deg);
   }

   10% {
      transform: translateX(-600%) rotate(-15deg);
   }

   10.1% {
      transform: translateX(0%) rotate(-15deg);
   }

   100% {
      transform: translateX(-0%) rotate(-15deg);
   }
}