/* Navbar azul clarim */
.custom-navbar-lightblue {
  background: #e3f0ff;
  box-shadow: 0 2px 12px rgba(44, 46, 90, 0.1);
  border-bottom: 2px solid #6a4cff;
}
.custom-navbar-lightblue .navbar-brand,
.custom-navbar-lightblue .nav-link {
  color: #2c2e5a !important;
  font-weight: 500;
}
.custom-navbar-lightblue .nav-link.active,
.custom-navbar-lightblue .nav-link:focus,
.custom-navbar-lightblue .nav-link:hover {
  color: #6a4cff !important;
}

/* Footer azul clarim */
.custom-footer-lightblue {
  background: #e3f0ff;
  color: #2c2e5a;
  box-shadow: 0 -2px 12px rgba(44, 46, 90, 0.1);
  border-top: 2px solid #6a4cff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.custom-footer-lightblue h5 {
  color: #6a4cff;
  font-weight: 600;
}
.custom-footer-lightblue a.btn-outline-primary {
  border-color: #6a4cff;
  color: #6a4cff;
}
.custom-footer-lightblue a.btn-outline-primary:hover {
  background: #6a4cff;
  color: #fff;
}
.custom-footer-lightblue a.btn-outline-danger {
  border-color: #ff4c4c;
  color: #ff4c4c;
}
.custom-footer-lightblue a.btn-outline-danger:hover {
  background: #ff4c4c;
  color: #fff;
}
/* Navbar branca com detalhes roxo-azul */
.custom-navbar-white {
  background: #fff;
  box-shadow: 0 2px 12px rgba(44, 46, 90, 0.1);
  border-bottom: 2px solid #6a4cff;
}
.custom-navbar-white .navbar-brand,
.custom-navbar-white .nav-link {
  color: #2c2e5a !important;
  font-weight: 500;
}
.custom-navbar-white .nav-link.active,
.custom-navbar-white .nav-link:focus,
.custom-navbar-white .nav-link:hover {
  color: #6a4cff !important;
}

/* Footer branco com detalhes roxo-azul */
.custom-footer-white {
  background: #fff;
  color: #2c2e5a;
  box-shadow: 0 -2px 12px rgba(44, 46, 90, 0.1);
  border-top: 2px solid #6a4cff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.custom-footer-white h5 {
  color: #6a4cff;
  font-weight: 600;
}
.custom-footer-white a.btn-outline-primary {
  border-color: #6a4cff;
  color: #6a4cff;
}
.custom-footer-white a.btn-outline-primary:hover {
  background: #6a4cff;
  color: #fff;
}
.custom-footer-white a.btn-outline-danger {
  border-color: #ff4c4c;
  color: #ff4c4c;
}
.custom-footer-white a.btn-outline-danger:hover {
  background: #ff4c4c;
  color: #fff;
}
/* Navbar customizada com degrade roxo-azul */
.custom-navbar {
  background: linear-gradient(90deg, #6a4cff 0%, #2c2e5a 100%);
  box-shadow: 0 2px 12px rgba(44, 46, 90, 0.12);
}
.custom-navbar .navbar-brand,
.custom-navbar .nav-link {
  color: #fff !important;
  font-weight: 500;
  text-shadow: 0 1px 6px rgba(44, 46, 90, 0.12);
}
.custom-navbar .nav-link.active,
.custom-navbar .nav-link:focus,
.custom-navbar .nav-link:hover {
  color: #ffe066 !important;
}

/* Footer customizado com degrade roxo-azul */
.custom-footer {
  background: linear-gradient(90deg, #6a4cff 0%, #2c2e5a 100%);
  color: #fff;
  box-shadow: 0 -2px 12px rgba(44, 46, 90, 0.12);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}
.custom-footer h5 {
  color: #ffe066;
  font-weight: 600;
}
.custom-footer a.btn-outline-primary {
  border-color: #ffe066;
  color: #ffe066;
}
.custom-footer a.btn-outline-primary:hover {
  background: #ffe066;
  color: #2c2e5a;
}
.custom-footer a.btn-outline-danger {
  border-color: #ff4c4c;
  color: #ff4c4c;
}
.custom-footer a.btn-outline-danger:hover {
  background: #ff4c4c;
  color: #fff;
}
body {
  min-height: 100vh;
  background: linear-gradient(135deg, #23244a 0%, #18192f 100%);
  color: #f5f6fa;
  font-family: "Montserrat", Arial, sans-serif;
  letter-spacing: 0.02em;
}

.sec {
  text-align: center;
  max-width: 700px;
  margin: 6rem auto 3rem auto;
  padding: 2.5rem 2rem;
  background: rgba(44, 46, 90, 0.7);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.sec.visible {
  opacity: 1;
  transform: translateY(0);
}

.sec img {
  display: block;
  margin: 2rem auto 1rem auto;
  max-width: 90%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.sec img:hover {
  transform: scale(1.04) rotate(-1deg);
}

#inicio span {
  display: block;
  color: #ffe066;
  font-size: 3.5rem;
  font-weight: 700;
  margin-top: 1.2rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

#como-receber-desconto span {
  display: block;
  color: #ffe066;
  font-size: 1.7rem;
  font-weight: 600;
  margin-top: 0.8rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

@media (max-width: 800px) {
  .sec {
    max-width: 98vw;
    padding: 1.2rem 0.5rem;
    margin: 4rem auto 2rem auto;
  }
  #inicio span {
    font-size: 2.2rem;
  }
  #como-receber-desconto span {
    font-size: 1.1rem;
  }
}