body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #fff;
}

/* Header */
.header {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  background: rgba(60, 48, 136, 0.92);
  box-shadow: 0 2px 16px 0 #3C308818;
  padding: 0;
  backdrop-filter: blur(6px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  height: 70px;
  padding: 0 32px;
}
.nav-logo {
  display: flex;
  align-items: center;
}
.nav-logo img {
  width: 44px;
  margin-right: 10px;
}
.nav-logo span {
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  letter-spacing: .04em;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* CORREÇÃO: Garante branco permanente */
.nav-menu li a {
  color: #fff !important;
  opacity: 1;
  text-decoration: none;
}
.nav-menu li a:visited,
.nav-menu li a:focus,
.nav-menu li a:active {
  color: #fff !important;
  opacity: 1 !important;
  text-decoration: none;
}
.nav-menu li a:hover {
  color: #3C3088;
  opacity: 1;
}

.nav-btn {
  background: #3C3088;
  color: #fff;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.02rem;
  text-decoration: none;
  transition: box-shadow 0.2s ease;
  margin-left: 18px;
  box-shadow: 0 2px 8px #3C308822;
  border: none;
  cursor: pointer;
  display: inline-block;
}
.nav-btn:hover,
.nav-btn:focus {
  box-shadow: 0 0 14px 3px #ffffff88;
}



@media(max-width: 800px) {
  .nav {
    flex-direction: column;
    height: auto;
    gap: 10px;
    padding: 10px 12px;
  }
  .nav-menu { gap: 15px; }
  .nav-logo img { width: 34px; }
}

/* Hero */
.hero {
  height: 40vh;            /* menor altura proporcional à tela */
  min-height: 280px;       /* mínimo absoluto */
  padding-top: 40px;       /* reduzido */
  padding-bottom: 40px;    /* reduzido */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(60, 48, 136, 0.88), rgba(17, 17, 17, 0.92)), 
              url('assets/capa-hero.png') center center / cover no-repeat;
  color: #fff;
  text-align: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.hero-bg-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  max-width: 90vw;
  opacity: 0.2;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.hero h1 {
  margin: 0;
  padding: 0;
  line-height: 1;
  position: relative;
  z-index: 1;
}
.agencia {
  font-family: "Dancing Script", cursive;
  font-weight: 900;
  font-size: 6.3rem;
  letter-spacing: .04em;
  line-height: 1;
  display: block;
}
.praesto {
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 6.3rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: block;
  margin-top: -.3em;
}
.hero-slogan {
  position: relative;
  z-index: 1;
  margin-top: 2.1rem;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-shadow: 0 2px 10px #0005;
}
@media(max-width: 900px){
  .agencia { font-size: 2.6rem; }
  .praesto { font-size: 3.3rem; }
  .hero-bg-logo { width: 70vw; }
  .hero-slogan { font-size: 1.1rem; margin-top: 1.2rem; }
}

/* Serviços */
.servicos {
  padding: 80px 20px 60px 20px;
  background: #fff;
  text-align: center;
}
.servicos h2 {
  font-size: 2.5rem;
  margin-bottom: 2.5rem;
  color: #3C3088;
  letter-spacing: .02em;
}
.servicos-lista {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 32px;
  justify-items: center;
}
.servico-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 4px 24px 0 #3C308811;
  width: 250px;
  min-height: 250px;
  transition: transform .2s, box-shadow .2s, border .2s;
  border: 1.5px solid #3C308815;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.servico-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 8px 32px 0 #3C308833;
  border: 2px solid #3C3088;
}
.servico-card img {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}
.servico-card h3 {
  color: #3C3088;
  margin-bottom: .7rem;
  font-size: 1.3rem;
  font-weight: bold;
}
.servico-card p {
  color: #111;
  font-size: 1rem;
  font-weight: 500;
}
@media(max-width:1200px){.servicos-lista{grid-template-columns:repeat(2,1fr);}}
@media(max-width:700px){
  .servicos-lista{grid-template-columns:1fr;gap:18px;}
  .servico-card{width:100%;min-width:unset;min-height:180px;}
}

/* Planos */
.planos {
  background: #fff;
  padding: 80px 20px;
  text-align: center;
  scroll-margin-top: 80px;
}
.planos h2 {
  color: #3C3088;
  font-size: 2.3rem;
  margin-bottom: 2.5rem;
  font-weight: bold;
}
.planos-grid {
  display: flex;
  gap: 36px;
  justify-content: center;
  flex-wrap: wrap;
}
.plano-card {
  background: #faf8f9;
  border-radius: 12px;
  padding: 36px 28px 28px 28px;
  min-width: 270px;
  max-width: 320px;
  box-shadow: 0 4px 20px 0 #3C308811;
  border-top: 7px solid #3C3088;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.plano-card.destaque {
  border-top: 7px solid #111;
  background: #fff;
  box-shadow: 0 8px 36px 0 #3C308819;
}
.plano-card.custom {
  border-top: 7px solid #000;
  background: #edeafd;
  box-shadow: 0 8px 36px 0 #3C308813;
}
.plano-titulo {
  font-size: 1.25rem;
  font-weight: bold;
  letter-spacing: .06em;
  color: #111;
  margin-bottom: 8px;
}
.plano-sub {
  color: #888;
  font-size: 1rem;
  margin-bottom: 22px;
  min-height: 44px;
}
.plano-preco {
  font-size: 2.8rem;
  font-weight: 900;
  color: #3C3088;
  margin-bottom: 18px;
  line-height: 1.1;
}
.plano-moeda {
  font-size: 1.2rem;
  font-weight: 600;
  vertical-align: super;
  margin-right: 2px;
}
.preco-personalizado {
  color: #3C3088;
  font-size: 1.2rem;
  font-weight: bold;
  margin-left: 5px;
}
.plano-tempo {
  font-size: 1rem;
  color: #333;
  font-weight: 500;
}
.plano-lista {
  text-align: left;
  margin: 26px 0 22px 0;
  padding: 0;
  list-style: none;
  width: 100%;
}
.plano-lista li {
  font-size: 1.05rem;
  color: #222;
  margin-bottom: 10px;
  font-weight: 500;
}
.plano-btn {
  display: inline-block;
  background: #3C3088;
  color: #fff;
  padding: 13px 28px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.1rem;
  margin-top: 12px;
  transition: box-shadow 0.2s ease;
  text-decoration: none;
  box-shadow: 0 2px 8px #3C308822;
  border: none;
}
.plano-btn:hover,
.plano-btn:focus {
  box-shadow: 0 0 14px 3px #ffffff88;
}

@media(max-width: 1100px) {
  .planos-grid {
    flex-direction: column;
    align-items: center;
  }
}

/* CTA */
.cta-fundo-bordo {
  background: linear-gradient(135deg, #3C3088 0%, #111 100%);
  padding: 64px 16px 72px 16px;
  color: #fff;
  text-align: center;
}
.cta-conteudo {
  max-width: 670px;
  margin: 0 auto;
}
.cta-fundo-bordo h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  margin-bottom: 1.6rem;
}
.cta-fundo-bordo p {
  font-size: 1.18rem;
  margin-bottom: 2.2rem;
  font-weight: 500;
  letter-spacing: .01em;
}
.cta-btn {
  background: #fff;
  color: #3C3088;
  padding: 15px 38px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.15rem;
  text-decoration: none;
  transition: background .18s, color .18s, transform .16s;
  box-shadow: 0 3px 16px #3C308830;
  border: none;
  cursor: pointer;
}
.cta-btn:hover {
  background: #3C3088;
  color: #fff;
  transform: translateY(-3px) scale(1.04);
  border: 1px solid #fff;
}

/* Footer */
.footer {
  background: #111;
  color: #fff;
  text-align: center;
  padding: 28px 16px 24px 16px;
  font-size: 1rem;
  letter-spacing: .01em;
}
.footer p { margin: 1; }

/* Instagram Button */
.instagram-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #3C3088;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1.07rem;
  text-decoration: none;
  border: none;
  box-shadow: 0 2px 8px #3C308822;
  transition: box-shadow 0.2s ease;
}

.instagram-btn:hover,
.instagram-btn:focus {
  box-shadow: 0 0 14px 3px #ffffff88;
}

.instagram-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}


/* Menu Responsivo */
.menu-toggle {
  display: none;
  font-size: 2rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
}
.menu-container {
  display: flex;
  align-items: center;
}
@media (max-width: 800px) {
  .menu-toggle {
    display: block;
    position: absolute;
    top: 15px;
    right: 20px;
  }
  .menu-container {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background-color: rgba(60, 48, 136, 0.98);
    padding: 20px 0;
    z-index: 1000;
    border-top: 1px solid #3C308855;
  }
  .menu-container.active {
    display: block;
  }
  .nav-menu {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
  }
  .nav-menu li {
    list-style: none;
  }
  .nav-btn {
    margin-left: 0;
  }
}

/* Vídeo Section */
.video-section {
  background: #fff;
  text-align: center;
  padding: 60px 16px;
}
.video-section h2 {
  color: #3C3088;
  font-family: 'Poppins', sans-serif;
  font-size: 2.3rem;
  margin-bottom: 1.3rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.video-desc {
  color: #333;
  font-size: 1.13rem;
  font-weight: 500;
  margin-bottom: 2.1rem;
}
.video-frame {
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-frame iframe {
  width: 90vw;
  max-width: 560px;
  height: 315px;
  border-radius: 18px;
  box-shadow: 0 6px 30px #3C308899; /* sombra roxa mais visível */
}

@media (max-width: 700px) {
  .video-section h2 { font-size: 1.4rem; }
  .video-frame iframe { height: 210px; }
}
