:root {
  --primary: #1e3a8a;
  --primary-dark: #0f172a;
  --primary-light: #3b82f6;
  --accent: #f59e0b;
  --accent-light: #fbbf24;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --text-secondary: #475569;
  --border: #e2e8f0;
  --success: #10b981;
  --danger: #ef4444;
  --whatsapp: #25D366;
  --shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

.btn { display: inline-block; padding: 0.875rem 1.75rem; border-radius: 0.5rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; text-align: center; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }
.btn-secondary { background: var(--accent); color: white; }
.btn-secondary:hover { background: var(--accent-light); }
.btn-whatsapp { background: var(--whatsapp); color: white; padding: 0.6rem 1.25rem; font-size: 0.95rem; }
.btn-whatsapp:hover { background: #1ebd5a; }
.btn-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color: white; }

/* ============ HEADER ============ */
.header { background: var(--surface); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 100; }
.header-content { display: flex; align-items: center; justify-content: space-between; padding-top: 0.85rem; padding-bottom: 0.85rem; gap: 1rem; }
.logo { flex: 0 0 auto; }
.logo img { height: 50px; width: auto; }
.nav { display: flex; gap: 1.5rem; }
.nav a, .nav-link { color: var(--text); font-weight: 500; transition: color 0.2s; white-space: nowrap; font-size: 0.92rem; }
.nav a:hover, .nav-link:hover { color: var(--primary); }
.nav-item { position: relative; }
.nav-item .arrow { font-size: 0.7em; opacity: 0.7; margin-left: 0.2rem; }
.dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--surface); border-radius: 0.5rem; box-shadow: var(--shadow-lg); min-width: 200px; padding: 0.5rem 0; z-index: 200; margin-top: 0.5rem; }
.dropdown-menu a { display: block; padding: 0.5rem 1.25rem; color: var(--text); font-weight: 500; transition: background 0.15s; }
.dropdown-menu a:hover { background: var(--bg); color: var(--primary); }
.nav-item.has-dropdown:hover .dropdown-menu { display: block; }


.header-actions { display: flex; align-items: center; gap: 0.75rem; }

/* ============ MOBILE: hamburger + drawer ============ */
.hamburger {
  display: none;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 0;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}
.hamburger.active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg);
}

.nav-drawer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}
.nav-drawer.open {
  pointer-events: auto;
}
.nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s;
}
.nav-drawer.open .nav-drawer-backdrop {
  opacity: 1;
}
.nav-drawer-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  background: var(--surface);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  padding: 1rem;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.nav-drawer.open .nav-drawer-content {
  transform: translateX(0);
}
.nav-drawer-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.75rem;
  color: var(--text);
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
}
.nav-drawer-close:hover {
  background: var(--bg);
}
.nav-drawer-nav {
  display: flex;
  flex-direction: column;
  margin-top: 2.5rem;
}
.nav-drawer-nav a {
  padding: 0.85rem 0.25rem;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
  font-size: 0.95rem;
}
.nav-drawer-nav a:hover {
  color: var(--primary);
}

/* ============ PILLS BAR (4 colunas lado a lado, label no topo, pills lado a lado) ============ */
.pills-bar { background: var(--surface); padding: 0.7rem 0; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }
#pills-bar {
  display: flex;
  align-items: stretch;
}
.pills-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0 0.85rem;
}
/* ZAZU 2026-09-12: distribuicao igual das colunas. Antes era proporcional a contagem fixa (4/4/2),
   quebrava quando AMANHA vinha com 6 ou PROXIMOS com 5. Agora todas compartilham 1:1:1:1 e o grid interno distribui as pills. */
.pills-col:nth-child(1),
.pills-col:nth-child(2),
.pills-col:nth-child(3),
.pills-col:nth-child(4) { flex: 1 1 0; min-width: 0; }
.pills-col + .pills-col {
  border-left: 1px solid var(--border);
}
.pills-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--text-secondary);
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border);
  width: 100%;
}
.pills-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 0.45rem;  /* ZAZU 2026-09-12: aumentado de 0.2rem pra acomodar o star-badge que vaza */
  justify-items: center;
  align-items: start;
  padding-top: 0.4rem;
  width: 100%;
}
/* Mobile: volta a flex wrap para nao espremer pills */
@media (max-width: 768px) {
  .pills-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
  }
  .pill-stack { flex: 0 0 auto; }
}
.pill-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
  min-width: 0;
}
.pill {
  display: inline-block;
  padding: 0.16rem 0.5rem;  /* ZAZU 2026-09-12: era 0.18rem 0.7rem, reduzido p/ caber 6 pills em AMANHA */
  border-radius: 999px;
  font-weight: 700;
  text-align: center;
  border: 1px solid var(--pill-color, var(--primary));
  white-space: nowrap;
  font-size: 0.72rem;
  line-height: 1.25;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.pill:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pill-name {
  position: relative;
  background: var(--pill-color, var(--primary));
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding-right: 1.1rem;
}
.pill-star-badge {
  position: absolute;
  top: -5px;  /* ZAZU 2026-09-12: era -7px, reduzido pra nao vazar tanto */
  right: -5px;  /* idem */
  width: 16px;  /* era 19px */
  height: 16px;
  background: #fbbf24;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: white;
  border: 1.5px solid var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  font-weight: bold;
}
.pill-value {
  background: white;
  color: var(--pill-color, var(--primary));
  font-size: 0.66rem;
  font-weight: 700;
}

/* ============ BANNER CAROUSEL (compacto) ============ */
.banner-carousel { padding: 0.85rem 0; background: var(--bg);; overflow: hidden; border-radius: 16px}
.carousel { position: relative; border-radius: 0.75rem; overflow: hidden; box-shadow: var(--shadow); }
.carousel-track{position:relative;aspect-ratio:1200/360;min-height:180px;max-height:240px;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}
.carousel-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s ease; padding: 0.85rem 1.25rem; }
.carousel-slide.active { opacity: 1; z-index: 2; }



.slide-content { text-align: center; max-width: 720px; }
.slide-badge { display: inline-block; background: rgba(255,255,255,0.2); padding: 0.25rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.4rem; }

.slide-title { font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 800; margin-bottom: 0.25rem; line-height: 1.15; }
.slide-subtitle { font-size: 0.85rem; opacity: 0.95; }
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--primary); display: flex; align-items: center; justify-content: center; z-index: 3; transition: background 0.2s; box-shadow: var(--shadow); }
.carousel-arrow:hover { background: white; }
.carousel-arrow.prev { left: 0.75rem; }
.carousel-arrow.next { right: 0.75rem; }
.carousel-dots { position: absolute; bottom: 0.6rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.4rem; z-index: 3; }
.carousel-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; border: none; padding: 0; transition: background 0.2s; }
.carousel-dot.active { background: white; }

/* ============ SEÇÕES GENÉRICAS ============ */
section { padding: 2.5rem 0; }
section h2 { text-align: center; font-size: clamp(1.4rem, 2.5vw, 1.875rem); margin-bottom: 0.5rem; color: var(--primary-dark); }
.section-sub { text-align: center; color: var(--text-secondary); max-width: 700px; margin: 0 auto 2rem; font-size: 1rem; }

/* ============ LOTTERY CARDS (resultados) ============ */
.lottery-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.lottery-card { background: var(--surface); border-radius: 0.85rem; padding: 1.25rem; box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; }
.lottery-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.lottery-card h3 { color: var(--primary); margin-bottom: 0.25rem; font-size: 1.05rem; }
.lottery-concurso { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 0.6rem; }
.lottery-prize { font-size: 1.3rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; }
.lottery-acumulou { display: inline-block; background: var(--danger); color: white; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; margin-bottom: 0.6rem; }
.lottery-numbers { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ball { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.ball.accent { background: var(--accent); color: var(--primary-dark); }

/* ============ BOLÕES ============ */
.boloes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.bolao-card { background: var(--surface); border-radius: 0.85rem; padding: 1.25rem; box-shadow: var(--shadow); position: relative; }
.bolao-badge { position: absolute; top: 1rem; right: 1rem; background: var(--accent); color: white; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.bolao-card h3 { color: var(--primary); margin-bottom: 0.5rem; padding-right: 5rem; font-size: 1rem; }
.bolao-meta { font-size: 0.88rem; color: var(--text-secondary); margin-bottom: 0.85rem; }
.bolao-progress { height: 8px; background: var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 0.4rem; }
.bolao-progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); transition: width 0.4s; }
.bolao-cta { display: flex; gap: 0.5rem; margin-top: 0.85rem; }
.bolao-cta .btn { flex: 1; padding: 0.55rem 0.7rem; font-size: 0.85rem; }

.loading { text-align: center; padding: 2.5rem 1rem; color: var(--text-secondary); }

/* ============ SURPRESINHA ============ */
.surpresinha { background: linear-gradient(135deg, #fef3c7 0%, #f5f5f4 100%); padding: 2.5rem 0; }
.surpresinha-form {
  display: flex;
  gap: 0.75rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.surpresinha-form select {
  flex: 1;
  min-width: 220px;
  padding: 0.7rem 1rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  font-size: 0.95rem;
  background: white;
  cursor: pointer;
  font-weight: 500;
}
.surpresinha-form select:focus {
  outline: none;
  border-color: var(--primary);
}
.surpresinha-form .btn {
  white-space: nowrap;
}
.surpresinha-result {
  text-align: center;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 1rem;
  max-width: 760px;
  margin: 0 auto;
}
.surpresinha-result .ball {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: var(--shadow);
}
.surpresinha-extra {
  background: var(--accent);
  color: white;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  margin-left: 0.25rem;
  box-shadow: var(--shadow);
}
.surpresinha-hint {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ============ INTRO HERO (Sorte + Brasil style) ============ */
.intro-hero { background: white; padding: 3rem 0; text-align: center; border-bottom: 1px solid var(--border); }
.intro-hero h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800; color: var(--primary-dark); margin-bottom: 1rem; }
.intro-hero h2 .accent { color: var(--accent); }
.intro-hero p { font-size: 1rem; max-width: 800px; margin: 0 auto 1.5rem; color: var(--text); line-height: 1.7; }
.intro-hero .btn-whatsapp { font-size: 0.95rem; padding: 0.85rem 1.5rem; }

/* ============ FEATURED LOTTERY (Mega-Sena destaque) ============ */
.featured-lottery { background: linear-gradient(135deg, #064e3b 0%, #047857 100%); padding: 2.5rem 0; color: white; }
.featured-card {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 1rem;
  padding: 2rem;
  text-align: center;
}
.featured-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.featured-icon { font-size: 2rem; }
.featured-header h3 { font-size: 1.5rem; font-weight: 800; margin: 0; }
.featured-label { background: var(--accent); color: white; padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.featured-prize {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--accent-light);
  margin-bottom: 1.5rem;
}
.featured-countdown {
  margin-bottom: 1.5rem;
}
.countdown-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
  opacity: 0.95;
}
.countdown-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-family: monospace;
}
.cd-val {
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  min-width: 50px;
  text-align: center;
}
.cd-unit {
  font-size: 0.75rem;
  opacity: 0.8;
  font-weight: 600;
  letter-spacing: 1px;
  margin-right: 0.25rem;
}
.featured-cta {
  background: white !important;
  color: var(--primary-dark) !important;
  font-weight: 700;
}
.featured-cta:hover {
  background: var(--accent) !important;
  color: white !important;
}

/* ============ COMO FUNCIONA MINI ============ */
.como-funciona-mini { background: var(--surface); padding: 2.5rem 0; }
.como-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.como-step {
  background: var(--bg);
  padding: 1.5rem;
  border-radius: 0.85rem;
  text-align: center;
  position: relative;
}
.como-num {
  width: 36px;
  height: 36px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 auto 0.85rem;
}
.como-step h4 { color: var(--primary); margin-bottom: 0.5rem; font-size: 1.05rem; }
.como-step p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; }
.como-cta { text-align: center; }

/* ============ BOLÕES FILTERS ============ */
.boloes-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.filter-btn {
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.filter-btn.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* ============ CTA FINAL ============ */
.cta-final {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  color: white;
  padding: 3rem 0;
  text-align: center;
}
.cta-final h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  margin-bottom: 0.75rem;
  color: white;
}
.cta-final p {
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  opacity: 0.95;
}
.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-final .btn-outline {
  color: white;
  border-color: white;
}
.cta-final .btn-outline:hover {
  background: white;
  color: var(--primary);
}

/* ============ TRUST ============ */
.trust { background: var(--surface); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
.trust-card { text-align: center; padding: 1.75rem 1.25rem; background: var(--bg); border-radius: 0.85rem; transition: transform 0.2s; }
.trust-card:hover { transform: translateY(-2px); }
.trust-icon { font-size: 2.25rem; margin-bottom: 0.6rem; }
.trust-card h3 { font-size: 1rem; margin-bottom: 0.35rem; color: var(--primary); }
.trust-card p { font-size: 0.88rem; color: var(--text-secondary); }

/* ============ FOOTER ============ */
.footer { background: var(--primary-dark); color: white; padding: 2rem 0; text-align: center; }
.footer-small { margin-top: 0.4rem; font-size: 0.82rem; opacity: 0.8; }

.whatsapp-float { position: fixed; bottom: 1.25rem; right: 1.25rem; width: 56px; height: 56px; background: var(--whatsapp); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); z-index: 1000; transition: transform 0.2s; }
.whatsapp-float:hover { transform: scale(1.08); }

/* ============ PÁGINAS INTERNAS ============ */
.page-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: white; padding: 2.25rem 0; text-align: center; }
.page-hero h1 { font-size: 2rem; font-weight: 800; }
.page-hero p { opacity: 0.95; margin-top: 0.4rem; max-width: 700px; margin-left: auto; margin-right: auto; }

.content { max-width: 800px; margin: 0 auto; padding: 2.5rem 1.5rem; }
.content h2 { text-align: left; color: var(--primary); font-size: 1.35rem; margin: 1.5rem 0 0.75rem; }
.content p { margin-bottom: 0.85rem; color: var(--text); }
.content ul { margin: 0 0 1rem 1.5rem; }
.content li { margin-bottom: 0.4rem; }
.content .step { background: var(--surface); padding: 1rem 1.15rem; border-radius: 0.65rem; margin-bottom: 0.85rem; box-shadow: var(--shadow); }
.content .step-num { display: inline-block; width: 28px; height: 28px; background: var(--primary); color: white; border-radius: 50%; text-align: center; line-height: 28px; font-weight: 700; margin-right: 0.65rem; font-size: 0.9rem; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.15rem; margin-bottom: 1.75rem; }
.contact-card { background: var(--surface); padding: 1.25rem; border-radius: 0.65rem; box-shadow: var(--shadow); text-align: center; }
.contact-icon { font-size: 1.85rem; margin-bottom: 0.4rem; }
.contact-card h3 { color: var(--primary); margin-bottom: 0.4rem; font-size: 1.05rem; }
.contact-card a, .contact-card p { color: var(--text); font-size: 0.92rem; }

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  .hamburger { display: none !important; }
  .header-content { flex-direction: column; gap: 0.6rem; }
  .header-content .nav { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 0.6rem 0.9rem; font-size: 0.85rem; }
  .header-actions { justify-content: center; gap: 0.6rem; }
  .header-actions .btn-whatsapp { font-size: 0.85rem; padding: 0.5rem 1rem; }
  .btn { padding: 0.7rem 1.15rem; }
  .whatsapp-float { width: 50px; height: 50px; }
  .pills-label { min-width: 65px; font-size: 0.65rem; }
  .pill { min-width: 95px; padding: 0.35rem 0.7rem; font-size: 0.78rem; }
  .pill-name { font-size: 0.78rem; }
  .pill-value { font-size: 0.62rem; padding: 0.08rem 0.4rem; }
  .dropdown-menu { left: 0; transform: none; }
  
  .carousel-arrow { width: 32px; height: 32px; font-size: 0.9rem; }
  .carousel-arrow.prev { left: 0.4rem; }
  .carousel-arrow.next { right: 0.4rem; }
  .section-sub { font-size: 0.92rem; }
  section { padding: 2rem 0; }
  .pills-bar-inner { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  #pills-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .pills-col { flex-shrink: 0; padding: 0 0.85rem; min-width: 140px; }
  .pills-col:nth-child(1) { flex: 0 0 130px; }
  .pills-col:nth-child(2) { flex: 0 0 260px; }
  .pills-col:nth-child(3) { flex: 0 0 260px; }
  .pills-col:nth-child(4) { flex: 0 0 150px; }
}
.boloes-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 14px}
.filter-btn{padding:8px 14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;font-weight:600;font-size:.875rem;color:var(--muted);transition:.15s}
.filter-btn:hover{background:var(--s2);color:var(--text)}
.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.boloes-meta-line{font-size:.8rem;color:var(--muted);margin-top:8px}

/* RODADA DUPLA LOTERIAS card style (Caixa-like) — MAURO 2026-09-11 */
.boloes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.caixa-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(15,23,42,.10);display:flex;flex-direction:column;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px}
.caixa-banner{background:var(--caixa-cor,#5b5fc7);color:#fff;padding:10px 14px;display:flex;align-items:center;gap:10px;font-weight:700}
.caixa-logo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:#fff;color:var(--caixa-cor,#5b5fc7);border-radius:6px;font-size:20px;line-height:1}
.caixa-titulo{text-transform:lowercase;font-size:17px;font-weight:700}
.caixa-body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:4px;align-items:center}
.caixa-premio-valor{color:#1f2937;font-size:22px;font-weight:700;text-align:center}
.caixa-premio-curto{color:#4b5563;font-size:14px}
.caixa-premio-sub{color:#4b5563;font-size:13px}
.caixa-div{width:100%;border:0;border-top:1px solid #e5e7eb;margin:6px 0 2px}
.caixa-vendor{color:#1f2937;text-align:center;font-size:14px}
.caixa-vendor strong{display:block;font-weight:700}
.caixa-apostas{color:#4b5563;font-size:13px}
.caixa-detalhes{color:var(--caixa-cor,#5b5fc7);border:1px solid var(--caixa-cor,#5b5fc7);border-radius:4px;padding:2px 12px;margin:4px 0;font-size:12px;font-weight:700;text-decoration:none;display:inline-block}
.caixa-cotas{color:#4b5563;font-size:13px}
.caixa-preco-valor{color:var(--caixa-cor,#5b5fc7);font-size:22px;font-weight:700;margin-top:4px}
.caixa-stepper{display:flex;align-items:center;gap:6px;margin-top:4px;flex-wrap:wrap;justify-content:center}
.caixa-step-btn{background:var(--caixa-cor,#5b5fc7);color:#fff;border:0;width:28px;height:28px;font-size:16px;font-weight:700;border-radius:4px;cursor:pointer}
.caixa-step-input{width:50px;text-align:center;border:1px solid #d1d5db;height:28px;border-radius:4px;font-size:14px}
.caixa-step-label{width:100%;text-align:center;font-size:11px;color:#6b7280;margin-top:2px;font-weight:600;text-transform:uppercase}
.caixa-sorteio{color:#6b7280;font-size:12px;margin:8px 0;text-align:center}
.caixa-cta{background:var(--caixa-cor,#5b5fc7);color:#fff;border-radius:4px;padding:10px 16px;font-weight:700;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;width:100%;font-size:14px;letter-spacing:.02em}
/* === CAIXA MODAL Detalhes (MAURO 2026-09-11) === */
.caixa-modal{border:0;border-radius:10px;padding:0;background:#fff;color:#222;max-width:480px;width:92vw;max-height:90vh;overflow:auto;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-height:85vh}
.caixa-modal::backdrop{background:rgba(0,0,0,.55)}
.caixa-modal-header{background:var(--caixa-cor,#209869);color:#fff;padding:10px 16px;display:flex;align-items:center;gap:10px;border-radius:10px 10px 0 0}
.caixa-modal-header .caixa-modal-logo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:#fff;color:var(--caixa-cor,#209869);border-radius:6px;font-size:20px;line-height:1;font-weight:700}
.caixa-modal-title{flex:1;font-size:18px;font-weight:700;margin:0;text-transform:lowercase}
.caixa-modal-close{background:transparent;border:0;color:#fff;font-size:24px;line-height:1;cursor:pointer;padding:0 6px}
.caixa-modal-close:hover{opacity:.8}
.caixa-modal-body{padding:20px 22px 6px;display:flex;flex-direction:column;gap:4px}
.caixa-modal-premio{font-size:34px;font-weight:800;color:var(--caixa-cor,#209869);text-align:center;letter-spacing:-.01em;line-height:1.1}
.caixa-modal-sub{font-size:13px;color:#4b5563;text-align:center;margin:4px 0 12px}
.caixa-modal-linha{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;border-bottom:1px dashed #e5e7eb;gap:10px}
.caixa-modal-linha strong{color:#1f2937;font-weight:700}
.caixa-modal-linha span{color:#4b5563;text-align:right;flex:1}
.caixa-modal-hint{margin-top:10px;font-size:12px;color:#6b7280;line-height:1.4}
.caixa-modal-jogos{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.caixa-modal-jogo{display:inline-block;width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--caixa-cor,#209869);color:#1f2937;font-weight:700;line-height:32px;text-align:center;font-size:13px}
.caixa-modal-jogo.marcado{background:var(--caixa-cor,#209869);color:#fff}
.caixa-modal-jogo.vazio{border-style:dashed;color:#9ca3af}
.caixa-modal-footer{border-top:1px solid #e5e7eb;background:#f9fafb;padding:12px 18px;border-radius:0 0 10px 10px;display:flex;flex-direction:column;gap:8px}
.caixa-modal-footer-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.caixa-modal-total-label{font-size:14px;color:#1f2937}
.caixa-modal-total-valor{font-size:18px;color:var(--caixa-cor,#209869);margin-right:auto}
.caixa-modal-arred{flex:0 0 100%;font-size:12px;color:#6b7280;line-height:1.4;margin-top:2px}
.caixa-modal-step{background:var(--caixa-cor,#209869);border:0;color:#fff;width:28px;height:28px;border-radius:4px;font-size:16px;cursor:pointer}
.caixa-modal-step:hover{opacity:.9}
#caixa-modal-qty{width:54px;text-align:center;border:1px solid #d1d5db;height:28px;border-radius:4px;font-size:14px}
.caixa-modal-cta{flex:1;min-width:180px;background:var(--caixa-cor,#209869);color:#fff;border-radius:4px;padding:10px 14px;font-weight:700;text-decoration:none;text-align:center;font-size:14px;letter-spacing:.02em}
.caixa-modal-cta:hover{opacity:.95}

/* MAURO 2026-09-11 16:00 - 2 CTAs no card (CAIXA + Compre direto) */
.caixa-cta-row{display:flex;gap:6px;margin-top:8px;width:100%}
.caixa-cta-row .caixa-cta{flex:1;margin:0;font-size:12px;padding:8px 6px;letter-spacing:.01em;text-align:center;line-height:1.2;min-width:0}
.caixa-cta-caixa{background:var(--caixa-cor,#0c8a4f);color:#fff;border:0}
.caixa-cta-caixa:hover{filter:brightness(0.9)}
.caixa-cta-direto{background:var(--caixa-cor,#25d366);color:#fff;border:0;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.caixa-cta-direto:hover{filter:brightness(0.92)}

/* MAURO 2026-09-11 16:23 - filtro usa classe pra !important-safe hiding */
.caixa-card.is-hidden { display: none !important; }

/* MAURO 2026-09-11 17:32 - banner-carousel fix: setas/dots dentro do banner */
.carousel{position:relative;overflow:hidden;border-radius:16px}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:10}
.carousel-arrow.prev{left:12px}
.carousel-arrow.next{right:12px}
.carousel-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:10}
/* MAURO 2026-09-11 17:42 - trevo (clover) estilizado no card, estilo Caixa */
.caixa-logo{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:var(--caixa-cor,#5b5fc7);background:#fff;border-radius:8px;padding:4px;flex-shrink:0}
.caixa-logo .trevo-icon{font-size:22px;line-height:1;color:inherit;display:inline-block}


/* MAURO 2026-09-11 17:57 - carousel com imagens tematicas (limpo) */
.slide-1{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.35) 100%),url("/img/carousel/slide-1-celebration.jpg") center/cover no-repeat;color:#fff}
.slide-2{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.35) 100%),url("/img/carousel/slide-2-wealth.jpg") center/cover no-repeat;color:#fff}
.slide-3{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.05) 50%,rgba(0,0,0,.35) 100%),url("/img/carousel/slide-3-results.jpg") center/cover no-repeat;color:#fff}
.banner-carousel .carousel-slide .slide-content{position:relative;z-index:2;padding:1.5rem 2rem;max-width:900px;color:#fff}
.banner-carousel .carousel-slide .slide-title{color:#fff;font-size:2.2rem;line-height:1.15;margin:.35rem 0 .4rem;text-shadow:0 1px 6px rgba(0,0,0,.75),0 0 2px rgba(0,0,0,.5);font-weight:800;letter-spacing:-.5px}
.banner-carousel .carousel-slide .slide-subtitle{color:rgba(255,255,255,.94);font-size:1.15rem;text-shadow:0 1px 4px rgba(0,0,0,.65)}
.banner-carousel .carousel-slide .slide-badge{background:rgba(0,0,0,.45);color:#fff;border:1px solid rgba(255,255,255,.35);padding:.4rem 1rem;border-radius:999px;font-size:.92rem;font-weight:700;display:inline-block;backdrop-filter:blur(4px);text-transform:uppercase;letter-spacing:.5px}
/* MAURO 2026-09-11 18:28 - botao hamburguer (hidden em desktop) */
.menu-toggle { display: none; background: transparent; border: 0; color: var(--text); font-size: 1.5rem; cursor: pointer; padding: 0.25rem 0.5rem; }


/* ============ HEADER MOBILE COMPACTO (MAURO 2026-09-11 18:32) ============ */
@media (max-width: 768px) {
  .header { padding: 0.25rem 0; }
  .header-content {
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
  }
  .logo { margin-right: auto; }
  .logo img { height: 38px !important; width: auto; }
  .menu-toggle {
    display: inline-flex !important;
    background: transparent;
    border: 0;
    color: var(--text, #222);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    margin-left: 0.25rem;
  }
  .header-content .nav {
    display: none !important;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface, #fff);
    padding: 0.75rem 1rem;
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: var(--shadow, 0 4px 12px rgba(0,0,0,.08));
    flex-direction: column !important;
    gap: 0.4rem !important;
    z-index: 99;
  }
  .header-content .nav.is-open { display: flex !important; }
  .header-content .nav a { padding: 0.6rem 0.4rem; border-bottom: 1px solid #eee; font-size: 0.95rem; }
  .header-content .nav a:last-child { border-bottom: 0; }
  .header-actions { gap: 0.4rem !important; margin-left: auto; }
  #cta-whatsapp-header {
    padding: 0.45rem 0.7rem !important;
    font-size: 0.82rem !important;
    white-space: nowrap;
  }
  #cta-whatsapp-header::before { content: "💬"; margin-right: 0.25rem; }
  
  .header-content { position: relative; }
}


/* ============ 2 CARDS POR LINHA NO MOBILE (MAURO 2026-09-11 19:23) ============ */
@media (max-width: 768px) {
  .boloes-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.6rem !important;
  }
  /* Card mais compacto no mobile */
  .caixa-card { padding: 0; border-radius: 10px; }
  .caixa-banner { padding: 0.4rem 0.6rem !important; gap: 0.4rem; }
  .caixa-logo { width: 28px !important; height: 28px !important; }
  .caixa-titulo { font-size: 0.85rem !important; font-weight: 700; }
  .caixa-body { padding: 0.5rem 0.5rem 0.75rem !important; gap: 0.25rem !important; }
  .caixa-premio-valor { font-size: 1rem !important; font-weight: 800; }
  .caixa-premio-curto { font-size: 0.7rem !important; }
  .caixa-premio-sub { font-size: 0.62rem !important; margin-bottom: 0.3rem; }
  .caixa-meta-line { font-size: 0.68rem !important; }
  .caixa-cotas { font-size: 0.7rem !important; }
  .caixa-valor-cota { font-size: 1.1rem !important; }
  .caixa-qty-row { font-size: 0.6rem !important; }
  .caixa-sorteio { font-size: 0.62rem !important; }
  .caixa-cta-row { gap: 0.3rem !important; }
  .caixa-cta { padding: 0.35rem 0.4rem !important; font-size: 0.62rem !important; }
  .caixa-details-row { margin: 0.3rem 0 !important; }
  .boloes-filters { gap: 0.3rem !important; margin: 0.75rem 0 !important; }
  .filter-btn { padding: 0.3rem 0.55rem !important; font-size: 0.72rem !important; }
}

/* MAURO 2026-09-11 21:06 - Age Gate (verificacao 18+) */
.age-gate-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.age-gate-overlay[hidden] { display: none !important; }
.age-gate-modal {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 2rem 1.75rem;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.age-gate-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #111;
  margin: 0 0 0.75rem;
}
.age-gate-desc {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.5;
  margin: 0 0 1.5rem;
}
.age-gate-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.age-gate-btn {
  flex: 1 1 180px;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.age-gate-btn:hover { filter: brightness(1.08); }
.age-gate-btn:active { transform: scale(0.98); }
.age-gate-yes { background: #2ea44f; }  /* verde "Sou maior" */
.age-gate-no  { background: #e23b3b; }  /* vermelho "Sair" */

/* MAURO 2026-09-11 21:13 - Estatisticas */
.section-stats { padding: 1.5rem 0 3rem; }
.section-stats h1 { font-size: 1.6rem; margin: 0 0 .4rem; color: var(--text, #111); }
.section-stats .section-sub { color: var(--muted, #555); margin: 0 0 1.25rem; font-size: .95rem; }
.stats-controls {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: end;
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: .5rem; padding: .85rem 1rem; margin-bottom: 1rem;
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.05));
}
.stats-select-group { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 180px; }
.stats-select-group label { font-size: .8rem; color: var(--muted, #555); font-weight: 600; }
.stats-select {
  padding: .55rem .65rem; font-size: .95rem; border: 1px solid var(--border, #e5e7eb);
  border-radius: .4rem; background: #fff; color: var(--text, #111);
}
.stats-refresh-btn { height: fit-content; padding: .55rem 1rem; }
.stats-meta { margin: 0 0 1rem; color: var(--muted, #555); font-size: .9rem; }
.stats-meta .stats-loading, .stats-meta .stats-empty { display: inline-block; padding: .35rem .65rem; background: #fff8e1; border-radius: .35rem; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 768px) { .stats-grid { grid-template-columns: 1fr; } }
.stats-card {
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: .5rem; padding: 1rem; box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.05));
}
.stats-card h3 { margin: 0 0 .75rem; font-size: 1.05rem; color: var(--text); }
.stats-full { margin-bottom: 1rem; }
.stats-top-list { display: flex; flex-direction: column; gap: .35rem; }
.stats-top-row {
  display: grid; grid-template-columns: 32px 1fr 70px;
  align-items: center; gap: .5rem;
}
.stats-top-num {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface, #fff); border: 2px solid var(--primary, #007bff);
  font-weight: 800; color: var(--primary, #007bff); font-size: .9rem;
}
.stats-top-bar { height: 14px; background: #f1f3f5; border-radius: 4px; overflow: hidden; }
.stats-top-fill { height: 100%; transition: width .25s ease; }
.stats-top-val { font-size: .85rem; color: var(--text); text-align: right; font-weight: 600; }
.stats-top-val small { color: var(--muted); font-weight: 400; }
.stats-freq-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: .35rem;
}
.stats-freq-cell {
  background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
  border-radius: .35rem; padding: .35rem .25rem;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
.stats-freq-num { font-weight: 700; font-size: .85rem; color: var(--text); }
.stats-freq-bar { width: 100%; height: 6px; background: #f1f3f5; border-radius: 3px; overflow: hidden; }
.stats-freq-fill { height: 100%; background: linear-gradient(90deg, #2ea44f, #f59e0b, #e23b3b); }
.stats-freq-val { font-size: .7rem; color: var(--muted); font-weight: 600; }
.stats-table-wrap { overflow-x: auto; }
.stats-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.stats-table th, .stats-table td { padding: .5rem .65rem; text-align: left; border-bottom: 1px solid var(--border, #e5e7eb); }
.stats-table th { background: var(--surface-2, #fafafa); font-weight: 700; color: var(--text); }
.stats-table tbody tr:hover { background: rgba(0,123,255,0.04); }
.bola-num {
  display: inline-block; padding: .15rem .45rem; margin: .1rem;
  background: var(--surface-2, #fafafa); border: 1px solid var(--border, #e5e7eb);
  border-radius: .35rem; font-weight: 700; font-size: .8rem; color: var(--primary, #007bff);
}

/* MAURO 2026-09-11 21:20 - fix menu hover com ponte invisivel */
.nav-item { position: relative; }
.nav-item .dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, visibility .15s ease;
  padding-top: 12px;  /* cria gap visual mas com ponte via pseudo-element */
  margin-top: 0;
}
.nav-item .dropdown-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}
.nav-item:hover .dropdown-menu,
.nav-item:focus-within .dropdown-menu,
.nav-item:hover > .nav-link + .dropdown-menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* Em mobile (hamburger menu), sempre visivel quando ativo */
@media (max-width: 768px) {
  .header-content .nav.is-open .dropdown-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    display: block;
    position: static;
    box-shadow: none;
    padding-top: 0;
    background: transparent;
  }
}