:root{
  --bg:#f6f8fb;
  --accent:#ffd91a;
  --accent-2:#ffd91a;
  --dark:#0f1724;
  --muted:#6b7280;
  --card:#ffffff;
  --radius:14px;
  --container:1100px;
  --glass: rgba(255,255,255,0.06);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial,Helvetica,sans-serif;color:var(--dark);-webkit-font-smoothing:antialiased}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.container.narrow{max-width:900px}
.inicio {
  max-height: 100%;
}
/* ===== NAV DESKTOP ===== */
.navbar {
background: linear-gradient(to right, #180454, #3a0ca3);
}

.navbar nav {
  max-width: 1400px;
  height: 80px;
  padding: 0 20px;
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO */
.logo-img {
  height: 150px;
  width: auto;
  object-fit: contain;
}

/* MENU DESKTOP */
.nav-links {
  list-style: none;
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav-links li a {
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  transition: opacity 0.3s;
}

.nav-links li a:hover {
  opacity: 0.8;
}

/* BOTÃO CTA */
.cta-menu {
  background: var(--accent);
  padding: 10px 18px;
  border-radius: 12px;
  color: #000 !important;
  font-weight: 700;
}

/* HAMBURGER */
.menu-toggle {
  display: none;
  font-size: 34px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  z-index: 10001;
}

/* ===== OVERLAY ===== */
.menu-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: 9990;
  opacity: 0;
  transition: opacity .3s ease;
}

.menu-overlay.active {
  display: block;
  opacity: 1;
}

/* ===== RESPONSIVO ===== */
@media (max-width: 850px) {

  /* some o menu desktop */
  .nav-links {
    display: none;
    flex-direction: column;
    gap: 18px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 16px;
    padding: 25px;
    position: fixed;
    right: 20px;
    top: 100px;
    width: 260px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: all .35s ease;
    z-index: 9999;
  }

  /* quando abrir */
  .nav-links.active {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* texto dos links */
  .nav-links li a {
    font-size: 17px;
    color: #fff;
  }

  .cta-menu {
    margin-top: 10px;
    padding: 14px;
    text-align: center;
  }

  /* mostra o hamburger */
  .menu-toggle {
    display: block;
  }
}

/* Esconde overlay e hamburger no desktop */
@media (min-width: 851px) {
  .menu-overlay {
    display: none !important;
  }
}

/* ================== MOBILE ================== */
@media (max-width: 900px) {

  /* esconde links desktop */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 86px;
    right: 5%;
    width: 260px;

    background: var(--bg);
    backdrop-filter: blur(25px);

    border-radius: 16px;
    padding: 1.2rem 0;
    text-align: left;

    box-shadow: 0 8px 28px rgba(0,0,0,0.25);
  }

  /* exibir links quando clicado */
  .nav-links.active {
    display: flex;
    animation: fadeIn 0.35s ease;
  }

  /* estiliza links dentro do menu mobile */
  .nav-links li a {
    color: var(--dark)!important;
    font-size: 1.1rem;
    padding: 12px 22px;
    display: block;
  }

  .cta-menu {
    background: var(--accent);
    color: #000 !important;
    margin: 10px 20px 0;
    text-align: center;
    border-radius: 12px;
    padding: 14px;
  }

  /* exibe hambúrguer */
  .menu-toggle {
    display: block;
  }

  /* Reduz tamanho da logo no mobile */
  .logo-img {
    height: 200px;
  }
}

/* Animação suave */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* HERO */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(to right, #180454, #3a0ca3);
  color: #fff;
  padding: 60px 20px;
  text-align: center;
}

.destaque {
  color: #ffd91a;
}

.hero .overlay {
  position: absolute;
  inset: 0;
  opacity: 0.08;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.06), transparent 10%);
}

.hero-inner {
  position: relative;
  max-width: 900px;
  width: 100%;
  padding: 20px;
}

/* Título responsivo */
.hero h1 {
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  font-size: clamp(32px, 6vw, 52px);
}

/* Parágrafo */
.hero .lead {
  font-size: clamp(16px, 2.6vw, 20px);
  opacity: 0.92;
  margin-bottom: 32px;
}

/* BOTÕES HERO */
.hero-ctas {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn.primary {
  background: var(--accent);
  color: black;
  padding: 14px 26px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
}

.btn.primary-outline {
  border: 2px solid var(--muted);
  color: var(--bg);
  padding: 14px 26px;
  border-radius: 12px;
  font-weight: 700;
  background: transparent;
  text-decoration: none;
}

/* RESPONSIVO — abaixo de 600px */
@media (max-width: 600px) {
  .hero {
    padding: 80px 20px;
  }

  .hero-ctas {
    flex-direction: column;
    gap: 14px;
  }

  .btn.primary,
  .btn.primary-outline {
    width: 100%;
    max-width: 330px;
    margin: 0 auto;
  }
}
/* SECTIONS */
.section{padding:72px 0;background:var(--bg)}
.section.alt{background:#f1f5f9}
.section h2{text-align:center;font-size:44px;margin:0 0 8px}
.section .sub{text-align:center;color:var(--muted);max-width:900px;margin:0 auto 36px}
.vantagens-section {
  padding: 5rem 10%;
  text-align: center;
  background: var(--accent); /* amarelo suave */
}

.titulo-vantagens {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #3a0ca3 ;
}

.intro-vantagens,
.final-vantagens {
  font-size: 1.2rem;
  color: #444;
  max-width: 750px;
  margin: 0 auto 2.5rem auto;
  line-height: 1.6;
}

/* ======== CARDS ======== */
.cards-beneficios {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 por linha */
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.card-beneficio {
  background: #fff;
  padding: 1.4rem 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: 0.3s ease;
}

.card-beneficio i {
  color: #2534c9;
  font-size: 1.3rem;
}

.card-beneficio:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

/* RESPONSIVO */
@media (max-width: 900px) {
  .cards-beneficios {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .cards-beneficios {
    grid-template-columns: 1fr;
  }
}

/* ======== BOTÃO PROFISSIONAL ======== */
.btn-contato-profissional {
  display: inline-block;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, #2534c9, #0f1c87);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  transition: 0.3s ease;
}

.btn-contato-profissional:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
  opacity: 0.92;
}
/* ========== ANIMAÇÃO DOS CARDS ========== */
.card-beneficio {
  animation: cardBounce 2.8s ease-in-out infinite;
}

.card-beneficio:nth-child(2) { animation-delay: .15s; }
.card-beneficio:nth-child(3) { animation-delay: .3s; }
.card-beneficio:nth-child(4) { animation-delay: .45s; }
.card-beneficio:nth-child(5) { animation-delay: .6s; }
.card-beneficio:nth-child(6) { animation-delay: .75s; }

@keyframes cardBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

/* ========== ANIMAÇÃO DO BOTÃO ========== */
.btn-contato-profissional {
  animation: botaoPulse 1.8s ease-in-out infinite;
}

@keyframes botaoPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.04);
  }
}
/* ---------- SEÇÃO DE VENDAS (corrigida) ---------- */
#sales-section {
  padding: 100px 0;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 20px;
  font-family: inherit; /* usa a mesma fonte do seu site */
  /* garantir visibilidade por padrão */
  opacity: 1;
  transform: none;
}

/* ---------- TÍTULO ---------- */
#sales-section .title-wrap {
  text-align: center;
  margin-bottom: 60px;
}

#sales-section .title-wrap h1 {
  font-size: 2.6rem;
  font-weight: 700;
  color: #2534c9;
  margin-bottom: 15px;
}

#sales-section .title-wrap p {
  font-size: 1.2rem;
  color: #444;
  max-width: 700px;
  margin: auto;
}

/* ---------- COLUNAS ---------- */
#sales-section .cols {
  display: grid;
  grid-template-columns: 1fr 450px;
  gap: 50px;
  align-items: start;
}
@media (max-width: 950px) {
  #sales-section .cols {
    grid-template-columns: 1fr;
  }
}

/* ---------- LISTA DE FEATURES ---------- */
.features {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-left: 5px solid #2534c9;
  transition: transform .3s ease, box-shadow .3s ease, opacity .4s ease;
}

.feature:hover {
  transform: translateX(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

.feature .ico {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: #2534c9;
  opacity: .12;
}

.feature h4 { color: #2534c9; font-size: 1.2rem; margin-bottom: 6px; }
.feature p  { color: #444; line-height: 1.45; }

/* ---------- MOCKUP ---------- */
.mockup {
  background: #f6f7ff;
  border-radius: 18px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}

/* ---------- FAIXA DE RESULTADO ---------- */
.band {
  background: #2534c9;
  padding: 18px;
  border-radius: 14px;
  color: white;
  text-align: center;
  margin: 60px 0 40px;
  font-size: 1.1rem;
}

/* ---------- BOTÕES ---------- */
.cta-row { display:flex; justify-content:center; gap:20px; margin-top:40px; }
.btn-primary,
.btn-secondary {
  padding: 14px 26px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: .25s;
  border: none;
}
.btn-primary { background: #2534c9; color:#fff; }
.btn-primary:hover { background:#1e2cad; }
.btn-secondary { background:#f0f0f7; color:#2534c9; }
.btn-secondary:hover { background:#e4e4ef; }

/* ---------- ANIMAÇÃO DE SCROLL (controlada por JS) ---------- */
/* Fade/slide dos itens individuais */
.fade-item {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .75s cubic-bezier(.2,.9,.2,1), transform .75s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}

/* Quando JS adicionar .active → fica visível */
.fade-item.active {
  opacity: 1;
  transform: translateY(0);
}

/* Se havia alguma regra global .hidden que dava display:none, anule aqui
   (só para garantir que não esconda a seção inteira) */
#sales-section.hidden {
  /* deixar neutro — não escondemos via CSS global */
  display: block !important;
  opacity: 1 !important;
  height: auto !important;
  visibility: visible !important;
}
.fade-item {
  opacity: 0;
  transform: translateY(40px);
  transition: all .9s ease;
}

.fade-item.active {
  opacity: 1;
  transform: translateY(0);
}

#sales-section.hidden {
  opacity: 0; /* será removido pelo JS */
}
/* CARDS GRID (O que resolvemos) */
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:24px}
.card{background:var(--card);border-radius:14px;padding:22px;border:1px solid #eef2f6;box-shadow:0 6px 20px rgba(12,18,30,0.03)}
.card .icon{width:48px;height:48px;border-radius:10px;background:#eef6ff;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:12px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
i[class*="fa-"],
svg[class*="fa-"] {
  color: #2534c9 !important;
  fill: #2534c9 !important;
}

/* STEPS */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.step{background:#fff;border-radius:14px;padding:28px;border:1px solid #eef2f6;text-align:center;box-shadow:0 10px 30px rgba(12,18,30,0.04)}
.step .badge{font-size:38px;color:rgba(45,100,255,0.12);font-weight:800}
.step h3{margin:12px 0 8px}
.step p{color:var(--muted)}

/* BENEFÍCIOS GRID */
.cards-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.benefit-card{background:#fff;border-radius:14px;padding:22px;border:1px solid #f1f5f9;text-align:left}
.benefit-card .icon{width:46px;height:46px;border-radius:10px;background:linear-gradient(180deg,#fff,#fff);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.benefit-card h3{margin:6px 0}
.benefit-card p{color:var(--muted)}

/* PROVA SOCIAL */
.social-grid{display:grid;grid-template-columns:2fr 2fr 1fr;gap:18px;align-items:center;margin-top:18px}
.testimonial{background:#fff;padding:20px;border-radius:12px;border:1px solid #eef2f6}
.testimonial .quote{font-style:italic;margin:0 0 12px}
.testimonial .author{font-weight:700;color:var(--muted)}
.numbers{display:flex;gap:10px;justify-content:space-around;background:#fff;padding:16px;border-radius:12px;border:1px solid #eef2f6}
.numbers div{text-align:center}
.numbers strong{display:block;font-size:20px;color:var(--dark)}
.numbers span{display:block;color:var(--muted);font-size:13px}

/* CTA SECTION */
.cta-section{text-align:center;padding-bottom:96px}
.btn.large{padding:14px 26px;border-radius:12px;font-size:18px}
.muted{color:var(--muted);font-size:14px}

/* FOOTER */
.footer{background:#fff;padding:22px 0;border-top:1px solid #edf2f7}
.footer-inner{display:flex;align-items:center;justify-content:space-between}
.footer a{text-decoration:none;color:var(--muted);margin-left:12px}

/* RESPONSIVE */
@media (max-width:1100px){
  .cards-grid{grid-template-columns:repeat(3,1fr)}
  .cards-grid-3{grid-template-columns:repeat(2,1fr)}
  .menu a{font-size:14px}
}
@media (max-width:820px){
  .hero h1{font-size:36px}
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .steps-grid{grid-template-columns:1fr}
  .cards-grid-3{grid-template-columns:1fr}
  .social-grid{grid-template-columns:1fr}
  .nav{padding:10px 12px}
  .hamburger{display:block}
  .menu{position:fixed;inset:auto 0 0 0;background:rgba(12,18,30,0.96);flex-direction:column;gap:18px;padding:26px;transform:translateY(100%);transition:transform .28s ease;border-top-left-radius:14px;border-top-right-radius:14px}
  .menu.open{transform:translateY(0)}
  .menu a{color:#fff;font-size:18px}
  .brand-text{display:none}
}
@media (max-width:480px){
  .hero h1{font-size:28px}
  .hero .lead{font-size:15px}
  .hero{padding:60px 0 90px}
  .brand .logo{width:40px;height:40px}
}

/* small polish */
a:focus{outline:3px solid rgba(255,122,26,0.18);outline-offset:2px}
/* ===== SEÇÃO RESULTADOS ===== */

#results-section {
  width: 100%;
  padding: 80px 0;
  background: #fff;
}

#results-section .title-wrap {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 50px;
}

#results-section h1 {
  font-size: 2.4rem;
  font-weight: 700;
  color: #2534c9; /* azul escuro que você usa */
}

#results-section p {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.6;
}

/* ===== COLUNAS ===== */

#results-section .cols {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* ===== FEATURES ===== */

#results-section .features {
  flex: 1 1 500px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

#results-section .feature {
  display: flex;
  gap: 20px;
  background: #f7f8ff;
  padding: 20px 22px;
  border-radius: 12px;
  border-left: 5px solid #2534c9;
  align-items: flex-start;
}

#results-section .feature h4 {
  margin-bottom: 6px;
  color: #111;
  font-size: 1.15rem;
}

#results-section .feature p {
  color: #555;
  font-size: 0.98rem;
}

/* Ícone genérico — depois posso trocar por SVG */
#results-section .feature .ico {
  width: 32px;
  height: 32px;
  background: #2534c9;
  border-radius: 8px;
}

/* ===== MOCKUP ===== */

#results-section .mockup {
  flex: 1 1 380px;
  background: #eef0ff;
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#results-section .mockup .screen {
  font-size: 1rem;
  color: #2534c9;
  font-weight: 600;
}

/* ===== FAIXA ===== */

#results-section .band {
  margin-top: 60px;
  background: #2534c9;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
}

#results-section .band p {
  color: #fff;
  font-size: 1.1rem;
}

/* ===== CTAs ===== */

#results-section .cta-row {
  margin-top: 40px;
  text-align: center;
  display: flex;
  gap: 20px;
  justify-content: center;
}

.btn-primary {
  background: #2534c9;
  color: #fff;
  padding: 12px 26px;
  font-size: 1rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: .2s;
}

.btn-primary:hover {
  opacity: .85;
}

.btn-secondary {
  background: transparent;
  border: 2px solid #2534c9;
  color: #2534c9;
  padding: 12px 26px;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: .2s;
}

.btn-secondary:hover {
  background: #2534c9;
  color: #fff;
}

/* ===== ANIMAÇÃO ===== */

.fade-item {
  opacity: 0;
  transform: translateY(30px);
  transition: .6s ease;
}

.fade-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVO ===== */

@media (max-width: 900px) {
  #results-section .cols {
    flex-direction: column;
  }

  #results-section .mockup {
    order: -1;
  }
}
.fade-item {
  opacity: 0;
  transform: translateY(30px);
}

.fade-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   SEÇÃO PRINCIPAL — 100% RESPONSIVA
   ========================================================= */
.vendas-section {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: #180454;
}

/* container das duas colunas */
.vendas-container {
  display: flex;
  height: 100%;
  width: 100%;
}

/* =========================================================
   ESQUERDA (texto + cards)
   ========================================================= */
.vendas-left {
  width: 50%;
  padding: 40px 28px;
  background: linear-gradient(to right, #180454, #3a0ca3);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
}

.vendas-left h1 {
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;
}

.vendas-left .intro {
  font-size: 16px;
  line-height: 1.35;
  opacity: 0.95;
}

.vendas-left h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 10px;
}

/* CARDS */
.cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.card {
  background: #fff;
  padding: 16px 18px;
  border-radius:12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.card .icon {
  font-size: 22px;
  flex-shrink: 0;
}

.card h4 {
  font-size: 15px;
  margin: 0;
  line-height: 1.2;
  color: #000; /* aqui resolve */
}

.card p {
  font-size: 13px;
  color: #555;
  margin-top: 4px;
  line-height: 1.3;
}

/* =========================================================
   DIREITA (imagem + box)
   ========================================================= */
.vendas-right {
  width: 50%;
  min-height: 100vh; /* a parte da direita sempre ocupa no mínimo a altura da tela */
  position: relative;
  overflow: hidden;
}

.vendas-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* filtro */
.vendas-right::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(40, 40, 40, 0.55);
  z-index: 2;
}

/* BOX CENTRAL SOBRE A IMAGEM */
.duvida-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 3;
  max-width: 380px;
  width: 90%;
}

.duvida-box h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 12px;
}

.duvida-box p {
  font-size: 15px;
  margin-bottom: 20px;
  opacity: .95;
}

.duvida-box .cta-btn {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 28px;
  background: linear-gradient(to right,#180454,#3a0ca3);
  color: white;
  font-weight: 700;
  text-decoration: none;
}



/* =========================================================
   RESPONSIVIDADE REAL — FUNCIONA DE VERDADE NO CELULAR
   ========================================================= */

/* ===== tablets ===== */
@media (max-width: 1024px) {
  .vendas-container {
    flex-direction: column;
    height: auto;
  }

  .vendas-left,
  .vendas-right {
    width: 100%;
  }

  .vendas-right {
    height: 420px;
  }

  .duvida-box {
    max-width: 90%;
  }
}

/* ===== celulares ===== */
@media (max-width: 600px) {
  .vendas-left {
    padding: 32px 22px;
  }

  .vendas-left h1 {
    font-size: 24px;
  }

  .vendas-left .intro {
    font-size: 14px;
  }

  .cards {
    gap: 12px;
  }

  .card {
    padding: 14px 16px;
  }

  .card h4 {
  font-size: 15px;
  margin: 0;
  line-height: 1.2;
  color: #000; /* aqui resolve */
}

  .card p {
    font-size: 12px;
  }

  /* imagem fica mais vertical */
  .vendas-right {
    height: 360px;
  }

  /* box menor para caber sem sumir */
  .duvida-box h2 {
    font-size: 20px;
  }

  .duvida-box p {
    font-size: 13px;
  }

  .duvida-box .cta-btn {
    padding: 10px 22px;
    font-size: 14px;
  }
}

/* ===== celulares pequenos (iPhone SE, 320px) ===== */
@media (max-width: 380px) {
  .vendas-left h1 {
    font-size: 20px;
  }

  .vendas-right {
    height: 300px;
  }

  .duvida-box {
    width: 92%;
  }

  .duvida-box h2 {
    font-size: 18px;
  }

  .duvida-box p {
    font-size: 12px;
  }

  .duvida-box .cta-btn {
    padding: 9px 18px;
    font-size: 13px;
  }
}

/* SEÇÃO PRINCIPAL */
.benefits-prototype-section {
  background: var(--accent);
  padding: 40px 20px; /* reduzido */
  display: flex;
  justify-content: center;
  align-items: center; /* CENTRALIZA FORMULÁRIO NA DIREITA */
  box-sizing: border-box;
  min-height: 100vh; /* limita a seção ao tamanho da tela */
}

/* GRID → CARDS + FORMULÁRIO */
.benefits-prototype-section .container {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr; /* ajustado para melhor encaixe */
  gap: 40px; /* reduzido */
  max-width: 1200px;
  width: 100%;
  align-items: center; /* centraliza verticalmente o lado dos cards e do formulário */
}

/* TÍTULO BENEFÍCIOS */
.benefits-block h2 {
  font-size: 32px; /* leve redução */
  line-height: 1.3;
  margin-bottom: 18px;
  color: #3a0ca3;
  text-align: left;
}

.benefits-block .lead {
  font-size: 16px;
  margin-bottom: 28px;
  color: black;
}

/* CARDS BENEFÍCIOS */
.features-cards {
  display: flex;
  flex-direction: column;
  gap: 14px; /* ligeiramente menor */
}

.feature-card {
  display: flex;
  align-items: center;
  gap: 12px;              /* menor */
  background: #fff;
  padding: 12px 16px;     /* menor */
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: .2s;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.12);
}

.feature-card .icon {
  font-size: 20px; /* reduzido */
  color: #2534c9;
}

.feature-card h4 {
  font-size: 15px;
  font-weight: 600;
}

/* FORMULÁRIO */
.prototype-form-wrapper {
  background: linear-gradient(to right,#180454,#3a0ca3);
  border-radius: 18px;           /* mais bonito */
  padding: 35px 28px;            /* mais organizado */
  max-width: 380px;              /* menor para caber melhor */
  width: 100%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  margin-top: 0;                 /* removido para centralizar corretamente */
}

.prototype-form-wrapper h3 {
  font-size: 23px;
  color: white;
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.3;
}

.prototype-form-wrapper .lead {
  color: #e0e0e0;
  text-align: center;
  font-size: 14px;
  margin-bottom: 25px;
  line-height: 1.5;
}

/* ORGANIZAÇÃO DOS INPUTS */
.prototype-form {
  display: flex;
  flex-direction: column;
  gap: 18px; /* inputs mais espaçados */
}

.prototype-form label {
  color: white;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}

.prototype-form input {
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  background: white;
}

.prototype-form input:focus {
  outline: none;
  border-color: white;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}

/* BOTÃO */
.prototype-form .btn {
  padding: 14px;
  border-radius: 10px;
  background: #2534c9;
  color: white;
  font-weight: 700;
  font-size: 17px;
  cursor: pointer;
  transition: .2s;
}

.prototype-form .btn:hover {
  background: #1d27a0;
}

/* RESPONSIVIDADE BENEFÍCIOS + FORM */
@media (max-width: 990px) {
  .benefits-prototype-section .container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .prototype-form-wrapper {
    margin-top: 0;
    max-width: 100%;
  }
}

.how-it-works-section {
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.how-it-works-section h2 {
  text-align: center;
  font-size: 32px;
  color: #3a0ca3;
  margin-bottom: 10px;
}

.how-it-works-section .lead {
  text-align: center;
  font-size: 16px;
  margin-bottom: 60px;
}

/* CONTAINER */
.how-it-works-cards {
  display: flex;
  gap: 20px;
  max-width: 1000px;
  width: 100%;
  justify-content: space-between;
  position: relative;
}

/* LINHA — Desktop (horizontal) */
.how-it-works-cards::before {
  content: '';
  position: absolute;
  height: 4px;
  background: #2534c9;
  top: 50px;
  left: 0;
  right: 0;
  border-radius: 2px;
}

/* CARD */
.how-card {
  background: #fff;
  padding: 25px 15px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  text-align: center;
  position: relative;
  flex: 1;
  min-width: 140px;
}

/* NÚMERO */
.step-number {
  width: 35px;
  height: 35px;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  border-radius: 50%;
  background: linear-gradient(to right,#180454,#3a0ca3);
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

/* --- RESPONSIVIDADE COM LINHA VERTICAL --- */
@media (max-width: 768px) {

  /* Cards em coluna */
  .how-it-works-cards {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
  }

  /* Linha vertical atrás dos cards */
  .how-it-works-cards::before {
    display: block;
    content: "";
    position: absolute;
    width: 4px;
    background: #2534c9;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
  }

  /* Ajusta os cards */
  .how-card {
    width: 100%;
    max-width: 350px;
  }

  /* Empurra o número para cima da linha */
  .step-number {
    top: -25px;
  }
}
/* SEÇÃO PROJETOS RECENTES */
.recent-projects-section {
  padding: 60px 20px;
  background:  linear-gradient(to right,#180454,#3a0ca3) ;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* TÍTULO CENTRALIZADO */
.recent-projects-section h2 {
  font-size: 32px;
  text-align: center;
  color: white;
  margin-bottom: 40px;
}

/* ALERTA DE PROJETO */
.projects-alert {
  background: var(--accent); /* amarelo chamativo */
  border-radius: 16px;
  padding: 25px 30px;
  text-align: center;
  max-width: 500px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.projects-alert p {
  font-size: 16px;
  color: #180454; /* preto metálico */
  margin-bottom: 20px;
}

.btn-whatsapp {
  padding: 12px 25px;
  border: none;
  border-radius: 10px;
   background:  linear-gradient(to right,#180454,#3a0ca3) ; /* azul */
  color: white;
  font-weight: 600;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s;
}

.btn-whatsapp:hover {
   background:  linear-gradient(to right,#180454,#3a0ca3) ;
}

/* RESPONSIVO */
@media (max-width: 480px) {
  .projects-alert {
    padding: 20px 15px;
  }

  .projects-alert p {
    font-size: 14px;
  }

  .btn-whatsapp {
    padding: 10px 20px;
    font-size: 14px;
  }
}
/* SEÇÃO SOBRE NÓS */
.about-us-section {
  padding: 80px 20px;
  background: var(--accent);
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* CONTAINER */
.about-us-container {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1100px;
  width: 100%;
}

/* TEXTO */
.about-us-text {
  flex: 1;
}

.about-us-text p {
  font-size: 18px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 25px;
}

/* BOTÃO */
.btn-about {
  display: inline-block;
  padding: 12px 25px;
  background: linear-gradient(to right,#180454,#3a0ca3);
  color: white;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: background .2s;
}

.btn-about:hover {
  background: #1d27a0;
}

/* LOGO */
.about-us-logo {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.about-us-logo img {
  max-width: 430px;   /* reduzido para evitar sobreposição */
  width: 100%;
  height: auto;
  border-radius: 40px;
}

/* ============================
      RESPONSIVIDADE
=============================== */
/* RESPONSIVO */
@media (max-width: 860px) {

  .about-us-container {
    flex-direction: column-reverse;  /* AGORA a logo sobe */
    text-align: center;
    gap: 25px;
  }

  .about-us-logo {
    justify-content: center;
    order: 1;                         /* força a logo para cima */
  }

  .about-us-logo img {
    max-width: 300px;                 /* tamanho reduzido no mobile */
  }

  .about-us-text {
    order: 2;                         /* texto fica abaixo */
  }

  .about-us-text p {
    font-size: 16px;
  }
}
/* SEÇÃO CTA */
/* SEÇÃO CTA */
.cta-section {
  position: relative;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  min-height: 450px; /* garante altura mínima */
}

/* VÍDEO NO FUNDO */
.video-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45);
}

/* CARD EM CIMA DO VÍDEO */
.cta-card {
  background: linear-gradient(to right,#180454,#3a0ca3);
  padding: 35px 40px;
  border-radius: 20px;
  text-align: center;
  color: white;
  max-width: 600px;
  width: 90%;          /* evita quebrar em telas pequenas */
  margin: 40px auto;   /* substitui margin gigante */
  backdrop-filter: blur(6px);
  box-sizing: border-box;
}

/* BOTÃO */
.btn-cta {
  margin-top: 20px;
  padding: 15px 25px;
  background: #2534c9;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 18px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-cta:hover {
  background: #1b28a0;
}

/* ============================
        RESPONSIVIDADE
============================ */
@media (max-width: 768px) {

  .cta-section {
    padding: 30px 15px;
    min-height: 350px;
  }

  .cta-card {
    padding: 25px 20px;   /* diminui bem para mobile */
    margin: 20px auto;
    max-width: 90%;       /* mantém centralizado */
  }

  .btn-cta {
    font-size: 16px;
    padding: 12px 20px;
  }
}

@media (max-width: 480px) {

  .cta-card {
    padding: 20px 15px;
    border-radius: 15px;
  }

  .cta-section {
    min-height: 320px;
  }

  .btn-cta {
    width: 100%; /* botão ocupa toda largura em telas pequenas */
  }
}

/* FOOTER */
.footer {
  background: linear-gradient(to right, #180454, #3a0ca3);
  color: #fff;
  padding: 30px 20px 20px;
  font-family: sans-serif;
}

/* CONTAINER PRINCIPAL (LOGO + MENU) */
.footer-top {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between; /* logo à esquerda, menu à direita */
  align-items: center; /* alinha verticalmente logo e links */
  gap: 20px;
}

/* LOGO */
.footer-logo img {
  width: 200px;   /* largura fixa */
  height: 150px;  /* altura fixa */
  object-fit: cover; /* preenche a área da logo */
  display: block;
}

/* MENU */
.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 25px;
}

.footer-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  transition: 0.2s;
}

.footer-menu a:hover {
  color: #ffd91a;
}

/* COPYRIGHT */
.copy {
  text-align: center;
  margin-top: 25px;
  font-size: 0.9rem;
  opacity: 0.6;
}

/* RESPONSIVO */
@media (max-width: 768px) {
  .footer-top {
    flex-direction: column; /* logo acima, menu abaixo */
    align-items: center;
    text-align: center;
    gap: 15px;
  }

  .footer-logo img {
    width: 150px;
    height: 112px; /* mantém proporção aproximada */
  }

  .footer-menu {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
}