:root {
  --bg:       hsl(0,0%,5%);
  --surface:  hsl(0,0%,9%);
  --surface2: hsl(0,0%,13%);
  --border:   rgba(255,255,255,0.07);
  --white:    #fff;
  --muted:    hsl(0,0%,55%);
  
  /* 🇧🇷 Cores da Seleção Brasileira */
  --verde:    #009C3B;   /* Verde Brasil */
  --amarelo:  #FFD700;   /* Amarelo Brasil */
  --azul:     #002776;   /* Azul Brasil */
  
  --accent:   #009C3B;   /* Verde principal */
  --accent2:  #FFD700;   /* Amarelo secundário */
  --gold:     #FFD700;
  --green:    #4ADE80;
  --red:      hsl(0,72%,55%);
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-6:48px; --space-8:64px;
  --radius:16px; --radius-sm:10px; --radius-pill:50px;
  --shadow-md: 0 4px 20px rgba(0,0,0,.3);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5);
  --transition: all .3s cubic-bezier(.4,0,.2,1);
  --transition-fast: all .15s ease;
  --font: 'Inter', sans-serif;
  --display: 'Bebas Neue', sans-serif;
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--white); font-family:var(--font); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; }

/* ── Scroll Reveal ── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay { transition-delay:.15s; }

/* ── Urgency Bar ── */
.urgency-bar {
  background: linear-gradient(90deg, #002776, #009C3B, #002776);
  background-size: 200% auto;
  animation: shimmer-bg 4s linear infinite;
  text-align:center; padding:10px var(--space-2);
  font-size:.88rem; font-weight:700; letter-spacing:.3px;
  position:sticky; top:0; z-index:100;
  color: #FFD700;
}
@keyframes shimmer-bg {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
#countdown { font-family:monospace; font-size:1rem; }

/* Badge TikTok fixo */
.tiktok-badge {
  position: fixed;
  bottom: 90px;
  left: 16px;
  z-index: 89;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-pill);
  padding: 8px 16px 8px 12px;
  color: var(--white);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: var(--transition);
  letter-spacing: .3px;
}
.tiktok-badge:hover {
  background: rgba(0,0,0,.95);
  transform: translateY(-2px);
}

/* Logo TikTok — nota musical com offset duplo cyan/vermelho */
.tt-logo {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.tt-logo span {
  position: absolute;
  font-size: 18px;
  line-height: 1;
  top: 0; left: 0;
}
.tt-logo-r { color: #ff0050; transform: translate(1.5px, 1px); }
.tt-logo-c { color: #00f2ea; transform: translate(-1.5px, -1px); }
.tt-logo-w { color: #ffffff; transform: translate(0, 0); }

/* ── Hero ── */
.hero { padding:var(--space-6) var(--space-2) 180px; max-width:900px; margin:0 auto; }
.hero-inner { display:flex; flex-direction:column; align-items:center; gap:var(--space-6); text-align:center; }

@media(min-width:720px) {
  .hero-inner { flex-direction:row; text-align:left; align-items:flex-start; }
  .hero-copy { flex:1; }
  .tiktok-frame { flex-shrink:0; }
}

.hero-tag {
  display:inline-block;
  background:rgba(0,156,59,.15); border:1px solid rgba(0,156,59,.4);
  color:var(--amarelo); font-size:.72rem; font-weight:800;
  letter-spacing:1.5px; padding:5px 14px; border-radius:var(--radius-pill);
  margin-bottom:var(--space-2);
}

.hero-title {
  font-family:var(--display); font-size:clamp(3rem,10vw,4.5rem);
  line-height:1; letter-spacing:.5px; margin-bottom:var(--space-2);
}
.hero-accent {
  color: var(--amarelo); /* Fallback para navegadores sem suporte a clip-text */
  background:linear-gradient(90deg, var(--verde), var(--amarelo));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

.hero-sub { color:hsl(0,0%,72%); font-size:1rem; max-width:380px; margin-bottom:var(--space-3); }
.hero-sub strong { color:var(--white); }

.hero-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--space-3); justify-content:center; }
@media(min-width:720px) { .hero-badges { justify-content:flex-start; } }
.h-badge {
  background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--radius-pill); padding:4px 12px;
  font-size:.75rem; font-weight:700; color:hsl(0,0%,75%);
}

/* ── CTA Button ── */
.btn-cta {
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:400px; padding:18px var(--space-3);
  font-family:var(--font); font-weight:900; font-size:1.05rem; letter-spacing:.4px;
  color:#002776; background:linear-gradient(135deg, #FFD700, #f0c800);
  border:none; border-radius:var(--radius-pill); cursor:pointer;
  transition:var(--transition); position:relative; overflow:hidden;
  box-shadow:0 4px 30px rgba(255,215,0,.35);
}
.btn-cta:hover { transform:translateY(-2px); box-shadow:0 8px 40px rgba(255,215,0,.5); }
.btn-cta:active { transform:scale(.98); }
.btn-cta:focus-visible { outline:3px solid var(--verde); outline-offset:3px; }
.btn-cta::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%);
}

.btn-pulse { animation:pulse-glow 2.4s infinite; }
@keyframes pulse-glow {
  0%,100% { box-shadow:0 4px 30px rgba(255,215,0,.35), 0 0 0 0 rgba(255,215,0,.5); }
  50%      { box-shadow:0 4px 30px rgba(255,215,0,.5), 0 0 0 12px rgba(255,215,0,0); }
}

.cta-micro { font-size:.78rem; color:var(--muted); margin-top:10px; }

/* ── TikTok Phone Mockup ── */
.tiktok-frame { position:relative; }
.phone-shell {
  width:240px; height:426px;
  border-radius:28px; overflow:hidden; position:relative;
  border:3px solid rgba(255,255,255,.1);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), var(--shadow-lg), 0 0 60px rgba(0,156,59,.12);
}
.phone-vid { width:100%; height:100%; object-fit:cover; display:block; background:#111; }

/* Botão de som */
.unmute-btn {
  position:absolute; top:10px; right:10px;
  background:rgba(0,0,0,.65); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.25); color:var(--white);
  font-size:.68rem; font-weight:800; padding:5px 10px;
  border-radius:var(--radius-pill); cursor:pointer;
  transition:var(--transition-fast); white-space:nowrap;
  z-index:50; /* Acima do tt-overlay */
  pointer-events:all;
}
.unmute-btn:hover { background:rgba(0,0,0,.85); border-color:rgba(255,255,255,.5); }

.phone-shell::before {
  content:''; position:absolute; inset:0;
  box-shadow:inset 0 0 0 2px rgba(255,215,0,.15);
  border-radius:25px; z-index:5; pointer-events:none;
}
.tt-overlay { position:absolute; inset:0; pointer-events:none; }
.tt-right { position:absolute; right:8px; bottom:90px; display:flex; flex-direction:column; gap:18px; }
.tt-btn { display:flex; flex-direction:column; align-items:center; gap:2px; }
.tt-icon { font-size:1.3rem; filter:drop-shadow(0 1px 3px rgba(0,0,0,.8)); }
.tt-count { font-size:.58rem; font-weight:800; color:var(--white); text-shadow:0 1px 3px rgba(0,0,0,.9); }

.tt-bottom { position:absolute; left:10px; bottom:16px; right:52px; }
.tt-user { font-size:.72rem; font-weight:800; color:var(--white); text-shadow:0 1px 3px rgba(0,0,0,.9); margin-bottom:4px; }
.tt-caption { font-size:.62rem; color:rgba(255,255,255,.85); line-height:1.4; margin-bottom:5px; text-shadow:0 1px 2px rgba(0,0,0,.8); }
.tt-audio { font-size:.6rem; color:rgba(255,255,255,.7); text-shadow:0 1px 2px rgba(0,0,0,.8); }
.audio-disc { display:inline-block; animation:spin 3s linear infinite; }

.fomo-bubble {
  position:absolute; background:rgba(15,15,15,.92);
  border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(12px);
  border-radius:var(--radius-pill); padding:8px 14px;
  font-size:.75rem; font-weight:700; white-space:nowrap;
  box-shadow:var(--shadow-md); display:flex; align-items:center; gap:6px;
}
.fomo-1 { top:24px; left:-24px; animation:floatY 3s 1s ease-in-out infinite alternate; }
.fomo-2 { bottom:60px; right:-24px; animation:floatY 3s 2.5s ease-in-out infinite alternate; }
.fomo-dot { width:7px; height:7px; background:var(--green); border-radius:50%; flex-shrink:0; animation:blink 1.4s infinite; }

/* ── Stats Bar ── */
.stats-bar {
  display:flex; justify-content:space-around; align-items:center;
  background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:var(--space-3) var(--space-2);
}
.stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.stat-num { font-family:var(--display); font-size:1.7rem; letter-spacing:.5px; }
.stat-label { font-size:.7rem; font-weight:700; color:var(--muted); text-align:center; }
.stat-divider { width:1px; height:44px; background:var(--border); }

/* ── Section Title ── */
.section-title {
  font-family:var(--display); font-size:1.8rem; letter-spacing:.5px;
  text-align:center; margin-bottom:var(--space-4);
}

/* ── Kit Grid ── */
.includes { padding:var(--space-8) var(--space-2); max-width:540px; margin:0 auto; }
.kit-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
.kit-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--space-3) var(--space-2);
  display:flex; flex-direction:column; gap:6px;
  transition:var(--transition);
}
.kit-card:hover { border-color:rgba(0,156,59,.4); transform:translateY(-3px); }
.kit-icon { font-size:1.6rem; }
.kit-card strong { font-size:.9rem; font-weight:800; }
.kit-card span { font-size:.78rem; color:var(--muted); line-height:1.4; }

/* ── Compare ── */
.compare-section { padding:var(--space-8) var(--space-2); max-width:540px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:var(--space-4); }
.compare-wrap { display:flex; align-items:center; gap:var(--space-2); width:100%; }
.compare-card { flex:1; border-radius:var(--radius); overflow:hidden; }
.compare-card.bad { background:var(--surface); border:1px solid rgba(239,68,68,.15); }
.compare-card.good { background:linear-gradient(160deg,#0a2218,#071a11); border:1px solid rgba(74,222,128,.2); }
.compare-header-row { padding:var(--space-2); text-align:center; font-weight:800; font-size:.88rem; border-bottom:1px solid var(--border); }
.bad-header { background:rgba(239,68,68,.08); }
.good-header { background:rgba(74,222,128,.08); }
.compare-list { list-style:none; padding:var(--space-1) 0; }
.compare-list li { padding:8px 14px; font-size:.78rem; color:hsl(0,0%,65%); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
.x-icon { color:var(--red); font-weight:900; font-size:.9rem; }
.check-icon { color:var(--green); font-weight:900; font-size:.9rem; }
.compare-price-tag { padding:var(--space-2); text-align:center; font-family:var(--display); font-size:1.5rem; }
.red-price { color:var(--red); }
.green-price { color:var(--green); }
.vs-badge { font-family:var(--display); font-size:1.1rem; color:var(--muted); flex-shrink:0; }

/* ── Reviews ── */
.reviews { padding:var(--space-8) var(--space-2); max-width:540px; margin:0 auto; display:flex; flex-direction:column; gap:var(--space-2); }
.review-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-3); }
.review-top { display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-2); }
.avatar { width:40px; height:40px; background:var(--surface2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.avatar-img { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; border:2px solid rgba(255,255,255,.12); }
.review-top strong { font-size:.9rem; display:block; }
.stars { color:var(--gold); font-size:.8rem; margin-top:2px; }
.verified-badge { margin-left:auto; font-size:.7rem; font-weight:800; color:var(--green); background:rgba(74,222,128,.1); border:1px solid rgba(74,222,128,.2); padding:3px 8px; border-radius:var(--radius-pill); white-space:nowrap; }
.review-card p { font-size:.88rem; color:hsl(0,0%,68%); line-height:1.65; }

/* ── Trust Bar ── */
.trust-bar {
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-3) var(--space-4);
  padding:var(--space-4) var(--space-2);
  border-top:1px solid var(--border); margin-bottom:100px;
}
.trust-item { display:flex; align-items:center; gap:8px; font-size:.82rem; font-weight:700; color:var(--muted); }
.trust-icon { font-size:1.1rem; }

/* ── Sticky Footer (CTA) ── */
.sticky-footer {
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:linear-gradient(transparent, rgba(10,10,10,.98) 25%);
  padding:20px var(--space-2) 28px;
}
.sticky-inner { display:flex; align-items:center; gap:var(--space-2); max-width:540px; margin:0 auto; }
.sticky-info { display:flex; flex-direction:column; flex-shrink:0; }
.sticky-price { font-family:var(--display); font-size:1.5rem; color:var(--green); line-height:1; }
.sticky-sub { font-size:.7rem; color:var(--muted); }
.sticky-btn { flex:1; max-width:none; border-radius:var(--radius); padding:16px; font-size:.95rem; }

/* ════════ MODAL ════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.7); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; align-items:flex-end; justify-content:center;
  z-index:200; opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.modal-overlay.active { opacity:1; pointer-events:auto; }

.checkout-modal {
  background:var(--surface); width:100%; max-width:480px;
  border-radius:28px 28px 0 0; padding:var(--space-4) var(--space-3) 52px;
  border-top:1px solid rgba(255,255,255,.08);
  transform:translateY(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
  position:relative; max-height:92vh; overflow-y:auto;
}
.modal-overlay.active .checkout-modal { transform:translateY(0); }

.modal-handle { width:40px; height:4px; background:rgba(255,255,255,.15); border-radius:2px; margin:0 auto var(--space-3); }
.modal-close {
  position:absolute; top:20px; right:20px;
  background:var(--surface2); border:1px solid var(--border);
  color:var(--muted); width:32px; height:32px; border-radius:50%;
  font-size:.85rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:var(--transition-fast);
}
.modal-close:hover { color:var(--white); }
.modal-close:focus-visible { outline:2px solid var(--accent); }

.modal-head { text-align:center; margin-bottom:var(--space-3); }
.modal-trophy { font-size:2.2rem; margin-bottom:6px; }
.modal-head h2 { font-size:1.15rem; font-weight:800; margin-bottom:8px; }
.modal-prices { display:flex; align-items:center; justify-content:center; gap:10px; }
.modal-old { font-size:.82rem; color:var(--muted); text-decoration:line-through; }
.modal-now { font-size:1.3rem; font-weight:900; color:var(--green); }

/* Steps bar */
.steps-bar { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:var(--space-4); }
.step-pill { padding:7px 20px; border-radius:var(--radius-pill); font-size:.78rem; font-weight:800; color:var(--muted); background:var(--surface2); border:1px solid var(--border); transition:var(--transition); }
.step-pill.active { background:rgba(0,156,59,.15); border-color:rgba(0,156,59,.4); color:var(--accent); }
.step-line { width:24px; height:1px; background:var(--border); }

/* Form */
.form-group { margin-bottom:var(--space-2); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
@media(max-width:400px) { .form-row { grid-template-columns:1fr; } }

label { display:block; font-size:.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
label em { text-transform:none; font-style:normal; font-weight:400; }

.form-input {
  width:100%; background:var(--surface2); border:1px solid var(--border);
  color:var(--white); border-radius:var(--radius-sm); padding:13px 15px;
  font-size:.95rem; outline:none; transition:var(--transition);
}
.form-input::placeholder { color:hsl(0,0%,33%); }
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(0,156,59,.15); }
.form-input.success { border-color:var(--green); }
.form-input.error { border-color:var(--red); }

.form-error { font-size:.72rem; color:var(--red); font-weight:700; margin-top:5px; display:none; }
.form-error.visible { display:block; }

.btn-modal { margin-top:var(--space-2); border-radius:var(--radius-sm); }
.modal-security { text-align:center; font-size:.75rem; color:var(--muted); margin-top:10px; }

/* PIX */
.pix-timer { background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.18); color:var(--gold); border-radius:var(--radius-sm); padding:10px 14px; font-size:.8rem; text-align:center; margin-bottom:var(--space-3); }
.qr-wrap { display:flex; justify-content:center; margin-bottom:var(--space-2); }
.qr-img { width:230px; height:230px; border-radius:var(--radius-sm); border:3px solid var(--surface2); background:#ffffff; padding:10px; }
.pix-total { text-align:center; font-size:1rem; color:var(--muted); margin-bottom:var(--space-2); }
.pix-total strong { color:var(--green); font-size:1.3rem; font-weight:900; }
.pix-hint { font-size:.82rem; color:var(--muted); text-align:center; margin-bottom:8px; }
.pix-row { display:flex; background:var(--surface2); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:8px; }
.pix-code { flex:1; padding:13px; font-size:.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:monospace; }
.btn-copy { background:var(--verde); color:var(--white); border:none; font-weight:800; font-size:.82rem; padding:0 16px; cursor:pointer; transition:var(--transition-fast); white-space:nowrap; }
.btn-copy:hover { background:#007A2E; }
.btn-copy:focus-visible { outline:2px solid var(--amarelo); }

/* Spinner */
.spinner { width:36px; height:36px; border:3px solid var(--surface2); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto; }

/* ── Animations ── */
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes floatY { from { transform:translateY(4px); } to { transform:translateY(-5px); } }
@keyframes blink { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@keyframes fadeInUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }

/* ═══════════════════════════════
   MOBILE-FIRST OVERRIDES (< 480px)
   Público 100% celular (TikTok)
   ═══════════════════════════════ */
@media(max-width:480px) {

  /* Hero: stack total, sem gaps excessivos */
  .hero { padding: 24px 16px 160px; }
  .hero-inner { gap: 24px; }

  /* Título maior no celular — ocupa toda a largura */
  .hero-title { font-size: clamp(2.8rem, 12vw, 3.6rem); }

  /* Esconde o phone mockup no mobile — o vídeo já existe no criativo do anúncio */
  .tiktok-frame { display: none; }

  /* CTA hero: toque fácil, área grande */
  .btn-cta { font-size: 1.1rem; padding: 20px 24px; border-radius: 14px; }

  /* Stats bar: texto menor */
  .stat-num { font-size: 1.4rem; }
  .stat-label { font-size: .65rem; }

  /* Kit grid: 2 colunas compactas */
  .kit-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kit-card { padding: 14px 12px; }
  .kit-icon { font-size: 1.3rem; }
  .kit-card strong { font-size: .82rem; }
  .kit-card span { font-size: .72rem; }

  /* Comparativo: colunas mais finas */
  .compare-list li { font-size: .72rem; padding: 7px 10px; }
  .compare-price-tag { font-size: 1.3rem; }

  /* Reviews: sem padding excessivo */
  .review-card { padding: 16px; }

  /* Trust bar: 2 por linha */
  .trust-bar { gap: 14px 20px; margin-bottom: 120px; }
  .trust-item { font-size: .78rem; }

  /* Sticky footer mais alto (safe area iPhone) */
  .sticky-footer { padding: 14px 16px 32px; }
  .sticky-price { font-size: 1.3rem; }
  .sticky-btn { font-size: .9rem; padding: 14px 12px; }

  /* Modal: tela quase cheia no celular */
  .checkout-modal { padding: 24px 20px 44px; max-height: 96vh; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* Telas muito pequenas (iPhone SE, Galaxy A03) */
@media(max-width:360px) {
  .hero-title { font-size: 2.6rem; }
  .compare-list li { font-size: .68rem; }
  .btn-cta { font-size: 1rem; }
}