#body {
   &.menu-on {
      overflow: hidden;
   }
}

header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 10;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 2em 1em;
   max-width: 1024px;
   margin: 0 auto;
   background-color: var(--color-negro-transparente-05);
   backdrop-filter: blur(20px);
   transition: background-color .5s, backdrop-filter .5s;

   &.on {
      backdrop-filter: blur(5px);
      background-color: var(--color-negro-transparente-7);
   }

   .logo {
      display: flex;
      align-items: center;
      gap: .5em;

      span {
         font-size: 1.3rem;
         font-family: "Hammersmith";
         color: var(--color-blanco);
      }

   }

   #contenedorIconosMenu {
      position: absolute;
      top: 1.5em;
      right: 1em;
      width: 40px;
      height: 40px;
      pointer-events: none;
      z-index: 30;

      .icono-menu {
         position: absolute;
         top: 0;
         right: 0;
         display: block;
         width: 100%;
         height: 100%;
         cursor: pointer;
         filter: invert(1);
         transition: opacity 0.5s ease;
      }

      #iconoAbrirMenu {
         opacity: 1;
         pointer-events: all;
      }

      #iconoCerrarMenu {
         opacity: 0;
         pointer-events: none;
      }

      &.on {
         #iconoAbrirMenu {
            opacity: 0;
            pointer-events: none;
         }

         #iconoCerrarMenu {
            opacity: 1;
            pointer-events: all;
         }
      }
   }

   #menuPrincipal {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 20;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;

      ul {
         display: flex;
         flex-direction: column;
         width: 100%;
         height: 100dvh;
         gap: 1.5em;
         justify-content: center;
         padding: 1em;
         align-items: flex-end;
         background-color: var(--color-negro-menos-intenso-0);

         .contenedor-enlaces-menu-principal {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: .5em;

            .icono-desplegable-menu-principal {
               font-size: 1.3rem;
               cursor: pointer;
               color: var(--color-blanco);
            }

            .enlace-menu-principal {
               color: var(--color-blanco);
               width: max-content;
               border: none;
               padding: 0;
               background-color: transparent;
               outline: none;
               font-weight: normal;

               &::after {
                  position: absolute;
                  bottom: -2px;
                  left: 0;
                  content: '';
                  display: block;
                  width: 0%;
                  height: 2px;
                  background-color: var(--color-blanco);
                  transition: width 0.3s ease;
               }

               &:hover {
                  &::after {
                     width: 100%;
                  }
               }

               &.visitado {
                  &::after {
                     width: 100%;
                     background-color: var(--color-primario);
                  }
               }
            }

            .contenedor-general-desplegable {
               position: absolute;
               top: 100%;
               right: 0;
               z-index: 25;
               opacity: 0;
               padding-top: .5em;
               pointer-events: none;
               transition: opacity 0.5s ease;

               .contenedor-enlaces-desplegable {
                  display: flex;
                  flex-direction: column;
                  gap: 1em;
                  background-color: var(--color-negro-menos-intenso-0);
                  border: 1px solid var(--color-blanco);
                  padding: 1em;
                  border-radius: 1em;

                  .enlace-menu-desplegable {
                     color: var(--color-blanco);
                     text-align: right;
                  }
               }


            }

            &:has(.icono-desplegable-menu-principal.on),
            &:has(.enlace-menu-principal.on) {
               .contenedor-general-desplegable {
                  opacity: 1;
                  pointer-events: all;
               }
            }
         }
      }

      &.on {
         opacity: 1;
         pointer-events: all;
         transition: opacity 0.5s ease;
      }
   }
}

footer {
   display: flex;
   flex-direction: column;
   gap: 1em;
   justify-content: space-between;
   align-items: center;
   padding: 7em 3em;
   background-color: var(--color-negro-menos-intenso-0);
   overflow: hidden;

   p {
      color: var(--color-blanco);
   }

   .contenedor-mensaje {
      display: flex;
      flex-direction: column;

      .mensaje-1 {
         font-size: 1.3rem;
         font-style: italic;
      }

      .mensaje-2 {
         font-size: 2rem;
         font-family: "Hammersmith";
      }

      .contenedor-redes-sociales {
         display: flex;
         flex-wrap: wrap;
         gap: 1em;

         .icono-red-social {
            color: var(--color-blanco);
            width: 40px;
            height: 40px;
            filter: invert(1);
         }
      }
   }

   .contenedor-informacion {
      display: flex;
      flex-direction: column;
      gap: 2em;

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

@media (min-width: 768px) {
   header {
      padding: 2em;

      .logo {
         span {
            font-size: 1.5rem;
         }
      }

      #contenedorIconosMenu {
         right: 2em;
      }

      #menuPrincipal {
         ul {
            padding: 2em;
         }
      }
   }

   footer {
      flex-direction: row;
   }
}

@media (min-width: 1024px) {
   header {
      margin: 1em auto 0;
      border-radius: 1em;
      padding: 2em;
      background-color: transparent;
      backdrop-filter: blur(0px);

      #contenedorIconosMenu {
         display: none;
      }

      #menuPrincipal {
         opacity: 1;
         pointer-events: all;
         position: relative;
         width: fit-content;

         ul {
            flex-direction: row;
            width: auto;
            height: auto;
            padding: 0;
            justify-content: center;
            align-items: center;
            background-color: transparent;

            .contenedor-enlaces-menu-principal {
               .icono-desplegable-menu-principal {
                  display: none;
               }

               .enlace-menu-principal {
                  color: var(--color-blanco);

                  &::after {
                     position: absolute;
                     bottom: -2px;
                     left: 0;
                     content: '';
                     display: block;
                     width: 0%;
                     height: 2px;
                     background-color: var(--color-blanco);
                     transition: width 0.3s ease;
                  }

                  &:hover {
                     &::after {
                        width: 100%;
                     }
                  }

                  &.visitado {
                     &::after {
                        width: 100%;
                        background-color: var(--color-primario);
                     }
                  }
               }

               .contenedor-general-desplegable {
                  left: 0;
                  width: max-content;

                  &:hover {
                     opacity: 1;
                     pointer-events: all;
                  }

                  &.enlaces-fin {
                     left: auto;
                     right: 0;

                     .contenedor-enlaces-desplegable {
                        align-items: flex-end;
                     }
                  }
               }
            }
         }
      }
   }
}