/* =========================
   BASE / PALLETA
   Ajuste aqui para micro-diferenças da paleta.
========================= */
:root{
  /* Fundo gradiente das seções roxas */
  --bg-dark-1:#0b0c0f;
  --bg-dark-2:#1a1530;
  --bg-dark-3:#2f2590;
  --bg-purple:#5a3ef2;       /* acento */
  --bg-purple-2:#6a4cff;     /* claro */
  --bg-purple-3:#3c63f0;     /* azulado */
  --text:#ffffff;
  --muted:#cfd0dc;
  --card-border:#ffffffb0;
  --shadow-deep: 0 22px 60px rgba(0,0,0,.45);
  --shadow-glow: 0 22px 60px rgba(96,84,231,.35);

  /* Larguras */
  --container: min(1600px, 92vw);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: #0d0d12;
}

/* Utilitários */
.container{width:var(--container); margin-inline:auto}
.center{text-align:center}
.mt{margin-top:12px}
.small{font-size:.92rem}




/* Títulos */
.title{
  font-size:clamp(28px,4vw,48px);
  line-height:1.04;
  margin:0 0 18px;
  letter-spacing:-.01em;
  text-align: center;

}
.colorroxo{
  color: #6a55ff;
}
.title-slim{
  font-size:clamp(22px,2.6vw,36px);
  font-weight:800; color:#6a55ff;
  text-align:center;
  margin:0 0 20px;
}

.title-slim-sm{
  font-size:clamp(22px,2.6vw,26px);
  font-weight:400; color:#6a55ff;
  text-align:center;
margin-top: 90px;
}
.subtitle{font-size:clamp(16px,2vw,22px); color:#eaeaf6; margin:6px 0 26px}
.kicker {
  text-align: center;
  color: #d6d6ea;
  opacity: .95;
  font-weight: 600;
  font-size: clamp(14px, 1.5vw, 18px); /* corrigi a ordem do clamp */
  margin: -30px 0 6px; /* valor negativo sobe o texto */
}


/* Check e setas */

.arr::before{
  content:"";
  display:inline-block; width:20px; height:20px; margin-right:10px;
  border-radius:999px; background:#fff;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%235a3ef2" d="M7 4l7 6-7 6z"/></svg>') center/70% 70% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M7 4l7 6-7 6z"/></svg>') center/70% 70% no-repeat;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}

/* Seção base */
.sec{padding: clamp(32px,6vw,72px) 0}

/* =========================
   PARTE 1 — HERO
========================= */
.sec-hero{
  background:
    radial-gradient(1100px 700px at 18% 85%, #24185a 0%, transparent 60%),
    linear-gradient(90deg, #0b0c10 0%, #17152c 40%, #3328a0 100%);
}
.hero-logo img{
  width:clamp(180px,26vw,280px);
  height:auto; display:block;
  filter:drop-shadow(0 8px 26px rgba(143,133,255,.5));
  margin:6px 0 10px;
}
.hero-grid{
  display:grid; gap:clamp(20px,4vw,48px);
  grid-template-columns: 1.05fr .95fr;
  align-items:start;
}
.hero-title{
  font-size: clamp(30px,4.3vw,56px);
  margin:0 0 16px; line-height:1.05;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.accent{ text-shadow:0 0 18px rgba(143,133,255,.8); }
.hero-sub{font-size:clamp(16px,1.8vw,22px); color:#f2f2ff; margin:6px 0 0}

.mockup{
  margin:0 0 14px; position:relative;
  aspect-ratio:16/10; width:100%;
  border-radius:18px;
}
.mockup img{width:100%; height:100%; object-fit:contain; display:block}




/* =========================
   PARTE 2 — VÍDEO + FRASE
========================= */
.sec-video{background:#fff; color:#14131e}
.sec-video .video-slot{margin:24px 0 18px}
.video-placeholder{
  width:100%; aspect-ratio:16/9; border-radius:16px;
  background:linear-gradient(135deg,#16161b,#2a2a3b);
  color:#bdbde8; display:grid; place-items:center;
  font-weight:700; letter-spacing:.08em;
}
.phrase-img{margin:6px 0 0}
.phrase-img img{width:100%; height:auto; display:block}

/* =========================
   PARTE 3 — GAINS
========================= */
.sec-gains{background:white}
.sec-gains .title{margin-bottom:26px}
.gains-grid{display:grid; gap:32px; grid-template-columns:.9fr 1.1fr; align-items:center}
.gains-mock img{width:100%; height:auto; display:block; filter:drop-shadow(0 25px 35px rgba(0,0,0,.4))}
.gains-list{list-style:none; color: black; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; font-size:clamp(15px,1.8vw,18px)}

/* =========================
   PARTE 4 — FEEDBACK
========================= */
.sec-feedback{background:#6347a3;;}
/* Título branco na seção de feedback */
.sec-feedback .title { color: #fff; }
.sec-feedback .title .em { color: #fff; } /* mantém os spans em branco também */


.sec-feedback .title .em{color:white}
.feedback-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  margin:24px 0 22px;
}
.feedback-grid img{width:100%; height:auto; display:block; border-radius:12px; box-shadow:0 14px 30px rgba(0,0,0,.18)}
.cta-big{
  display:inline-grid;  gap:6px;
  background:#ff5a17; color:#fff; font-weight:800;
  padding:18px 28px; border-radius:48px; text-decoration:none;
  box-shadow:0 12px 26px rgba(255,90,23,.35);
  
}
.cta-big small{display:block; font-weight:700; opacity:.92; margin-top:-4px; font-size:14px}
.cta-big.orange{background:#ff5a17}

.centralizar{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* =========================
   PARTE 5 — PARA QUEM É
========================= */
.sec-whofor{background:white}
.whofor-grid{display:grid; gap:28px; grid-template-columns:.95fr 1.05fr; align-items:center}
.whofor-collage img {
  width: 110%;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 22px 36px rgba(0,0,0,.45));
}

/* Mobile */
@media (max-width: 768px) {
  .whofor-collage img {
    width: 105%;      /* maior que antes para não ficar pequena */
    max-width: 500px; /* garante que não fique gigante em telas médias */
    margin: 0 auto;   /* centraliza a imagem */
    display: block;
  }
}

.whofor-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; font-size:clamp(15px,1.8vw,18px)}
.whofor-list .boom{font-weight:900; font-size:clamp(22px,3vw,30px); color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.35); margin:8px 0}
.tagline{margin-top:18px; font-size:clamp(18px,2.4vw,26px)}

/* =========================
   PARTE 6 — COMO FUNCIONA
========================= */
.sec-how{  background:#6347a3;; color:white; margin-top: -50px;}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:8px}
.how-step{display:grid; gap:12px; justify-items:center}
.how-badge{width:min(420px, 78%); height:auto; display:block}
.how-img{width:min(520px, 90%); height:auto; display:block; filter:drop-shadow(0 18px 30px rgba(0,0,0,.2))}

/* =========================
   PARTE 7 — O QUE VEM
========================= */
.text-grow-desktop {
  /* nada aqui — herda o tamanho atual */
}

/* Desktop: aumenta o tamanho */
@media (min-width: 981px){
  .text-grow-desktop {
    font-size: 55px;
    margin-bottom: 100px;
  }
}
.sec-whatspackage{background:white}
.package-grid{display:grid; grid-template-columns: .95fr 1.05fr; gap:28px}
.package-mock img{width:100%; height:auto; display:block; filter:drop-shadow(0 22px 36px rgba(0,0,0,.45))}
.package-right{display:grid; gap:12px; align-content:start}
.badge-180{width:min(620px, 100%); height:auto; display:block; filter:drop-shadow(0 10px 18px rgba(0,0,0,.3))}
.package-box{
  width:min(620px, 100%);
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  background:#fff; color:#17172a; border-radius:14px; padding:18px 22px;
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}
.package-box ul{margin:0; padding-left:20px}
.package-bottom{grid-column:1/-1; display:grid; gap:14px; align-items:start}
.badge-450{width:min(600px, 96%); height:auto; display:block; filter:drop-shadow(0 12px 22px rgba(0,0,0,.3))}
.niches{
  background:#fff; color:#17172a; border-radius:14px; padding:18px 22px;
  box-shadow:0 16px 30px rgba(0,0,0,.18);
  display:grid; grid-template-columns:1fr 1fr; gap:18px; width:min(720px, 100%);
}

/* =========================
   PARTE 8 — BÔNUS
========================= */
.sec-bonus{background:#fff; color:#1c1c28}
.bonus-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:16px}
.bonus-grid img{width:100%; height:auto; display:block; border-radius:14px; box-shadow:0 16px 30px rgba(0,0,0,.18)}

/* =========================
   PARTE 9 — RECEBERÁ
========================= */
.sec-recebera{
  background:
    radial-gradient(1100px 700px at 18% 85%, #24185a 0%, transparent 60%),
    linear-gradient(90deg, var(--bg-dark-1) 0%, var(--bg-dark-2) 40%, var(--bg-dark-3) 100%);
}
.receive-card{
  margin-top:12px;
  background:linear-gradient(90deg,#6a4cff 0%, #3c63f0 100%);
  padding:18px; border-radius:28px;
  box-shadow:0 22px 50px rgba(0,0,0,.35);
  display:grid; grid-template-columns:1.1fr .9fr; gap:1px; align-items:center;
  border:2px solid #ffffff50;
}
.receive-left ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px; font-size:clamp(25px,1.8vw,22px); color:#fff}
.receive-right img{width:120%; height:auto; display:block; filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}

/* =========================
   PARTE 10 — PREÇO
========================= */
.sec-pricing{background:#fff; color:#1a1a26}
.muted{color:#5d5f75; font-size:24px; font-weight: 600;}
.price-cut{color:#6a55ff; font-size:48px; text-decoration:line-through; font-weight:900; letter-spacing:.06em}
.big-price img{width:min(760px, 100%); height:auto; display:block; margin-inline:auto; filter:drop-shadow(0 14px 30px rgba(0,0,0,.25))}
.btn-wa{
  display:inline-block; background:#25D366; color:#fff; font-weight:800; text-decoration:none;
  padding:25px 36px; border-radius:999px; margin-top:10px; box-shadow:0 10px 22px rgba(37,211,102,.35)
}
.guarantee{
  margin-top:24px; display:flex; grid-template-columns:120px 1fr; gap:14px; align-items:center; justify-content:center
}
.guarantee img{width:1200px; height:auto; display:block}
.guarantee-text h3{margin:0 0 6px}

/* =========================
   PARTE 11 — FAQ + FOOTER
========================= */
.sec-faq{
  background:
    radial-gradient(900px 600px at 10% 90%, #2a1960 0%, transparent 60%),
    linear-gradient(90deg, #1a1730 0%, #0f0f15 100%);
}
.faq{display:flex; flex-direction:column; gap:12px}
.faq-item{
  background:#fff; color:#161622; border-radius:12px; overflow:hidden;
  box-shadow:0 12px 26px rgba(0,0,0,.18)
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:16px 18px; font-weight:700; position:relative
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item[open] summary{border-bottom:1px solid #e8e8ee}
.faq-item summary::after{
  content:""; position:absolute; right:16px; top:50%; transform:translateY(-50%) rotate(0deg);
  width:18px;height:18px; border-radius:999px; background:#5a3ef2;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="white" d="M10 4v12m6-6H4"/></svg>') center/90% 90% no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 4v12m6-6H4"/></svg>') center/90% 90% no-repeat;
  transition:.2s ease;
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-body{padding:14px 18px 18px; color:#3b3d55}

.footer{
  margin-top:26px; text-align:center; color:#e0e0f5
}
.footer img{width:120px; height:auto; display:block; margin:8px auto 6px; filter:drop-shadow(0 6px 16px rgba(143,133,255,.35))}

/* =========================
   RESPONSIVIDADE
========================= */
@media (max-width: 980px){
  .hero-grid, .gains-grid, .package-grid, .receive-card{grid-template-columns:1fr}
  .whofor-grid{grid-template-columns:1fr}
  .how-grid{grid-template-columns:1fr; gap:22px}
  .bonus-grid{grid-template-columns:1fr 1fr}
  .feedback-grid{grid-template-columns:1fr}
  .niches{grid-template-columns:1fr}
  .package-box{grid-template-columns:1fr}
  .guarantee{grid-template-columns:80px 1fr}
}
@media (max-width: 640px){
  .bonus-grid{grid-template-columns:1fr}
  .cta-big{width:100%}
  .hero-logo img{margin-inline:auto}
}


@font-face{
  font-family: "Font Awesome 6 Free";
  src: url("/fonts/fa-solid-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


.fa-arrow-right:before {
  content: "\f061";
}

/* Section: “Você se sente assim?” — paleta e layout fiéis */
.cx-feel{
  --bg-left:#6a4cff;     /* roxo à esquerda */
  --bg-right:#3c63f0;    /* roxo à direita */
  --title:#7efbe0;       /* ciano/menta do título */
  --text:#ffffff;
  --container:min(1400px, 92vw);

  padding:clamp(36px,5vw,64px) 0;
  background:#6347a3;
  color:var(--text);
  font-family:'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cx-feel__wrap{width:var(--container); margin-inline:auto}

.cx-feel__title{
  margin:0 0 12px;
  font-weight:900;
  letter-spacing:-.01em;
  color:var(--title);
  font-size:clamp(28px,4.2vw,44px);
  text-align:left;
}

.cx-feel__list{
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  font-size:clamp(14px,1.65vw,24px);
  line-height:1.6;
}

.cx-feel__list li{
  display: flex;
  align-items: center;
  gap: 10px;              /* espaço entre ícone e texto */
  padding-left: 0;        /* remove recuo antigo */
}

.cx-feel__list li i {
  color: #00d3b4;         /* cor do ícone */
  font-size: 1rem;        /* ajuste o tamanho */
  flex-shrink: 0;         /* não deixa o ícone encolher */
}
.cx-feel__list li::before{ content:none !important; }
/* Banner/frase em imagem (slot para você trocar) */
.cx-feel__banner{
  margin:clamp(18px,3.6vw,28px) auto 0;
  max-width:860px;
  width:100%;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.cx-feel__banner img{width:100%; height:auto; display:block}
@media (min-width: 981px){
  .cx-feel__list{
    margin-left: clamp(16px, 4vw, 64px);
  }
}
/* Responsivo */
@media (max-width:640px){
  .cx-feel__title{ text-align:center }
  .cx-feel__list{ font-size:clamp(14px,4vw,17px) }
}

/* ===============================
   BULLETS — versão fidedigna/forçada
   (usa SVG no background do ::before)
==================================*/

/* Mais especificidade para vencer estilos existentes */
section .bullets {
  background: linear-gradient(135deg, #6a4cff 0%, #3c63f0 100%) !important;
  border: 1px solid #ffffff !important;
  border-radius: 14px !important;
  box-shadow: 0 22px 40px rgba(0,0,0,.50) !important;
  padding: 18px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  color: #fff !important;
  font-size: clamp(14px, 1.6vw, 18px) !important;
}

/* Cada linha */
section .bullets .bullet {
  position: relative !important;
  padding-left: 30px !important;   /* espaço pro ícone */
  line-height: 1.55 !important;
}

/* Ícone (círculo branco + check roxo) usando SVG como background */
/* === Bullets responsivos (ícone e recuo do texto) === */
section .bullets{
  /* Tamanho do ícone: mínimo 18px, cresce com a viewport, máx 28px */
  --bullet-size: clamp(18px, 2.4vw, 28px);
}

section .bullets .bullet{
  /* deixa espaço proporcional ao ícone */
  padding-left: calc(var(--bullet-size) + 12px) !important;
  line-height: 1.55 !important;
  min-height: var(--bullet-size) !important;
  position: relative !important;
}

section .bullets .bullet::before{
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: var(--bullet-size) !important;
  height: var(--bullet-size) !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  /* círculo branco + check roxo (#5a3ef2) */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='white'/><path fill='%235a3ef2' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z'/></svg>") !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)) !important;
}

/* mantém o “Bono” forte */
section .bullets .bullet strong{ font-weight: 800 !important; }

/* esconde divisória antiga se existir */
section .bullets-div{ display:none !important; }

/* ====== Alinhamento da primeira dobra ====== */

/* 1) Centraliza verticalmente as duas colunas */
.sec-hero .hero-grid{
  align-items: center;               /* antes: start */
}

/* 2) Faz a coluna de texto ocupar a altura disponível e
      centraliza o conteúdo nela (logo + título + sub) */
.sec-hero .hero-left{
  display: flex;
  flex-direction: column;
  justify-content: center;           /* alinha no meio da altura */
}

/* 3) Mantém a coluna da direita “compacta” e centralizada no próprio eixo */
.sec-hero .hero-right{
  display: flex;
  flex-direction: column;
  justify-content: center;           /* mockup+bullets no centro da coluna */
  gap: 14px;
}

/* 4) Logo: desktop alinhado ao texto; mobile centralizado */
.sec-hero .hero-logo{ margin: 0 0 10px; }
@media (max-width: 768px){
  .sec-hero .hero-grid{ grid-template-columns: 1fr; align-items: start; }
  .sec-hero .hero-left{ justify-content: flex-start; }
  .sec-hero .hero-logo{
    display:flex; justify-content:center; margin: 0 auto 12px;
  }
  .sec-hero .hero-logo img{ width: clamp(220px, 42vw, 320px); }
}
.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centraliza verticalmente a coluna */
  gap: 10px;                  /* espaço pequeno entre os blocos */
}

.hero-logo {
  margin-bottom: 6px;         /* cola mais no texto */
}

.hero-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;                  /* espaço entre título e subtítulo */
}
/* ====== Layout & alinhamento da primeira dobra ====== */

/* fundo já existente da .sec-hero permanece */

.sec-hero .hero-grid{
  display: grid;
  gap: clamp(20px,4vw,48px);
  grid-template-columns: 1.05fr .95fr;
  align-items: center;                 /* centraliza texto e mockup no mesmo eixo */
}

/* coluna de texto: logo “colado” ao título e tudo centrado na altura */
.sec-hero .hero-left{
  display: flex;
  flex-direction: column;
  justify-content: center;             /* vertical */
}

/* logo: bem próximo do título */
.sec-hero .hero-logo{ margin: 0 0 6px; }
.sec-hero .hero-logo img{
  width: clamp(180px,260vw,370px);
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 26px rgba(143,133,255,.5));
}

/* bloco título + subtítulo com espaçamento controlado */
.sec-hero .hero-text-wrap{
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 100%;    /* libera largura total da coluna */
}
.sec-hero .hero-title{
  font-size: clamp(28px, 3.8vw, 40px); /* ajusta tamanho no desktop */
  line-height: 1.2;                    /* mais respiro */
}
/* coluna direita: mockup + bullets centralizados entre si */
.sec-hero .hero-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

/* mockup mantém seu estilo existente */
.sec-hero .mockup{
  margin: 0 0 6px;
  position: relative;
  aspect-ratio: 16/10;
  width: 100%;
  border-radius: 18px;
}
.sec-hero .mockup img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ====== Responsivo ====== */
@media (max-width: 980px){
  .sec-hero .hero-grid{ grid-template-columns: 1fr; align-items: start; }
  .sec-hero .hero-left{ justify-content: flex-start; }

  /* centraliza o logo no mobile e aumenta levemente */
  .sec-hero .hero-logo{ display:flex; justify-content:center; margin: 0 auto 8px; }
  .sec-hero .hero-logo img{ width: clamp(220px, 42vw, 320px); }

  /* título e subtítulo centralizados no mobile */
  .sec-hero .hero-text-wrap{ max-width: none; align-items: center; text-align: center; }
}
/* Centraliza logo e texto no desktop */
.sec-hero .hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;   /* Centraliza logo, título e subtítulo */
  text-align: center;    /* Centraliza o texto */
}

.sec-hero .hero-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.sec-hero .hero-logo {
  display: flex;
  justify-content: center;
  margin: 0 auto 10px;
}

.sec-hero .hero-logo img {
  margin: 0 auto;
}
/* Dá mais espaço entre o texto e o mockup sem mexer no tamanho do mockup */
.sec-hero .hero-left {
  padding-right: clamp(40px, 6vw, 120px); /* afasta o texto do mockup */
}

/* Mobile não precisa do afastamento extra */
@media (max-width: 980px) {
  .sec-hero .hero-left {
    padding-right: 0; /* volta ao normal no mobile */
  }
}
/* Centraliza o bloco, mas mantém o texto alinhado à esquerda */
@media (min-width: 981px){
  .sec-hero .hero-text-wrap {
    max-width: 800px;        /* largura máxima do bloco */
    width: 100%;
    margin: 0 auto;          /* centraliza o bloco */
    text-align: left;        /* texto alinhado à esquerda */
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .sec-hero .hero-title,
  .sec-hero .hero-sub {
    text-align: left;        /* garante alinhamento à esquerda */
    margin: 0;
  }
}
/* ====== Base da seção ====== */
.sec-feedback .title.center{
  margin-bottom: clamp(16px, 3vw, 26px);
}

/* ====== Layout wrapper ====== */
.fb-wrap{
  position: relative;
  margin-inline: auto;
  max-width: 1200px;
}

/* ====== Desktop: grade 3 colunas ====== */
@media (min-width: 992px){
  .fb-viewport{ overflow: visible; }
  .fb-track{
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 34px;
  }
  .fb-arrow, .fb-dots, .fb-hint{ display: none; }
}

/* ====== Mobile/Tablet: carrossel ====== */
@media (max-width: 991px){
  .fb-viewport{
    overflow: hidden; /* evita barra e “vazamentos” */
  }
  .fb-track{
    display: flex;
    gap: 16px;
    padding: 8px 12px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    scrollbar-width: none;           /* Firefox */
  }
  .fb-track::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

  .fb-item{
    flex: 0 0 clamp(72vw, 82vw, 420px); /* tamanho confortável no celular */
    scroll-snap-align: center;
  }

  /* Setas laterais */
  .fb-arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 0;
    background: rgba(0,0,0,.45);
    color: #fff;
    font-size: 24px; line-height: 1;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, opacity .2s ease;
    opacity: .9;
  }
  .fb-arrow:hover{ background: rgba(0,0,0,.65); transform: translateY(-50%) scale(1.05); }
  .fb-prev{ left: 6px; }
  .fb-next{ right: 6px; }

  /* Indicadores */
  .fb-dots{
    display: flex; gap: 8px; justify-content: center;
    margin: 8px 0 4px;
  }
  .fb-dots button{
    width: 8px; height: 8px; border-radius: 999px;
    border:0; background: rgba(255,255,255,.35); cursor: pointer;
    transition: width .2s ease, background .2s ease;
  }
  .fb-dots button[aria-selected="true"]{
    width: 24px; background: #fff;
  }

  /* Dica */
  .fb-hint{
    margin: 2px 0 12px; text-align:center;
    font-size: 12px; color:#d6d6ea; opacity:.85;
  }

  /* Fades nas laterais indicando “tem mais conteúdo” */
  .fb-wrap::before,
  .fb-wrap::after{
    content:""; position:absolute; top:0; bottom:0; width:40px; pointer-events:none;
  }

}

/* ====== Card de feedback ====== */
.fb-item img{
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

/* CTA mantém seu estilo */
.cta-big {
  display: inline-grid;
  gap: 6px;
  background: #ff5a17;
  color: #fff;
  font-weight: 800;
  padding: 30px 100px; /* ↑ Aumentei a altura e largura */
  border-radius: 60px; /* Deixa mais oval */
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(255,90,23,.35);
  font-size: clamp(20px, 2.5vw, 28px); /* Texto maior */
  text-align: center;
  justify-content: center;
  margin: 20px auto 0; /* Centraliza */
}

/* Mobile: botão ocupa quase a tela toda */
@media (max-width: 768px) {
  .cta-big {
    width: 95%;
    max-width: 480px;
    display: block;
    padding: 26px 0; /* Ajusta altura para mobile */
  }
}


.gains-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gains-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: clamp(14px, 1.4vw, 18px);
  line-height: 1.4;
  color: #222;
  flex-direction: row;
}

/* Ícone com círculo roxo e check branco */
.gains-list li .chk {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background: #5a3ef2 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z'/></svg>") no-repeat center;
  background-size: 12px;
  border-radius: 50%;
}

/* Lista (apenas) */
.gains-list{
  list-style:none;
  padding:0; margin:0;
  display:flex; flex-direction:column; gap:16px;
}

/* Cada item vira um grid 2 colunas (ícone + textos) e 2 linhas */
.gains-list li{
  display:grid;
  grid-template-columns: 24px 1fr;
  grid-auto-rows: auto;
  column-gap:12px;
  row-gap:4px;
  align-items:start;
  color:#111;
}

/* Check redondo roxo com o ícone */
.gains-list .chk{
  grid-column:1; grid-row:1 / span 2;      /* ocupa as duas linhas */
  width:22px; height:22px; border-radius:50%;
  background:#5a3ef2 url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z'/>\
</svg>") no-repeat center;
  background-size:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* Linha 1: título em negrito */
.gains-list li > strong{
  grid-column:2; grid-row:1;
  font-weight:800;
  font-size:clamp(14px,1.4vw,18px);
  line-height:1.35;
  color:#111;
}

/* Linha 2: complemento menor e com menos destaque */
.gains-list li > .sub{
  grid-column:2; grid-row:2;
  font-size:clamp(12px,1.2vw,16px);
  line-height:1.5;
  color:#555;
}

/* Responsivo */
@media (max-width: 768px){
  .gains-list li{column-gap:10px; row-gap:2px}
  .gains-list .chk{width:20px; height:20px; background-size:11px}
  .gains-list li > strong{font-size:14px}
  .gains-list li > .sub{font-size:12px}
}

/* 1) Bloqueia qualquer rolagem horizontal globalmente */
html, body { overflow-x: hidden; }

/* 2) NÃO cortar as sombras dos mockups/colagens */
.whofor-collage,
.receive-right,
.gains-mock,
.package-mock,
.mockup {
  overflow: visible;               /* <- antes estava hidden */
  position: relative;
}

/* 3) Centraliza imagens que passam de 100% sem gerar “borda” */
.whofor-collage img,
.receive-right img,
.gains-mock img,
.package-mock img {
  max-width: none;                 /* permite >100% */
  display: block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);     /* centraliza o excedente */
}

/* 4) Mantém os tamanhos desejados */
.whofor-collage img { width: 110%; }            /* desktop */
.receive-right img { width: 120%; }             /* seção “Receberá” */

@media (max-width: 768px){
  .whofor-collage img { width: 112%; }          /* um pouco maior no mobile */
}

/* (opcional) cantos suaves para misturar a sombra no fundo */
.whofor-collage img,
.receive-right img,
.gains-mock img,
.package-mock img {
  border-radius: 14px;
}

/* Feedback — centralizar levemente o 1º/último slide no mobile */
@media (max-width: 991px){
  /* dá uma “folga” igual dos dois lados */
  .fb-track{
    padding-left:  calc((100vw - clamp(72vw, 82vw, 420px)) / 2);
    padding-right: calc((100vw - clamp(72vw, 82vw, 420px)) / 2);
  }

  /* alinha o snap já considerando essa folga */
  .fb-viewport{
    scroll-padding-left:  calc((100vw - clamp(72vw, 82vw, 420px)) / 2);
    scroll-padding-right: calc((100vw - clamp(72vw, 82vw, 420px)) / 2);
  }
}

/* DESKTOP (≥992px): 3 colunas, cards grandes e sem estourar */
@media (min-width: 992px){
  .fb-viewport{ overflow: visible; }

  .fb-track{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* cada coluna divide igualmente */
    gap: 40px;
    align-items: start;
  }

  .fb-item{
    width: 100%;          /* ocupa a largura da coluna */
    max-width: 560px;     /* limita o tamanho real do card */
    justify-self: center; /* centraliza o card na coluna */
  }

  .fb-item img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
  }
}

/* ====== DUAS OFERTAS — 100% responsivo ====== */
.sec-pricing2{ background:#fff; color:#1a1a26; }

/* A grade se adapta sozinha: 1 → 2 colunas conforme cabe */
.p2-grid{
  display:grid;
  gap: clamp(16px, 3vw, 28px);
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(260px, 44vw, 520px), 1fr)
  );
  align-items: stretch;
}

/* Card base */
.p2-card{
  background:#fff;
  border-radius: 18px;
  padding: clamp(16px, 2.6vw, 28px);
  border:1px solid #ececf5;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  display:flex; flex-direction:column; gap: clamp(12px, 1.6vw, 18px);
}

/* Título do card */
.p2-head h3{
  margin:0 0 4px;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.15;
}

/* Bloco de preço */
.p2-price{
  display:flex; align-items:baseline; gap: clamp(6px, 1vw, 12px);
  flex-wrap: wrap;
}
.p2-price .p2-old{
  color:#9aa0b5; text-decoration:line-through; font-weight:800;
  letter-spacing:.02em; font-size:clamp(14px,1.4vw,20px);
}
.p2-price .p2-current{
  color:#3e38d2;
  font-weight:900; letter-spacing:.02em;
  font-size: clamp(24px, 3vw, 40px);
  text-shadow: 0 6px 18px rgba(60, 54, 200, .18);
}

/* Lista de features */
.p2-list{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-direction:column; gap: clamp(8px, 1.2vw, 12px);
  font-size: clamp(14px, 1.6vw, 18px);
  line-height: 1.45;
}
.p2-list li{ display:flex; align-items:flex-start; gap:10px; }
.p2-list .chk{
  width: clamp(18px, 2vw, 22px);
  height: clamp(18px, 2vw, 22px);
  border-radius:50%;
  background:#5a3ef2 url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path fill='white' d='M9 16.2l-3.5-3.5L4 14.2l5 5 11-11-1.4-1.4z'/>\
</svg>") no-repeat center / 60% 60%;
  flex-shrink:0; margin-top:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* Botões */
.p2-btn{
  display:inline-block; text-align:center; text-decoration:none;
  background:#ff5a17; color:#fff; font-weight:900;
  font-size: clamp(15px,1.8vw,18px);
  padding: clamp(14px, 1.8vw, 18px) clamp(18px, 2.6vw, 28px);
  border-radius:999px;
  box-shadow:0 12px 26px rgba(255,90,23,.35);
  margin-top:4px;
  min-height: 44px;                /* acessibilidade toque */
}
.p2-btn--big{ font-size: clamp(16px,2vw,20px); }

/* Notinhas */
.p2-footnote{
  margin:2px 0 0; color:#68708a;
  font-size: clamp(25px, 1.4vw, 14px)
}

/* Destaque Premium */
.p2-premium{
  border-color:#e9e4ff;
  box-shadow:
    0 18px 44px rgba(90,62,242,.16),
    inset 0 0 0 1px #f1efff;
}
.p2-premium .p2-current{ color:#4b3ff7; }

/* Selo “mais vendido” (se ajusta e não quebra layout) */
.p2-ribbon{
  align-self:flex-start;
  background:#35d07f; color:#ffffff;
  font-weight:900; text-transform:uppercase;
  letter-spacing:.06em; white-space:nowrap;
  font-size: clamp(10px, 1.4vw, 12px);
  padding: clamp(6px, .8vw, 8px) clamp(10px, 1.2vw, 14px);
  border-radius:999px;
  box-shadow:0 10px 20px rgba(53,208,127,.32);
  margin:-6px 0 0;
}

/* Ajustes finos para telas bem estreitas */
@media (max-width: 560px){
  .p2-btn{ width:100%; }                     /* botões full-width */
  .p2-footnote{ text-align:center; }
}

/* Ajustes para telas enormes: limita largura visual confortável */
@media (min-width: 1400px){
  .p2-grid{
    grid-template-columns: repeat(
      auto-fit,
      minmax(360px, 1fr)
    );
    gap: 32px;
  }
}
/* === Área inferior do pricing (WhatsApp + Garantia) === */
.sec-pricing2 .wa-wrap{
  text-align:center;
  margin-top: 26px;
}
.sec-pricing2 .wa-wrap .btn-wa{
  margin: 0 auto;                 /* centraliza */
  display: inline-flex;            /* mantém o layout do seu botão */
}

/* Bloco da garantia (texto + imagem, responsivo) */
.sec-pricing2 .guarantee-block{
  margin: 22px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 28px);
  flex-wrap: wrap;                 /* quebra no mobile */
  max-width: 1100px;               /* não esticar demais no desktop */
}

.sec-pricing2 .guarantee-text{
  flex: 1 1 420px;
  min-width: 280px;
  max-width: 620px;
  color: #5d5f75;
}

.sec-pricing2 .guarantee-text h3{
  margin: 0 0 8px;
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 900;
  color: #0f1222;
  letter-spacing: .02em;
}

.sec-pricing2 .guarantee-text p{
  margin: 0 0 10px;
  line-height: 1.6;
  font-size: clamp(14px, 1.3vw, 16px);
}

.sec-pricing2 .guarantee-img{
  flex: 0 1 420px;
  width: min(420px, 46vw);
}

.sec-pricing2 .guarantee-img img{
  width: 100%;
  height: auto;
  display: block;
}
/* =========================
   PARTE 10 — PRICING / CHECKOUT
========================= */

.sec-pricing {
  background: #fff;
  color: #1a1a26;
  padding: clamp(32px, 6vw, 72px) 0;
  text-align: center;
}

.sec-pricing .muted {
  color: #5d5f75;
  font-size: 20px;
  font-weight: 600;
  margin: 6px 0;
}

.price-cut {
  color: #6a55ff;
  font-size: 36px;
  text-decoration: line-through;
  font-weight: 900;
  letter-spacing: .06em;
  margin: 4px 0 16px;
}

.big-price img {
  width: min(760px, 100%);
  height: auto;
  display: block;
  margin-inline: auto;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.25));
}

.cta-big {
  display: inline-grid;
  gap: 6px;
  background: #ff5a17;
  color: #fff;
  font-weight: 800;
  padding: 28px 42px;
  border-radius: 60px;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(255, 90, 23, .35);
  font-size: clamp(20px, 2.5vw, 26px);
  text-align: center;
  justify-content: center;
  margin: 24px auto;
}

.cta-big small {
  display: block;
  font-weight: 700;
  opacity: .92;
  margin-top: -4px;
  font-size: 14px;
}

.cta-big.orange {
  background: #ff5a17;
}

/* WhatsApp Button */
.btn-wa {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 20px auto; /* centraliza no container */
  width: fit-content;
  padding: 18px 34px;
  border-radius: 999px;
  text-decoration: none;
  background: #25D366;
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  font-size: 20px;
  box-shadow: 0 12px 26px rgba(37,211,102,.35);
}

.btn-wa img {
  width: 1.35em;
  height: 1.35em;
  display: block;
  object-fit: contain;
  filter: brightness(1.05) contrast(1.25) saturate(1.2)
          drop-shadow(0 2px 6px rgba(0,0,0,.35));
  margin-left: 10px;
}

/* Garantia */
.guarantee {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
  text-align: left;
}

.guarantee-text {
  flex: 1 1 520px;
  min-width: 280px;
}

.guarantee-text h3 {
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 900;
  color: #0f1222;
  letter-spacing: .02em;
}

.guarantee-text p {
  margin: 0 0 10px;
  line-height: 1.6;
  font-size: 16px;
}

.guarantee-text .muted {
  font-size: 15px;
  color: #5d5f75;
  font-weight: 500;
  margin-top: 6px;
}

.guarantee img {
  flex: 1 1 220px;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  display: block;
}

/* Responsivo */
@media (max-width: 768px) {
  .guarantee {
    flex-direction: column;
    text-align: center;
  }

  .guarantee-text {
    max-width: 90%;
  }

  .guarantee img {
    margin-top: 16px;
  }

  .cta-big {
    width: 95%;
    max-width: 480px;
    display: block;
    padding: 24px 0;
  }
}
@media (max-width: 768px) {
  .guarantee-text {
    text-align: center;
    margin: 0 auto;
  }
}

.p2-footnote {
  text-align: center;             /* centraliza em todos os devices */
  font-size: 1rem;                /* tamanho de fonte confortável */
  font-weight: 600;               /* um pouco mais forte */
  color: #5d5f75;                 /* mantém o cinza suave da paleta */
  margin-top: 18px;
  letter-spacing: 0.5px;          /* dá um respiro nas letras */
  line-height: 1.4;
}

/* No desktop, pode dar um leve destaque */
@media (min-width: 992px) {
  .p2-footnote {
    font-size: 1.1rem;
    margin-top: 22px;
  }
}
/* Esconde no desktop */
.only-mobile {
  display: inline;
}
.only-desktop {
  display: none;
}

@media (min-width: 992px) {
  /* No desktop */
  .only-mobile {
    display: none;
  }
  .only-desktop {
    display: inline;
  }
}
.p2-price {
  text-align: center; /* centraliza no card */
  margin-bottom: 12px;
}

.p2-old-price {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #e63946; /* vermelho chamativo */
  text-decoration: line-through;
  margin-bottom: 6px;
}

.p2-current {
  font-size: 36px;
  font-weight: 900;
  color: #3b2ef5; /* roxo/azul do pack */
  margin: 0;
}