:root {
   --bg: #f4f4f4;
   --secondary-bg: white;

   --primary-color: #0047FF;
   --dark-color: #002C99;
   --accent-color: #FFD600;

   --main-text: #002C99;
   --text-color: #333;
   --text-light: #f4f4f4;

   --shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   --footer-color: #222;
}


body.dark {
   --bg: #1a1a1a;
   --secondary-bg: #2d2d2d;

   --primary-color: #0056FF;
   --dark-color: #0033AA;
   --accent-color: #FFD600;

   --main-text: #ffffff;
   --text-color: #e0e0e0;
   --text-light: #f4f4f4;

   --shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
   --footer-color: #333;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins", sans-serif;
}

body {
   line-height: 1.6;
   color: var(--text-color);
   background-color: var(--bg);
}

html {
   background-color: var(--bg);
}

main {
   background-color: var(--bg);
}

section {
   padding: 40px 5%;
   min-height: 80dvh;
   background-color: var(--bg);
}

.reveal-on-scroll {
   opacity: 0;
   transform: translateY(34px);
   transition:
      opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
   transition-delay: var(--reveal-delay, 0ms);
   will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.card.reveal-on-scroll,
.card-lugar.reveal-on-scroll,
.contact-card.reveal-on-scroll,
.parent > a.reveal-on-scroll {
   transform: translateY(38px) scale(0.98);
}

.card.reveal-on-scroll.is-visible,
.card-lugar.reveal-on-scroll.is-visible,
.contact-card.reveal-on-scroll.is-visible,
.parent > a.reveal-on-scroll.is-visible {
   transform: translateY(0) scale(1);
}

.card.reveal-on-scroll.is-visible:hover,
.card-lugar.reveal-on-scroll.is-visible:hover,
.contact-card.reveal-on-scroll.is-visible:hover,
.parent > a.reveal-on-scroll.is-visible:hover {
   transform: translateY(-3px) scale(1);
}

@media (prefers-reduced-motion: reduce) {
   .reveal-on-scroll,
   .card.reveal-on-scroll,
   .card-lugar.reveal-on-scroll,
   .contact-card.reveal-on-scroll,
   .parent > a.reveal-on-scroll {
      opacity: 1;
      transform: none;
      transition: none;
   }
}


#main-nav {
   background:
      linear-gradient(90deg, rgba(0, 44, 153, 0.98), rgba(0, 71, 255, 0.94)),
      var(--primary-color);
   border-bottom: 4px solid var(--accent-color);
   padding: 0 5%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: sticky;
   top: 0;
   z-index: 1000;
   box-shadow: 0 16px 40px rgba(0, 44, 153, 0.18);
   overflow: visible;
   min-height: 74px;
   backdrop-filter: blur(14px);

   .logo-area {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 12px;
      min-height: 74px;
      padding: 10px 0;
      flex: 0 0 auto;
      text-decoration: none;

      .logo-img {
         height: 52px;
         padding: 0;
         border-radius: 0;
         background: transparent;
         filter:
            drop-shadow(2px 0 0 #fff)
            drop-shadow(-2px 0 0 #fff)
            drop-shadow(0 2px 0 #fff)
            drop-shadow(0 -2px 0 #fff);
         transition: transform 0.3s ease;
      }

      .logo-text {
         color: var(--text-light);
         font-weight: 900;
         font-size: 1.1rem;
         text-transform: uppercase;
         letter-spacing: 0;
         display: none;
      }

      &:hover .logo-img {
         transform: translateY(-2px);
      }
   }

   .nav-links {
      display: flex;
      list-style: none;
      gap: 8px;
      align-items: center;
      flex: 0 0 auto;
      margin: 0;
      padding: 0;

      li {
         display: flex;
         align-items: center;

         a,
         button {
            color: var(--text-light);
            text-decoration: none;
            font-weight: 800;
            font-size: 0.86rem;
            position: relative;
            transition: color 0.2s ease, transform 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0;
            background: transparent;
            border: 0;
            border-radius: 0;
            cursor: pointer;
            min-height: 40px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;

            &:hover {
               transform: translateY(-2px);
               color: var(--accent-color);
            }

            &::after {
               display: none;
            }
         }
      }
   }

   .menu-toggle {
      display: none;
      flex-direction: column;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      z-index: 1001;
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.1);

      .hamburger-line {
         width: 25px;
         height: 3px;
         background-color: var(--text-light);
         margin: 5px 0;
         transition: all 0.3s ease;
         border-radius: 2px;
      }

      &.active .hamburger-line:nth-child(1) {
         transform: rotate(45deg) translate(10px, 10px);
      }

      &.active .hamburger-line:nth-child(2) {
         opacity: 0;
      }

      &.active .hamburger-line:nth-child(3) {
         transform: rotate(-45deg) translate(8px, -8px);
      }
   }
}


.back-nav {
   position: sticky;
   top: 0;
   z-index: 1000;
   overflow: visible;
   background:
      linear-gradient(90deg, rgba(0, 44, 153, 0.98), rgba(0, 71, 255, 0.94)),
      var(--primary-color);
   border-bottom: 4px solid var(--accent-color);
   box-shadow: 0 16px 40px rgba(0, 44, 153, 0.16);
   display: flex;
   flex-direction: column;

   .text-box {
      text-transform: uppercase;
      text-align: left;
      width: min(1180px, 90%);
      margin: 0 auto;
      height: auto;
      padding: 18px 0 10px;
      color: var(--text-light);
      text-shadow: none;

      h1 {
         width: fit-content;
         max-width: 100%;
         padding: 0 0 10px;
         border-bottom: 3px solid var(--accent-color);
         color: var(--text-light);
         font-size: clamp(1.35rem, 2.8vw, 2.15rem);
         line-height: 1.08;
         letter-spacing: 0;
      }
   }

   .btn-box {
      background-color: transparent;
      width: min(1180px, 90%);
      margin: 0 auto;
      height: auto;
      padding: 0 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      box-shadow: none;

      .btn-voltar,
      .btn-logout,
      #user-name {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: 8px;
         text-decoration: none;
         color: var(--text-light);
         font-weight: 800;
         min-height: 42px;
         padding: 9px 14px;
         border: 1px solid rgba(255, 255, 255, 0.18);
         border-radius: 8px;
         background: rgba(255, 255, 255, 0.1);
         transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
      }

      .btn-voltar:hover,
      .btn-logout:hover {
         transform: translateY(-2px);
         border-color: rgba(255, 214, 0, 0.62);
         background: var(--accent-color);
         color: var(--dark-color);
      }

      form {
         display: flex;
         align-items: center;
         gap: 8px;
         flex: 1 1 320px;
         max-width: 520px;
         min-height: 44px;
         padding: 5px 6px 5px 14px;
         border: 1px solid rgba(255, 255, 255, 0.18);
         border-radius: 8px;
         background: rgba(255, 255, 255, 0.12);
         color: var(--text-light);

         input {
            flex: 1;
            min-width: 0;
            background: transparent;
            border: none;
            color: var(--text-light);
            font-weight: 700;
            font-size: 0.95rem;
            letter-spacing: 0;
            padding: 8px 4px;

            &::placeholder {
               color: rgba(255, 255, 255, 0.72);
            }

            &:focus {
               outline: none;
            }
         }

         button {
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            background: var(--accent-color);
            border: none;
            border-radius: 8px;
            color: var(--dark-color);
            cursor: pointer;
            font-size: 1rem;
            transition: transform 0.2s ease, background 0.2s ease;

            &:hover {
               transform: translateY(-1px);
               background: var(--text-light);
            }
         }
      }
   }
}


footer {
   background: var(--footer-color);
   color: var(--text-light);
   padding: 50px 10% 20px;
   text-align: center;

   .footer-logos {
      display: flex;
      justify-content: center;
      gap: 30px;
      margin-bottom: 30px;
      flex-wrap: wrap;

      img {
         height: 40px;
         filter: grayscale(100) brightness(100);
      }
   }

   a {
      color: var(--text-light);
      text-decoration: none;
   }
}

@media (max-width: 768px) {
   #main-nav {
      padding: 0 4%;
      min-height: 66px;

      .logo-area {
         gap: 8px;
         min-height: 66px;

         .logo-img {
            height: 44px;
         }

         .logo-text {
            display: block;
            font-size: 0.9rem;
         }
      }

      .menu-toggle {
         display: flex;
      }

      .nav-links {
         position: absolute;
         top: 100%;
         left: 4%;
         right: 4%;
         width: auto;
         transform: none;
         flex-direction: column;
         background:
            linear-gradient(180deg, rgba(0, 44, 153, 0.98), rgba(0, 71, 255, 0.96)),
            var(--dark-color);
         border: 1px solid rgba(255, 255, 255, 0.12);
         border-radius: 0 0 8px 8px;
         gap: 8px;
         padding: 0;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.3s ease;
         box-shadow: 0 18px 40px rgba(0, 44, 153, 0.24);

         &.active {
            max-height: 420px;
            padding: 14px;
         }

         li {
            width: 100%;
            text-align: center;

            a,
            button {
               display: flex;
               width: 100%;
               padding: 12px 14px;
               border-bottom: 0;
               justify-content: center;
            }
         }
      }
   }

   .back-nav {
      .text-box {
         width: 92%;
         padding-top: 14px;

         h1 {
            font-size: 1.2rem;
         }
      }

      .btn-box {
         width: 92%;
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         align-items: center;
         padding-bottom: 12px;

         > * {
            min-width: 0;
         }

         .btn-voltar,
         .btn-logout,
         #user-name {
            font-size: 0.9rem;
            width: 100%;
            min-height: 42px;
            padding: 9px 12px;
         }

         .btn-voltar:first-of-type {
            order: 1;
         }

         .btn-voltar:last-of-type {
            order: 2;
         }

         .btn-voltar:only-child {
            grid-column: 1 / -1;
         }

         #user-name {
            order: 2;
            grid-column: 1 / -1;
         }

         .btn-logout {
            order: 3;
         }

         form {
            order: 3;
            grid-column: 1 / -1;
            width: 100%;
            max-width: none;
            flex: none;
            min-height: 44px;
            padding: 5px 6px 5px 12px;

            input {
               font-size: 0.9rem;
               width: auto;
               min-height: 32px;
               padding: 6px 4px;
            }

            button {
               flex: 0 0 36px;
               width: 36px;
               height: 36px;
            }
         }
      }
   }

   footer {
      padding: 30px 5%;

      .footer-logos {
         gap: 20px;

         img {
            height: 30px;
         }
      }
   }
}


@media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
   #main-nav {
      padding: 0 2%;

      .logo-area {
         .logo-img {
            height: 35px;
         }

         .logo-text {
            font-size: 0.8rem;
         }
      }

      .nav-links {
         li a {
            padding: 8px 12px;
            font-size: 0.9rem;
         }

         li button {
            padding: 6px;
            font-size: 1rem;
         }
      }
   }

   .back-nav {

      h1 {
         font-size: 1.1rem;
      }

      .btn-box {
         padding: 10px;

         .btn-voltar {
            font-size: 0.9rem;
         }
      }
   }

}