/* ==========================================================================
   Scalper Atirador — Página de Vendas (reconstruída do Elementor em HTML/CSS/JS)
   ========================================================================== */

:root{
  --verde: #2CCA32;
  --verde-borda: #23A228;
  --verde-divider: #13C700;
  --amarelo: #ffff00;
  --preto: #000000;
  --branco: #ffffff;
  --cinza-txt: #4a4a4a;
  --max: 1140px;
  --font-head: 'Lato', 'Segoe UI', Arial, sans-serif;
  --font-body: 'Roboto', 'Segoe UI', Arial, sans-serif;
  --font-btn: 'Roboto Condensed', 'Segoe UI', Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--cinza-txt);
  background:#111;
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

/* ---------- Layout ---------- */
.section{ padding:55px 20px; position:relative; }
.container{ max-width:var(--max); margin:0 auto; }
.container-narrow{ max-width:900px; margin:0 auto; }

.bg-white{ background:#ffffff; }
.bg-white-soft{ background:rgba(255,255,255,.90); }
.bg-black{ background:#000000; }

.row{ display:flex; flex-wrap:wrap; gap:30px; }
.row > .col{ flex:1 1 0; min-width:0; }
.row > .col-50{ flex:1 1 calc(50% - 15px); min-width:0; }
.row > .col-33{ flex:1 1 calc(33.333% - 20px); min-width:0; }

.text-center{ text-align:center; }
.spacer-10{ height:10px; }
.spacer-20{ height:20px; }
.spacer-40{ height:40px; }

/* ---------- Hero ---------- */
.hero{
  background:#000000;
  padding:30px 20px 60px;
  position:relative;
  text-align:center;
}
.hero > .hero-bg{
  position:absolute; inset:0;
  z-index:0;
  background:
    linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
    url('assets/fundo2.webp') center center / cover no-repeat;
}
.hero > *{ position:relative; z-index:1; }
.hero-logo{ width:22%; max-width:230px; margin:0 auto 25px; }
.hero h1{
  font-family:var(--font-head);
  color:#fff;
  font-weight:700;
  text-transform:uppercase;
  font-size:32px;
  line-height:1.15;
  letter-spacing:.5px;
  max-width:900px;
  margin:0 auto 18px;
}
.hero-sub{
  color:#fff;
  max-width:820px;
  margin:0 auto 10px;
  font-size:19px;
}
.hero .seta{ width:44px; height:34px; margin:10px auto 4px; position:relative; }
.hero .seta span{
  position:absolute; left:50%; width:22px; height:5px; border-radius:3px;
  background:var(--verde); animation:setaBounce 1.4s ease-in-out infinite;
}
.hero .seta span:first-child{ transform:translateX(-72%) rotate(45deg); }
.hero .seta span:last-child{ transform:translateX(-28%) rotate(-45deg); }
@keyframes setaBounce{ 0%,100%{ top:0; } 50%{ top:12px; } }
@media (prefers-reduced-motion:reduce){ .hero .seta span{ animation:none; } }
.hero h5{ color:#fff; font-weight:400; margin-top:22px; font-size:16px; }
.hero h5 a{ color:var(--verde); font-weight:700; text-decoration:none; }

/* ---------- Section headings ---------- */
.sec-title{
  font-family:var(--font-head);
  font-weight:800;
  text-transform:uppercase;
  font-size:45px;
  line-height:1.1;
  text-align:center;
  color:#000;
  margin:0 auto 4px;
  text-shadow:0 0 10px rgba(0,0,0,.15);
  letter-spacing:.5px;
}
.sec-title.on-dark{ color:#fff; }
.sec-subtitle{
  font-family:var(--font-head);
  text-align:center;
  font-weight:400;
  font-size:22px;
  color:#000;
  margin:6px 0 0;
}
.divider{
  width:25%;
  max-width:260px;
  height:5px;
  background:var(--verde-divider);
  border:0;
  border-radius:3px;
  margin:14px auto 30px;
}

/* ---------- Highlight (amarelo) — reproduz o inline do Elementor ---------- */
.hl{ background:yellow; color:#000; padding:2px 4px; border-radius:5px; }

/* ---------- Texto ---------- */
.prose{ max-width:820px; margin:0 auto; color:#333; font-size:18px; }
.prose p{ margin:0 0 16px; }
.prose ul{ margin:0 0 16px; padding-left:22px; }
.prose li{ margin-bottom:8px; }
.on-dark .prose, .bg-black .prose{ color:#eee; }

/* ---------- Botão CTA ---------- */
.btn-cta{
  display:inline-block;
  font-family:var(--font-btn);
  font-weight:700;
  font-size:35px;
  line-height:1.1;
  text-transform:uppercase;
  color:#fff !important;
  background:var(--verde);
  border-bottom:5px solid var(--verde-borda);
  border-radius:6px;
  text-decoration:none;
  padding:22px 45px;
  margin:20px auto;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
  box-shadow:0 8px 24px rgba(44,202,50,.35);
  max-width:100%;
}
.btn-cta:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn-cta:active{ transform:translateY(1px); }
.btn-wrap{ text-align:center; }

.btn-telegram{
  background:#229ED9;
  border-bottom-color:#1b7fae;
  box-shadow:0 8px 24px rgba(34,158,217,.35);
  font-size:28px;
}

/* ---------- Vídeos ---------- */
.video{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:7px solid #fff;
  border-radius:14px;
  background:#000;
  box-shadow:0 12px 34px rgba(0,0,0,.30);
}
.video.vertical{ aspect-ratio:9 / 16; max-width:340px; margin:0 auto; }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-frame{ max-width:820px; margin:0 auto; }

/* ---------- Facade de vídeo (carrega o player só no clique) ---------- */
.video-poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border:0; cursor:pointer;
}
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border:0; border-radius:50%;
  background:rgba(0,0,0,.55); cursor:pointer; z-index:2;
  transition:background .15s ease, transform .15s ease;
  display:flex; align-items:center; justify-content:center;
}
.video-play::after{
  content:""; display:block;
  width:0; height:0; margin-left:5px;
  border-style:solid; border-width:14px 0 14px 24px;
  border-color:transparent transparent transparent #fff;
}
.video:hover .video-play{ background:var(--verde); transform:translate(-50%,-50%) scale(1.08); }
.video-play:focus-visible{ outline:3px solid var(--verde); outline-offset:3px; }

/* ---------- Image boxes (benefícios / módulos) ---------- */
.imgbox{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:30px 24px;
  margin-bottom:22px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.imgbox img{ width:80px; height:auto; margin:0 0 16px; }
.imgbox .ib-title{ font-family:var(--font-head); font-weight:800; color:#111; font-size:22px; margin:0 0 12px; }
.imgbox .ib-desc{ margin:0; font-size:16px; color:#555; line-height:1.55; }

/* ---------- Carrossel ---------- */
.carousel{ position:relative; max-width:var(--max); margin:0 auto; }
.carousel-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:6px 4px 16px;
  -webkit-overflow-scrolling:touch;
}
.carousel-track::-webkit-scrollbar{ height:8px; }
.carousel-track::-webkit-scrollbar-thumb{ background:#bbb; border-radius:8px; }
.carousel-slide{
  flex:0 0 calc(33.333% - 11px);
  scroll-snap-align:start;
}
.carousel-slide img{ width:100%; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.15); }
.carousel-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:0; background:rgba(0,0,0,.6); color:#fff;
  font-size:22px; cursor:pointer; z-index:3;
  display:flex; align-items:center; justify-content:center;
}
.carousel-btn:hover{ background:#000; }
.carousel-btn.prev{ left:-6px; }
.carousel-btn.next{ right:-6px; }
.carousel-dots{ display:flex; justify-content:center; gap:9px; margin-top:14px; }
.carousel-dots button{
  width:11px; height:11px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background:#c9c9c9; transition:background .2s ease, transform .2s ease;
}
.carousel-dots button.active{ background:var(--verde); transform:scale(1.15); }

/* ---------- Oferta ---------- */
.stack-list{ max-width:560px; margin:0 auto; list-style:none; padding:0; text-align:left; }
.stack-list li{
  position:relative;
  padding:10px 0 10px 34px;
  font-size:19px; color:#111; font-weight:600;
  border-bottom:1px solid #eee;
}
.stack-list li::before{
  content:"\2714";              /* ✔ */
  position:absolute; left:0; top:10px;
  color:#111; font-weight:900; font-size:18px;
}
.stack-list li strike{ color:red; font-weight:700; }
.offer-box{ max-width:640px; margin:0 auto; text-align:center; }
.offer-total{ font-size:26px; font-family:var(--font-head); font-weight:800; color:#111; margin:6px 0; }
.offer-total strike{ color:red; }
.offer-por{ font-size:30px; font-family:var(--font-head); font-weight:800; margin:10px 0 0; color:#111; }
.offer-price{ font-family:var(--font-head); font-weight:800; color:var(--verde); line-height:1; margin:0 0 6px; }
.offer-price .big{ font-size:120px; }
.offer-parcela{ font-size:24px; color:var(--verde); font-weight:700; margin-top:0; }
.offer-limit{ font-family:var(--font-head); font-weight:800; color:#111; font-size:28px; text-transform:uppercase; margin:12px 0 0; }

/* ---------- Countdown ---------- */
.countdown{ display:flex; gap:12px; justify-content:center; margin:18px 0 6px; }
.countdown .cd-box{
  background:#111; color:#fff; border-radius:10px; padding:12px 16px; min-width:78px;
}
.countdown .cd-num{ font-family:var(--font-head); font-weight:800; font-size:38px; line-height:1; }
.countdown .cd-lbl{ font-size:12px; text-transform:uppercase; letter-spacing:1px; opacity:.8; }

/* ---------- Garantia ---------- */
.garantia-img{ max-width:280px; margin:20px auto; }

/* ---------- WhatsApp ---------- */
.whats-title{
  font-family:var(--font-head); font-weight:800; color:#111;
  text-align:center; font-size:26px; margin:0 0 16px;
}
.btn-whats{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-btn); font-weight:700; font-size:20px;
  color:#fff !important; text-decoration:none;
  background:#25D366; border-radius:50px;
  padding:14px 30px; width:auto; max-width:100%;
  box-shadow:0 6px 18px rgba(37,211,102,.35);
  transition:transform .12s ease, filter .12s ease;
}
.btn-whats:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.btn-whats:active{ transform:translateY(1px); }
.wa-icon{ width:24px; height:24px; flex:0 0 24px; }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin:0 auto; }
.faq-item{ border:1px solid #e2e2e2; border-radius:8px; margin-bottom:12px; overflow:hidden; background:#fff; }
.faq-q{
  width:100%; text-align:left; background:#fff; border:0; cursor:pointer;
  padding:18px 22px; font-size:18px; font-weight:700; color:#111;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-family:var(--font-head);
}
.faq-q .chev{ transition:transform .2s ease; flex:0 0 auto; color:var(--verde); font-weight:800; }
.faq-item.open .faq-q .chev{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 22px; }
.faq-item.open .faq-a{ padding:0 22px 18px; }
.faq-a p{ margin:0; color:#555; }

/* ---------- Disclaimer ---------- */
.disclaimer{ background:#000; color:#8a8a8a; font-size:13px; line-height:1.6; }
.disclaimer .container{ max-width:960px; }

/* ---------- Responsivo ---------- */
@media (max-width:1024px){
  .sec-title{ font-size:38px; }
  .offer-price .big{ font-size:90px; }
}
@media (max-width:767px){
  .section{ padding:40px 16px; }
  .hero h1{ font-size:20px; }
  .hero-sub{ font-size:16px; }
  .hero-logo{ width:55%; }
  .sec-title{ font-size:26px; }
  .sec-subtitle{ font-size:18px; }
  .divider{ width:55%; }
  .btn-cta{ font-size:22px; padding:20px 24px; width:100%; }
  .btn-telegram{ font-size:20px; }
  .prose{ font-size:16px; }
  .row{ gap:18px; }
  .row > .col-50{ flex:1 1 100%; }
  .row > .col-33{ flex:1 1 100%; }
  .carousel-slide{ flex:0 0 calc(50% - 8px); }
  .offer-price .big{ font-size:64px; }
  .offer-total{ font-size:22px; }
  .offer-por{ font-size:24px; }
  .stack-list li{ font-size:16px; }
  .hero-bg{ background-attachment:scroll; }
  .imgbox{ padding:18px; }
}