html, body {
  margin: 0;
  padding: 0;
  background: #0b0214; /* roxo escuro base */
}

:root{
  --bg:#f5f6fb;
  --bg2:#f0f7ff;
  --card: rgba(255,255,255,.86);

  --text:#0b1220;
  --muted:#4b5565;
  --line: rgba(15, 23, 42, .10);

  --brand:#370033;
  --brand2:#660088;
  --accent:#46004e;

  --success:#16a34a;
  --shadow: 0 22px 70px rgba(2, 8, 23, .10);
  --shadow2: 0 12px 35px rgba(2, 8, 23, .08);
  --radius: 18px;
}


body{
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:
    radial-gradient(1200px 760px at 15% 12%, rgba(108,99,255,.14), transparent 60%),
    radial-gradient(1100px 700px at 88% 20%, rgba(53,198,168,.14), transparent 60%),
    radial-gradient(900px 520px at 55% 105%, rgba(43,111,126,.12), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 45%, var(--bg) 100%);
  color: #0b1220;
}

/* Helpers */
.muted{   color: #4b5565;}
.text-brand{ color: #370033; }
.text-brand2{ color:#660088; }
.icon-brand{ color: #370033; }
.icon-brand2{ color:#660088; }
.icon-accent{ color: #46004e; }

.page-top{ padding-top: 0; } /* ✅ agora o menu é sticky, não precisa reservar espaço fixo */
.section{ padding: 0.6rem 0; }

.cardx{
 background:#ffffff;
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, .10);
  box-shadow: 0 12px 35px rgba(2, 8, 23, .08);
}

/* NAVBAR (dark) */
.navbar{
  background: rgba(10, 0, 15, 0.903) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
}

/* ✅ FIX: manter tudo em uma linha e evitar logo empurrar o toggler */
.navbar > .container-fluid{
  flex-wrap: nowrap;
}

/* Links */
.navbar .nav-link{
  color: rgba(255,255,255,.82) !important;
  font-weight: 500;
}
.navbar .nav-link:hover{
  color: rgba(255,255,255,1) !important;
}

/* ✅ FIX LOGO: controlar por ALTURA (não por %) */
.nav-logo{
  height: 54px;
  width: auto !important;
  max-width: 320px;
  display: inline-block !important;
  margin: 0 !important;
  border: 0;
}

/* Mobile: logo menor para não empurrar o botão */
@media (max-width: 991px){
  .nav-logo{
    height: 44px;
    max-width: 72vw;
  }
}

/* Toggler (hamburger) */
.navbar-toggler{
  border-color: rgba(255,255,255,.18) !important;
}
.navbar-toggler:focus{ box-shadow: none; }
.navbar-toggler-icon{
  filter: invert(1) grayscale(1) brightness(1.1);
}

.section-title{
  font-size: 35px;
}
.mt-3{
      margin-top: -0.5rem !important;
}

/* HERO */
.hero{
  padding: 1.2rem 0 1.5rem;
  position: relative;
}
.hero h1{
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin-top: 25px;
}
.hero p{
  color:#4b5565;
  font-size: 1.08rem;
}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding: .42rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.75);
  color: rgba(15,23,42,.78);
  font-size: .90rem;
  white-space: nowrap;
}
.pill i{ color: #370033; }
.pill.pill-accent i{ color: #660088; }
.pill.pill-purple i{ color: #46004e; }

/* Buttons */
.btn-primary{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 55%, var(--accent) 115%);
  border: 0;
  box-shadow: 0 14px 34px rgba(43,111,126,.18);
  margin-top: -15px;
 
}

.btn-primary-mg-top{
  margin-top:10px;
}
.btn-primary:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 55%, var(--accent) 115%);
  opacity: 0.8;
  color: rgb(255, 255, 255);
}
.btn-soft{
  border: 1px solid rgba(15,23,42,.14);
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 55%, var(--accent) 115%);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 24px rgba(2,8,23,.06);
}
.btn-soft:hover{
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand2) 55%, var(--accent) 115%);
  opacity: 0.8;
  color: rgb(255, 255, 255);
}

/* Video box */
.media-box{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 12px 35px rgba(2, 8, 23, .08);
}
.media-inner{
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.10);
  background: #0b1220;
}

/* KPI */
.kpis{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.kpi{
  padding: 14px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 25px rgba(2,8,23,.06);
}
.kpi strong{ font-size: 1.05rem; }
.kpi span{ display:block; font-size: .88rem; color: #4b5565; }
.kpi i{ color: #660088; }

@media (max-width: 991px){
  .kpis{ grid-template-columns: 1fr; }
}

/* Titles */
.section-title{
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Pricing */
.pricing{
  height: 100%;
  border-radius: 22px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pricing:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 70px rgba(2, 8, 23, .10);
  border-color: rgba(108,99,255,.22);
}
.price{
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 2.1rem;
}
.feature{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  color:#4b5565;
  margin-bottom: .7rem;
}
.feature-risk{
  /* text-decoration:line-through; */
  opacity: 0.3;
}
.feature-transp{
  opacity: 0;
}
.feature i{
  color: #46004e;
  margin-top: .18rem;
}
.divider{
  height: 1px;
  background: rgba(15,23,42,.10);
  margin: 1.1rem 0;
}
.plan-title{
  font-size: 1.8rem;
}
.popular{
  border-color: rgba(53,198,168,.28) !important;
  box-shadow: 0 18px 60px rgba(53,198,168,.14);
  position: relative;
}
.popular::before{
  content: "PREFERIDO 🔥";
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: .75rem;
  letter-spacing: .08em;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: rgba(198, 53, 195, 0.14);
  border: 1px solid rgba(53,198,168,.20);
  color: rgba(15,23,42,.86);
  font-weight: 700;
}

/* Accordion */
.accordion .accordion-item{
  border: 1px solid  rgba(15, 23, 42, .10);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  background: rgba(255,255,255,.80);
  box-shadow: 0 10px 25px rgba(2,8,23,.06);
}
.accordion-button{
  font-weight: 700;
  color: #0b1220;
  background: rgba(255,255,255,.60);
}
.accordion-button:not(.collapsed){
  color: #0b1220;
  background: rgba(255,255,255,.82);
}
.accordion-button:focus{
  box-shadow: none;
  border-color: transparent;
}

/* Footer */
footer{
  border-top: 1px solid rgba(15, 23, 42, .10);
  background: rgba(255,255,255,.70);
}

/* ===== NAV POLISH: dropdown premium + toggler fixo + logo maior ===== */

/* garante que o dropdown absoluto se posicione relativo ao container */
.navbar > .container-fluid{
  position: relative;
  flex-wrap: nowrap; /* evita quebrar linha */
}

/* LOGO maior (desktop e mobile) */
.nav-logo{
  height: 64px !important;   /* desktop maior */
  width: auto !important;
  max-width: 420px;          /* evita estourar */
  display: block;
}

@media (max-width: 991px){
  .nav-logo{
    height: 52px !important; /* mobile maior */
    max-width: 72vw;
  }
}

/* TOGGLER: NÃO inverter (isso deixa ele preto) */
.navbar-dark .navbar-toggler-icon{
  filter: none !important;
}

/* Força ícone branco (data-svg) — Bootstrap safe */
.navbar-dark .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.92%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Evita “andar” quando abre: no mobile o menu vira um painel abaixo do header */
@media (max-width: 991px){

  /* painel do dropdown */
  .navbar .navbar-collapse{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    background: rgba(10, 0, 15, 0.96);
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);

    padding: 14px 12px 16px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 1050;
  }

  /* lista do menu com alinhamento bom */
  .navbar .navbar-nav{
    align-items: flex-start !important;
    text-align: left;
    width: 100%;
  }

  .navbar .nav-item{
    width: 100%;
  }

  .navbar .nav-link{
    width: 100%;
    padding: 12px 10px;
    border-radius: 12px;
    color: rgba(255,255,255,.86) !important;
  }

  .navbar .nav-link:hover{
    background: rgba(255,255,255,.06);
    color: #fff !important;
  }

  /* botão CTA no mobile ocupando largura e ficando “bonito” */
  .navbar .navbar-nav .btn{
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    margin-top: 8px;
  }
}

/* ===== HEADER PREMIUM (GRADIENTE + BRILHO) ===== */

/* Gradiente roxo escuro elegante */
.navbar{
  background:
    linear-gradient(
      135deg,
      rgba(18, 6, 28, 0.98) 0%,
      rgba(28, 8, 46, 0.98) 45%,
      rgba(12, 2, 20, 0.98) 100%
    ) !important;

  border-bottom: none !important;
  box-shadow:
    0 8px 30px rgba(0,0,0,.35),
    inset 0 -1px 0 rgba(255,255,255,.06);
}

/* Linha de brilho sutil abaixo do header */
.navbar::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(180,120,255,.35),
    rgba(120,200,255,.25),
    rgba(180,120,255,.35),
    transparent
  );
  pointer-events: none;
}

/* Refino do texto do menu */
.navbar .nav-link{
  letter-spacing: .2px;
}

/* CTA do menu com mais presença */
.navbar .btn-primary{
  background: linear-gradient(
    90deg,
    #5b0f83,
    #7a1bbd,
    #5b0f83
  );
  box-shadow:
    0 10px 25px rgba(122,27,189,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.navbar .btn-primary:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}


/* =========================
   HERO BLEND (conecta com o header)
   ========================= */

.hero{
  position: relative;
  overflow: hidden;
}

/* faixa de gradiente vinda do header */
.hero::before{
  content:"";
  position: absolute;
  left: -20%;
  right: -20%;
  top: -160px;
  height: 420px;
  background:
    radial-gradient(700px 240px at 15% 30%, rgba(122,27,189,.22), transparent 60%),
    radial-gradient(620px 220px at 85% 35%, rgba(120,200,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(12,2,20,.22), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* garante que o conteúdo fique acima do efeito */
.hero > .container,
.hero > .container-fluid{
  position: relative;
  z-index: 1;
}

/* leve refinamento no texto */
.hero p{
  line-height: 1.65; /* “minimamente” maior, como você pediu antes */
}

/* =========================
   PLANOS PROGRESSIVOS (1x → 5x → 10x)
   ========================= */

/* pega os 3 cards dentro do grid do #planos */
#planos .row > div:nth-child(1) .pricing-card,
#planos .row > div:nth-child(1) .cardx.pricing{
  border-color: rgba(102,0,136,.22);
  box-shadow: 0 16px 45px rgba(102,0,136,.10);
}

#planos .row > div:nth-child(2) .pricing-card,
#planos .row > div:nth-child(2) .cardx.pricing{
  border-color: rgba(120,200,255,.28);
  box-shadow: 0 18px 55px rgba(120,200,255,.14);
  transform: translateY(-2px);
}

#planos .row > div:nth-child(3) .pricing-card,
#planos .row > div:nth-child(3) .cardx.pricing{
  border-color: rgba(122,27,189,.32);
  box-shadow: 0 20px 60px rgba(122,27,189,.16);
}

/* “brilho” sutil no topo do card (premium) */
#planos .pricing-card,
#planos .cardx.pricing{
  position: relative;
  overflow: hidden;
}

#planos .pricing-card::after,
#planos .cardx.pricing::after{
  content:"";
  position:absolute;
  left: -30%;
  right: -30%;
  top: -120px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent 70%);
  opacity: .55;
  pointer-events:none;
}

/* =========================
   MICROINTERAÇÕES (hover + reveal)
   ========================= */

/* hover mais elegante (cards e blocos) */
.cardx, .pricing-card, .soft-card, .hero-card, .kpi{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cardx:hover, .soft-card:hover, .kpi:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 65px rgba(2,8,23,.10);
}

/* pills com hover sutil */
.pill{
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.pill:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.88);
  border-color: rgba(15,23,42,.16);
}

/* Scroll reveal */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* respeita acessibilidade */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


.partner-card{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  box-shadow: 0 10px 28px rgba(2,8,23,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

.partner-card img{
  max-width: 100%;
  max-height: 42px;

  /* 🔥 AQUI estava o problema */
  filter: grayscale(1) opacity(.6);

  transition: filter .18s ease, transform .18s ease;
}

.partner-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(2,8,23,.10);
}

.partner-card:hover img{
  filter: grayscale(0) opacity(1);
  transform: scale(1.03);
}


/* =========================
   WHATSAPP FLOAT + TOOLTIP
   ========================= */

.whatsapp-wrapper{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Botão */
.whatsapp-float{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366, #1ebe5d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.whatsapp-float:hover{
  transform: translateY(-3px);
  box-shadow: 0 24px 55px rgba(0,0,0,.45);
  filter: brightness(1.05);
}

/* Tooltip */
.whatsapp-tooltip{
  background: rgba(15, 5, 30, .95);
  color: #fff;
  font-size: .9rem;
  padding: 10px 14px;
  border-radius: 14px;
  white-space: nowrap;
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
  animation: whatsappPulse 1.2s ease infinite alternate;
}

/* seta do balão */
.whatsapp-tooltip::after{
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(15, 5, 30, .95);
}

/* animação leve */
@keyframes whatsappPulse{
  from{ transform: translateY(0); }
  to{ transform: translateY(-3px); }
}

/* Hover: esconde tooltip */
.whatsapp-wrapper:hover .whatsapp-tooltip{
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
}

/* Mobile ajustes */
@media (max-width: 768px){
  .whatsapp-wrapper{
    right: 16px;
    bottom: 16px;
  }

  .whatsapp-tooltip{
    display: none; /* no mobile fica só o botão */
  }

  .whatsapp-float{
    width: 62px;
    height: 62px;
    font-size: 30px;
  }
}

/* ===== OFERTA DE PREÇO (PLANOS) ===== */

.pricing-offer{
  margin-bottom: 12px;
}

.old-price{
  font-size: .95rem;
  color: #9ca3af;
  text-decoration: line-through;
  margin-bottom: 2px;
}

.price.highlight{
  font-size: 2.4rem;
  font-weight: 800;
  color: #660088;
}

.price-note{
  font-size: .9rem;
  font-weight: 600;
  color: #4b5565;
}

.after-price{
  font-size: .9rem;
  margin-top: 2px;
}

.plan-tabs{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.plan-tab{
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.8);
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

.plan-tab:hover{
  transform: translateY(-1px);
}

.plan-tab.active{
  background: linear-gradient(90deg, #370033, #660088);
  color: #fff;
  border-color: transparent;
}

.plan-content{
  display: none;
  animation: fadeUp .35s ease;
}

.plan-content.active{
  display: block;
}

@keyframes fadeUp{
  from{
    opacity: 0;
    transform: translateY(8px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}
.socio-avatar{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #370033, #660088);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  letter-spacing: .05em;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
}

.socio-card{
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.socio-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 65px rgba(2,8,23,.12);
}

.socio-photo{
  position: relative;
  height: 500px;
  overflow: hidden;
}

.socio-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* brilho sutil premium */
.socio-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.25) 100%
  );
}

/* Mobile */
@media (max-width: 768px){
  .socio-photo{
    height: 500px;
  }
}

/* ===== SCROLL REVEAL (LEVE E PREMIUM) ===== */

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .6s ease,
    transform .6s ease;
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* variações */
.reveal-fade-up{
  transform: translateY(24px);
}

/* delays suaves */
.reveal-delay-1{
  transition-delay: .12s;
}

.reveal-delay-2{
  transition-delay: .24s;
}

/* acessibilidade */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.vfcf-icon{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #370033, #660088);
  color: #fff;
  font-weight: 800;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.plan-tab.active, .pulse{
  position: relative;
  animation: planPulse 0.7s ease-in-out infinite;
}

/* Animação */
@keyframes planPulse{
  0%{
    box-shadow: 0 0 0 0 rgba(122,27,189,.45);
  }
  70%{
    box-shadow: 0 0 0 20px rgba(122,27,189,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(122,27,189,0);
  }
}

.pulse{
  position: relative;
  animation: btnPulse 1.5s ease-in-out infinite;
}

/* Animação */
@keyframes btnPulse{
  0%{
    box-shadow: 0 0 0 0 rgba(122,27,189,.45);
  }
  70%{
    box-shadow: 0 0 0 20px rgba(122,27,189,0);
  }
  100%{
    box-shadow: 0 0 0 0 rgba(122,27,189,0);
  }
}


.footer-10x{
  background:
    linear-gradient(
      135deg,
      rgba(18,6,28,.98),
      rgba(12,2,20,.98)
    );
  color: #fff;
}

.footer-10x .muted{
  color: rgba(255,255,255,.70);
}

.footer-link{
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: color .15s ease;
}

.footer-link:hover{
  color: #fff;
}

.footer-divider{
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
  );
}

/* =========================
   FOOTER FULL WIDTH / SEM GAP
   ========================= */

.footer-10x{
  margin-top: 0 !important;
  padding-top: 64px;
  margin: 0 !important;
  padding-bottom: 48px;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* remove qualquer espaço vindo de sections anteriores */
section + .footer-10x{
  margin-top: 0 !important;
}

/* garante que o body não empurre */
body{
  margin: 0;
  padding: 0;
}

/* se o último elemento antes do footer for card */
section:last-of-type{
  padding-bottom: 0 !important;
}


/* =========================
   FOOTER DARK — IGUAL HEADER
   ========================= */

.footer-dark{
  width: 100%;
  margin: 0;
  background:
    linear-gradient(
      135deg,
      rgba(18, 6, 28, 0.98) 0%,
      rgba(28, 8, 46, 0.98) 45%,
      rgba(12, 2, 20, 0.98) 100%
    );
  color: #fff;
  position: relative;
}

/* linha de brilho igual ao header */
.footer-dark::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(180,120,255,.35),
    rgba(120,200,255,.25),
    rgba(180,120,255,.35),
    transparent
  );
}

.footer-title{
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: .4px;
}

.footer-text{
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.footer-muted{
  color: rgba(255,255,255,.65);
  font-size: .95rem;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-links li{
  margin-bottom: 8px;
}

.footer-links a{
  color: rgba(255,255,255,.75);
  text-decoration:none;
}

.footer-links a:hover{
  color:#fff;
}

.footer-cta{
  display:inline-block;
  margin-top: 12px;
  padding: 14px 22px;
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    #5b0f83,
    #7a1bbd,
    #5b0f83
  );
  color:#fff;
  font-weight:600;
  text-decoration:none;
  box-shadow: 0 12px 30px rgba(122,27,189,.35);
}

.footer-cta:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.footer-divider{
  margin: 40px 0 20px;
  height:1px;
  background: rgba(255,255,255,.12);
}

.footer-bottom{
  font-size:.85rem;
  color: rgba(255,255,255,.55);
  text-align:center;
}

.footer-dark {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
