/* Reset e Base */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --primary: #0A1F44;
   --primary-light: #1a365d;
   --accent: #4A90E2;
   --white: #FFFFFF;
   --gray-light: #F8FAFC;
   --gray: #64748B;
   --gray-dark: #334155;
   --shadow-sm: 0 5px 10px -5px rgba(10, 31, 68, 0.515);
   --shadow: 0 10px 30px -10px rgba(10, 31, 68, 0.3);
   --shadow-lg: 0 25px 50px -18px rgba(10, 31, 68, 0.37);
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   --foreground: 210 40% 98%;
   --gradiente: 220 90% 56%;
}

body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   line-height: 1.6;
   overflow-x: hidden;
}

h1 {
   font-size: clamp(2.5rem, 8vw, 4.5rem);
   font-weight: 800;
   line-height: 1.1;
   margin-bottom: 1.5rem;
   color: white;
}


.efeito {
   transition: opacity 0.3s ease;
   opacity: 0;
}

.efeito.visivel {
   transform: translateY(0px);
   /* começa 20px abaixo */
   opacity: 1;
}

.home {
   opacity: 0;
   transform: translateY(-80px);
   /* começa 20px abaixo */
   transition: opacity 0.2s ease, transform 0.3s ease;
}

.home.subir {
   opacity: 1;
   transform: translateY(0px);
   /* posição final */
}

.container-home {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
}

/*----- CONFIGS DO USUÁRIO LINKS PARA AS OUTRAS PAGS APÓS O LOGIN -----*/
.profile-dropdown {
   position: relative;
   display: inline-block;
   cursor: pointer;
}

.profile-img {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #ccc;
   transition: border 0.3s ease;
}

.profile-img:hover {
   border-color: #555;
}

.dropdown-content {
   position: absolute;
   right: 0;
   background-color: #fff;
   min-width: 150px;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
   z-index: 1000;
   border-radius: 6px;
   overflow: hidden;

   /* para animação */
   opacity: 0;
   transform: translateY(15px);
   pointer-events: none;
   transition: opacity 0.1s ease, transform 0.3s ease;
}

.profile-dropdown:hover .dropdown-content {
   display: block;
   /* mantém estrutura */
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

.dropdown-content a {
   display: block;
   padding: 10px 15px;
   text-decoration: none;
   color: #333;
   background-color: white;
}

.dropdown-content a:hover {
   background-color: #45abfe33;
   color: #333;
}

/* Navbar */
.navbar-home {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1001;
   background: rgb(255, 255, 255);
   /* camada base uniforme */
   backdrop-filter: blur(2px);
   /* desfoque mais forte e uniforme */
   -webkit-backdrop-filter: blur(2px);
   /* suporte Safari */
   border-bottom: 1px solid rgba(255, 255, 255, 0.10);
   /* detalhe de vidro */
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
   /* profundidade */
   transition: background 0.4s ease, box-shadow 0.4s ease, transform 1.4s ease;
}

.nav-container-home {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1rem;
}

.nav-content-home {
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: 3rem;
}

.logo {
   height: 2.2rem;
   width: auto;
}

.desktop-nav {
   display: none;
   gap: 2rem;
}

.nav-link-home {
   text-decoration: none;
   color: black;
   /* color: white; */
   font-weight: 450;
   transition: var(--transition);
}

.nav-link-home:hover {
   color: rgb(25, 93, 166);
   text-decoration: none;
}

.nav-link-home-dropdown {
   text-decoration: none;
   color: black;
   /* color: white; */
   font-weight: 450;
   transition: var(--transition);
}

.nav-link-home-dropdown:hover {
   color: var(--accent);
   text-decoration: none;
}

.mobile-menu-btn {
   display: flex;
   flex-direction: column;
   gap: 4px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0.5rem;
}

.hamburger {
   width: 24px;
   height: 2px;
   background-color: var(--gray-dark);
   transition: var(--transition);
}

.mobile-nav {
   display: none;
   flex-direction: column;
   gap: 1rem;
   padding: 1rem;
   border-top: 1px solid #e2e8f0;
   background: var(--white);
}

.mobile-nav.active {
   display: flex;
}

.mobile-link {
   text-decoration: none;
   color: var(--gray-dark);
   font-weight: 500;
   padding: 0.5rem;
   transition: var(--transition);
}

.mobile-link:hover {
   color: var(--primary);
}

/* Hero Section */
.hero {
   position: relative;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.hero-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
}

.hero-image {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.hero-overlay {
   color: black;
   position: absolute;
   inset: 0;
   /* background: #000000bb; */
   /* backdrop-filter: blur(2px); */
   /* background: #0000008a; */
   background: linear-gradient(180deg,
         hsla(220, 25%, 8%, 0.99),
         hsla(218, 27%, 8%, 0.81),
         hsla(218, 27%, 8%, 0.178));
}

.login-overlay {
   color: black;
   position: absolute;
   inset: 0;
   /* backdrop-filter: blur(1.35px); */
   background: rgba(0, 0, 0, 0.458);
}

.hero-content {
   position: relative;
   z-index: 10;
   max-width: 64rem;
   margin: 0 auto;
   padding: 0 1rem;
   text-align: center;
}

.hero-title {
   font-size: clamp(2.5rem, 8vw, 4.5rem);
   font-weight: 800;
   line-height: 1.1;
   margin-bottom: 1.5rem;
   color: white;
}

.gradient-text {
   background: linear-gradient(135deg,
         hsl(var(--foreground)),
         hsl(var(--gradiente)),
         hsl(var(--foreground)));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.login-title {
   font-size: 2.2rem;
   font-weight: bold;
   color: var(--white);
   line-height: 1.2;
}

.accent-text {
   color: var(--accent);
}

.hero-subtitle {
   font-size: 1.25rem;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 3rem;
   max-width: 32rem;
   margin-left: auto;
   margin-right: auto;
}

.cta-button {
   background: var(--accent);
   color: var(--white);
   font-weight: bold;
   font-size: 1.025rem;
   padding: 1rem 1rem;
   border: none;
   border-radius: 0.5rem;
   cursor: pointer;
   box-shadow: var(--shadow-lg);
   transition: var(--transition);
   transform: scale(1);
}

.cta-button:hover {
   background: #5ba3f5;
   box-shadow: 0 25px 50px -12px rgba(74, 144, 226, 0.4);
   transform: scale(1.05);
}

.scroll-indicator {
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   animation: bounce 2s infinite;
}

.scroll-mouse {
   width: 1.5rem;
   height: 2.5rem;
   border: 2px solid rgba(255, 255, 255, 0.5);
   border-radius: 1rem;
   display: flex;
   justify-content: center;
}

.scroll-dot {
   width: 0.25rem;
   height: 0.75rem;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 0.125rem;
   margin-top: 0.5rem;
}

@keyframes bounce {

   0%,
   20%,
   53%,
   80%,
   100% {
      transform: translateX(-50%) translateY(0);
   }

   40%,
   43% {
      transform: translateX(-50%) translateY(-30px);
   }

   70% {
      transform: translateX(-50%) translateY(-15px);
   }

   90% {
      transform: translateX(-50%) translateY(-4px);
   }
}

/* Sections */
.section-header {
   text-align: center;
}

.section-title {
   font-size: 2.25rem;
   font-weight: bold;
   color: var(--gray-dark);
   margin-top: 2%;
}

.section-subtitle {
   font-size: 12pt;
   color: var(--gray);
   max-width: 32rem;
   margin: 0 auto;
}

/* Advantages Section */
.advantages {
   padding: 3rem 0;
   background: var(--white);
}

.advantages-grid {
   display: grid;
   gap: 2rem;
}

.advantage-card {
   background: var(--white);
   border: 1px solid #e2e8f0;
   border-radius: 0.5rem;
   padding: 2rem;
   text-align: center;
   box-shadow: var(--shadow);
   transition: var(--transition);
   transform: translateY(0);
}

.advantage-card:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-0.5rem);
   border-color: rgba(74, 144, 226, 0.5);
}

.advantage-icon {
   width: 4rem;
   height: 4rem;
   margin: 0 auto 1.5rem;
   background: rgba(74, 144, 226, 0.102);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--accent);
   transition: var(--transition);
}

.advantage-card:hover .advantage-icon {
   background: rgba(74, 144, 226, 0.2);
}

.advantage-title {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--gray-dark);
   margin-bottom: 1rem;
}

.advantage-description {
   color: var(--gray);
   line-height: 1.6;
}

/* How To Start Section */
.how-to-start {
   padding: 5rem 0;
   background: rgb(226, 232, 240);
}

.steps-grid {
   display: grid;
   gap: 1rem;
}

.step-card {
   background: var(--white);
   border: 1px solid rgba(226, 232, 240, 0.5);
   border-radius: 1rem;
   padding: 2rem 2rem;
   text-align: center;
   box-shadow: var(--shadow);
   /* transition: 0.1s ease; */
   transition: var(--transition);
   transform: translateY(0);
}

.step-card:hover {
   box-shadow: var(--shadow-lg);
   transform: translateY(-1rem);
   z-index: 1;
}

.step-number {
   width: 4rem;
   height: 4rem;
   margin: 0 auto 1.5rem;
   background: var(--primary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
   font-weight: bold;
   font-size: 1.25rem;
}

.step-title {
   font-size: 1.25rem;
   font-weight: 600;
   color: var(--gray-dark);
   margin-bottom: 1rem;
}

.step-description {
   color: var(--gray);
   line-height: 1.6;
}

/* Footer */
.footer {
   background: var(--primary);
   color: var(--white);
   padding: 3rem 0;
}

.footer-content {
   display: grid;
   gap: 2rem;
   margin-bottom: 2rem;
}

.footer-logo {
   height: 3rem;
   width: auto;
   margin-bottom: 1rem;
}

.footer-description {
   color: rgba(255, 255, 255, 0.8);
   line-height: 1.6;
}

.footer-title {
   font-size: 1.125rem;
   font-weight: 600;
   margin-bottom: 1rem;
}

.contact-item {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   margin-bottom: 0.75rem;
   color: rgba(255, 255, 255, 0.8);
}

.contact-item svg {
   color: var(--accent);
}

.social-links {
   display: flex;
   gap: 1rem;
}

.social-link {
   width: 2.5rem;
   height: 2.5rem;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--white);
   text-decoration: none;
   transition: var(--transition);
}

.social-link:hover {
   background: var(--accent);
   color: var(--primary);
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.2);
   padding-top: 2rem;
   text-align: center;
}

.footer-bottom p {
   color: rgba(255, 255, 255, 0.6);
}

/* Responsive Design */
@media (min-width: 1024px) {
   .desktop-nav {
      display: flex;
   }

   .mobile-menu-btn {
      display: none;
   }

   .hero-title {
      font-size: 3.75rem;
   }

   .advantages-grid {
      grid-template-columns: repeat(3, 1fr);
   }

   .steps-grid {
      grid-template-columns: repeat(4, 1fr);
   }

   .footer-content {
      grid-template-columns: repeat(3, 1fr);
   }
}


@media (max-width: 767px) {
   .hero-title {
      font-size: 2rem;
   }

   .hero-subtitle {
      font-size: 1rem;
   }

   .section-title {
      font-size: 1.875rem;
   }
   .logo {
      height: 1.8rem;
      width: auto;
   }

}