:root {
   --altura-img-union: 50px;
   --padding-por-img-union: calc(var(--altura-img-union) / 2 + 2em);
}

body {
   overflow-x: hidden;
}

.titulo-con-borde-1,
.titulo-con-borde-2 {
   display: flex;
   flex-direction: column;
   font-size: 2.5rem;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.titulo-con-borde-1 {
   text-shadow: 0 0 .1em var(--color-terciario-transparente-5);
   rotate: 2deg;

   span:nth-child(1) {
      color: var(--color-secundario);
   }

   span:nth-child(2) {
      color: transparent;
      -webkit-text-stroke: 2px var(--color-secundario);
      font-weight: normal;
   } 
}

.titulo-con-borde-2 {
   text-shadow: 0px 0px .1em var(--color-blanco);
   rotate: -2deg;

   span:nth-child(1) {
      color: transparent;
      -webkit-text-stroke: 2px var(--color-blanco);
      font-weight: normal;
   }

   span:nth-child(2) {
      color: var(--color-blanco);
   }
}

.btn-whatsapp-flotante {
   position: fixed;
   bottom: 10px;
   right: 10px;
   z-index: 1000;
   width: 45px;
   height: 45px;
   border-radius: 50%;
   padding: 5px;
   background-color: var(--color-cuaternario-transparente-5);
   box-shadow: 0px 0px 20px 1px var(--color-terciario);
   transition: opacity 0.7s ease;
   cursor: pointer;
   animation: animacion-subir-bajar 1s ease infinite alternate;
}

.img-union {
   position: absolute;
   top: 0;
   left: 0;
   translate: 0% -50%;
   width: 100%;
   height: var(--altura-img-union);
   z-index: 1;
   filter: drop-shadow(0px 0px 10px var(--color-terciario));
}

.borde-brillante-terciario {
   box-shadow: 0px 0px 10px 1px var(--color-terciario);
}

.borde-brillante-secundario {
   box-shadow: 0px 0px 10px 1px var(--color-secundario);
}

header {
   position: fixed;
   top: 0;
   width: 100%;
   height: 100dvh;
   overflow: hidden;
   z-index: 100;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   gap: 1em;
   filter: blur(10px);
   padding: 1em;
   box-shadow: 0px 0px 20px 1px var(--color-terciario);
   background-color: var(--color-cuaternario-transparente-9);
   opacity: 0;
   pointer-events: none;
   backdrop-filter: blur(0px);
   transform: skew(90deg, 0deg);
   transition: opacity .7s ease, backdrop-filter .7s ease, transform .7s ease, filter .7s ease;

   .div-logos {
      .img-logo {
         width: 200px;
      }
   }

   #navMenu {
      display: flex;
      flex-direction: column;
      flex: 1;
      gap: 1em;
      width: 100%;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;

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

         .div-enlace-menu {
            height: fit-content;
            width: max-content;

            a,
            .btn-cerrar-sesion {
               font-size: 1rem;
               font-weight: bold;
               font-family: "Roboto";
               text-align: center;
               color: var(--color-blanco);
               text-shadow: 0px 0px .1em var(--color-terciario);
               transition: color .5s ease, text-shadow .5s ease;
               width: max-content;
            }

            .btn-cerrar-sesion {
               background-color: transparent;
               padding: 0;
               border: none;
               cursor: pointer;
               box-shadow: none;
            }

            .no-clickable {
               pointer-events: none;
            }

            a::before,
            .btn-cerrar-sesion::before {
               --alto: 2px;
               content: "";
               position: absolute;
               left: 50%;
               bottom: calc(var(--alto) - 5px);
               transform: translateX(-50%);
               width: 0%;
               height: var(--alto);
               background-color: var(--color-terciario);
               box-shadow: 0px 0px 0px 0px var(--color-terciario);
               transition: width .5s ease;
            }

            a:hover,
            a.visitado,
            .btn-cerrar-sesion:hover {
               color: var(--color-terciario);
               text-shadow: 0px 0px 0px var(--color-terciario);

               &::before {
                  width: 100%;
                  box-shadow: 0px 0px 5px 1px var(--color-terciario);
               }
            }

            .div-sub-enlaces {
               position: absolute;
               bottom: 1;
               left: 1em;
               margin-top: .5em;
               display: flex;
               flex-direction: column;
               opacity: 0;
               pointer-events: none;
               overflow: hidden;
               z-index: 10;
               width: max-content;
               padding: 1em;
               gap: 1em;
               box-shadow: 0px 0px 10px 1px var(--color-terciario);
               background-color: var(--color-cuaternario);
               border-radius: 0em 0em 1em 1em;
               transition: opacity .5s ease;

               a {
                  color: var(--color-blanco);
                  text-shadow: 0px 0px 5px var(--color-negro);
                  text-align: left;

                  &::before {
                     background-color: var(--color-terciario);
                     left: 0;
                     transform: translateX(0%);
                  }

                  &:hover,
                  &.visitado {
                     color: var(--color-terciario);

                     &::after {
                        color: var(--color-terciario);
                     }
                  }
               }

            }

            &:has(.div-sub-enlaces) {
               &::before {
                  content: "▼";
                  position: absolute;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  top: 50%;
                  left: calc(100% + 1em);
                  translate: 0% -50%;
                  font-size: 1.3rem;
                  background-color: var(--color-blanco);
                  padding-inline: .2em;
                  color: var(--color-cuaternario-transparente-9);
                  border-radius: 50%;
               }
            }

            &:hover {
               .div-sub-enlaces {
                  opacity: 1;
                  pointer-events: all;
               }
            }

            .div-sub-enlaces:hover {
               opacity: 1;
               pointer-events: all;
            }
         }
      }

      .indicador {
         position: fixed;
         display: none;
         right: 2em;
         z-index: 100;
         font-size: 1.5rem;
         color: var(--color-blanco);
         text-shadow: 0px 0px 1px var(--color-terciario);
         cursor: pointer;
      }

      .indicador.on {
         display: block;
      }

      .indicador-arriba {
         top: 30%;
      }

      .indicador-abajo {
         bottom: 30%;
      }
   }

   &.on {
      opacity: 1;
      pointer-events: all;
      backdrop-filter: blur(5px);
      transform: skew(0deg, 0deg);
      filter: blur(0px);
   }
}

#botonMenu {
   position: fixed;
   top: 1.5em;
   right: 1em;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   z-index: 100;
   background-color: var(--color-cuaternario-transparente-5);
   padding: 7px;
   border-radius: 50%;
   box-shadow: 0px 0px 20px 1px var(--color-terciario);
   animation: animacion-boton-menu 2.5s ease infinite;
}

@keyframes animacion-boton-menu {
   0% {
      transform: rotate(0deg);
      scale: 1;
      padding: 7px;
   }

   30% {
      transform: rotate(180deg);
      scale: 1.1;
      padding: 10px;
   }

   60% {
      transform: rotate(360deg);
      scale: 1;
      padding: 7px;
   }

   100% {
      transform: rotate(360deg);
      scale: 1;
      padding: 7px;
   }
}

main {
   section {
      padding-block: var(--padding-por-img-union);
      padding-inline: 1em;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100dvh;

      background-image: radial-gradient(circle,
            var(--color-terciario) 3%,
            transparent 4%),
         radial-gradient(circle, var(--color-terciario) 3%, transparent 4%);
      background-size: 100px 100px;
      background-position: 0 0, 50px 50px;

   }

   section:nth-child(2n) {
      background-color: var(--color-cuaternario);

   }

   section:nth-child(2n + 1) {
      background-color: var(--color-blanco-menos-intenso);

      &::before {
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: repeating-linear-gradient(to bottom,
               transparent,
               transparent 40px,
               var(--color-terciario) 41px);
      }
   }

   .seccion-portada {
      height: 100dvh;
      padding: 0;

      .video-adelante,
      .img-adelante,
      .canvas-video-atras,
      .img-atras {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         object-fit: contain;
         z-index: 0;
      }

      .canvas-video-atras,
      .img-atras {
         object-fit: cover;
         background-color: black;
      }

      .img-atras {
         filter: blur(5px);
      }

      h1 {
         position: absolute;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         bottom: .5em;
         left: 50%;
         transform: translateX(-50%);
         background-color: var(--color-cuaternario-transparente-8);
         text-shadow: 0px 0px .2em var(--color-terciario);
         backdrop-filter: blur(5px);
         padding: 0em 1em;
         width: fit-content;
         border-radius: .5em;
         line-height: 1.7em;
         transition: bottom .5s ease;

         span {
            font-size: 2rem;
         }

         span:nth-child(1) {
            color: var(--color-blanco);
         }

         span:nth-child(2) {
            color: transparent;
            -webkit-text-stroke: 2px var(--color-blanco);
            font-weight: normal;
         }

         &.on {
            bottom: 50%;
         }
      }

   }
}

footer {
   display: flex;
   flex-direction: column;
   gap: 1em;
   background-image: repeating-linear-gradient(45deg,
         var(--color-primario) 0,
         var(--color-primario) 1px,
         transparent 1px,
         transparent 50px);
   background-color: var(--color-cuaternario);
   padding-top: var(--padding-por-img-union);
   padding-inline: 2em;
   overflow: hidden;

   .contenedor-titulo-mascara {
      h2 {
         rotate: 4deg;
      }
   }

   .div-redes-sociales,
   .div-ubicacion,
   .div-contacto,
   .div-horarios-atencion,
   .div-enlaces-interes {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 1em;
      border-radius: 1em;
      margin: 0 auto;
      width: 100%;
      height: fit-content;
      background-color: var(--color-blanco);
      gap: 1em;

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

      p,
      a {
         font-weight: bold;
         color: var(--color-primario);
      }

      a {
         color: var(--color-primario);
         text-decoration: underline;
         transition: color .3s ease;

         &:hover {
            color: var(--color-secundario);
         }
      }
   }

   .div-redes-sociales {
      margin-top: 1em;
      flex-direction: column;
      justify-content: center;

      h3 {
         width: fit-content;
      }

      div {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: center;
         align-items: center;
         gap: 1em;
      }

      img.red-social {
         width: 50px;
         filter: drop-shadow(0px 0px 1px var(--color-terciario));
         scale: .8;
         transition: filter 0.5s ease, scale 0.5s ease;

         &:hover {
            filter: drop-shadow(0px 0px 1px var(--color-terciario)) saturate(1.5);
            scale: 1;
         }
      }
   }

   .div-contenedor-general {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1em;

      .div-ubicacion {
         height: 100%;
         align-items: normal;

         .div-ubicacion-titulo {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1em;
            width: 100%;

            h3 {
               width: fit-content;
            }
         }

         iframe {
            width: 100%;
            height: 100%;
            max-height: 100%;
         }
      }

      .div-contenedor-contacto-enlaces {
         display: flex;
         flex-direction: column;
         gap: 1em;

         .div-contacto {
            align-items: flex-start;

            .div-contacto-info {
               display: flex;
               justify-content: center;
               align-items: center;
               gap: .5em;

               img {
                  width: 1.1em;
               }
            }
         }

         .div-enlaces-interes {
            a {
               text-align: center;
            }
         }

      }
   }

   .copyright {
      display: block;
      font-size: .9rem;
      text-align: center;
      width: 100%;
      color: var(--color-blanco);
   }

   .creado-por {
      font-size: .8rem;
      text-align: center;
      color: var(--color-blanco-menos-intenso);
      margin-top: -1em;
      padding-bottom: .5em;
      text-decoration: underline;
   }
}

@media (min-width: 768px) {

   :root {
      --altura-img-union: 75px;
   }

   .titulo-con-borde-1,
   .titulo-con-borde-2 {
      font-size: 3.5rem;
   }

   main {
      section {
         padding-inline: 2em;
      }

      .seccion-portada {
         h1 {
            line-height: 2.5em;
            span {
               font-size: 3rem; 
            }
         }
      }
   }

   footer {
      .div-redes-sociales {
         flex-direction: row;
      }

      .div-contenedor-general {
         grid-template-columns: 2fr 1fr;

         .div-ubicacion {
            .div-ubicacion-titulo {
               flex-direction: row;
            }
         }
      }
   }
}

@media (min-width: 1024px) {
   :root {
      --altura-img-union: 100px;
   }

   header {
      flex-direction: row;
      height: auto;
      overflow: visible;
      padding: 1em 2em;
      padding-right: calc(2em + 40px);
      background-color: var(--color-cuaternario-transparente-8);

      .div-logos {
         .img-logo {
            width: 160px;
         }
      }

      #navMenu {
         height: auto;
         overflow: visible;

         div.fila {
            flex-direction: row;
            justify-content: flex-end;
            gap: .5em;

            .div-enlace-menu {
               a,
               .btn-cerrar-sesion {
                  font-size: .75rem;
               }

               .div-sub-enlaces {
                  left: 0em;
                  margin-top: 0em;
                  background-color: var(--color-cuaternario-transparente-9);
               }

               &:has(.div-sub-enlaces) {
                  &::before {
                     display: none;
                  }
               }
            }
         }

         div.fila-2 {
            .div-enlace-menu {
               a {
                  font-size: .65rem;
               }

               a::before {
                  --alto: 1px;
               }
            }
         }

         .indicador-scroll {
            display: none;
         }

         .indicador {
            display: none;
         }

         .indicador.on {
            display: none;
         }
      }

   }
}

@media (min-width: 1100px) {
   header {
      #navMenu {
         div.fila {
            gap: 1em;
         }
      }
   }
}

@media (min-width: 1150px) {
   
   #navMenu {
      div.fila {
         .div-enlace-menu {
            a,
            .btn-cerrar-sesion {
               font-size: .8rem;
            }
         }
      }

      div.fila-2 {
         .div-enlace-menu {
            a {
               font-size: .7rem;
            }
         }
      }
   }
}

@media (min-width: 1200px) {
   header {
      #navMenu {
         div.fila {
            .div-enlace-menu {
               a,
               .btn-cerrar-sesion {
                  font-size: .87rem;
               }
            }
         }

         div.fila-2 {
            .div-enlace-menu {
               a {
                  font-size: .77rem;
               }
            }
         }
      }
   }
   
}

@media (min-width: 1250px) {
   
   header {
      .div-logos {
         .img-logo {
            width: 200px;
         }
      }
   }
}

@media (min-width: 1300px) {
   header {
      #navMenu {
         div.fila {
            .div-enlace-menu {
               a,
               .btn-cerrar-sesion {
                  font-size: .95rem;
               }
            }
         }

         div.fila-2 {
            .div-enlace-menu {
               a {
                  font-size: .85rem;
               }
            }
         }
      }
   }
}

@media (min-width: 1360px) {
   header {
      #navMenu {
         div.fila {
            .div-enlace-menu {
               a,
               .btn-cerrar-sesion {
                  font-size: 1rem;
               }
            }
         }

         div.fila-2 {
            .div-enlace-menu {
               a {
                  font-size: .9rem;
               }
            }
         }
      }
   }
}

/* Mensaje de herramientas */
#mensajeHerramientas {
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   width: 100%;
   height: 100dvh;
   z-index: 99999;
   background-color: rgba(0, 0, 0, 0.5);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s ease;
}

#mensajeHerramientas.on {
   pointer-events: all;
   opacity: 1;
}

#mensajeHerramientasContenido {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background-color: white;
   padding: 30px;
   border-radius: 15px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   max-width: 90%;
   width: 400px;
}

#mensajeHerramientasTexto {
   color: #333;
   font-size: 18px;
   font-weight: 500;
   text-align: center;
   margin-bottom: 20px;
   line-height: 1.4;
}

#cerrarMensajeHerramientas {
   padding: 12px 30px;
   border-radius: 8px;
   cursor: pointer;
   font-weight: 600;
   border: none;
}

#mensajeHerramientas.exito #mensajeHerramientasContenido {
   border-top: 6px solid #22c55e;
}

#mensajeHerramientas.exito #cerrarMensajeHerramientas {
   background-color: #22c55e;
   color: white;
}

#mensajeHerramientas.exito #cerrarMensajeHerramientas:hover {
   background-color: #16a34a;
}

#mensajeHerramientas.aviso #mensajeHerramientasContenido {
   border-top: 6px solid #eab308;
}

#mensajeHerramientas.aviso #cerrarMensajeHerramientas {
   background-color: #eab308;
   color: white;
}

#mensajeHerramientas.aviso #cerrarMensajeHerramientas:hover {
   background-color: #ca8a04;
}

#mensajeHerramientas.error #mensajeHerramientasContenido {
   border-top: 6px solid #ef4444;
}

#mensajeHerramientas.error #cerrarMensajeHerramientas {
   background-color: #ef4444;
   color: white;
}

#mensajeHerramientas.error #cerrarMensajeHerramientas:hover {
   background-color: #dc2626;
}

/* Popup de herramientas */
.popup-herramientas {
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   width: 100%;
   height: 100dvh;
   overflow-y: auto;
   padding: 1em;
   z-index: 99998;
   background-color: rgba(0, 0, 0, 0.5);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s ease;

   &.on {
      pointer-events: all;
      opacity: 1;
   }
}

/* Confirmación de herramientas */
#confirmacionHerramientas {
   position: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   left: 0;
   width: 100%;
   height: 100dvh;
   z-index: 99999;
   background-color: rgba(0, 0, 0, 0.5);
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.3s ease;
}

#confirmacionHerramientas.on {
   pointer-events: all;
   opacity: 1;
}

#confirmacionHerramientasContenido {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background-color: white;
   padding: 30px;
   border-radius: 15px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   max-width: 90%;
   width: 400px;
   border-top: 6px solid #eab308;
}

#confirmacionHerramientasTexto {
   color: #333;
   font-size: 18px;
   font-weight: 500;
   text-align: center;
   margin-bottom: 20px;
   line-height: 1.4;
}

#confirmacionHerramientasBotones {
   display: flex;
   gap: 15px;
}

#confirmarHerramientas,
#cancelarHerramientas {
   padding: 12px 30px;
   border-radius: 8px;
   cursor: pointer;
   font-weight: 600;
   border: none;
   min-width: 100px;
}

#confirmarHerramientas {
   background-color: #22c55e;
   color: white;
}

#confirmarHerramientas:hover {
   background-color: #16a34a;
}

#cancelarHerramientas {
   background-color: #ef4444;
   color: white;
}

#cancelarHerramientas:hover {
   background-color: #dc2626;
}