/* ===================== COPA CASH — style.css ===================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Montserrat',sans-serif;background:#0d0d0d;color:#f0f0f0;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none}

/* ---------- CANVAS ---------- */
#bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.3}

/* ---------- URGENCY BAR ---------- */
#urg-bar{background:#009C3B;padding:10px 16px;text-align:center;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;position:sticky;top:0;z-index:300;display:flex;align-items:center;justify-content:center;gap:8px}
#urg-bar #cd{color:#FFDF00;font-size:.9rem;letter-spacing:.1em;font-weight:900}

/* ---------- LIVE VIEWERS ---------- */
#live-bar{background:#111;border-bottom:1px solid rgba(255,255,255,.05);padding:9px 16px;text-align:center;position:sticky;top:37px;z-index:299;display:flex;align-items:center;justify-content:center;gap:8px;font-size:.76rem;color:#aaa;font-weight:600}
.live-dot{width:9px;height:9px;border-radius:50%;background:#e53935;flex-shrink:0;animation:blink 1.6s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(229,57,53,.5)}50%{opacity:.5;box-shadow:0 0 0 5px rgba(229,57,53,0)}}
#live-count{color:#fff;font-weight:800;font-size:.85rem}

/* ---------- NOTIFICATION ---------- */
#notif-container{position:fixed;bottom:16px;left:12px;z-index:400;display:flex;flex-direction:column;gap:8px;max-width:290px}
.notif{background:#1a1a1a;border:1px solid rgba(0,156,59,.35);border-left:3px solid #009C3B;border-radius:8px;padding:11px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 4px 18px rgba(0,0,0,.55);animation:slideIn .35s ease;font-size:.75rem}
.notif-icon{font-size:1.3rem;flex-shrink:0}
.notif-text strong{display:block;color:#fff;margin-bottom:1px;font-size:.76rem;line-height:1.3}
.notif-text span{color:#777;font-size:.7rem}
@keyframes slideIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-24px)}}

/* ---------- HERO ---------- */
.hero-wrap{position:relative;z-index:1;max-width:100%;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;min-height:100vh}
.hero-text{padding:50px 40px;display:flex;flex-direction:column;justify-content:center}
.hero-img{padding:0;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:12px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(0,156,59,.1);border:1px solid rgba(0,156,59,.38);color:#4ade80;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 15px;border-radius:100px;margin-bottom:18px}
.hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1.05;margin-bottom:14px;letter-spacing:.02em}
.hero h1 .yl{color:#FFDF00}
.hero h1 .gr{color:#4ade80}
.badge-quality{display:inline-flex;align-items:center;gap:6px;background:rgba(255,223,0,.07);border:1px solid rgba(255,223,0,.22);color:#FFDF00;font-size:.68rem;font-weight:700;padding:5px 13px;border-radius:100px;margin-top:18px;margin-bottom:22px;letter-spacing:.05em}
.hero-sub{font-size:.9rem;color:#999;line-height:1.78;margin-bottom:28px;max-width:480px}
.hero-sub strong{color:#fff}

/* ---------- APP BADGE ---------- */
.app-badge{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:13px 16px;margin-bottom:28px;max-width:440px}
.app-icon{font-size:2rem;flex-shrink:0}
.app-text{font-size:.8rem;color:#aaa;line-height:1.5}
.app-text strong{color:#fff;display:block;font-size:.85rem;margin-bottom:2px}

/* ---------- EXTRA GRID ---------- */
.extra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.extra-item{background:#1a1a1a;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:20px 18px;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;transition:border-color .25s}
.extra-item::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#009C3B,#FFDF00);opacity:0;transition:opacity .25s}
.extra-item:hover{border-color:rgba(0,156,59,.35)}
.extra-item:hover::before{opacity:1}
.extra-item-highlight{border-color:rgba(0,156,59,.28)!important;background:linear-gradient(135deg,rgba(0,156,59,.09),#1a1a1a)}
.extra-item-highlight::before{opacity:1!important}
.extra-icon-wrap{font-size:1.8rem;flex-shrink:0;width:46px;height:46px;background:rgba(255,255,255,.04);border-radius:10px;display:flex;align-items:center;justify-content:center}
.extra-content{flex:1;min-width:0}
.extra-title{font-weight:800;font-size:.86rem;color:#fff;margin-bottom:4px;line-height:1.3}
.extra-desc{font-size:.75rem;color:#fff;line-height:1.5}

/* ---------- PULSING CTA ---------- */
@keyframes pulseCta{0%,100%{box-shadow:0 0 0 0 rgba(0,156,59,.55),0 0 36px rgba(0,156,59,.38)}60%{box-shadow:0 0 0 10px rgba(0,156,59,0),0 0 50px rgba(0,156,59,.55)}}
.btn-cta{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#009C3B,#00c44a);color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;padding:17px 34px;border-radius:6px;border:none;cursor:pointer;text-decoration:none;box-shadow:0 0 36px rgba(0,156,59,.38);transition:all .25s;animation:pulseCta 2.8s ease 2s infinite}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 0 60px rgba(0,156,59,.58)}
@keyframes pulseCta{0%,100%{box-shadow:0 0 36px rgba(0,156,59,.38)}50%{box-shadow:0 0 65px rgba(0,156,59,.6)}}
.hero-trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.hero-trust span{font-size:.7rem;color:#555;display:flex;align-items:center;gap:4px}
.hero-trust .dot{color:#009C3B;font-size:.9rem}
.hero-img img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:12px;box-shadow:none}

/* ---------- DIVIDER ---------- */
.dvd{height:3px;background:linear-gradient(90deg,transparent,#009C3B,#FFDF00,#009C3B,transparent);position:relative;z-index:1}

/* ---------- NUMBERS BAR ---------- */
.numbers{background:#111;padding:28px 20px;position:relative;z-index:1;border-bottom:1px solid rgba(255,255,255,.05)}
.numbers-inner{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;text-align:center}
.num-item .n{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.7rem,3.5vw,2.6rem);color:#FFDF00;line-height:1}
.num-item .l{font-size:.65rem;color:#555;text-transform:uppercase;letter-spacing:.09em;margin-top:4px}

/* ---------- SECTION ---------- */
.sec{max-width:960px;margin:0 auto;padding:64px 20px;position:relative;z-index:1}
.sec-tag{display:block;font-size:.67rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#009C3B;margin-bottom:10px}
.sec h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.75rem,4vw,2.75rem);letter-spacing:.03em;line-height:1.1;margin-bottom:16px}
.sec h2 .yl{color:#FFDF00}
.sec h2 .gr{color:#4ade80}
.lead{color:#fff;line-height:1.75;max-width:580px;margin-bottom:28px;font-size:.88rem}

.dark-bg{background:#111;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);position:relative;z-index:1}

/* ---------- CALCULATOR ---------- */
.calc-box{background:linear-gradient(135deg,rgba(0,156,59,.08),rgba(255,223,0,.03));border:1px solid rgba(0,156,59,.2);border-radius:12px;padding:30px 28px;max-width:640px}
.calc-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.85rem;gap:12px}
.calc-row:last-child{border-bottom:none}
.calc-row .lbl{color:#888;flex:1}
.calc-row .val{font-weight:700;font-size:.92rem;white-space:nowrap}
.val.yellow{color:#FFDF00}
.val.green{color:#4ade80}
.val.strike{text-decoration:line-through;color:#444;font-size:.78rem}
.val.big{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;color:#FFDF00;letter-spacing:.03em}
.calc-highlight{margin-top:18px;background:rgba(0,156,59,.12);border:1px solid rgba(0,156,59,.25);border-radius:10px;padding:20px 22px;display:flex;align-items:center;gap:16px}
.calc-highlight .bnum{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;color:#FFDF00;line-height:1;flex-shrink:0}
.calc-highlight .bdesc{font-size:.8rem;color:#aaa;line-height:1.58}
.calc-highlight .bdesc strong{color:#fff;display:block;margin-bottom:2px}

/* ---------- CAROUSEL ---------- */
.carousel-outer{position:relative;overflow:hidden;margin-top:36px;-webkit-mask:linear-gradient(90deg,transparent,black 8%,black 92%,transparent);mask:linear-gradient(90deg,transparent,black 8%,black 92%,transparent)}
.carousel-track{display:flex;gap:16px;will-change:transform;width:max-content}
.jersey-card{flex-shrink:0;width:170px;background:#1a1a1a;border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden}
.jersey-img{width:100%;aspect-ratio:1;object-fit:contain;background:#f7f7f7;padding:12px}
.jersey-info{padding:10px 13px}
.jersey-name{font-weight:700;font-size:.78rem;margin-bottom:5px}
.j-de{font-size:.67rem;color:#444;text-decoration:line-through}
.j-lucro{font-size:.78rem;color:#4ade80;font-weight:700}
.carousel-nav{display:none}

/* ---------- STEPS ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.step-card{background:#1a1a1a;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:24px 20px;position:relative;overflow:hidden}
.step-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#009C3B,#FFDF00)}
.step-num{font-family:'Bebas Neue',sans-serif;font-size:3rem;color:rgba(255,223,0,.45);line-height:1;margin-bottom:6px}
.step-title{font-weight:800;font-size:.88rem;color:#fff;margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
.step-desc{font-size:.8rem;color:#fff;line-height:1.62}

/* ---------- BONUSES ---------- */
.bonus-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.bonus-card{background:#1a1a1a;border:1px solid rgba(255,223,0,.15);border-radius:10px;padding:22px 18px;position:relative;overflow:hidden;text-align:center}
.bonus-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#FFDF00,#009C3B)}
.bonus-icon{font-size:2rem;margin-bottom:10px}
.bonus-title{font-weight:800;font-size:.88rem;color:#fff;margin-bottom:6px;line-height:1.3}
.bonus-desc{font-size:.76rem;color:#fff;line-height:1.55;margin-bottom:14px}
.bonus-price-wrap{display:flex;flex-direction:column;align-items:center;gap:3px}
.bonus-de{font-size:.72rem;color:#555;text-decoration:line-through}
.bonus-gratis{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:#4ade80;letter-spacing:.05em;line-height:1}

/* ---------- OFFER ---------- */
.offer-box{background:#1a1a1a;border:1px solid rgba(255,223,0,.18);border-radius:14px;padding:40px 36px;max-width:660px;margin:0 auto;text-align:center;position:relative;overflow:hidden}
.offer-box::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#009C3B,#FFDF00,#009C3B)}
.offer-title{font-family:'Bebas Neue',sans-serif;font-size:1.8rem;letter-spacing:.05em;margin-bottom:24px}
.benefits-list{text-align:left;margin-bottom:24px;display:flex;flex-direction:column;gap:10px}
.ben-item{display:flex;align-items:flex-start;gap:12px;padding:11px 15px;background:rgba(0,156,59,.05);border:1px solid rgba(0,156,59,.13);border-radius:7px}
.ben-check{color:#4ade80;font-size:1rem;flex-shrink:0;margin-top:1px}
.ben-text{font-size:.84rem;color:#ccc;line-height:1.5}
.ben-text strong{color:#fff}
.price-area{margin:20px 0 18px}
.price-de{font-size:.85rem;color:#444;text-decoration:line-through}
.price-main{font-family:'Bebas Neue',sans-serif;font-size:4.4rem;color:#FFDF00;line-height:1}
.price-inst{font-size:.75rem;color:#555;margin-top:3px}
.btn-cta-big{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#009C3B,#00c44a);color:#fff;font-weight:800;font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;padding:20px 36px;border-radius:6px;border:none;cursor:pointer;text-decoration:none;box-shadow:0 0 46px rgba(0,156,59,.42);transition:all .25s;width:100%;margin-top:6px;animation:pulseCta 2.5s ease 1s infinite}
.btn-cta-big:hover,.btn-cta-big:active{transform:translateY(-2px);box-shadow:0 0 65px rgba(0,156,59,.62)}

/* ---------- GUARANTEE ---------- */
.guarantee{margin-top:20px;display:flex;align-items:stretch;background:linear-gradient(135deg,rgba(0,156,59,.07),rgba(255,223,0,.03));border:1px solid rgba(0,156,59,.22);border-radius:10px;overflow:hidden}
.gtee-badge{background:transparent;padding:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gtee-img{width:100px;height:100px;object-fit:contain;display:block}
.gtee-body{padding:16px 18px;text-align:left;display:flex;flex-direction:column;justify-content:center}
.gtee-body strong{display:block;color:#fff;font-size:.85rem;margin-bottom:4px}
.gtee-body p{font-size:.78rem;color:#fff;line-height:1.58}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:9px;margin-top:32px}
.faq-item{background:#1a1a1a;border:1px solid rgba(255,255,255,.06);border-radius:7px;overflow:hidden}
.faq-q{padding:16px 20px;font-weight:600;font-size:.84rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;user-select:none;transition:color .2s;-webkit-tap-highlight-color:transparent}
.faq-q:hover,.faq-q:active{color:#FFDF00}
.faq-arr{font-size:.84rem;transition:transform .3s;flex-shrink:0;color:#555}
.faq-item.open .faq-arr{transform:rotate(180deg);color:#FFDF00}
.faq-a{max-height:0;overflow:hidden;transition:max-height .38s ease,padding .28s;font-size:.8rem;color:#fff;line-height:1.7;padding:0 20px}
.faq-item.open .faq-a{max-height:200px;padding:0 20px 16px}

/* ---------- FINAL CTA ---------- */
.final-bg{background:radial-gradient(ellipse at 50% 0%,rgba(0,156,59,.16) 0%,transparent 62%),#111;border-top:1px solid rgba(255,255,255,.05);position:relative;z-index:1}

/* ---------- FOOTER ---------- */
footer{background:#050505;border-top:1px solid rgba(255,255,255,.04);padding:24px 20px;text-align:center;font-size:.67rem;color:rgba(255,255,255,.17);line-height:1.9;position:relative;z-index:1}

/* ---------- FADE IN ---------- */
.fi{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease;animation:fallbackShow 0s ease 1.5s forwards}
.fi.vis{opacity:1;transform:translateY(0);animation:none}
@keyframes fallbackShow{to{opacity:1;transform:translateY(0)}}

/* ===================== MOBILE FIRST ===================== */
@media(max-width:768px){
  #live-bar{top:35px;font-size:.72rem}
  .hero-wrap{grid-template-columns:1fr;padding:0 0 0px 0;gap:0;text-align:center;min-height:auto}
  .hero-img{order:-1;height:auto;min-height:280px;border-radius:18px;overflow:hidden;margin:0 14px 0 14px}
  .hero-img img{max-width:100%;width:100%;height:auto;margin:0 auto;border-radius:0;padding:0}
  .hero-trust{justify-content:center}
  .hero-text{padding:0 16px;min-height:auto}
  .hero-eyebrow{font-size:.62rem;padding:5px 12px;margin-bottom:12px}
  .badge-quality{font-size:.62rem;padding:4px 11px;margin-top:12px;margin-bottom:16px}
  .hero-sub{margin:0 auto 24px;font-size:.85rem}
  .app-badge{margin:0 auto 24px}
  .badge-quality{margin-bottom:18px}
  .numbers-inner{grid-template-columns:repeat(2,1fr);gap:14px}
  .num-item .n{font-size:1.8rem}
  .steps{grid-template-columns:1fr;gap:14px}
  .calc-box{padding:22px 18px}
  .extra-grid{grid-template-columns:1fr}
  .bonus-grid{grid-template-columns:1fr;gap:14px}
  .offer-box{padding:28px 16px}
  .jersey-card{width:150px}
  .btn-cta{padding:16px 28px;font-size:.88rem;width:100%;justify-content:center}
  .btn-cta-big{font-size:.95rem;padding:18px 24px}
  .guarantee{flex-direction:row}
  .sec{padding:52px 16px}
}

@media(max-width:400px){
  .hero h1{font-size:2.1rem}
  .price-main{font-size:3.8rem}
  .numbers-inner{grid-template-columns:repeat(2,1fr)}
}

/* ===================================================
   GAMIFICAÇÃO — Saldo Bar v4
   =================================================== */
#gam-bar {
  position: sticky;
  top: 74px;
  z-index: 298;
  background: #0d0d0d;
  border-bottom: 1px solid rgba(74,222,128,.18);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .76rem;
  font-weight: 600;
}

.gam-bar-icon { font-size: 15px; flex-shrink: 0; }

.gam-bar-label {
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 600;
}

.gam-bar-val {
  color: #4ade80;
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: -.01em;
  text-shadow: 0 0 14px rgba(74,222,128,.55);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Pop on increment */
.gam-bar-val.pop {
  animation: gam-pop .38s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes gam-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

/* Pulse when maxed at R$15.000 */
.gam-bar-val.maxed {
  animation: gam-max-pulse 1.6s ease-in-out infinite;
}
@keyframes gam-max-pulse {
  0%, 100% {
    text-shadow: 0 0 8px rgba(74,222,128,.45);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 22px rgba(74,222,128,.95), 0 0 40px rgba(74,222,128,.35);
    transform: scale(1.06);
  }
}

.gam-bar-track {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
  margin-left: 8px;
}
.gam-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #009C3B, #4ade80);
  border-radius: 3px;
  transition: width .55s cubic-bezier(.25,.8,.25,1);
  box-shadow: 0 0 8px rgba(74,222,128,.45);
}

@media(max-width:768px){
  #gam-bar { top: 72px; padding: 6px 12px; font-size: .72rem; }
}